01篇 移动端网页开发---H5新增标签

目录

一、H5新增语义化标签

二、新增多媒体标签

2.1 audio音频标签

2.1.1音频格式

2.1.2 代码表示：

 2.1.3属性和属性值

2.1.4 解决兼容性问题代码

2.2video视频标签

 2.2.1属性

2.2.2解决兼容性问题

三、 H5新增input表单、表单属性

3.1 type属性

 3.2 其他属性

---

H5是对html的第五次重大修改

一、H5新增语义化标签

<header>头部标签</header>
<nav>导航标签</nav> 
<article>内容标签</article>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>

• 这些标签主要针对搜索引擎
• 他们可以在页面中多次使用
• 在IE9中需要把这些元素转换为块级元素，例如：

        

header,
nav,
section{
display:block;
}

•  移动端更倾向于使用这些标签

二、新增多媒体标签

2.1 audio音频标签

2.1.1音频格式

  当前，<audio>元素支持三种音频格式:

• Ogg Vorbis:不支持IE9，Safari3.0

• MP3：不支持Firefox3.5，Opera10.5

• Wav不支持IE9，Chrome3.0

2.1.2 代码表示：

<audio src="" controls="controls">音频文件</audio>

 2.1.3属性和属性值

属性	属性值	功能
control	controls	向用户显示播放控件
autoplay	autoplay	自动播放
loop	loop	播放完是否继续播放，循环播放

<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>

2.1.4 解决兼容性问题代码

<audio controls="controls" >
		<source src="happy.mp3" type="audio/mpeg">
		<source src="happy.ogg" type="audio/ogg">
		当前浏览器不支持audio
</audio>

2.2video视频标签

• Ogg Vorbis:不支持IE，Safari

• MP3：不支持Firefox，Opera

• Wav不支持IE，Safari

代码：

<video src="文件地址" controls="controls" autoplay="autoplay"></video>

 2.2.1属性

属性	属性值	功能
controls	controls	向用户显示播放控件
autoplay	autoplay	自动播放，（谷歌需要添加muted静音属性来解决自动播放问题 ）
loop	loop	播放完是否继续播放，循环播放
preload	auto|none	规定是否预加载视频如果有autoplay 就忽略该属性
poster	图片路径	加载等待的画面图片，视频为加载出来是先显示该图片
muted	muted	静音播放

<video src="文件地址" controls="controls" autoplay="autoplay" muted="muted"></video>
<video src="" poster="images/1.jpg">
</video>

2.2.2解决兼容性问题

<video>
	<source src="media/video.mp4" type="video/mp4"/>
    <source src="media/video.ogg" type="video/ogg"/>
    当前浏览器不支持video
</video>

注意：视频多数为MP4格式；经常设置自动播放，不使用controls控件，使用循环和设置大小属性

三、 H5新增input表单、表单属性

3.1 type属性

属性值	说明
type=“email”	限制用户输入必须为Eamil类型
type="url"	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入类型必须为数字类型
type=“tel”	shoujihaoma
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

代码演示：

<form action="">
    <ul>
        <li>
        	邮箱地址：<input type="email"/>
        </li>
          <li>
        	网址：<input type="url"/>
        </li>
         <li>
        	<input type="submit"/>
        </li>
         <li>
        	数字：<input type="number"/>
        </li>
         <li>
        	日期：<input type="date"/>
        </li>
         <li>
        	时间：<input type="time"/>
        </li>
         <li>
        	手机号：<input type="tel"/>
        </li>
         <li>
        	颜色：<input type="color"/>
        </li>
    </ul>
</form>

 3.2 其他属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过得值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”,关闭autocomplete=“off”。需要放在表单内同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交