第03章HTML语言-09

1第3章HTML语言学习目标了解HTML语言的特点认识HTML语言的语言环境深入理解HTML语言的编写规范熟练驾驭常用的HTML语言标记2第3章HTML语言教学内容3.1文档结构3.2页面文本修饰3.3图像和多媒体3.4列表3.5超级链接3.6表格标记3.7窗口框架3.8表单3.9其它网页修饰3.10样式表（CSS）技术本章小结返回总目录33.1文档结构返回目录html文件是标准的ASCII文件从结构上讲，html文件由元素（element）组成绝大多数元素是容器，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（starttag），元素结束标记叫做结尾链接签（endtag），在起始链接签和结尾链接签中间的部分是元素体。每一个元素都有名称和可供选择的属性43.1文档结构---体元素（body）bodybackgroud＝back-ground.gifh2demo/h2Thisismyfirsthtmlfile.p/body:起始链接签的开始。body元素名称，由于元素和链接签一一对应，所以元素名也叫链接名，需要注意的是和body之间不能有空格。元素名称不分大小写。Background属性名。一个元素可以有多个属性，属性及其属性值不分大小写。本属性指明用什么方法来填充背景。＝指明属性值。background.gif属性值，表示用background.gif文件来填充背景。属性名＝属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。结尾链接链的结束。返回目录53.1文档结构---html文件的结构（html文件应具有下面的结构：htmlhtml文件开始head文件头开始文件头/head文件头结束body文件体开始文件体/body文件体结束/htmlhtml文件结束返回目录63.1文档结构---html的元素表示方法：（1）元素名文件或超文本／元素名（2）元素名属性名＝属性值…文本或超文本／元素名（3）元素名:第三种写法仅用于一些特殊的元素，比如分段元素P，它仅仅通知浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签，htlm3.0标准中，也定义了/p链接签，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。html文件中，有些元素只能出现在头元素中，在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html文件有还是没有该属性。绝大多数元素只能出现在体元素中。出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。返回目录73.1.1题目（TITLE）Title元素是文件头中唯一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为：title文件题目/titletitle标明该html文件的题目，是对文件内容的概括。以窗口的名称显示出来。title的长度没有限制，一般情况下它的长度不应超过64个字符。例子如下：titleAsampleofHTML5.0/title下面是一个最简单的html文件htmlheadtitlethesimplehtmlfile/title/headThisisasample!/html返回目录83.1.1题目（TITLE）---运行效果图3-1简单的标题例子返回目录93.1.2标题（hn）－－－元素h1：黑体，特大字体，居中，上下各有两行空行。h2：黑体，大字体，上下各有一到两行空行。h3：黑体（斜体），大字体，左端微缩进，上下空行。h4：黑体，普通字体，比h3更多缩进，上边空一行。h5：黑体（斜体），与h4相同缩进，上边空一行。h6：黑体，与正文有相同缩进，上边空一行。hn可以有对齐属性，align＝#。其中#表示位置：left：标题居左center：标题居中right：标题居右。返回目录103.1.2标题（hn）－－－例子例子及其输出：htmltitlethesimplesthtmlfile/titleh2align=centerChapter2/h2h1IlikeHTML!／h1h2IlikeHTML!／h2h3IlikeHTML!／h3h4IlikeHTML!／h4h5IlikeHTML!／h5h6IlikeHTML!／h6/html返回目录113.1.2标题（hn）－－－显示效果图3-2标题元素例子返回目录123.2页面文本修饰－－－物理风格物理风格直接指定字体，物理风格的字体有如下几种：b黑体i斜体u下划线tt打字机体s字符上加横线返回目录133.2面文本修饰－物理风格例子及显示bIlikeHTML!/bpiIlikeHTML!/ipuIlikeHTML!/upttIlikeHTML!/ttpsIlikeHTML!/sp显示如下：IlikeHTML!IlikeHTML!IlikeHTML!IlikeHTML!IlikeHTML!返回目录143.2页面文本修饰－－－逻辑风格逻辑风格指定文本的作用。逻辑风格的字体有如下几种：em强调strong特别强调code源代码samp例子kbd键盘输入var变量dfn定义cite引用small较小big较大sup上标sub下标返回目录153.2页面文本修饰－－－逻辑风格的例子及输出em今天天气真好！/empstrong今天天气真好！/strongpcode今天天气真好！/codepsamp今天天气真好！/samppkbd今天天气真好！/kbdpvar今天天气真好！/varpdfn今天天气真好！/dfnpcite今天天气真好！/citepsmall今天天气真好！sub下标/sub/smallpbig今天天气真好！sup上标/sup/bigp输出如下：今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！下标返回目录16173.2页面文本修饰－－－字号html有七种字号：1号最小，7号最大。缺省字号为3，可以用fontsize=字号设置缺省字号。设置文本的字号有两种办法，–一种是设置绝对字号，fontsize=字号；–另一种是设置文本的相对字号；fontsize=±n。–用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。返回目录183.2页面文本修饰－－－字体颜色HTML还提供了字体颜色的设定方法。字体的颜色用fontcolor=#指定，#可以是6位16进制数，分别指定红、绿、兰的值，也可以是：lack,olive,teal,red,blue,maroon,navy,gray,lime,white,green,purple,sliver,yellow,aqua之一。返回目录19颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000蓝绿色（Teal）008080绿色（Green）008000灰色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫红色（Fuchsia）FF00FF银色（Silver）C0C0C0紫色（Purple）800080浅绿色（Aqua）00FFFF茶色（Maroon）800000常见颜色RGB值203.2.2显示控制（1）预排版文本prehtml的输出是基于窗口的，因而html文件在输出时都是要重新排版的可以用pre…／pre通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出。解决了浏览器不识别文本本身的回车换行符的问题，避免了文本中本来应断开的地方在浏览器中看到的却是紧挨在一起的一堆文字。返回目录213.2.2显示控制---例子1pre玫瑰花：10元/只百合花：15元/只康乃馨：10元/只富贵竹：15元/只以上各种花卉多买优惠，100只以上按批发价出售，欢迎广大客户前来洽谈。/pre其输出如下：玫瑰花：10元/只百合花：15元/只康乃馨：10元/只富贵竹：15元/只以上各种花卉多买优惠，100只以上按批发价出售，欢迎广大客户前来洽谈。返回目录223.2.2显示控制---例子2如果不使用pre……/pre，将以上程序改为：html玫瑰花：10元/只百合花：15元/只康乃馨：10元/只富贵竹：15元/只以上各种花卉多买优惠，100只以上按批发价出售，欢迎广大客户前来洽谈。/html则其显示一堆挤在一起的文字如下：玫瑰花：10元/只百合花：15元/只康乃馨：10元/只富贵竹：15元/只以上各种花卉多买优惠，100只以上按批发价出售，欢迎广大客户前来洽谈。返回目录233.2.2显示控制---块引用（2）块引用blockquote块引用表示其中的内容是引用。浏览器对块引用的解释一般为左右缩进，上下各有一空行，有些浏览器还采用斜体字。请看下面的例子：htmlblockquote玫瑰花：10元/只/blockquote/html其显示效果如下：我们可以看出显示的内容有左右缩进玫瑰花：10元/只返回目录243.2.2显示控制---居中（3）居中链接签center…／center。（4）分段Paligh＝#–#可以是left,center,right,–palign=centerThisisacenteredparagraph／p–表示段内内容居中显示。返回目录253.2.3文本滚动基本语法：marquee文本/marquee（1）文字移动方向的设置–通过direction=##=left,right来设置文字移动的方向，其中left表示文字从右向左移；right表示文字从左向右移。（2）文字移动属性的设置–语法格式如下：bihavior=#–#=scroll,slide,alternate，bihavior=scroll设定文字一圈一圈绕着走；bihavior=slide设定文字只走一次就停止；bihavior=alternate设定文字来回走动。返回目录263.2.3文本滚动（3）走动的次数的设置–语法格式如下：循环loop=#–#=次数；若未指定次数，则循环不止（infinite）。（4）移动的速度设置–语法格式：scrollamount=#（5）延时设置–延时设置是将文字设置为走走停停的方式，即走一步，停一段时间。–语法格式：scrolldelay=#返回目录273.2.3文本滚动（（6）外观（Layout）设置–对齐方式（Align）的设置语法：align=#–#=top,middle,bottom分别表示对齐窗口的上沿、中间、下沿。（7）底色设置–语法格式：bgcolor=#–其中#=rrggbb可以用16进制数码表示红、绿、蓝颜色，也可以是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Pu