声明

HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准，而是形成了自己的一套标准

        

          
            
            HTML
          
          
        

        

          
1234567891011

          # HTML5 文件类型声明
<!DOCTYPE html>

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

语义化结构标签 2010 年以前，我们都是一个 div 走到底，2010 年HTML5 的语义化标签的出现，让开发者更容易读懂代码

HTML4 HTML5
<div class="header"> <header />
<div class="footer"> <footer />
<div class="menu"> <nav />
<div class="content"> <section />
<div class="aside"> <aside />
<div class="article"> <article />

多媒体标签

        

          
            
            HTML
          
          
        

        

          
12345678910111213141516

          <!-- 音频 -->
<audio autoplay="autoplay" controls="true" loop=2>
  <source src="" type="audio/mp3">
</audio>

<!-- 视频 -->
<video src="" autoplay="autoplay" controls="true">
  <source src="" type="video/mp4">
</video>

<!-- 
 source 表示源文件其中 type 可以指定类型
 src 表示音频文件的地址 可以是相对路径，也可以是绝对路径
 autoplay 自动播放
 controls 显示控制栏
-->

新增 input 类型以及属性 在 HTML4.01 中，input 标签的 type 类型只有 text , button , password , submit , radio , checkbox , hidden , HTML5 新增了一些类型，让开发更加方便

        

          
            
            HTML
          
          
        

        

          
123456789101112131415161718192021222324252627282930313233

          <!-- 此类型要求输入格式正确的email地址 -->
<input type="email" >

<!-- 要求输入格式正确的URL地址  -->
<input type="url" >

<!-- 要求输入格式数字，默认会有上下两个按钮 -->
<input type="number" >

<!-- 时间系列，但目前只有 Opera和Chrome支持 -->
<input type="date" >
<input type="time" >
<input type="datetime" >
<input type="datetime-local" >
<input type="month" >
<input type="week" >

<!-- 颜色 -->
<input type="color" >
<!-- placeholder:默认占位文字 autofacus:默认聚焦属性 -->
<input type="text" placeholder="please input" autofocus="true" >

<!-- autocomplete 属性规定输入字段是否应该启用自动完成功能 on为打开 off为关闭 -->
<input type="text" autocomplete="off" >

<!-- 正则验证 pattern -->
<input type="text"  pattern="[A-Z]{3}" />

<!-- 只写属性名默认true -->
<input type="checkbox"  checked />

<!-- 属性名="属性名"也为 true -->
<input type="checkbox"  checked="checked" />

这里要特别介绍一个和 input 标签搭配的标签 datalist，这个标签和 select 下拉非常相似，唯一的区别是这个标签只是给 input 提供一个提示的功能，你也可以输入在 datalist 中不存在的内容

**用法：**通过给 input 一个 list 属性，然后再 datalist 中定义一个 id ，这个 id 值为 input 中 list 的值

        

          
            
            HTML
          
          
        

        

          
12345

          <input list="keywords" />
<datalist id="keywords">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
</datalist>

新增图形绘画标签

        

          
            
            HTML
          
          
        

        

          
12345678910111213141516

          <html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script>
	// 绘制一个简单的矩形
	var canvas=document.getElementById('canvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#FF0000';
	ctx.fillRect(0,0,80,100);
    </script>
  </body>
</html>

新增存储 localStorage , sessionStorage

它们都是用来存储客户端临时信息的对象，并且只能存储字符串类型的对象

localStorage: 生命周期是永久，除非用户清除 localStorage 中的信息，否则这些信息将永远存在

sessionStorage: 生命周期为当前窗口或者标签页，一旦窗口或者标签页被关闭，那么通过 sessionStorage 存储的数据也将被清空