超级实习生笔记打卡—HTML5新标签-结构标签、表单元素、媒体标签

新结构标签

HTML5新添加的结构标签本质上都是div元素，由于许多开发者都以这些单词命名且相同，所以官方统一命名，便于他人理解，同时也可方便信息抓取。

新的表单元素

用法：

    <form action="http://www.baidu.com">
        <input type="text" placeholder="请输入内容">
        <br>
        <input type="date">
        <br>
        <input type="time">
        <br>
        <input type="email" name="user-email">
        <br>
        <input type="url">
        <br>
        <input type="number" value="0" min="-10" max="10">
        <br>
        <input type="range" min="-10" max="10">
        <br>
        <input type="submit">
    </form>

 显示结果如图：

 

注意：

• 第4行代表email元素，如果输入格式不对的邮件地址，点击提交按钮时会提示错误，如：

 

• 第5行代表URL元素，如果输入格式不对的URL地址（包含解析协议，如http://），点击提交按钮时会提示错误
• 
  第6行代表number元素，可以设置最大最小值，鼠标移动到上面可以点击上下键按钮（图中未显示），不得超过指定范围
• 
  range元素需要设置最大最小值和初始值，不会显示数字，后期可以配合JavaScript加span标签显示获取到的值

  新的媒体标签

  媒体标签主要有三个：

  1、 audio 音频标签（src controls autoplay loop muted）

  用法：

<audio src="C:\Users\huang\Music\周杰伦 - 晴天.mp3" controls></audio>

元素介绍：

src ：表示媒体资源，需要注意不同的浏览器所能识别的媒体资源不同，需要不同的后缀名的文件，如音频文件格式有.mp3，.ogg，.wav，.wma，按需选择
controls ：显示控件，也就是暂停、进度条、音量等内容
autoplay：媒体自动播放 （注意：Chrome新版本因为一些原因屏蔽了autoplay功能，需要用js主动打开）
loop：媒体循环播放
muted：媒体初始化为静音模式，用户需要手动开启音量
2、video 视频标签（src controls autoplay loop muted）
用法：

<video src="vide01.mp4" controls autoplay></video>
1
元素介绍：同音频标签

3、source 资源 （src type）
用法：
 

<audio controls autoplay loop muted>
	<source src="audio1.mp3" type="audio/mp3">
    <source src="audio1.wav" type="audio/wav">
    <source src="audio1.ogg" type="audio/ogg">
</audio>

<video src="vide01.mp4" controls autoplay>
	<source src="video.mp4" type="audio/mp4">
    <source src="video.webm" type="audio/webm">
</video>

 

source标签用于给同一个音频/视频标签添加不同后缀名的资源，可以有多个，浏览器按顺序搜索可以识别的资源，这样就可以避免因浏览器不同而导致的兼容性问题

元素介绍：

• src ：表示媒体资源
• type：该条source标签对应的资源类型、格式