HTML5-CSS3-JavaScript(2)

我们就从HTML5的基础总结起。希望可以提高自身的基础。

HTML5 新增的通用属性

1. contentEditable 属性

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

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

　　除此之外，HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性，当元素处于可编辑状态时，该属性返回true；否则返回false。

　　当用户编辑完成后，用户编辑的内容就会直接显示在该页面中（不要刷新页面，一旦刷新页面就会重新加载，编辑的内容会丢失），开发者可以通过该元素innerHTML属性获取编辑后的内容。

2. designMode 属性

　　designMode 属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所可支持contentEditable属性的元素都变成可编辑状态；designMode属性默认为off。在JavaScript代码中只能修改整个HTML页面的designMode属性。

　　　　document.designMode = "on";

3. hidden 属性

　　HTML5为所有元素都提供了一个hidden属性，这个hidden属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。

4. spellcheck 属性

　　HTML为<input.../>、<textarea.../>等元素增加了spellcheck属性。该属性可支持true、false两个属性值，如果设置spellcheck="true"，浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过，浏览器会对拼错的单词进行提示。

HTML5 新增的常用元素

　　为了更好地表达HTML的文档结构、文档语义，HTML5也新增了大量元素，这些元素更好地丰富了HTML文档语义。

1. 文档结构元素

　　在HTML5以前，HTML页面只能使用<div.../>元素作为结构元素，而HTML5则提供了<article.../>、<section.../>、<nav.../>、<aside.../>、<header.../>、<footer.../>等文档结构元素。下面先简单列出这些元素的概要功能。

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

　　　　<article.../>元素内部可使用<header.../>定义文章“标题”部分。

　　　　<article.../>元素内部可使用<footer.../>定义文章“脚注”部分。

　　　　<article.../>元素内部可使用多个<section.../>把文章内容分成几个“段落”。

　　　　<article.../>元素内部可嵌套多个<article.../>作为它的附属“文章”，比如一篇Blog文章后面可以有多篇回复文章。

　　<section> 该元素用于对页面的内容进行分块。<section.../>元素通常也可由标题和内容组成。关于<section.../>元素的简单规则如下：

　　　　1. 通常建议<section.../>元素包含一个标题（也就是<h1.../>~<h6.../>元素定义的标题）。

　　　　2. <section.../>元素可以包含多个<article.../>元素，表示该“分块”内容包含多篇文章。

　　　　3. <section.../>元素可以嵌套<section.../>元素，用于表示该“分块”包含多个“子分块”。

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

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

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

　　<header> 该元素主要用于为<article.../>元素定义文章“头部”信息。该元素内部即可包含多个<h1.../>~<h6.../>这样的标题元素，也可包含<hgroup.../>元素，还可以包含普通的<p.../>、<span.../>等元素。

　　<hgroup> 该元素主要用于组织多个<h1.../>~<h6.../>这样的标题元素。当<header.../>需要包含多个标题元素时，可以考虑使用<hgroup.../>把它们组成一组。

　　<footer> 该元素主要用于为<article.../>元素定义“脚注”部分，包括该文章的版权信息、作者授权信息等。

　　<figure.../> 该元素用于表示一块独立的“图片区域”，该元素内部可包含一个或多个<img.../>元素所代表的图片。除此之外，该元素内部还可以包含一个<figcaption.../>元素，用于定义该“图片区域”的标题。

　　<figcaption> 该元素通常放在<figure.../>内部，用于定义“图片区域”的标题。

2. 语义相关元素

　　HTML5也提供了如下两个语义相关元素。

　　<mark> 用于显示HTML页面中需要重点“关注”的内容，就像我们看书时喜欢用荧光笔把某些重点内容标注出来一样。该元素可以指定id、style、class和hidden等通用属性。浏览器通常会用黄色显示<mark.../>标注的内容。

　　<time> 用来显示被标注内容时日期、时间或者日期时间。使用该元素时除了可以指定id、style、class和hidden等通用属性之外，还可以指定如下属性。

　　　　datetime 该属性主要用于向机器提供时间（向浏览者呈现的时间放在<time>和</time>之间），datetime属性的属性值应该符合yyyy-MM-ddTHH:mm格式的日期时间。当然，也可以只指定日期，或只指定时间。

3.两个特殊功能的元素

　　HTML5还新增了如下两个具有特殊功能的元素。

　　<meter> 用于表示一个已知最大值和最小值的计数仪表。比如电池的剩余电量、速度表等。使用该元素时除了可指定id、style、class、hidden等通用属性之外，还可以指定如下属性。

　　　　value 指定计数仪表的当前值。默认为0，可以为该属性指定一个浮点小数值。

　　　　min 指定计数仪表的最小值。默认为0，可以为该属性指定一个浮点小数值。

　　　　max 指定计数仪表的最大值。默认为1，可以为该属性指定一个浮点小数值。

　　　　low 指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。

　　　　high 指定计数仪表指定范围的最大值。该属性必须小于等于max属性指定的值。

　　　　optimum 指定计数仪表有效范围的最佳值。如果该值大于high属性指定的值，则意味值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。

　　　　progress 用于表示一个进度条。使用该元素时除了可指定id、style、class、hidden等通用属性之外，还可指定如下属性。

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

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