谈谈html5新增的元素及其他功能
Posted 树叶铃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谈谈html5新增的元素及其他功能相关的知识，希望对你有一定的参考价值。
相信大家一开始学习web时看到html5就自然想到html，就算也没学过html，就好像听闻过小米2s就自然也熟悉小米3红米。不管是技术还是产品都是站在前辈的肩膀上发展起来的，正因此若是熟悉html，对于html5的学习就相当于在html这个容器里继续扔新的东西进去，哈哈哈，好像废话多了。
目前，web已经悄然引来html5的时代了，下面揭晓html5成功背后的面纱。
1.首先，html5语法发生了什么变化？！
1.1内容类型（祖宗不变）
扩展名：.html或htm
文件类型：text/html
1.2DOCTYPE声明的简化
从繁琐的声明：<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtmll/DTD/xhtnll-transitional.dtd">
敲完之后我自己都晕了，别怕以后html5不会让你晕了，现在声明只需要这样：
<!DOCTYPE html>
更重要的是html5在使用工具时还可以加入SYSTEM识别符
<!DOCTYPE html SYSTEM"">
1.3指定编码字符
不仅可以使用原来的指定方式<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
还可以使用简化版<meta charset="UTF-8"/>
2.兼容html的处理
2.1可省略的标记
---不允许写结束标记，</>形式不可以写成<></>(br还可以<br>)
这样的元素有 area base br col command embed hr img input keygen link meta param source track wbr
---可以省略结束标记:li dt dd p tr optgroup option colgroup thead tbody tfoot tr td th-----建议不要省略，语法没错，但会影响文本的效果。
---都省略的有：html head body colgroup tbody
(colgroup在上面的两项都出现，本人也费解)
2.2具有布尔值属性---真假问题这里就不码了，可以参考贺春雷《html+css+javascript》
3.新增的元素
网页设计的分层，之前都是用<div>,设置ID属性指定功能，现在直接用属性值当做一个元素，设置它的功能，道理很简单，既然都可以到达目的地，那何必要选择弯路。
例如<header>代替<div id="header">
header--显示头部信息
article---定义独立内容，常用于用户评语或博客条目
<div> <p>当时间在你的回忆里流逝时...</p> </div> <article style="border:1px solid blue;"> <p>我们慢慢苏醒</p> </article>
section---节，例如文章的章节、页眉、页脚等，该标记中还新增一个cite属性，引用资源的URL
nav---导航链接，在一个html中可以有多个nav
<nav> <a href="#">首页 </a> <a href="#">图片 </a> <a href="#">视频 </a> </nav>
hgroup---适用于多标题文档，对标题进行组合，可以理解hgroup相当一个容器，里面包含有正副标题
footer---眉脚，页面底部，footer元素内使用address元素
4.新增的块级语义元素
aside定义所处的内容之外的内容，但与附近内容有关（注释、引用、提示）
figure 定义媒介内容
dialog定义对话框或窗口，带有open属性，跟用户互动
5.行内语义元素
mark元素标记，相当于荧光笔在纸上标记文字
time元素定义时间（24小时制）、日期
meter元素定义度量衡
process元素定义运行中的进度
6.其他新增元素
video、audio、source、embed、canvas、bdi、command、datalist、details、keygen、output、rp、rt、ruby、track、summary
暂时写到这里，首次发博不足之处欢迎强烈砸砖~
以上是关于谈谈html5新增的元素及其他功能的主要内容，如果未能解决你的问题，请参考以下文章