HTML5新增的元素
-
结构元素
- section：内容块，用于分块使用，通常由标题与内容组成
- article：页面独立的内容，通常用于正文；可嵌套使用，可表示插件
- aside：article内容之外的区域，如评论区、引用区、广告区等
- header：头部区域，如页面头部，文章头部等
- hgroup：标题集合，如标题中包含正标题及子标题
- footer：底部区域，如页面底部，文章底部等
- nav：导航；如传统导航条、侧边栏、页内导航、翻页操作。
- figure：流内容，如瀑布流; 独立内容，移除对网页无影响
- form：html5的前提下，form下的从属元素可以在form外部，只需在外部的form从属元素中添加form属性，且该属性值等于对应form元素的id值即可。
<!-- 以上元素的综合应用示例 -->
<body>
<!-- hedaer作为页面头部使用 -->
<header>
<!-- hgroup的使用 -->
<hgroup>
<h1>正标题</h1>
<h2>副标题</h2></hgroup>
<!-- nav的使用 -->
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
</header>
<!-- article作为正文使用 -->
<article>
<!-- header作为正文头部使用 -->
<header>
<h1>article</h1>
<!-- aside作为正文头部的文章概要使用 -->
<aside>
这是概要
</aside>
</header>
<!-- section作为文章内区块的使用 -->
<section>
<h2>红富士</h2>
<p>这是一个苹果品牌</p>
</section>
<section>
<h2>红富士</h2>
<p>这是一个苹果品牌</p>
</section>
<section>
<h2>红富士</h2>
<p>这是一个苹果品牌</p>
</section>
<!-- footer作为文章结尾使用 -->
<footer>
这是页面结尾
</footer>
</article>
<!-- aside作为正文相关的评论区域使用 -->
<aside>
<!-- header作为评论区的头部使用 -->
<header>
作者
</header>
<p>评论</p>
<!-- footer作为评论区的尾部使用 -->
<footer>
时间
</footer>
</aside>
<!-- article作为插件嵌套使用 -->
<article>
<header>
<h1>这是一个嵌入内容,嵌入本页所有内容</h1>
</header>
<embed src="#" height="300" width="500">
</article>
<!-- aside作为广告区域使用 -->
<aside>
<!-- 广告的提交表单 -->
<form id="html5form">
<!-- 表单元素在form外面 -->
</form>
<!-- id为html5form的表单外部的input元素 -->
<input type="text" form="html5form">
</aside>
<!-- footer作为页面尾部使用 -->
<footer>
这是页面尾部
</footer>
</body>
-
其它元素 （此处只记录重要部分）
- video：视频
- audio：音频
- canvas：画布；一个图形容器，必须使用脚本(js)来绘制图形
-
time：时间 与datetime属性配合使用，datetime属性值2016-10-17T21:30Z中T表示日期与时间的间隔符,Z表示时间为UTC格式.+09:00表示时区的调整。
格式1：<time datetime="2016-10-10">2016-10-10</time>格式2：<time datetime="2016-10-10T09:00">2016-10-10</time>格式3：<time datetime="2016-10-10T09:00Z">2016-10-10</time>格式4：<time datetime="2016-10-10T09:00+09:00">2016-10-10</time>
- address：联系人相关信息，如姓名，地址，联系方式等
<address>
Written by IOLG<br />
<a href="mailto:yidian.kong@qq.com">Email us</a><br />
Address: 中国,上海市,浦东新区<br />
Phone: +86 021-88888888
</address>
HTML5新增的属性
-
全局属性
- contentEditable：布尔类型，true表示允许用户修改内容；该属性有继承特性，若为声明值，则继承父属性值。注：元素须可获得焦点，否则无效。
- designMode：on/off，若为on，未定义contentEditable属性的元素将全部调整为可编辑状态；off反之；该属性只能通过JS添加修改。定义contentEditable属性的将根据contentEditable自身属性状态执行。
- hidden：隐藏区域，即通知浏览器加载时不渲染，等待JS相关操作后再做渲染。
- spellcheck：语法检查，如将该属性添加到input元素中，则该input元素具备输入语法检查功能。
- tabindex：索引元素，自定义tab按键的先后顺序（1为第一个）；正常情况下，除url类型元素及表单元素外，若需获取tab按键选择，须添加tabindex属性实现；若需添加tabindex属性但又不想立即生效，可将tabindex属性值修改为-1。
<!--以上属性的综合示例-->
<body>
<script>
function changeEditable(mode) {
//修改文档中的所有元素
document.designMode = mode;
alert(mode);
}
</script>
<h2>这是一个可编辑的列表</h2>
<!--可编辑的a元素，将失去打开链接的功能-->
<a href="#" contenteditable="true">tab</a>
<a href="#">tab</a>
<a href="#">tab</a>
<!-- contentEditable="true"可随便编辑ul中的所有内容; tabindex="1":按tab键后第一个获取到焦点-->
<ul contentEditable="true" id="firstUl" tabindex="1">
<!--hidden属性 隐藏整个元素,即下方整个li不会显示-->
<li hidden>列表1-内容1</li>
<!--spellcheck属性 applee单词拼写错误,将出现错误提示,提示方式与word相同-->
<li spellcheck>applee</li>
<li>列表1-内容3</li>
</ul>
<!-- 可随便编辑p&button中的所有内容 -->
<p contenteditable="true">这是一个编辑的段落</p>
<!-- onclick仍然不会失效 -->
<button contenteditable="true" onclick="javascript:alert('有效');">按钮也能编辑</button>
<!-- 无法编辑ul中的内容 -->
<ul contenteditable="false">
<li hidden>列表2-内容1</li>
<li spellcheck>列表2-内容2</li>
<li>列表2-内容3</li>
</ul>
<!--点击后未声明contentEditable属性的元素都可编辑，声明的根据声明定义执行-->
<button onclick="changeEditable('on')">将未定义contentEditeable属性的所有元素调整为可编辑模式</button>
</body>
-
time元素pubdate属性
明确含pubdate属性的time元素为发布日期，区分于其他不同时间
<h1>iphone7</h1>
<p>发布时间:
<!--通过pubdate声明发布时间-->
<time datetime="2016-10-10" pubdate>2016-10-10</time>
</p>
<p>舞会时间:
<time datetime="2016-10-12">2016-10-12</time>
</p>
-
表单内部元素属性（form从属属性）
-
formaction：自定义提交路径
<input type="submit" formaction="/xxx"> -
formmethod：自定义提交方法（GET、POST等）
<input type="submit" formmethod="POST"> -
formenctype：自定义编码方式
<input type="file" formenctype="multipart/form-data"> -
formtarget：自定义打开方式
<input type="submit" formtarget="_blank"> -
autofocus：通过添加该属性，自动获取光标焦点；若该属性存在多个，以第一个为准。
<input type="text" autofocus> - required：适合输入型元素，通过该属性，强制该元素提交时必须存在字符，否则进行提交操作时会提示"请填写此字段"并终止提交。
-
formaction：自定义提交路径
<form>
<input type="text" required>
<input type="submit" value="提交">
</form>
* ***labels***：多个label元素与一个其他表单元素如input组成一个集合；通过代码示例说明：
<label for="txt">张三</label>
<label for="txt">李四</label>
<input type="text" id="txt">
以上两个label都是属于同一个input，通过label元素的for属于与input元素的id属性相互关联；在js中，除了元素正常获取的方法外，还可以通过先获取input元素，然后通过input元素.labels[0]的方式访问label元素，labels为一个数组，以0开始从上往下依次索引。
<small>表单元素(共7个)：input、select、textarea、button、datalist、keygen、output (最后3个为HTML5新增的表单元素)。
HTML5新增的类型
-
input元素的新增类型
- email：email格式，若格式有误，输入时不提示，提交时错误信息
- url：url格式；格式输入有误不提示，提交时提示
-
number：数字类型，只能输入数字或科学计数法类型，有加减控件
<input type="number" value="20" min="-100" max="100" step="5"> - range：数字范围，默认为0-100范围内的可滑动控件，value值为初始位置，与number类型一样，可配合min，max，step属性使用
- date：日期类型，包含日历控件，可选择日期或日期逐步增减；显示方式：年/月/日
- datetime-local：日期时间类型，与date相同，只是多了时间；显示方式：年/月/日 小时:分钟
- month：月份时间类型；显示方式：年/月
- week：星期时间类型；显示方式： --年 第--周
- color：颜色选择器
<body>
<!--下方示例中，当color类型的input发生改变时，页面背景颜色及span的文本信息都将改变-->
<input type="color" onchange="document.body.style.backgroundColor = document.getElementById('currentColor').textContent = this.value;">
<span id="currentColor"></span>
</body>
