- 动态网页设计与制作（HTML5+CSS3+JavaScript）（第3版）
- 吴以欣 陈小宁
- 10125字
- 2021-01-08 20:53:09
1.2 HTML常用元素
HTML5相对于旧版本新增加了32种元素，去掉了12种元素，一共包含107种元素。本节将主要介绍其中一些最常用的元素。
1.2.1 基本结构元素
HTML的基本结构元素主要有3种，它们分别是html（HTML文档）元素、head（头）元素和body（主体）元素。每个网页文件中一般都包含这3种元素，而且它们只能出现一次。
1.html元素
html元素是网页文件中最外围的、紧接着文档元素的一对标签，它告诉浏览器整个文件是HTML格式，并且从<html>开始，至</html>结束。
2.head元素
head元素包含的是网页的头部信息，它的内容被浏览器所用，而不会显示在网页正文中。head元素中可以包含下述元素。
title元素，它的内容将在浏览器的标题中出现。例如，示例1-1中的title元素内容是“我的网页”，如图1-3右图所示，它显示在浏览器的标题栏。
link元素和style元素，常用于CSS，将在第2章和第3章中讲解。
script元素，常用于JavaScript，将在第4章中讲解。
meta元素，特殊元素将在“1.2.8 特殊说明”小节中讲解。
3.body元素
body元素是HTML文件的主体元素，它包含所有要在网页上显示的各种元素。下面几小节内容中讨论的元素，都是body元素可以包含的内容。
1.2.2 常用块元素
块元素的内容总是沿网页垂直方向另起一行显示。HTML5中的常用块元素有以下几种。
1.标题块元素
标题块元素主要有h1、h2、h3、h4、h5和h6。h是header（标题）的简写，数字1～6表示标题的级别，h1的标题级别最大，h6的标题级别最小，如图1-8所示。
图1-8 标题块元素程序及其网页显示效果
2.段落块元素
最常用的段落块元素有p（段落）元素和pre（原样显示文字）元素。
（1）p元素
p是paragraph（段落）的简写，p元素内一般包含段落文字，浏览器将自动在p元素前后加一行空行，如图1-6右图所示。值得注意的是，HTML元素内的文字内容都不要用空格来排版（pre 元素除外），因为浏览器会将标签内的所有空格或换行符看作一个空格。下面的示例1-2要说明的就是这个问题。
示例1-2 将李白的诗《静夜思》显示在网页上。
目的：了解p元素及HTML程序中的空格特点。
程序文件名：ch1_02.html。
在浏览器中打开ch1_02.html，得到的效果如图1-9所示，可以看到，虽然在程序中的每行诗句后面都有换行符，但显示结果中的所有诗句都在一行中，只是每个句子之间有一个空格。
图1-9 示例1-2的网页显示效果
如果将第9～14行代码改为如下格式，刷新浏览器后，将得到同样的效果。由此可以看出，在元素内容中用空格或换行符进行排版都是无效的。
<p>床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 </p>
（2）pre元素
pre是preformatted的简写，pre元素与p元素的作用基本相同，唯一区别是，该元素中的文字内容将保留空格和换行符，并且元素中的英文字符都将统一用等宽字体，以便对齐。例如，将示例1-2中的第9～14行改为如下格式，刷新浏览器后，将得到图1-10所示的效果。
<pre>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
图1-10 使用pre元素改写示例1-2中的网页效果
值得注意的是，pre元素一般只用于在网页中显示诗句、计算机程序等需要使用空格和换行来排版的文字内容。根据 HTML5的规范设计原则，网页的排版布局应尽可能地使用CSS，详见“第2章 CSS基础”和“第3章 CSS实用技巧”。
3.通用块元素
div元素是最常用的通用块元素，它用于包住一些元素和文字内容，以便进一步用CSS进行排版处理。下面通过示例1-3介绍div元素的用途。
示例1-3 修改示例1-2的ch1_02.html代码如下，并保存为ch1_03.html。
目的：了解div元素的用途。
程序文件名：ch1_03.html。
在浏览器中打开ch1_03.html，得到的效果如图1-11左图所示，第8、17、18及27行的div元素在浏览器中看不出什么效果。这时将第8行修改为如下格式。
<div style="float:left;width:200px;margin-right:10px">
将第18行修改为如下格式。
<div style="float:left;width:200px">
然后将文件保存为ch1_03_1.html，在浏览器中打开该文件，就会得到图1-11右图所示的效果。修改上述两行代码的目的是通过CSS语句将div元素所包含的内容由纵向排版变为横向排版。
图1-11 示例1-3及对其修改后的显示效果
4.语义块元素
HTML5新增了一系列语义块元素，也就是说，这些元素的标签名定义了应用的意义，例如，header（顶部）元素一般用于一个区域或整个页面的顶部，footer（底部）元素一般用于一个区域或整个页面的底部，等等。语义块元素的使用，主要是为了搜索引擎读取页面内容时更容易根据标签名分解页面的内容。它们应用的效果好像与上述通用块元素 div一样，但是，其应用原则是不一样的，div元素主要用于排版，而语义块元素主要用于网页内容的分类。表1-1中列出了常用语义块元素的应用原则；图1-12所示为常用语义块元素的应用示意图，其中左边是HTML基本程序代码。
表1-1 常用语义块元素的应用原则
图1-12 常用语义块元素的应用示意图
HTML元素的许多属性不仅可以用于块元素，而且可以用于大多数HTML元素，因此称其为 HTML 元素的“通用属性”。这里先介绍 id（元素标识）属性和 title（提示）属性两种通用属性，在后面的章节中，还会继续介绍其他通用属性。
（1）id（元素标识）属性
在HTML文档中，每个元素都可以有一个标识，但是每个标识名（即id的属性值）在整个HTML文档中必须是唯一的。标识名的第一个字母只能是A～Z或a～z，标识名可以由A～Z、a～z、0～9、−（减号）、_（下画线）等组成。例如如下示例代码。
<div id="myId1">…</div>
<p id="myId2">…</p>
标识名对大小写是敏感的，即“myId”和“myid”是不一样的。
HTML的id属性在CSS和JavaScript的应用中起到了很重要的作用，具体将在后续相关章节内容中介绍。
（2）title（提示）属性
元素的title属性在HTML的网页中起到了提示的作用。如果元素设置了title属性，当将鼠标指针移动到该内容上时，就可以看到title值的内容。例如，将ch1_03_1.html中的第8行修改为如下代码。
<div style="float:left;width:200px;margin-right:10px" title="静夜思">
保存该文件后在浏览器中打开该文件，如果将鼠标指针移动到该 div 元素所包含的内容上，就可以看到title的属性值，如图1-13所示。
图1-13 title属性的网页显示效果
1.2.3 常用列表元素
常用列表元素有ul元素、ol元素及li元素3种。
ul是unordered list（无序列表）的简写，因此ul元素所包含的列表项将以粗点的方式显示。
ol是ordered list（有序列表）的简写，因此ol元素所包含的列表项将以顺序数字的方式显示。
li是list item（列表项）的简写，li元素被包括在上述ul元素或ol元素中。
示例1-4 在网页上显示图1-14所示的内容。
目的：学习列表元素的使用。
程序文件名：ch1_04.html。
图1-14 示例1-4的网页显示效果
操作步骤如下。
① 在浏览器中打开ch1_04.html，首先会得到图1-15所示的初步列表效果。
② 修改ch1_04.html中的第10行为下述程序。
<li>我最喜欢的诗
<ul>
<li>李白的“静思夜”</li>
<li>李白的“下江陵”</li>
</ul>
</li>
③ 将第11行修改为下述程序，保存文件后刷新浏览器就可以得到图1-14所示的列表元素的嵌套使用效果。
<li>我最想看的电影
<ol>
<li>Just Like Heaven</li>
<li>Vantage Point</li>
<li>I am Legend</li>
<li>Babel</li>
</ol>
</li>
通过CSS设置还可以改变列表项的符号，如图1-16所示，可以用小图像作为列表项符号，应用示例代码详见“2.2.3 常用的样式属性”小节。
图1-15 示例1-4的初步网页显示效果
图1-16 用小图像作为列表项符号
1.2.4 常用表格元素
常用表格元素包括table（表格）元素、tr（表格行）元素、th（表头）元素和td（表格单元格）元素，它们组成了HTML的基本表格结构。
table元素由tr元素组成，tr元素又由th元素或td元素组成。如图1-17所示，左侧为基本表格的代码，右侧为该程序的网页显示效果。值得注意的是，HTML的基本表格元素并没有排版功能，因此在没有应用CSS的情况下，在浏览器中是看不到表格线的。
图1-17 HTML的基本表格元素
tr元素的常用属性如表1-2所示，th元素和td元素的常用属性如表1-3所示。这些元素的属性中都有align和valign属性，如果在th元素和td元素中都不设置align和valign属性，那么默认情况下，th元素在水平和垂直方向上都为居中对齐；td元素在水平方向上左对齐，在垂直方向上居中对齐。
表1-2 tr元素的常用属性
表1-3 th元素和td元素的常用属性
值得注意的是，如果一个表格的tr元素和th元素或td元素中同时包含相同的属性名但属性值不同，则嵌套在内部的元素属性值将起作用，即th元素或td元素中的属性值将起作用。另外，align属性和valign属性是用于表格排版的，因此，按照HTML5设计原则，表格的排版功能应尽量通过CSS来实现，而不是通过元素的属性设置来实现。
示例1-5 在网页上显示图1-18所示的表格内容。
图1-18 示例1-5的网页显示效果
目的：学习表格元素的使用。
程序文件名：ch1_05.html。
操作步骤如下。
① 在浏览器中打开 ch1_05.html，得到的初步表格效果如图1-19所示。其中第5～8行代码应用了CSS语句，目的是在浏览器中显示表格线。第17、22、27行中的行元素都设置了水平方向为居中对齐，而第18、23、28行的单元格元素都设置了水平方向左对齐，因此得到了第一列表格内容为左对齐的效果。
② 如果将第12～16行改写为下述程序内容，保存文件后刷新浏览器，就可以得到图1-18所示的效果。下述程序将表头行变为两行，其中“姓名”占两行（rowspan="2"）,“第一学期”占两列（colspan="2"）。
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">第一学期</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
</tr>
除上述基本元素外，还有一些表格元素，若与CSS一起使用，可以形成一些特殊的表格显示效果。例如，thead（表头）元素、tbody（表主体）元素、tfoot（表尾）元素与CSS一起用于长表格，可以制作固定表头和表尾、滚动表体内容的效果，如图1-20所示，具体制作方法将在“3.1.3 处理长表格”小节中讲解。
图1-19 示例1-5的初步表格效果
图1-20 固定表头和表尾，滚动表体内容的效果
1.2.5 常用行元素
行元素总是与其前后的其他元素保持在同一行中。常用的行元素有图像图片元素、a （链接）元素、span（通用行）元素和文字格式元素等。
1.图像图片元素
（1）img（图像）元素
img元素用于在网页中插入图像，它是“空元素”，即没有结束标签。除了HTML的通用属性外，img元素的其他常用属性如表1-4所示，其中 src（图像文件名及其路径）和alt （替代文字）是必须有的属性。示例1-6实现了一个最简单的图像显示网页。
表1-4 img元素通用属性外的其他常用属性
示例1-6 在网页上显示图1-21所示的图像内容。
图1-21 示例1-6的网页显示效果
目的：学习图像元素的使用。
程序文件名：ch1_06.html。
在浏览器中打开ch1_06.html，就可以得到图1-21所示的效果。
HTML的图像文件类型有GIF（Graphics Interchange Format，图形交换格式）、JPG或JPEG（Joint Photographic Experts Group，联合图像专家组）、PNG（Portable Network Graphics，可移植网络图像）3种。GIF 是图像和图片的最佳格式，适用于透明或动画图形；而JPEG格式则更适合存放照片；PNG格式拥有许多JPEG与GIF的共同优点，如支持数百万色且压缩效果好，所以最近越来越流行这种格式。
HTML图像文件可以通过图像处理软件产生，常用的图像处理软件有Windows的Paint （画图）、Adobe的Photoshop等。图像文件也可以在版权许可的情况下从Internet上下载，图1-22所示为下载示例1-6所用图像的操作，具体如下如述。
① 在浏览器的“地址栏”中输入示例1-6中第7行的src属性值，在网页中打开图像。
② 右击网页中的图，在打开的快捷菜单中选择“图片另存为”命令。
③ 将图像保存到ch1_06.html文件所在的文件夹中，图像文件名为harp-seal-baby.jpg，如图1-23所示，即完成了图像文件的下载操作。
图1-22 从网页下载图像的操作
图1-23 图像文件与HTML文件在同一个文件夹中
图像文件名的路径分为绝对路径和相对路径两种。绝对路径指的是将图像文件的全部路径都写出来，一般用于显示其他网站上的图像文件，如示例1-6中第7行的src属性值就是包含了绝对路径的图像文件名。相对路径就是写出相对于当前HTML文件所在的目录，一般用于图像文件在本网站中的情况。相对路径名的使用规则如下。
没有路径名表示图像文件与当前的 HTML 文件在同一目录中，如 src="harp-seal-baby.jpg"表示文件harp-seal-baby.jpg与文件ch1_06.html在同一个目录中。
“路径名/”表示下一级的目录名，如 src="images/harp-seal-baby.jpg"表示harp-seal-baby.jpg在ch1_06.html所在目录的下一级目录images中。
“../”表示上一级的目录，如 src="../ harp-seal-baby.jpg"表示 harp-seal-baby.jpg 在ch1_06.html所在目录的上一级目录中。
src属性值以 / 开始，表示从根目录开始。
因此，在示例1-6中，只要将第7行的src属性值改写为如下值，就可以在网页中显示已经下载了的图像文件。
<img src="harp-seal-baby.jpg" alt="小海豹">
又如，在ch1_06.html文件所在的文件夹中创建一个文件夹images，然后将上述图像文件移动到该文件夹中，如图1-24所示，这时示例1-6中第7行的src属性值就可以改写为如下表述。
<img src="images/harp-seal-baby.jpg" alt="小海豹">
另外，通过设置width属性和height属性可以控制图像的显示宽度和高度，它们的单位都是像素（px）。值得注意的是，width属性和height属性的设置只是改变了图像的显示尺寸，图像文件的实际大小不会因此而发生变化。如果width和height的值与图像实际尺寸不一致，会影响图像的显示效果。例如，按下述语句修改示例1-6中第7行的src属性值，就可以得到图1-25所示的效果。
<img src="images/harp-seal-baby.jpg" alt="小海豹" width="100" height="50">
图1-24 图像文件在HTML文件所在目录的下一级目录中
图1-25 设置图像的宽度和高度
所以，图像的大小应该在图像处理软件中进行调整。设置width和height属性的另一个好处是，它们可以在图像被完全下载之前让浏览器知道该用多大的空间来显示图片，这样浏览器可以更快地显示出美观的页面。
在网页中显示图像还应该注意，图像的显示相对于文字所占的字节数较多，比如一个全屏的图像，即使经过压缩，也要占去大约50KB的空间，这相当于25000字的文本，因此，浏览器载入图像会比较费时。当一个页面中包含许多图像时，就会影响网页的显示速度。
（2）picture（图片）元素
picture 元素与 source（源）元素和 img（图像）元素一起使用，可以为不同的浏览器指定不同尺寸的图像文件。
以示例1-6为例，在images文件夹中，除了小海豹图像文件harp-seal-baby.jpg外，还有另外两个图像文件harp-seal-baby-1.jpg、harp-seal-baby-2.jpg。如果将示例1-6中的第7行改写为下述代码，那么，当改变浏览器窗口宽度尺寸时，就会显示不同的图像效果，如图1-26所示。修改后的代码表示，当屏幕宽度大于900px 时，显示图像文件 harp-seal-baby.jpg；当屏幕宽度在600～900px时，显示图像文件harp-seal-baby-1.jpg；当屏幕宽度小于600px时，显示图像文件harp-seal-baby-2.jpg。
<picture>
<source media="(min-width:900px" srcset="images/harp-seal-baby.jpg">
<source media="(min-width:600px" srcset="images/harp-seal-baby-1.jpg">
<img src="images/harp-seal-baby-2.jpg" alt="小海豹">
</picture>
图1-26 不同图像尺寸的图像文件
2.a元素
a 元素用于产生链接，即从一个页面链接到另一个页面。除了通用属性外，它所包含的其他常用属性如表1-5所示。
表1-5 a元素除通用属性外的其他常用属性
通过设置a元素的href属性值，可以在网页中产生链接，例如网页、图片的链接和电子邮件的链接；如果加上download属性，也可以直接下载链接文件。它们的a元素格式分别如下。
<a href="链接至另一个网页或图片的文件名">链接名称</a>
<a href="mailto：电子邮件地址">链接名称</a>
<a href="链接至图片的文件名" download>链接名称</a>
例如如下示例代码。
<a href="http://www.yahoo.com">Yahoo</a>
<a href="ch1_02.html">静夜思</a>
<a href="images/harp-seal-baby.jpg">小海豹</a>
<a href="mailto:abc@yahoo.com">请与我联系</a>
<a href="images/harp-seal-baby.jpg" download>请下载小海豹图片</a>
用a元素产生的链接在网页上一般显示为蓝色带有下画线的格式，如图1-27所示。通过 CSS 设置可以改变链接的显示格式，详见“2.2.4 定义样式表”中对状态对象的介绍。与img元素的src属性一样，href属性也可以设置链接文件名的绝对路径或相对路径。在上述示例中，href="http://www.yahoo.com"表示的就是链接至另一个网页的绝对路径地址，而href="ch1_02.html" 和 href="images/harp-seal-baby.jpg" 则表示的是链接至本网站中另一个网页的相对路径地址。
示例1-7 在浏览器中打开ch1_07.html，得到图1-27所示的链接内容。
图1-27 示例1-7的网页效果
目的：学习a元素的使用。
程序文件名：ch1_07.html。
3.span元素
span元素与div元素类似，也是用于包住一些元素和文字内容，以便进一步用CSS进行排版处理；区别在于，span元素表示的是行元素，而div元素表示的是块元素。它的作用在网页的效果上看不出，好像只是在所需要显示的文字外面加了一对span标签而已，但是通过id属性、style属性、class属性和JavaScript可以改变span元素内容的排版布局。例如，将示例1-7的第15行修改如下，网页的最后一行就会变为图1-28所示的效果。
<p>
<a href="mailto:abc@yahoo.com">请与我联系</a>
<span style=”margin-left:50px”>版权所有 复制必究</span>
</p>
4.文字格式元素
文字格式元素包括sup元素、sub元素、b元素、i元素、em元素、strong元素、mark元素和br元素等，它们用于网页中的文字格式效果。其中，b元素和strong元素都是粗体的效果；em元素和i元素都是斜体的效果；mark元素起到突出显示的效果。通过示例1-8可以看到上述元素的效果，它们一般都可以用CSS替代。另外，br元素是一个空元素，即没有结束标签，它虽然可以达到换行的效果，但不应该大量使用它进行网页的格式排版。
示例1-8 在浏览器中打开ch1_08.html，得到图1-29所示的网页效果。
图1-28 span元素与style属性的使用效果
图1-29 示例1-8的网页效果
目的：学习文字格式元素的使用。
1.2.6 表单元素
HTML 的表单元素 form 用于收集用户输入的信息，然后将用户输入的信息送到其action属性所表示的程序文件中进行处理。表单元素form中可以包含如下内容。
1.表单控件元素
表单控件元素用于收集用户输入的信息，包括input元素、select元素、datalist元素、textarea元素。
（1）input（输入框）元素，根据type属性不同，其最多包含22种类型，但是，目前各种浏览器都支持的有14种（如表1-6所示），其中“浏览器”列包括了IE、Firefox、Chrome、Safari和Opera等浏览器的目前最新版本。从表1-6可以看出，Chrome浏览器支持除tel类型外的所有type属性。
input元素的基本格式如下。
<input type="××××">
其中，××××为表1-6所列的type属性值。
（2）select（列表框）元素和datalist（预选列表框）元素，它们都包含option（选项）元素。
（3）textarea（多行文本输入框）元素。
表1-6 input元素的常用type属性值
续表
2.label元素
label（标签）元素与表单控件元素一起使用，其 for 属性值必须与表单控件元素的 id属性值相对应，详见示例1-9的说明。
3.fieldset元素
fieldset（表单控件组）元素用于将表单控件元素分组，其中，legend（表单控件组标题）元素可以显示分组的标题。
4.通用属性
“1.2.2 常用块元素中”小节中介绍了HTML元素的两个通用属性id和title，下面介绍HTML元素的另外两个通用属性。
（1）accesskey（快捷键）属性
accesskey 属性用于指定快捷键。在 Windows 系统中，当用户按【Alt】键和与这个快捷键组合的组合键时，光标就会定位到该元素上或激活该元素。例如下列代码，当用户按【Alt+U】组合键时，光标就会定位到这个文本框元素上。
<input type="text" accesskey="U">
又如下列代码，当用户按【Alt+T】组合键时，就等于单击了这个链接。
<a href="http://www.yahoo.com" accesskey="T">Yahoo</a>
（2）tabindex（按【Tab】键的顺序值）属性
tabindex属性设置的是按【Tab】键的顺序值，例如下列代码，当用户第一次按【Tab】键时，光标会定位在链接2上；第二次按【Tab】键时，光标会定位在链接3上；第三次按【Tab】键时，光标会定位在链接1上。
<a href="http://www.yahoo.com" tabindex="3">链接1</a>
<a href="http://www.google.com" tabindex="1">链接2</a>
<a href="http://www.cnn.com" tabindex="2">链接3</a>
5.其他常用属性
除了通用属性外，表单及其控件元素还有一些用于 JavaScript 的事件属性，其他常用属性分别如表1-7、表1-8和表1-9所示。
表1-7 form元素的常用属性
表1-8 input元素的常用属性
表1-9 select元素的常用属性
从这些属性列表中可以看出，表单控件元素都包含name属性和value属性，分别表示变量名和变量值，它们是收集用户输入信息必须要有的属性。值得注意的是，name属性与标签通用属性id的作用是不一样的，前者主要用于form元素中action属性所表示的服务器端的程序，而后者主要用于网页排版的CSS设置和网页事件处理的JavaScript程序。
另外，网页中的列表框包括下拉列表框和选项列表框两种，在 HTML 文档中都是用select元素表示的。当select元素中没有size属性时，就是下拉列表框，如图1-30（a）所示。如果select元素中含有size属性，就是选项列表框。在选项列表框的情况下，当select元素中没有 multiple 属性时，为单选列表框，如图1-30（b）所示；当 select 元素中带有multiple属性时，就是多选列表框，如图1-30（c）所示，这时允许用户按【Ctrl+Shift】组合键来同时选择多个选项。
图1-30 网页中的各种列表框
无论是哪一种类型的列表框，select元素中都需要包含标记<option>和</option>来指定列表中的选项内容。
示例1-9 在网页上显示图1-31左图所示的表单及其控件元素的内容。
目的：学习基本表单及input控件元素的使用。
程序文件名：ch1_09.html。
在浏览器中打开程序文件ch1_09.html，填写各个表单项，即可得到图1-31左图所示的效果。
说明
（1）程序文件ch1_09.html第8行中form元素的action属性值为“ch1_09_action.html”，表示该表单提交后将调用程序文件ch1_09_action.html，如果按图1-31左图所示填写信息后单击“提交”按钮，就会得到图1-31右图所示的效果。值得注意的是，这里的form元素中没有设置method属性时，默认的表单提交方式为get，表示用户输入的信息，包括密码，都将会显示在地址栏中，如图1-31右图地址栏所示。如果要更安全地提交表单，应该设置method属性值为post。
（2）label元素的作用是，当用户单击label的内容时，光标会落到for属性所表示的元素上，即相当于单击了 for 属性所指向的元素。例如，在网页中单击“用户名”，光标就会落到其右侧的文本框中，这是因为第10行label元素中的for="username"设定了这个控件名称对应于id属性值为“username”的元素，即第11行的input元素。
（3）由于第11行input元素中设置了autofocus属性，所以，当显示网页时，光标会自动出现在“用户名”文本框中。
图1-31 示例1-9的网页效果
程序文件名：ch1_09_action.html。
示例1-10 按下述要求修改示例1-9，增加表单校验功能，以实现图1-32所示的效果。
图1-32 示例1-10的网页效果
（a）3个输入框必须填写。
（b）密码最多为10个字符。
（c）按【Alt+E】组合键，使光标落到“电子邮件”的输入框中，并且在“电子邮件”输入框中显示样板文字“user@example.com”。
（d）将“提交”按钮修改为图像按钮。
目的：学习表单控件元素的一些属性设置。
程序文件名：ch1_10.html。
说明
（1）实现要求（a）的操作如下。
① 复制ch1_09.html，并另存为ch1_10.html。
② 修改ch1_10.html的第11、15、19行，分别加入required属性，代码如下。
<input type="text" name="username" id="username" value="" autofocus required>
<input type="password" name="password" id="password" value="" required>
<input type="email" name=" email " id=" email" value="" required>
（2）实现要求（b）的操作如下。
修改ch1_10.html的第15行，加入maxlength属性，代码如下。
<input type="password" name="password" id="password" value="" required maxlength="10">
（3）实现要求（c）的操作如下。
① 修改ch1_10.html的第18行，代码如下。
<label for="email">电子邮件(E):</label>
② 修改ch1_10.html的第19行，加入accesskey和placeholder属性，代码如下。
<input type="email" name="email" id="email" value="" required accesskey="E" placeholder="user@example.com">
（4）实现要求（d）的操作如下。
① 查看images文件夹，找到图像文件go.jpg。
② 修改ch1_10.html的第22行，代码如下。
<button><img src="images/go.jpg"></button>
（5）最后保存 ch1_10.html 文件，在浏览器中打开 ch1_10.html，如果这时直接单击图像按钮，就会得到图1-32所示的效果，提示表单检验失败。值得注意的是，从用户界面上看，email输入框似乎与text输入框是一样的，然而不同的是，使用email输入框可以更方便地使用表单验证功能。
示例1-11 在网页上显示图1-33所示的表单及其控件元素的内容。
目的：学习表单及选项、列表等控件元素的使用。
程序文件名：ch1_11.html。
在浏览器中打开程序文件ch1_11.html，填写各个表单项，即可得到图1-33所示的效果。
图1-33 示例1-11的网页效果
说明
（1）第11行和第13行都表示了name为“gender”的单选按钮，值得注意的是，这两行中元素的name值相同，但id值不同。与其类似的是，复选框的各个选项也是name值相同，id值不同。
（2）当在浏览器中显示该网页后，按【Tab】键，光标就会定位到“出生日期”输入框，这是因为第41行设置了tabindex属性值为1。
示例1-12 按下述要求修改示例1-11的代码，以实现图1-34所示的效果。
（a）将表单分为两个区域，分别为“基本信息”区域和“其他信息”区域。
（b）“性别”默认选项设置为“男”。
（c）将“爱好”修改为datalist（预选下拉框）元素。
（d）“出生国家”默认选项设置为“其他国家”，显示长度为4行。
图1-34 示例1-12的网页效果
目的：学习表单控件元素的一些属性设置。
程序文件名：ch1_12.html。
说明
（1）实现要求（a）的操作如下。
① 复制ch1_11.html并另存为ch1_12.html。
② 在第8行和第9行之间插入下述语句。
<fieldset>
<legend>基本信息</legend>
③ 在第38行和第39行之间插入下述语句。
</fieldset>
<fieldset>
<legend>其他信息</legend>
④ 在第59行和第60行之间插入下述语句。
</fieldset>
（2）实现要求（b）的操作如下。
修改第11行代码如下。
<input type="radio" name="gender" id="male" value="1" checked>
（3）实现要求（c）的操作如下。
修改第18～25行代码如下。
<input type="text" list="favoriteList">
<datalist id="favoriteList">
<option value="电影">
<option value="电视">
<option value="音乐">
<option value="体育">
<option value="其他">
</datalist>
（4）实现要求（d）的操作如下。
① 修改第45行代码如下。
<select name="birthCountry" id="birthCountry" size="4">
② 修改第50行代码如下。
<option value="5" selected>其他国家</option>
最后，保存ch1_12.html文件后，在浏览器中打开ch1_12.html文件，就可以得到图1-34所示的效果。如果在“爱好”列表框中输入“电”，就会显示出以“电”开始的选项列表。
1.2.7 多媒体元素及内嵌元素
网页上的多媒体一般指的是视频、音频和动画等。HTML5新增的两个多媒体元素video （视频）和audio（音频）使网页中播放视频和音频的技术实现了标准化，从而更容易实现。如果网页中需要嵌入其他文件，例如Flash动画文件或者PDF文件等，可以使用object（内嵌对象）元素、embed（嵌入）元素或iframe（内联框架）元素。值得注意的是，这些元素都是行元素。
1.video元素和audio元素
HTML5中支持表1-10所示的视频和音频文件格式，其中，MP4和MP3是所有浏览器都支持的格式。
表1-10 video元素和audio元素的文件格式
无论是video元素还是audio元素，都要和source（源）元素一起使用，才能在网页中进行播放。video元素和audio元素的常用属性如表1-11所示。
表1-11 video元素和audio元素的常用属性
续表
示例1-13 制作图1-35所示的包含视频和音频的网页。
目的：学习video元素、audio元素和source元素的使用。
程序文件名：ch1_13.html。
图1-35 示例1-13的网页效果
2.内嵌元素
object 元素和 embed 元素的功能非常相似，都可用于嵌入各种格式的文件，而 iframe元素则常用于嵌入另一个HTML网页文件。它们常用的属性如表1-12所示。
表1-12 object、embed元素的常用属性
值得注意的是，如果要在网页中插入图像、视频或音频文件，应该直接使用img元素、video元素和audio元素。
示例1-14 制作图1-36所示的包含ch1_01.html网页、Flash动画文件和PDF文件的网页。
目的：学习iframe元素、embed元素和object元素的使用。
程序文件名：ch1_14.html。
图1-36 示例1-14的网页效果
1.2.8 特殊说明
1.注释元素
HTML的注释元素用于在HTML文档中解释HTML语句，便于读者更容易地理解这些语句。注释元素中所包含的注释内容被放在标签<!--和-->之间，它们不会在浏览器中显示。注释元素的格式如下。
<!--注释的内容-->
示例1-15 在示例1-1的代码中加上注释语句。
目的：学习注释语句的使用。
程序文件名：ch1_15.html
说明
分别在第7行和第9行加上注释语句后，在浏览器中打开该网页，可以得到与图1-4所示的同样的页面效果。
2.meta（描述网页信息）元素
meta 元素是嵌套在 head 元素中用于描述网页信息的元素，这些信息不会显示在网页上，但它们常被搜索引擎用于检索网页，主要格式如下。
<meta name="description" content="这里是网页的具体描述">
<meta name="keywords" content="这里是一些关键字">
<meta name="author" content="这里是作者的名字">
另外，meta 元素的“charset”属性用于指定网页内容的字符编码，例如网页内容是中文，属性设置如下。
<meta name="charset" content="UTF-8">
如果网页内容是英文，属性设置如下。
<meta name="charset" content="ISO-8859-1">
HTML5的meta元素新增了viewport属性，它用于在不同的设备上显示时控制网页的显示宽度和图像像素与显示像素的比例。例如进行如下属性设置，网页将以设备宽度、图像像素与显示像素的比例为1∶1的方式显示，效果如图1-37所示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
图1-37 meta的viewport属性效果设置对比
3.DOCTYPE（文档类型的定义）与HTML文档的检验
DOCTYPE并不是HTML的元素，它是对HTML文档的类型说明，因此，它必须写在HTML文档的开始处，即HTML元素之前。对于HTML5,DOCTYPE具有如下固定的格式。
<!DOCTYPE HTML>
它与一般的 HTML 元素稍有不同：以英文模式的感叹号（!）开始，并且全部是大写字母。它表示网页文件中的元素必须全部符合 HTML5的规范。对于含有 DOCTYPE 的HTML文档，可以在万维网联盟提供的检验网站（https://validator.w3.org）上检验其是否“合格”，如果不合格，该网页会详细地罗列出问题语句及出错原因，如图1-38所示。
图1-38 万维网联盟提供的检验网站
4.特殊字符
如何在网页中表现一些特殊的字符呢？例如乘号（×）、除号（÷）、版权符号（©）及注册商标符号（®）等。在HTML文档中，这些符号都可以用“字符实体（Character Entity）”来表示。字符实体分成3部分：第1部分是一个&符号，英文叫ampersand；第2部分是实体名字或者是#加上实体编号；第3部分是一个分号。表1-13列举了一些常用的字符实体。
表1-13 常用的字符实体
