第3章
CHAPTER 3




微课视频3




HTML5的标签与标签属性







HTML是一种标记语言。标记语言的目的是提供一系列的标签及标签所具有的属性来对内容进行描述。HTML5的标签和属性在之前版本的基础上进行了扩展和修改，增加了一些表达语义的标签，同时摒弃了一些原来用来实现样式的标签。通过这些调整，HTML进一步增强了其原有的功能属性——用来描述内容本身而非表达样式。HTML5摒弃的旧有标签如图31所示。


图31HTML5摒弃的旧有标签




在图31中，HTML5之前常用的一些标签不再建议使用。这些不再建议使用的标签主要分3类： 第一类是表达样式的标签，例如big、font等，这类标签可以用CSS来实现； 第二类是结构类标签，例如frameset，这类标签给网页的完整连贯性带来了一定的破坏，这类标签可以用其他标签（例如div和CSS）实现； 第三类是不再使用或者可能带来混乱性的标签，例如applet，这类标签可以用其他标签或CSS结合JavaScript来实现。

除了标签，HTML5还有一些被摒弃的属性，如图32所示。这类被摒弃的属性一般都有其他的替代方案。


图32HTML5摒弃的旧有属性


图31和图32所示的标签和属性在一般情况下不需要特意记住，在多加练习的情况下，自然会用正确的标签去实现和表达。
本章将详细讲解HTML5中部分新增加的标签和属性。
本章首先介绍HTML5中的语义标签，然后对HTML5中常用的、新增加的属性进行介绍，最后介绍HTML5规范性的验证和浏览器的支持情况。所有内容都将结合实例进行示范讲解。本章应重点掌握以下要点： 
(1) 掌握HTML5中的语义标签； 
(2) 掌握HTML5中的常用属性； 
(3) 掌握HTML5中标签和属性的实践技能。
3.1语义标签

语义标签的主要功能是对内容进行语义方面的描述，例如标题、段落、图片、侧边栏、页眉、页脚等。HTML5之前的标签功能比较混乱，有些是表达语义的，例如img、h1~h6等； 有些是表达样式的，例如font，这类标签已经被废弃； 还有一些没有任何语义，例如div、span等。
语义标签的一个主要作用是可以给搜索引擎提供关于所在页面的信息，从而便于该页面被更好地检索到。
3.1.1HTML5中的语义标签
HTML5中新增加的语义标签主要包括main、nav、 section、header、footer、aside、article等。图33给出了常用的HTML5语义标签的使用示范。在HTML5之前，这些标签一般都用div来实现，图34是对图33采用div的实现。


图33HTML5语义标签构成的页面结构





图34采用div标签实现的页面结构



3.1.2HTML5中的语义标签程序实例


图35登录页面效果图



本节展示如何使用HTML5中的语义标签来完成一个程序实例。

任务： 使用HTML5中的语义标签实现一个简单的用户登录页面，要求提供用户名和密码的输入功能以及提交按钮。效果图如图35所示。

程序实现： 该页面的HTML代码如图36所示，CSS代码如图37所示。


图36登录页面HTML代码




图37登录页面CSS代码

3.2标签属性
HTML的标签都可以带有不同的属性。属性的名字在等号的左边，属性的值在等号的右边并用引号引起来。在图36中可以看到不同的属性的用法，如id、for、type，后面还会看到更多的属性。有些属性只能用在某些标签中，如for属性。HTML5中新增加了一些属性并在旧有属性上增加了一些新的可取值。
3.2.1HTML5中的新标签属性及值
HTML5中新增加的属性如图38所示。这里重点介绍data属性的用法。data属性的作用是给标签增加额外的字符串存储空间，可以给标签增加额外的与之绑定的内容供程序使用。

例如，如果要给图36中的HTML增加关于用户名的额外信息——固定的公司名字(mycom)，那么可以将图36中的代码改为如图38所示。


图38登录页面HTML含有data属性代码图



这样在Script文件中就可以通过该属性所在元素的dataset对象下的与该属性名字相同的属性获得相应的信息，如图39所示。


图39data属性操作代码及效果图


除了dataset这种可以自定义的标签属性外，HTML5中还对某些已有属性添加了新的可以取的值。这里重点对input标签中的type属性的不同的值进行讲解。
从图38和图36中可以看到input标签的type属性的值是text，这也是type属性的默认值。type属性的其他可取值为： 
password——用来定义密码，输入的密码都被显示为星号，代码和效果如图310所示。



图310input标签type属性值为password的代码及效果图


file——用来定义文件，用户可以通过单击按钮选择文件，代码和效果如图311所示。注意，此处并没有改变之前的样式文件。




图311input标签type属性值为file的代码及效果图



hidden——用来隐藏保存的内容，在存储功能方面有时和data属性相同，代码和效果如图312所示。


图312input标签type属性值为hidden的代码及效果图


button——用来定义按钮，代码和效果如图313所示。注意，此处仍然没有改变之前的样式文件，虽然此处值为button的input标签看上去和值为text的input的标签样式一样，但是type值为button的input标签是不可以单击的。


submit——用来定义提交按钮，单击后会提交form中的内容，代码和效果如图314所示。

reset——用来定义重置按钮，单击后会清除form中的内容，代码和效果如图315所示。

image——用来定义图像按钮，代码和效果如图316所示。我们注意到，当input标签的type属性为image时，input标签便具有了和img标签同样的效果和功能。



图313input标签type属性值为button的代码及效果图



图314input标签type属性值为submit的代码及效果图



图315input标签type属性值为reset的代码及效果图




图316input标签type属性值为image的代码及效果图



radio——用来定义单选按钮，具有相同name属性值的input标签同时只能有一个被选中，代码和效果如图317所示。该图表示了当该input标签被选中时的样式。


图317input标签type属性值为radio的代码及效果图


checkbox——用来定义复选框，具有相同name属性值的input同时可以有一个被选中，代码和效果如图318所示。

除了以上这些input标签的type属性外，HTML5中还为input标签增加了其他属性，下面具体介绍： 
color——用来定义颜色选择器，不同的浏览器会提供不同的颜色选择器的样式，代码和效果如图319所示。当单击图319上部的黑色区域后，浏览器会打开颜色选择面板，在此用户可以非常方便地选择需要的颜色。


time——用来定义时间选择器，不同的浏览器会提供不同的时间选择器的样式，代码和效果如图320所示。



图318input标签type属性值为checkbox的代码及效果图



图319input标签type属性值为color的代码及效果图



图320input标签type属性值为time的代码及效果图




date——用来定义日期选择器，不同的浏览器会提供不同的日期选择器的样式，代码和效果如图321所示。


图321input标签type属性值为date的代码及效果图



number——用来定义只能输入数字的输入框，代码和效果如图322所示。我们注意到，当单击type属性值为number的输入框时，该输入框右边会出现可以单击的上下箭头，通过这种方式可以快速对该数值加1或减1。而且，该输入框中只能是数字。


图322input标签type属性值为number的代码及效果图


email——用来定义只能输入含有@符号的输入框，代码和效果如图323所示。


url——用来定义url输入框，代码和效果如图324所示。当作为表单form的内容提交时，如果输入框中的内容不含有url必有的字段（如： //），则会提示错误。


search——用来定义搜索输入框，代码和效果如图325所示。




图323input标签type属性值为email的代码及效果图



图324input标签type属性值为url的代码及效果图



图325input标签type属性值为search的代码及效果图



range——用来输入范围，一般以滑动条的样式显示出来，代码和效果如图326所示。


图326input标签type属性值为range的代码及效果图



tel——用来定义电话号码输入框，在移动端上输入时一般会自动打开数字键盘，代码和效果如图327所示。需要注意的是，图327是在台式机上打开该页面时的效果图。



图327input标签type属性值为tel的代码及效果图



3.2.2HTML5中的标签属性程序示例

任务： 使用HTML5中的语义标签及相关属性实现一个简单的用户登录页面，要求提供用户名和密码的输入功能以及提交按钮。效果图如图35所示。

程序实现： 该页面的HTML代码如图328所示，CSS代码如图329所示。


图328登录页面HTML代码




图329登录页面CSS代码



3.3HTML5语法验证与浏览器支持
HTML5给出了当前书写HTML的最新规范。虽然浏览器对旧有的HTML写法仍然是支持的，但是以HTML5的规范来书写HTML是对开发者的一个必然要求。本节简要介绍如何确保自己的代码符合HTML5的规范，同时，了解各个主流浏览器对HTML5的支持情况，以便在跨浏览器开发和浏览器兼容性方面有更清晰的指导意见。
3.3.1HTML5语法是否符合规范的验证方法
如果要验证所编写代码中的HTML标签是否符合HTML5的规范，可以登录网址https://validator.w3.org来进行验证［3］，如图330所示。该网址提供了3种验证方法： 通过网址URI来验证、通过上传文件来验证和通过直接输入来验证。注意，这里的验证只是对HTML标签的验证，而并不能对CSS和JavaScript进行验证。


例如，要对如图328所示的代码进行验证，我们选择通过输入验证。将代码复制粘贴到网址的输入框中，然后单击Check按钮，结果如图331所示。

从图331可以看到，文档通过了验证，但是也给出了一条警告信息，告诉我们建议在Section标签内增加heading标签h2~h6。
3.3.2HTML5标签与标签属性的浏览器支持情况
了解HTML5标签与标签属性或其他CSS及JavaScript在各个浏览器中的支持情况的最好办法是直接在各个浏览器中进行代码验证。另一种更方便的方法是通过网址来进行查询，如图332所示。




图330HTML5语法规范验证界面图



图331HTML5语法规范验证结果图




图332浏览器支持查询界面图



例如，想验证Section标签在各个浏览器中的支持情况，结果如图333所示。




图333浏览器对Section标签支持查询结果图


从图333可以看出，各个浏览器对Section标签的支持情况比较良好。我们还可以看到一款浏览器的各个版本对Section标签的支持情况。分别以不同颜色表示不支持、支持和部分支持。当鼠标指针移动到各个颜色区域时，还可以看到关于不支持、支持或部分支持的详细信息。
本章小结
HTML5标签和属性是Web开发的基础。本章重点介绍了HTML5中的语义标签、input标签中的type属性、HTML5标签的规范性验证方法和不同浏览器对HTML5中的标签的支持情况。有了本章的这些基础，读者就可以对要表达的内容进行基于HTML5标签的描述，从而根据UI人员提供的效果图进行基于HTML5标签的代码编写。
本章主要介绍了如下内容： 
(1) HTML5中的语义标签。
(2) HTML5中的标签属性特别是Input标签的Type属性的不同可取值。
(3) HTML5代码中标签的规范性验证方法。
(4) HTML5代码在各个浏览器的支持情况。
思考题
(1) 请简单列举HTML5中的语义标签。
(2) 请简单列举HTML5中Input标签的不同Type属性及其可取的值。
(3) 如何查询HTML5代码在各个浏览器的支持情况？







CSS是一种样式语言，英文全称为Cascading Style Sheet。CSS在HTML的基础上给HTML页面添加个性化的样式，并且可以提供诸如动画等高级表现功能。本篇介绍CSS的使用。