HTML学习笔记（四）_HTML5常用元素与属性

1.HTML5新增的通用属性：

(1).contentEditable属性：

HTML5为大部分HTML元素都增加了contentEditable属性，如果该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里的内容。此处的HTML元素并不是值那些原本就允许用户输入的表单元素，如文本框、文本域之类的，而是可以把<table../>,<div../>等元素变成可编辑状态。

contentEditable具有“可继承”的特点：如果一个HTML元素的父元素是“可编辑”的，那么它默认也是可编辑的，除非显示的指定值为false。

(2).designMode属性：

designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所有可支持contentEditable属性的元素都变成可编辑状态，designMode默认是false。

在js代码中只能修改整个HTML页面的designMode属性（body）。

(3).hidden属性：

支持true、false两个值，一旦包某个HTML元素的hidden设为true，就意味着通知浏览器不现实该组件，浏览器不会保留该组件所占用的空间。此实行可以代替css样式单中的display属性，设置hidden为true相当于在css中设置display：none；

(4).spellcheck属性：

HTML为input、textarea等元素增加了此属性，支持true、false两种属性值，如果设置true，浏览器将会负责对用户的输入的文本内容执行输入检查，如果检查不通过，浏览器会对平措的单词进行提示。

2.HTML5新增的文档结构元素：

(1).<article>:用于代表页面上独立的、完整的一篇“文章”，该元素表示的内容可以是一个帖子、一篇blog文章、一篇短文、一条完整的回复等。总之，只要是一篇独立的文档内容，就应该使用此元素，简单规则如下：

可使用header标签定义文章“标题”部分，可使用“footer”定义文章“脚注”部分。可使用多个section把文章内容分成几个“段落”，可嵌套多个article作为它的附属“文章”，比如一篇blog文章后面可以有多篇回复文章。

(2).<section>:用来对页面内容分块，建议此元素包含一个标题，可以包含多个article元素，表示该“分块”内容包含多篇分块文章，此元素也可以嵌套section元素，用来包含多个“子分块”。

（div元素只是一个通用的容器，而section元素则是一个负责“分块”的HTML组件）。

（article和section这两个元素很容易混淆，因为他们都可以包含很多子元素，而且可以互相嵌套，但article和section的侧重点不同：article侧重于表达一段独立的、完整的文章，而section则侧重于对页面内容进行分块，换句话说，如果想表达一段独立的、完整的文章，则用section；如果想把一块内容分为几个部分，则应该使用section元素）。

(3).<nav>:该元素专门用于定义页面上的“导航条”，包括页面上方的“主导航条”，侧边的“边框导航”、页面内部的“页面导航”、页面下方的“底部导航”等，html5推荐将这些导航链接分别放在相应的nav元素中进行管理。

(4).<aside>:专门用于定义当前页面或当前文章的附属信息，通常来说，推荐aside元素使用css渲染成侧边栏。

将此元素放在body内部，表明为整个页面添加“边栏”；放在其他父元素内部，表明为父元素添加“边栏”。

(5).<header>:定义文章“头部”信息，该元素内部可包含多个标题元素，也可包含hgroup元素，还可以包含普通的p、span等元素。

(6).<hgroup>:用于组织多个标题元素，当header不要包含多个标题元素时，可以考虑使用hgroup把他们组成一组。

(7).<footer>:定义“脚注”部分，包括版权信息、作者授权信息等。

(8).<figure>:表示一块独立的“图片区域”，该元素内部可包含一个或多个img元素所代表的图片。初次之外，还可包含一个figcaption（最多只能包含一个），用于定义该“图9片区域”的标题。

(9).<figcaption>:通常放在figure内部，用于定义“图片区域”的标题。

3.HTML5新增的语义相关元素：

(1).<mark>:用于显示页面中需要重点“关注”的内容，浏览器通常会用黄色显示mark标识的内容。（此元素非常适合用于“高亮显示”全文检索时的关键字）

(2).<time>:用来显示被标注的内容分是日期，时间或者日期时间

4. HTML5新增的两个特殊功能的元素：

(1).<meter>:用于表示一个已知最大值和最小值的技术仪表，比如电池电量、速度表等。

(2).<processs>:用于表示一个进度条，可指定如下属性：

max：指定进度条完成时的值。

value：指定进度条当前完成的进度值。

5.HTML5头部和元信息：

使用<head../>元素可以定义HTML文档头，该元素可以包含如下子元素。

(1).<script>：用于包含js脚本。

(2).<style>:定义内部css样式。

(3).<link>:链接外部css样式资源。

(4).<title>：定义文档标题。

(5).<base>:用于指定该页面中所有链接的记住链接。

此元素必须是空元素，可指定一下两个属性：

href：指定所有链接的基准链接。

target：指定超链接默认在哪个窗口打开链接。该属性值只能是_blank,_parent_self和_top。

(6).<meta>:用于指定该页面中的元数据。

定义元数据也就是指定一些name-value对，还可以指定一下属性：

http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。支持的值主要有：

Expiress：指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。

Pragma：指定禁止I浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面。content=“no-cache”；

Refresh：指定浏览器多长时间后自动刷新指定页面，例如：

<meta http-equiv="Refresh" content=“5" /> //设置五秒后自动刷新本页面

<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" /> //设置两秒后自动刷新百度页面

Set-Cookie：设置Cookie，如果网页过期，那么客户端上的cookie也将被删除。

Content-Type：设置该页面的内容类型和所用的字符集。

name：指定元信息的名称，该属性值可以随意指定，比如作者，版权，关键字等。（为网页指定有效的关键字有利于搜索引擎收录本站点）

content：指定元信息的值。