第2章HTML5的元素与属性.

本章要求：第2章HTML5的元素与属性HTML5与HTML4的语法区别；HTML5中的新增元素HTML5中废除的HTML4元素HTML5中替代HTML4的元素HTML5中的新增属性HTML5中废除的HTML4属性HTML5的全局属性主要内容1.HTML5的语法变化2.新增的元素和废除的元素3.新增的属性和废除的属性4.全局属性5.综合实例——检查单词的拼写情况第2章HTML5的元素与属性2.1.1HTML5中的标记方法2.1.2HTML5与之前版本的不同2.1HTML5的语法变化首先，看一下在HTML5中的标记方法。内容类型（ContentType）HTML5文件的扩展名和内容类型（ContentType）没有发生变化。即扩展名为“.html”或“.htm”，内容类型（ContentType）为“.text/html”。DOCTYPE声明DOCTYPE声明的HTML文件中不可缺少的。不区分大小写。Web浏览器通过判断文件开头有没有这个声明，让解析器和渲染类型切换成对应HTML5的模式。!DOCTYPEhtml另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM标识。（不区分大小写。此外还可将双引号换为单引号来使用），声明方法如下面的代码：!DOCTYPEHTMLSYSTEMabout:legacy-compat字符编码的设置字符编码的设置方法也有些新的变化。以前，设置HTML文件的字符编码时，要用到如下meta元素，如下所示：metahttp-equiv=Content-Typecontent=text/html;charset=UTF-8在HTML5中，可以使用meta元素的新属性charset来设置字符编码。metacharset=UTF-8以上两种方法都有效。因此也可以继续使用前者的方法（通过content元素的属性来设置）。但要注意不能同时使用。如下所示：!--不能混合使用charset属性和http-equiv属性--metacharset=UTF-8http-equiv=Content-Typecontent=text/html;charset=UTF-8注意：从HTML5开始，文件的字符编码推荐使用UTF-8。2.1.1HTML5中的标记方法HTML5的语法与之前HTML语法在某种程度上达到了一定的兼容性。例如，有时可以看见“p没有结束标签”等HTML现象。HTML5不将这些视为错误，而是“允许这些现象存在，并明确记录在规范中”的方法。那么下面就来看看具体的HTML5语法。可以省略标签的元素在HTML5中，元素可以省略标签。具体来讲有3种情况，具体如下：不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的的形式，只允许使用“元素/”的形式进行书写。例如：“br…/br”的写法是错误的。正确写法为“br/”。当然，在HTML5以前版本中“br”这种写法也是允许的。可以省略结束标签li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th可以省略整个标签（即连开始标签都不用写明）html、head、body、colgroup、tbody需要注意的是，虽然这些元素可以省略，但实际上却是隐式存在的。例如：“body”标签可以省略，但在DOM树上它是存在的，可以永恒访问到“document.body”。上述列表中也包括了HTML5的新元素。有关这些新元素的用法，将在后面的章节中详细讲解。2.1.2HTML5与之前版本的不同拥有boolean值的属性拥有布尔值（Boolean）的属性，例如disabled和readonly等，通过省略属性的值来表达值为“true”。如果要表达值为“false”，则直接省略属性本身即可。此外，当写明属性值来表达值为“true”时，可以将属性名设定为属性值，也可以将属性值设为空字符串。如下列所示：!--以下的checked属性值皆为true--inputtype=checkboxcheckedinputtype=checkboxchecked=checkedinputtype=checkboxchecked=省略属性的引用符设置属性值时，可以使用双引号或单引号来引用。HTML5将进一步进行改进，只要属性值不包含空字符串、单引号、双引号、“”、“”、“'”、“”、“`”、“=”等字符，都可以省略属性的引用符。如下例所示。!—请注意type属性的引用符--inputtype=textinputtype='text'inputtype=text2.2新增的元素和废除的元素2.2.1新增的结构元素2.2.2新增的行内（inline）语义元素2.2.3新增的块级（block）语义元素2.2.4新增的input元素的类型2.2.5新增的多媒体元素与交互性元素2.2.6废除的元素在HTML5中，新增了以下与结构相关的元素：section元素section元素页面或应用程序中的一个区块,比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。HTML5中代码示例：section…/sectionHTML4中代码示例：div…/divarticle元素article元素表示页面中的一块独立的内容，如博客中的一篇文章或报纸中的一篇文章。HTML5中代码示例：article…/articleHTML4中代码示例：divclass=article…/divheader元素header元素表示页面中一个内容区块或整个页面的标题。HTML5中代码示例：header…/headerHTML4中代码示例：div…/div2.2.1新增的结构元素nav元素nav元素表示导航链接的部分。HTML5中代码示例：nav…/navHTML4中代码示例：ul…/ulfooter元素footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创建者联系信息。HTML5中代码示例：footer…/footerHTML4中代码示例：div…/divnav元素nav元素表示页面中导航条链接的一部分。HTML5中代码示例：nav…/navHTML4中代码示例：ul…/ul在HTML5中，新增了以下与行内的语义相关的元素：mark元素mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。HTML5中代码示例：mark…/markHTML4中代码示例：span…/spantime元素time元素表示日期或时间，也可以同时表示两者。HTML5中代码示例:time…/timeHTML4中代码示例:span…/spanmeter元素meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。HTML5中代码示例：meter…/meterprogress元素progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。HTML5中代码示例：progress…/progress2.2.2新增的行内（inline）语义元素在HTML5中，新增了以下与块级的语义相关的元素：aside元素aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。HTML5中代码示例：aside…/asideHTML4中代码示例：div…/divfigure元素figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。HTML5中代码示例：figurefigcaptionfruit/figcaptionpThepersonhaveanapple../p/figureHTML4中代码示例：dlh1fruit/h1pThepersonhaveanapple../p/dldialog元素dialog标签定义对话，比如交谈。注意：对话中的每个句子都必须属于dt标签所定义的部分。2.2.3新增的块级（block）语义元素HTML5中，新增了许多input元素的类型，列举如下：emailemail类型需要输入E-mail地址的输入框。urlurl类型需要输入URL地址的输入框。numbernumber类型表示需要输入数值的输入框。rangerange类型表示需要输入一定范围内数字值的输入框。DatePickers（数据检出器）HTML5拥有多个可供选择日期与时间的新型输入框：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）searchsearch类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。2.2.4新增的input元素的类型新增video和audio元素，顾名思义，分别是用来插入视频和声音的。值得注意的是可以在开始标签和结束标签之间放置文本内容，这样旧浏览器就可以显示出不支持该标签的信息。例如下面代码：videosrc=somevideo.wmv您的浏览器不支持video标签。/videoHTML5同时也叫WebApplications1.0，因此也进一步发展交互能力，这些标签就是为提高页面的交互体验而生。details元素details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出details。summary元素应该是details元素的第一个子元素。HTML5中代码示例：detailssummaryHTML5/summaryHowtolearnaboutHTML5.?/detailsdatagrid元素datagrid元素表示可选数据的列表。datagrid作为树形列表来显示。HTML5中代码示例：datagrid…/datagridmenu元素menu元素表示菜单列表。当希望列出表单控件时使用该标签。HTML5中代码示例：menuliinputtype=checkbox/black/liliinputtype=checkbox/green/li/menu2.2.5新增的多媒体元素与交互性元素由于各种原因，在HTML5中废除了很多元素，下面简单介绍一下被废除的元素。1．可以使用css代替的元素对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为画面展示服务的，而在HTML5中提倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代。2．不可以使用frame框架对于frameset元素、frame元素与nofranes元素，由于frame框架对页面可以性存在负面影响，在html5中已不再支持frame框架，只