HTML5中新增的布局标签、新增的其他标签、新增标签HTML5兼容、HTML5已移除的标签、新增多媒体标签

HTML5中新增的布局标签

html 1990 html4.0.1 1997 html5 2008 稳定版 2012年

新增的结构标签 （更加语义化）

• header标签

  • <header>这里是头部区</header>
    

• footer标签

  • <footer>这里是页脚区</footer>
    

• main标签

  • <main>这里是主体区</main>
    

• nav标签

  • <nav>
        <a>首页</a>
        <a>关于我们</a>
        <a>联系我们</a>
    </nav>
    

• article标签

  • <article>这里是一个有完整含义的内容区</article>
    

• section标签

  • <section>
        <h2>标题一</h2>
        <p>内容区域</p>
    </section>
    <section>
        <h2>标题二</h2>
        <p>内容区域</p>
    </section>
    

• aside标签

  • <aside>这里是侧边栏</aside>
    

• 新增结构标签优点：
  1.代码清晰
  2.不用起类名
  3.更加语义化【易于开发和维护】

  • <header>
        头部      <!-- 头部标签，块级 -->
    </header>
    <nav>
        导航
    </nav>
    <main class="clearfix">
        <aside>侧边栏</aside>
        <article>
            完整的内容区域
            <section>
                <h3>标题</h3>
                <p>段落</p>
            </section>
            <section>
                <h3>标题</h3>
                <p>段落</p>
            </section>
        </article>
    </main>
    <footer>
        这里是底部
    </footer>
    

新增的其他标签

• figure标签
  • figure标签规定独立的流内容（图像、图表、照片、代码等等）。
  • figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

  • <figure>
        <figcaption>hgygtuhytj</figcaption>
        <img src="./1.img" alt="">
        <p>
            hello world
        </p>
    </figure>
    

• mark标签

  • <p>今天天气<mark>晴朗</mark></p>
    <!-- 自带黄色背景色 --!>
    

• time标签

  • <time datetime="2019-02-19">元宵节</time>
    <! --- 易于爬虫抓取关键字 -- !>
    

• progress标签
  • progress 标签标示任务的进度（进程）。

  • <progress value="30" max="100"></progress>
    

• meter标签
  • | 属性 | 属性值 | 说明 |
    | ------- | -------- | ------------------------------------------------------------ |
    | high | number | 定义度量的值位于哪个点，被界定为高的值。 |
    | low | number | 定义度量的值位于哪个点，被界定为低的值。 |
    | max | number | 定义最大值。默认值是 1。 |
    | min | number | 定义最小值。默认值是 0。 |
    | optimum | number | 定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。 |
    | value | number | 定义度量的值。 |

  <meter max="100" min="0" high="90" low="20" optimum="19" value="93"></meter>
  

新增标签HTML5兼容

• 方案一：使用javascript新增元素的方法解决
  • document.createElement(“header”);
  • document.createElement(“footer”);

  • header, footer{
        display:block;
    }
    

• 方案二：使用封装好的插件html5shiv.js解决兼容性问题

  • <script type="text/javascript" src="./html5shiv.js"></script>
    

HTML5已移除的标签

• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• noframes
• strike

•   <big>你好</big>
    <center>你好</center>
    <dir>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </dir>
    <strike>你好</strike>
    <font size='50' color='red'>你好</font>
  

新增多媒体标签

• audio标签

  •     <!-- 
        src 文件路径
        controls 调用浏览器默认插件
        loop 循环播放
        muted 默认静音
        autoplay 自动播放 【高版本webkit内核不支持自动播放】
     -->
    <audio src="videoAudio/hanmai.mp3" controls="controls"></audio>
    

  • 浏览器支持
    • ie8不支持audio标签
  • HTML5支持的音频格式
    • Ogg      audio/ogg 支持的浏览器：Chrome、Firefox、Opera10+
    • MP3     audio/mpeg 支持的浏览器：Chrome、Firefox、Opera10+、IE9+、Safari5+
  • audio标签相关的属性
    • src属性规定要播放的音频/视频的URL
    • controls属性规定浏览器应该为音频/视频提供播放控件
    • loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
    • muted属性规定要播放的音频/视频为静音

• video标签

  •   <video src="./media/Butter-Fly.mp4" controls="controls" width="300" height="300"
    loop muted autoplay poster="1.jpg"></video>
    

  • 浏览器支持

  • ie8不支持video标签

• HTML5支持的视频格式

  • Ogg ：支持的浏览器：Firefox、Chrome、Opera
  • MEPG4：支持的浏览器：Safari、Chrome、IE9+、Firefox
  • WebM：支持的浏览器：Firefox、Chrome、Opera

• video标签相关的属性

  • src属性规定要播放的音频/视频的URL
  • controls属性规定浏览器应该为音频/视频提供播放控件
  • autoplay如果出现该属性，则视频在就绪后马上播放。
  • loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
  • muted属性规定要播放的音频/视频为静音

• 只属于video标签的属性

  • width属性规定视频播放器的宽度

  • height属性规定视频播放器的高度

  • <video src="butterfly.ogg" width="400" height="400"></video>
    

  • poster预览图片

  • <video src="butterfly.ogg" controls width="200" poster="pic.png"></video>
    

• source标签

  • 为媒介元素（比如video和audio）定义媒介资源

  • <video controls="controls" width="300">
           <!-- source 增加容错率，当第一个不生效时，会看第二个生不生效
        type="video/mp4" MIME类型 在这里可以省略 -->
    	<source src="movie.ogg" type="video/ogg">
        <source src="movie.mp4" type="video/mp4">
        <! --您的浏览器不支持video元素播放视频 --!>
    </video>
    

  • src属性规定要播放的音频/视频的URL

  • type属性规定媒体资源的MIME类型

  • 注意：source元素可以链接不同的音频/视频文件，浏览器将使用第一个可识别的格式

新增表单元素

新增input类型

• url

  • <input type="url" name="myurl">
     <!-- https://或http://开头 -->
    

• email

  • <input type="email" name="usremail">
     <!-- @开头 -->
    

• search

  • <input type="search" value="在这里搜索">
    

• number

  • <input type="number" value="10" min="0" max="20" step="2"/>
      <!-- 数字类型 step='n' 代表输入的必须是n的倍数 -->
    

• range

  • <input type="range" name="range" min="0" max="10" value="5" step = "2">
     <!--  滑动条（进度条） -->
    

• color

  • <input type="color">
    

• date

  • <input type="date">
       <!--  年、月、日 -->
    

• datetime-local

  • <input type="datetime-local">
           <!--  年、月、日、时、分 -->
    

• month

  • <input type="month">
           <!--  年、月 -->
    

• time

  • <input type="time">
      <!-- 时、分  -->
    

• week

  • <input type="week">
           <!--  年、周 -->
    

• datalist标签

  • <input type="text" list="cars">
    <input type="text" list="cars">
    <datalist id="cars">
        <option value="WEB"></option>
        <option value="ASD"></option>
    </datalist>
    <!-- input 的 list 属性和 datalist标签的id属性对应 -->
    

新增表单属性

• min、max和step属性

• placeholder属性

  • <input type="text" placeholder="请您输入">
    

• autofocus

  • <input type="text">
    <input type="text" autofocus>
     <!-- autofocus 默认获得鼠标焦点 -->
    

• form属性

  • <form action="" id="form1">
    	<input type="text" name="username">
    </form>
    <input type="reset" form="form1">
     <!-- form 属性可以使外部的表单标签加入到form表单中，表单的form属性对应form标签的id-->
    

• required属性

  • 规定必须在提交之前填写输入域（不能为空）

  • <input type="text" name="username" required>
    

• pattern属性

  • <input type="text" name="username" pattern="[0-9]">
    <!--  pattern 正则表达式校验--> 
    

• multiple属性

  • <input type="file" multiple>
      <!--  multiple 设置可以多选--> 
    

• list属性

  • <input type="url" list="urlList" name="weblink">
    <datalist id="urlList">
        <option label="百度" value="http://www.baidu.com"></option>
        <option label="新浪" value="http://www.sina.com"></option>
        <option label="搜狐" value="http://www.sohu.com"></option>
    </datalist>