CH02 HTML5基础

第2章HTML5基础本章学习目标理解HTML5文档的基本结构；理解HTML5中元素标签的作用；掌握HTML5文档注释的用法；掌握HTML5保留的常用标签的用法；掌握HTML5新增的文档结构标签的用法；掌握HTML5新增的格式标签的用法。目录2.1HTML5基本结构2.2HTML5保留的常用标签2.3HTML5新增的常用标签2.4HTML5新增API2.1HTML5基本结构2.1.1文档类型声明!DOCTYPE2.1.2根标签html2.1.3首部标签head2.1.4主体标签body2.1.5HTML5文档注释2.1.6HTML5文档规范2.1.7HTML4.01转换为HTML52.1HTML5基本结构HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以元素名的形式出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。2.1HTML5基本结构HTML5文档的基本结构如下：!DOCTYPEhtmlhtmlheadtitle网页标题/title/headbody主体内容/body/html2.1HTML5基本结构HTML5元素的内容一般以起始标签元素名开始，以结束标签/元素名终止。例如首部标签head中的title标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签body中的内容显示到网页上。2.1HTML5基本结构修改HTML5文档基本结构中的文字内容，即可快速生成一个简单的HTML5页面。【例2-1】第一个HTML5页面P142.1.1文档类型声明!DOCTYPEDOCTYPE是DocumentType的简写，含义为文档类型。HTML5文档基础结构中第一行!DOCTYPEhtml就是HTML5的DOCTYPE声明。2.1.1文档类型声明!DOCTYPE网页实际上有多种浏览模式，例如兼容模式，标准模式等。HTML5用!DOCTYPE标签定义文档该基于何种标准在网页中呈现。!DOCTYPEhtml意味着该网页的呈现标准是基于HTML5。当使用该DOCTYPE声明方式时，浏览器会将此页面定义为标准兼容模式。2.1.1文档类型声明!DOCTYPEHTML4.01的文档类型声明较为复杂，常见如下：在HTML5中，该声明被大幅度化简：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN!DOCTYPEhtml2.1.1文档类型声明!DOCTYPE在浏览器打开的网页页面任意位置右键点击，选择“查看网页源代码”，在页面顶端第一句就是DOCTYPE声明。HTML5引入了新的特性和元素，同时也取消了对部分过期元素的支持，因此如果在HTML5的DOCTYPE声明下使用了HTML的过期元素，网页可能无法正常显示预期的效果。2.1.2根标签htmlhtml是HTML5文档的根元素标签，除顶部!DOCTYPEhtml文档类型声明以外，所有的HTML5文档都是以html标签开始，以/html标签结束。在html和/html标签内包含了两个重要的元素标签：head首部标签和body主体标签，分别用于标记文档的首部和主体部分。2.1.3首部标签headHTML5文档的首部以head标签开始，以/head标签结束。head标签中的内容不会显示在网页的页面中。head标签中可包含title和meta等标签，用于声明页面标题、字符集和关键词等。2.1.3首部标签head1.网页标题标签titleHTML5文档使用title和/title标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略title标签则网页标题会显示为“无标题文档”。建议在网页代码中保留该标签，因为title标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。2.1.3首部标签head2.基础地址标签basebase标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时，浏览器会用base标签指定的URL进行补全。例如：headbasehref==sunflower.jpg//body此时在第一个图像标签img中src属性填写的是一个相对路径，由于base标签的作用，该路径会被浏览器自动补全为：imgsrc=。如果没有使用base标签来指定URL地址，则浏览器会用当前HTML5文档的URL对图片地址进行补全。2.1.3首部标签head2.基础地址标签basebase标签也可以为该网页上所有超链接统一设置打开方式，例如：headbasetarget=_blank//headbodyahref=百度/aahref=网易/a/body在base标签中的属性target=_blank指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。2.1.3首部标签head3.元数据标签metameta标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常meta标签可用于定义网页的字符集、关键词、描述、作者等信息。2.1.3首部标签head3.元数据标签meta(1)字符集声明Charset是CharacterSet的简写，含义为字符集设置。浏览器统一默认的字符集是ISO-8859-1西文字符集，如果使用了其他字符集，浏览器需知道使用何种字符集才能正确地显示HTML页面。HTML5文档使用meta标签进行字符集声明。万维网初期使用的是ACSII字符集，该字符集支持数字0-9、英文字母大写A-Z和小写a-z，以及部分特殊字符。由于很多国家使用的字符不被ACSII支持，因此浏览器统一默认的字符集是ISO-8859-1西文字符集。2.1.3首部标签head3.元数据标签meta(1)字符集声明以UTF-8字符集为例，HTML4.01的字符集声明如下：在HTML5中，同样的内容声明方式会更为简洁，写法如下：metahttp-equiv=Content-Typecontent=text/html;charset=utf-8metacharset=utf-8这行语句表示当前HTML文档使用的字符集是UTF-8编码格式。2.1.3首部标签head3.元数据标签meta(2)关键词声明使用meta标签定义网页关键词（keywords）的用法如下：metaname=keywordscontent=HTML5,CSS3,jQuery/2.1.3首部标签head3.元数据标签meta(3)页面描述声明使用meta标签定义页面描述（description）的用法如下：：metaname=descriptioncontent=ThisisatutorialaboutHTML5,CSS3,jQuery/搜索引擎会根据meta标签中的name和content属性来索引网页。2.1.3首部标签head4.样式标签style样式标签style可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。例如：headstylep{color:red}/style/headbodyp这是一个段落。/p/body这段代码可以将HTML5文档中所有未指定字体颜色的段落显示为红色。2.1.3首部标签head5.链接标签linklink标签用于连接外部资源和当前HTML5文档，它只出现在首部标签head和/head中，通常用于连接外部样式表。例如：headlinkrel=stylesheethref=my.css//head这表示将CSS样式文件my.css指定的样式效果应用于当前网页中。2.1.3首部标签head5.链接标签link如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次link标签。例如：headlinkrel=stylesheethref=my1.css/linkrel=stylesheethref=my2.css/linkrel=stylesheethref=my3.css//head这里对于CSS样式文件的引用使用了相对路径，也可以根据实际需要填写URL地址2.1.3首部标签head6.脚本标签scriptscript标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在script和/script标签中。例如：headscriptsrc=test.js/script/head这里对于CSS样式文件的引用使用了相对路径，也可以根据实际需要填写URL地址2.1.3首部标签head6.脚本标签script和引用外部CSS文件类似，如果需要同时引用多个JavaScript文件，则需要为每一个JavaScript文件单独使用一次script标签。例如：headscriptsrc=test1.js/scriptscriptsrc=test2.js/scriptscriptsrc=test3.js/script/head2.1.4主体标签bodyHTML5文档的主体部分以body标签开始，以/body标签结束。body标签中的内容将全部显示在网页的页面中。body标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。2.1.5HTML5文档注释为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用!--...--标签为文档进行注释，注释标签以“!--”开头，以“--”结束，中间的“...”替换为注释文字内容即可。!--...--标签支持单行和多行注释。2.1.5HTML5文档注释【例2-2】注释标签的应用P182.1.6HTML5文档规范1.文件类型2.元素标签格式3.字符实体的使用4.图像文件的使用2.1.6HTML5文档规范1.文件类型一般来说，纯HTML5开发推荐使用.html格式。和HTML4.01一样，HTML5支持的常用文件后缀名为.html。在早期的DOS操作系统中，文件扩展名限制为最多3个字符，无法识别4位文件名，因此.htm被用于兼容此类操作系统。目前这两种扩展名方式均被各类浏览器广泛支持，互换后缀名不会引起打开错误，但是通过URL地址访问时需要正确的扩展名。2.1.6HTML5文档规范2.元素标签格式元素标签一般情况下是成对出现的，首尾标签的元素名称保持一致，并且尾标签中需要加上斜杠符号。早期的HTML规范中，标签的大小写是不敏感的，因此老版本的网页中可能会存在如下写法：HTMLHEADTITLE早期存在的大写标签页面/TITLE/H