2.1 语义 · 前端笔记

[TOC] ## HTML5 中的节段和提纲 > **HTML5大纲算法**在用户代理中还**没有实现**，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。 HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。 ### HTML4的文档结构文档结构，即，<body>标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。 ``` <div class="section" id="forest-elephants" > <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <div class="subsection" id="forest-habitat" > <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </div> </div> ``` 形成的大纲 ``` 1. Forest elephants 1.1 Habitat ``` ### HTML5解决的问题 HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题： 1. 定义语义性章节的`<div>`元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能。换句话说, HTML4规范在章节的定义和章节的范围都不精确。自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（`<div>`），并新增了一个元素，section元素（`<section>`）。 2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。这个已经被HTML5的新的章节元素解决了，因为新引入的元素\(`<article>`,`<section>`,`<nav>`和`<aside>`\) 总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系. 3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素`<aside>`使得这样的节点不会插入到主纲要中。 4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段元素：包含链接集合的nav元素`<nav>`, 例如目录, 包含网站相关信息的footer元素`<footer>`和header元素`<header>`。更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。 ### HTML5的大纲算法 #### 定义节段 `<body><body>`元素中的所有内容都是节段中的一部分。节段在HTML5中是可以嵌套的。`<body><section>`元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过`<article><aside>`,`<nav>`, , 和这些标记中的内容。 #### 定义标题当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（`<h1>，<h2>`,`<h3><h4>`,`<h5>，<h6>`之一）定义了当前节段的标题标题元素通过在元素里的名字加上数字来分级标题元素，`<h1><h6>`元素有最高级别，有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。 #### 分节根分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根`<body><blockquote>`元素，这些元素经常在页面中引入外部内容：`<details><fieldset>`,`<figure><td>`,,和。 #### 大纲之外的节段 HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。 1. HTML 侧边分节元素 \(`<aside>`\) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中 2. HTML 导航分节元素 \(`<nav>`\) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。 #### 页眉和页脚 HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。 1. HTML 头部分节元素 \(`<header><article>`\) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。`<section><aside>`,`<nav><header>`, and可以拥有它们自己的。虽然名字是header，但是不一定是在页面的开始。 2. HTML 页脚元素 \(`<footer><article>`\) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。同样，其不一定是在页面的底部出现。 ### 分节元素中的地址和发表时间文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过`<address>`元素来表示，HTML5则拓展了这个元素。一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用`<article><address>`元素定义。因此，`<body><article>`元素连接到距离最近的或祖先元素。同样的，新的HTML5标记`<time>pubdate`元素，使用`<body><article>`布尔值，表示整个文档的发布时间，分别给文章，与其最近的元素或元素的祖先元素相关。 ### 元素 #### <section> HTML Section 元素 \(<section>\) 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 \(<h1>-<h6> element\) 作为子节点来辨识每一个<section>。 > * 如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。 > * 不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个 <section>应该出现在文档大纲中。 #### <article> `<article>`元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当 > * `<article>`元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的`<article>`元素可嵌套在代表博客文章的`<article>`元素中。 > * `<article>`元素的作者信息可通过`<address>`元素提供，但是不适用于嵌套的`<article>`元素。 > * `<article>`元素的发布日期和时间可通过`<time>pubdate`元素的属性表示。 ``` <article class="film_review"> <header> <h2>Jurassic Park</h2> </header> <section class="main_review"> <p>Dinos were great!</p> </section> <section class="user_reviews"> <article class="user_review"> <p>Way too scary for me.</p> <footer> <p> Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. </p> </footer> </article> <article class="user_review"> <p>I agree, dinos are my favorite.</p> <footer> <p> Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. </p> </footer> </article> </section> <footer> <p> Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. </p> </footer> </article> ``` #### <nav> HTML导航栏\(`<nav>`\) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。 > * 不是所有的链接都必须使用`<nav>`元素,它只用来将一些热门的链接放入导航栏,例如`<footer>`元素就常用来在页面底部包含一个不常用到,没必要加入`<nav>`的链接列表。 > * 一个网页也可能含有多个`<nav>`元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表。 > > * 对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容。 #### <header> `<header>`元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。 > `<header>`元素不是分节内容，所以不会引入新的分节到大纲中。 #### <footer> <footer>元素表示最近一个章节内容根节点或者（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 > `<footer>`元素内的作者信息应包含在`<address>`元素中。 > > `<footer>`元素不是章节内容，因此在outline中不能包含新的章节。 #### <aside> `<aside>`元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。 > 不要将`<aside>`元素去标记括号内的文本，因为这种类型的文本（即括号内的文本）被认为是其内容流的一部分。 #### <hgroup> `<hgroup>`代表一个段的标题。它规定了在文档轮廓里的单一标题是它所属的隐式或显式部分的标题。 > 元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。但是其轮廓算法\(outline algorithm\)未在任何浏览器中实现，因此`<hgroup>语义仍旧是理论的。` ## HTML 5中的表单 HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。 ### `<input>`元素 `<input>type`的`<input>`特性拥有更多的值。（请观看[`<input>`](https://www.gitbook.com/book/surahe/front-end-book/edit#)获得完整列表） * `search`: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。 * `tel`: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如`patternmaxlength`与等属性来限制输入到控件中的值。 * `url`: 这个元素呈现为一个编辑URL的输入控件。换行符与首尾的空格将会被自动去除。 * `email`: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在扩展的巴科斯范式\(ABNF\)中的规范：`1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )`其中`atext`在规范RFC 5322 section 3.2.3RFC 1034 section 3.5 中被定义,而`ldh-str在规范`中被定义。. > **注意:**若设置`multiple<input>`属性，`<input>`区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持 `<input>`元素也拥有一些新的特性。 * list：`<datalist>`元素的 ID，该元素的内容，`<option>`元素被用作提示信息，会在 input 的建议区域作为提议显示出来。 * `patterntype`：一个正则表达式，用于检查控件的值，能够作用于值是`text，tel，search，url，`和`email 的 input 元素。` * `form`：一个字符串，用于表明该 input 属于哪个元素。一个 input 只能存在于一个表单中。 * `formmethod`：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 \(GET 或 POST\)；如果定义了它，则可盖`<form>method`元素上的`typeform`特性。只有当`formmethod`值为`image`或`submit，并且`特性被设置的情况下，才能生效。 * `x-moz-errormessage`：一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。 ### `<form>`元素 `<form>`元素有了一个新特性： * `novalidate`：设置了该特性不会在表单提交之前对其进行验证。 ### `<datalist>`元素 `<datalist>`元素会在填写`<option>`字段时，显示一列作为提示。你可以使用`<input>`元素上的`list`特性来将一个特定的 input 与特定的`<datalist>`元素做关联。 ``` <label>Choose a browser from this list:<input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist> ``` ![](blob:https://www.gitbook.com/06aac404-b92e-4d6a-93fb-032f205ed6fc) ### `<output>`元素 `<output>`元素表示计算的结果。你可以使用`for<output>`特性来在`for`元素与文档内其他能够影响运算的元素\(例如，input 或参数\)建立关联。特性的值是以空格做分隔的其他元素的 ID 列表。 ``` <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" />+ <input type="number" name="a" value="10" /> =<output name="result"> </output> </form> ``` ### 约束验证的 HTML 语法约束验证的 HTML 语法下列 HTML5 语法中的条目用于为表单数据指定约束。 * <input>, <select>，和 <textarea> 元素上的 required 特性，指定必须提供该元素的值。\(在 <input> 元素上， required 只能与特定的 type 特性值结合起来生效。\) * <input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。 * <input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。 * <input> 元素的 step 特性\(与 min 与 max 特性结合使用\) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。 * <input> 与 <textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数\(在 Unicode 代码点内\)。 * type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。此外，若要阻止对表单进行约束验证，你可以在 <form> 上设置 novalidate 特性，或在 <button> 与 <input> 元素\(当 type 是 submit 或 image\)上设置 formnovalidate 特性。这些特性指定了当表单提交时不做验证。