第2章HTML语言基础

1、大连理工大学出版社大连理工大学出版社Web高级程序设计高级程序设计第第2章章 HTML语言基础语言基础第第2章章 HTML语言基础语言基础v本章概述本章概述 HTMLHTML是是Hyper Text Markup Language(Hyper Text Markup Language(超文本标记语言超文本标记语言) )的简称，是的简称，是W3CW3C确定的用于描述网页内容的一种纯文本语言。早期的确定的用于描述网页内容的一种纯文本语言。早期的HTMLHTML是基于内容与表现是基于内容与表现样式对网页元素进行处理的。近年来，随着样式对网页元素进行处理的。近年来，随着CSSCSS与与JavaScri

2、ptJavaScript、与、与HTMLHTML语言的语言的结合日益成熟，基本形成了结合日益成熟，基本形成了HTMLHTML表示内容、表示内容、CSSCSS样式控制、样式控制、JavaScriptJavaScript进行动进行动态处理的格局，态处理的格局，HTMLHTML、CSSCSS和和JavaScriptJavaScript构成网页设计的三个支柱。构成网页设计的三个支柱。 本章将介绍本章将介绍HTMLHTML基本的文档结构与语法特点，介绍常用的基本的文档结构与语法特点，介绍常用的HTMLHTML标签及其标签及其功能，帮助读者了解网页设计与制作中常用功能，帮助读者了解网页设计与制作中常用HT

3、MLHTML元素的使用方法。元素的使用方法。第第2章章 HTML语言基础语言基础v学习目标学习目标 1.1.掌握掌握HTMLHTML文档的基本结构及文档的基本结构及HTMLHTML语法规则；语法规则； 2.2.熟悉常用熟悉常用HTMLHTML标签及功能；标签及功能； 3.3.理解各种媒体元素在网页中的实现方法，能熟练使用理解各种媒体元素在网页中的实现方法，能熟练使用HTMLHTML标签制作特定标签制作特定功能的网页。功能的网页。2.1 HTML概述概述2.1.1 HTML文档基本结构文档基本结构 头部：由标签头部：由标签组成，组成，标签内还可以嵌套其他头部标签，标签内还可以嵌套其他头部标签，如

4、网页标题如网页标题，样式表引入，样式表引入等。等。 正文：由标签正文：由标签组成，组成，标签中又可以嵌套其他页面标签，标签中又可以嵌套其他页面标签，如表格如表格、段落、段落、层、层。2.1 HTML概述概述2.1.1 HTML文档基本结构文档基本结构例：例：first.htmlfirst.html 这是网页标题这是网页标题 哈哈，我的哈哈，我的第一个第一个页面产生了页面产生了! 2.1 HTML概述概述2.1.2 HTML语法规则与编辑工具语法规则与编辑工具HTMLHTML标签由成对的尖括号标签由成对的尖括号“”“”、标签名及属性组成。、标签名及属性组成。 ，第一个尖括号表示，第一个尖括号表示

5、HTMLHTML标签的开始，后面的标签的开始，后面的尖括号表示标签的结束。如果有多个属性，中间用空格隔开，如：尖括号表示标签的结束。如果有多个属性，中间用空格隔开，如：这是一个层这是一个层2 2标签可以嵌套使用，但不能交错嵌套。标签可以嵌套使用，但不能交错嵌套。例如，下面一段例如，下面一段HTMLHTML标签的嵌套是合法的。标签的嵌套是合法的。 这是一个范围这是一个范围 这是一个段落，这是一个段落，这是一个范围这是一个范围，段落中有个范围。，段落中有个范围。 以下的嵌套是不合法的，以下的嵌套是不合法的，和和标签、标签、和和标签都是交错嵌套，这标签都是交错嵌套，这在在HTMLHTML语法中是不允

6、许的。语法中是不允许的。 这是一个段落，这是一个段落，这是一个范围，段落中有个范围。这是一个范围，段落中有个范围。 大部分标签是成对出现的，少量标签可以单独出现，如大部分标签是成对出现的，少量标签可以单独出现，如、2.1 HTML概述概述2.1.2 HTML语法规则与编辑工具语法规则与编辑工具3.HTML3.HTML不严格区分大小写，但不严格区分大小写，但W3C(World Wide Web Consortium,W3C(World Wide Web Consortium,万维网联万维网联盟盟) )的的WebWeb标准中大小写意义不同，建议小写。标准中大小写意义不同，建议小写。2.2 常用常用

7、HTML标签标签2.2.1 标签（标签（hn）标题标签有标题标签有6 6个级别，分别从个级别，分别从到到标签，默认显示字号逐步减小。标签，默认显示字号逐步减小。例：例：headings.htmlheadings.html第第1 1级标题级标题第第2 2级标题级标题/h2/h2第第3 3级标题级标题第第4 4级标题级标题第第5 5级标题级标题第第6 6级标题级标题2.2 常用常用HTML标签标签2.2.2 段落（段落（p） 使用使用标签可以将文本以段落的方式显示。可使用标签可以将文本以段落的方式显示。可使用标签的一个常用属性标签的一个常用属性alignalign来设置文本对齐方式，该属性共有来设

8、置文本对齐方式，该属性共有leftleft、rightright、centercenter、justifyjustify四个值，四个值，分别表示左对齐、右对齐、居中对齐、两端对齐。分别表示左对齐、右对齐、居中对齐、两端对齐。浣溪沙浣溪沙 晏殊晏殊一曲新词酒一杯，去年天气旧池台，一曲新词酒一杯，去年天气旧池台，夕阳西下几时回？无可奈何花落去，夕阳西下几时回？无可奈何花落去，似曾相识燕归来，小园香径独徘徊。似曾相识燕归来，小园香径独徘徊。浣溪沙浣溪沙晏殊晏殊一曲新词酒一杯，一曲新词酒一杯，去年天气旧池台，去年天气旧池台，夕阳西下几时回？夕阳西下几时回？无可奈何花落去，无可奈何花落去，似曾相识燕归来

9、，似曾相识燕归来，小园香径独徘徊。小园香径独徘徊。2.2 常用常用HTML标签标签2.2.3 换行（换行（br）标签在文档中强制换行，它只有开始标记符。标签在文档中强制换行，它只有开始标记符。2.2.4 水平线（水平线（hr） 标签的作用是在页面产生一条水平线，可以用来分隔文档。标签的作用是在页面产生一条水平线，可以用来分隔文档。 标签的常用属性如下：标签的常用属性如下： size size：设置水平线的粗细程度，取值为正整数，默认值为：设置水平线的粗细程度，取值为正整数，默认值为2px2px； width width：水平线的宽度，取值可以为绝对值，也可以为相对值，如浏览器宽度：水平线的宽度

10、，取值可以为绝对值，也可以为相对值，如浏览器宽度的百分比；的百分比； noshade noshade：不带阴影线，默认值为带阴影的立体水平线；：不带阴影线，默认值为带阴影的立体水平线； color color：颜色，默认值为黑色；：颜色，默认值为黑色； align align：对齐方式，取值为：对齐方式，取值为leftleft、rightright、centercenter，默认值为，默认值为centercenter。2.2 常用常用HTML标签标签2.2.4 水平线（水平线（hr） 例：例：hr.htmlhr.html 默认水平线默认水平线 粗细为粗细为5 5像素的水平线像素的水平线 长度为

11、长度为150150像素的水平线像素的水平线 长度为长度为150150像素的实心水平线像素的实心水平线 长度为窗口宽度长度为窗口宽度50%50%像素，左对齐的水平线像素，左对齐的水平线hr width=50% align=left/ 粗细为粗细为2 2像素的红色水平线像素的红色水平线2.2 常用常用HTML标签标签2.2.5 图片标签（图片标签（img） 网页中可以使用网页中可以使用标签来插入图片，标签来插入图片，标签的一般格式为标签的一般格式为img src= url/来定义一个图片，来定义一个图片，srcsrc属性用来指定图片路径。通常给属性用来指定图片路径。通常给标签加上标签加上altal

12、t属性，当不能正确显示图片的时候，属性，当不能正确显示图片的时候，altalt的值就能作为文字显示出来。的值就能作为文字显示出来。标标签还有签还有widthwidth、heightheight、alignalign、borderborder等属性，分别表示宽度、高度、对齐方式、等属性，分别表示宽度、高度、对齐方式、边线宽度等。边线宽度等。例：例：image.htmlimage.html图片图片 显示显示imagesimages文件夹下图片：文件夹下图片：fish01.jpgfish01.jpg 显示显示imagesimages文件夹下不存在的图片：文件夹下不存在的图片：unknowfish.j

13、pgunknowfish.jpg img src=images/unknowfish.jpg alt= /2.2 常用常用HTML标签标签2.2.6 范围（范围（span） 标签一般应用在行内，用来定义一小块需要特别标示的内容，标签一般应用在行内，用来定义一小块需要特别标示的内容，标签需要通过设置标签需要通过设置CSSCSS样式表才能发挥作用。样式表才能发挥作用。例：例：span.htmlspan.html范围（范围（spanspan）和层的作用类似，只是）和层的作用类似，只是<span><span>标签一般应用在行内，标签一般应用在行内，用以定义一块需要特别标示的内容

14、，用以定义一块需要特别标示的内容，<span><span>标签需要通过标签需要通过span style = color:red;设置设置CSSCSS样式表样式表才能发挥作用。才能发挥作用。2.2 常用常用HTML标签标签2.2.7 表格（表格（table）Web中的表格通常有以下两种功能：中的表格通常有以下两种功能：1.1.显示数据显示数据2.2.排版排版borderborder表格边线表格边线Width/heightWidth/height表格宽度表格宽度/高度，可以设置为相对值或绝对值高度，可以设置为相对值或绝对值alignalign水平对齐方式，可以设置水平对齐方

15、式，可以设置centercenter、leftleft、rightright几种值几种值cellpaddingcellpadding单元格内容和单元格边界之间的距离单元格内容和单元格边界之间的距离cellspacingcellspacing单元格之间的距离单元格之间的距离valignvalign 应用于应用于trtr和和tdtd，垂直对齐方式，垂直对齐方式，baselinebaseline、bottombottom、middlemiddle、toptop表格常用属性表表格常用属性表2-12.2 常用常用HTML标签标签例：例：table.htmltable.html表格标题表格标题学号学号 姓

16、名姓名 性别性别030122 030122 陈湘军陈湘军 男男030123 030123 景征骏景征骏 女女2.2.7 表格（表格（table）2.2 常用常用HTML标签标签2.2.8 层（层（div） 层层被称为定位标记（有些教材称为分节标记符），它不像其他被称为定位标记（有些教材称为分节标记符），它不像其他HTMLHTML文本文本或图像标签具有实际的意义，其作用就是设定文字表格等排版位置。或图像标签具有实际的意义，其作用就是设定文字表格等排版位置。例：例：div.html浣溪沙浣溪沙晏殊晏殊一曲新词酒一杯，一曲新词酒一杯，去年天气旧池台，去年天气旧池台，夕阳西下几时回？夕阳西下几时回？无

17、可奈何花落去，无可奈何花落去，似曾相识燕归来，似曾相识燕归来，小园香径独徘徊。小园香径独徘徊。2.2 常用常用HTML标签标签2.2.9 列表（列表（li）在在HTMLHTML中有三种常用的列表格式：中有三种常用的列表格式： 有序列表：标记为有序列表：标记为 无序列表：标记为无序列表：标记为 定义列表：标记为定义列表：标记为例：例：list.html无序列表无序列表 Fireworks Dreamweaver Flash有序列表有序列表 页面美工设计页面美工设计静态页面制作静态页面制作 程序开发程序开发释义列表释义列表 HTML 超文本链接标示语言超文本链接标示语言 CSS 层叠样式表层叠样式

18、表2.2 常用常用HTML标签标签2.2.10 超链接（超链接（a） 超链接是超链接是WebWeb资源相互指向和链接的基本手段，超链接可以指向一个站内网资源相互指向和链接的基本手段，超链接可以指向一个站内网页或资源，也可以指向其他站点资源。页或资源，也可以指向其他站点资源。HTMLHTML用用来表示超链接，英文叫来表示超链接，英文叫anchoranchor。其基本语法格式如下：其基本语法格式如下： 比如链接到百度站点，就可以这样表示：比如链接到百度站点，就可以这样表示：百度首页百度首页2.2 常用常用HTML标签标签2.2.10 超链接（超链接（a）超链接的常用属性见表超链接的常用属性见表2-

19、22-2。targettarget链接对象打开的窗口位置，常用链接对象打开的窗口位置，常用“_blank”_blank”，“_parent”_parent”，“_self”_self”等值，分别表示新窗口打开、父窗口打开、本窗口打开等值，分别表示新窗口打开、父窗口打开、本窗口打开titletitle当鼠标悬停在超链接上的时候，显示该超链接的文字注释，如果当鼠标悬停在超链接上的时候，显示该超链接的文字注释，如果希望注释多行显示，可以使用希望注释多行显示，可以使用“”作为换行符作为换行符hrefhref超链接资源路径超链接资源路径 namename使用使用namename属性，可以跳转到一个文件的

20、指定部位。属性，可以跳转到一个文件的指定部位。namename属性需要成对使用。一是在网页中设定一个具有属性需要成对使用。一是在网页中设定一个具有namename属性属性的的标签；二是在标签；二是在标签中设定标签中设定hrefhref值指向这个值指向这个namename，如：，如：参见第一章参见第一章 第一章第一章表表2-2 2-2 标签常用属性标签常用属性2.2 常用常用HTML标签标签2.2.10 超链接（超链接（a）例：例：anchor.htmlanchor.html在新窗口打开网页在新窗口打开网页 在原窗口打开网页在原窗口打开网页 在原窗口打开网页在原窗口打开网页 a href=htt

21、p:/ title=江苏技术师江苏技术师范学院范学院a href=http:/ title=江苏技术师范学院江苏技术师范学院2.2 常用常用HTML标签标签2.2.11 热热 区区 热区在有些网页制作教材中也称为热点，其作用是在网页图像中划出一个热区在有些网页制作教材中也称为热点，其作用是在网页图像中划出一个特定区域，并将这个区域指向某个超链接地址。热区常见于网页地图或电子报特定区域，并将这个区域指向某个超链接地址。热区常见于网页地图或电子报刊的应用。刊的应用。 要生成热区，需要要生成热区，需要和和两个标签共同完成，两个标签共同完成，标签用来定义标签用来定义一个图像映像，一个图像映像，标签嵌套

22、在此标签嵌套在此标签中，表示图像映像中的各个热区。标签中，表示图像映像中的各个热区。标签的各个属性见表标签的各个属性见表2-32-3。表表2-3 2-3 标签常用属性标签常用属性hrefhref热区指向的超链接网页地址热区指向的超链接网页地址shapeshape热区形状，取值可为热区形状，取值可为rectrect、circlecircle、polypoly，分别表示矩形、圆形和多，分别表示矩形、圆形和多边形边形coordscoords表示热区的区域，取值与热区形状有关，当形状为矩形时，表示热区的区域，取值与热区形状有关，当形状为矩形时，coords=x1,x2,y1,y2coords=x1,x

23、2,y1,y2，分别表示四个顶点，当形状为圆形时，分别表示四个顶点，当形状为圆形时，coords=x,y,rcoords=x,y,r，表示圆心坐标和半径，当形状为多边形时，表示圆心坐标和半径，当形状为多边形时，coords=x1, y1,x2, y2xn, yncoords=x1, y1,x2, y2xn, yn，表示多边形的每个顶点坐标，表示多边形的每个顶点坐标altalt热区替换字符，可用于进行热区提示热区替换字符，可用于进行热区提示2.2 常用常用HTML标签标签2.2.11 热热 区区 热区的绘制比过程更复杂，可以使用热区的绘制比过程更复杂，可以使用DreamweaverDreamwe

24、aver等网页制作工具提供的功等网页制作工具提供的功能生成图片的热区，图能生成图片的热区，图2-142-14是是Dreamweaver CS3Dreamweaver CS3的图片热区编辑界面。的图片热区编辑界面。图图2-14Dreamweaver CS3的图片热区编辑界面的图片热区编辑界面2.2 常用常用HTML标签标签2.2.12 文字样式控制文字样式控制1.1.标签标签HTMLHTML语言提供了语言提供了标签可以进行文字显示属性的控制，格式如下：标签可以进行文字显示属性的控制，格式如下：标签用来控制网页中字体格式的控制，可以设置字体、颜色，主要属性如下：标签用来控制网页中字体格式的控制，可

25、以设置字体、颜色，主要属性如下：sizesize：设置字体大小，默认值：设置字体大小，默认值3 3，可以取，可以取1 1到到7 7，取值越大，文字显示越大，相，取值越大，文字显示越大，相对值对值1 1表示比默认值大表示比默认值大1 1号字体，反之亦然。号字体，反之亦然。colorcolor：设置文字颜色，默认值为黑色，其值可取颜色名称或十六进制。：设置文字颜色，默认值为黑色，其值可取颜色名称或十六进制。faceface：设置字体名称。可指定一个或几个字体名称（用逗号格开），中文默认：设置字体名称。可指定一个或几个字体名称（用逗号格开），中文默认字体为字体为“宋体宋体”、英文默认为、英文默认为“

26、Times New Roman”Times New Roman”。2.2 常用常用HTML标签标签2.2.12 文字样式控制文字样式控制例：例：font.html5号字，红色号字，红色5号字，红色号字，红色2号字，绿色号字，绿色1号字，绿色号字，绿色3号字号字(默认大小默认大小)，隶书，黑色，隶书，黑色3号字，宋体号字，宋体,黑色黑色2.2 常用常用HTML标签标签2.2.12 文字样式控制文字样式控制2.2.字符样式字符样式 字符样式标记符，通常有物理和逻辑两类字体样式标记符。所谓物理字符样字符样式标记符，通常有物理和逻辑两类字体样式标记符。所谓物理字符样式，是指标签本身就说明了所修饰文字的

27、效果，如式，是指标签本身就说明了所修饰文字的效果，如b b是单词是单词boldbold（粗体）的首字（粗体）的首字母，则母，则标记符表示粗体。所谓逻辑字符样式，是指标记符本身仅表示了所修标记符表示粗体。所谓逻辑字符样式，是指标记符本身仅表示了所修饰效果的逻辑含义，如饰效果的逻辑含义，如addressaddress标记符本身的逻辑意义为标记符本身的逻辑意义为“地址地址”，但并没有说，但并没有说明具体的效果。明具体的效果。常用逻辑字符样式：常用逻辑字符样式：表示一个地址，通常显示为斜体。：表示一个地址，通常显示为斜体。：表示文本属于引用，通常显示为斜体。：表示文本属于引用，通常显示为斜体。：表示程

28、序代码，通常显示为固定宽度字体。：表示程序代码，通常显示为固定宽度字体。：表示定义了的术语，通常显示为黑体或斜体。：表示定义了的术语，通常显示为黑体或斜体。：强调某些词，通常显示为斜体。：强调某些词，通常显示为斜体。：表示用户的键盘输入，通常显示为固定宽度字体。：表示用户的键盘输入，通常显示为固定宽度字体。：表示文本样本，通常显示为固定宽度字体。：表示文本样本，通常显示为固定宽度字体。：特别强调某些字词，通常显示为粗体。：特别强调某些字词，通常显示为粗体。：表示变量，通常显示为斜体。：表示变量，通常显示为斜体。常用物理字符样式：常用物理字符样式：粗体。：粗体。：斜体。：斜体。:下划线。下划线。

29、：大字体。：大字体。：小字体。：小字体。：删除线。：删除线。：删除线。：删除线。：下标。：下标。：上标。：上标。：固定宽度字体。：固定宽度字体。2.2 常用常用HTML标签标签2.2.12 文字样式控制文字样式控制例：例：fontfontstyle.htmlstyle.htmlSS标签示例：标签示例：请删除该行文字请删除该行文字SUPSUP标签示例：标签示例：x1x1y2+z2y2+z2CITECITE标签示例：标签示例：江苏技术师范学院江苏技术师范学院 第2章 JSP基础知识HTML表单 一个表单有三个基本组成部分：表单标签：包含了处理表单数据所用程序的位置及数据提交到服务器使用的方法。表单

30、控件：用来输入数据或进行选择，包括单行文本编辑框、密码框、单选框、多行文本编辑框、复选框、下拉列表框等。表单按钮：包括提交按钮和重置按钮，用来提交输入或者取消输入。 第2章 JSP基础知识HTML表单 表单控件控件名字控件名字中文描述中文描述TextText单行文本编辑框单行文本编辑框PasswordPassword密码框密码框RadioRadio单选框单选框CheckboxCheckbox复选框复选框TextAreaTextArea多行文本编辑框多行文本编辑框SelectSelect下拉列表框下拉列表框第2章 JSP基础知识表单控件单行文本编辑框 【说明】 内容本身比较短只有一行，需要用户的

31、输入。 【示例】 (1)type = text表示这个控件的类型是单行文本编辑框。 (2)name属性表示单行文本编辑框的名字。 (3)size属性表示单行文本编辑框的长度。第2章 JSP基础知识表单控件密码框 【说明】 输入的内容看不到，但是可以被发送到服务器； 【示例】 type = password表示这个控件的类型是密码框，它与单行文本编辑框的区别在于用户输入的内容不被显示。第2章 JSP基础知识表单控件多行文本编辑框 【说明】能够进行多行的文本输入。 【示例】请输入你的留言： (1)rows属性表示多行文本编辑框的高度 (2)cols属性表示多行文本编辑框的宽度 (3)name属性表

32、示多行文本编辑框的名字2.3 表单及表单元素表单及表单元素2.3.2 表单文本框表单文本框例：例：formformtext.htmltext.html单行文本：单行文本：input name= type=text value= size=30 maxlength=15 /多行文本：多行文本：textarea name= cols= rows=5密码文本：密码文本：第2章 JSP基础知识表单控件单选按钮 【说明】 给出几种选择，用户从中选择一项 【示例】 工人 农民 军人 学生 (1)type = radio表示这个控件的类型是单选框 (2)name属性表示单选框的名字,同一组单选框的名字相同

33、(3)checked 表示这个单选框默认被选中 同一组单选框同时只有一个能被选中 第2章 JSP基础知识表单控件复选框 【说明】在给出的选项中可以选择多个。 【示例】请选择你的爱好：音乐   旅游   读书 (1)type = checkbox表示这个控件的类型是复选框。 (2)name属性表示复选框的名字,同一组复选框的名字相同。 (3)同一组复选框可以同时有多个被选中。 第2章 JSP基础知识表单控件下拉列表框 【说明】用户在给出的较多选项中选择一个。 【示例】 163 263 sina 一个下拉列表框()由若干个选项()组成，标签表示下拉列表框中的一个选项，其中标签所包含的文本是选项在下拉列表框中所显示的文本，而value属性的值是当该选项被选中时