html5学习笔记1---新增的元素

html5已经流行了很多年了，现在各大主流浏览器对它已经有了很好的支持，相对html4, 增加了很多属性用来替代之前的javascript脚本，比如一个元素在页面加载完之后自动获得焦点，只需要在元素中指定属性autofocus。除此之外，h5还具有三大特性：

• 兼容性：H5在老版本的浏览器也可以正常运行
• 实用性：只是封装了简单的功能，没有封装更复杂的
• 非革命性：h5的功能是发展性的。

h5解决的三个问题

1. web浏览器之间的兼容性很低，各大浏览器的规范不统一，导致同一段html/css/javascript在不同的浏览器上运行经常会出现意想不到的后果，h5的使命是详细分析各web浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。然后以这个标准来写代码，那么在各个浏览器都能正常运行了
2. 文档结构不明确，在h4中，想要表达复杂的层次结构，必须嵌套很深的
   
   ……
   ，这样会导致代码很臃肿且不好维护，在h5中，加了很多例如：header, section,article,aside,footer,nav等元素，这些元素表示页面的特定结构组成部分，使我们的代码清晰简洁可读性强。
3. web应用程序的功能受到了限制，h5与web应用程序的关系很薄弱，web程序一般是先从网络下载然后执行，因此为了安全起见，对会威胁到用户安全的功能进行限制，比如：想同时上传多个文件就不允许了。为了弥补这方面的不足，h5提供了很多新的api, 各大浏览器也封装着这些api, 使web应用程序变得更加丰富。

h5与h4的区别

语法的变化

h5中的标记方法

1. 内容类型(ContentType)
   扩展符仍是.html或.htm，内容类型仍是”text/html”

2. DOCTYPE声明
   h4:

h5:

3、指定字符编码
h4:

h5:

 
  
article元素
 article表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。示例：
 
  
 
   
…
 
 
在h4中 只能写
 
 
..

 
 
 
  
aside元素
 aside元素表示article元素的内容之外的、与article 元素内容相关的辅助信息，示例：
 
 
 
 
…
 
 
在h4中 只能写
 
 
..

 
 
 
  
header元素
 header元素表示页面中一个内容区块或整个页面的标题，示例:
 
 
 
 
…
 
 
在h4中 只能写
 
 
..

 
 
 
  
footer元素
 footer元素表示整个页面或页面中一个内容区块的脚注，一般包含制作这的姓名、创作日期等。示例：
 
 
 
 
…
 
 
在h4中 只能写
 
 
..

 
 
 
  
nav元素
 nav元素表示页面中导航链接的部分，示例：
 
 
 
 

 
 
在h4中
 
 

 
 
 
  
figure元素
 figure元素表示一段独立的流内容，把figure元素删除不会对文档流产生影响，示例：
 
 
 
 
 

        
告白气球
        
你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶
 
 
 
在h4中需要写：
 
 

       
告白气球
       
你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶

 
 
 
  
main元素
 main元素表示网页中的主要内容，示例
 
 
 
 
…
 
 
 
在h4中 只能写
 
 
...

 
 
新增的其他元素
 
 
 
  
video元素
 video元素用于定义视频，示例：
 
 
 
 
 
 
 
  
audio元素
 audio元素用于定义音频。示例：
 
 
 
 
 
 
 
  
embed元素
 embed 元素用来插入各种多媒体，格式可以是MIDI, Wav, AIFF, AU, MP3等，示例：
 
 
 
 

 
 
在h4中，需要些成：
 
 

 
 
 
  
mark元素
 mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用就是在搜索结果中向用户高亮显示搜索关键字。示例：
 
 
 
 

 
 
在h4中，需要写成
 
 

 
 
 
  
progress元素
 progress元素表示运行中的进程，可以使用progress来显示javascript中耗费时间的函数的进程，示例：
 
 
 
 

 
 
这个功能在h4中没有。
 
 
 
  
meter元素
 meter元素度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义，示例：
 
 
 
 

 
 
 
  
 
   
 
     
   
 
  
 
  

    70%的电池 
  
 
 
 
 
 
  
time元素
 time元素表示日期和时间，示例
 
 
 
 

 
 
在h4中
 
 

 
 
 
  
canvas元素
 canvas元素表示图形，比如图表或其他图像，这个元素本身没有行为，只是提供一块画布，把绘图的api给客户端的javascript使用，使脚本能把想绘制的东西画到画布上。示例：
 
 
 
 

 
 
在h4中：
 
 

 
 
 
  
command元素
 command元素表示命令按钮，比如单选按钮、复选框或按钮，示例：
 
 
 
 
 
  
details元素
 details元素表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用，summary 元素提供标题或图例，标题是可见的，当用户单机标题时，显示细节信息，示例：
 
  
 

   
蝴蝶恋
   蝴蝶翩翩徘徊山水之间 怎比春留恋莺莺燕燕

 
 
 
  
datalist元素
 datalist元素表示可选数据的列表，与input元素配合使用，可做输入输出值的下拉列表，示例：
 
 
 
 

 
 
 
  
keygen元素
 keygen 标签规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。示例：
 
 
  
output元素
 output表示不同类型的输出，比如脚本的输出，示例：
 
在h4中 
 
  
source元素
 标签为媒介元素（比如 
 
  
dialog
 表示对话框，就是弹出来的那种，示例：