1.2-7html5

HTML5

HTML5 简介

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。

H5 新变化

XHTML 可扩展超文本标记语言(h5的基础)
XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。

HTML5

• HTML5的设计目的是为了在移动设备上支持多
  媒体。
• 增加了新特性：语义特性，本地存储特性，设
  备兼容特性，连接特性，网页多媒体特性，三
  维、图形及特效特性，性能与集成特性，CSS3 特性。
• 废弃一些元素和属性比如 font 、center 等…

HTML5优势、劣势

HTML5 优势

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素(视频和音
  频)
• 可以很好的替代FLASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于
  SEO很友好；
• 将被大量应用于移动应用程序和游戏
• 可移植性好

HTML5 劣势

• 该标准并未能很好的被PC端浏览器所支持
• IE9以下的浏览器几乎都不兼容

HTML5前景趋势

• 移动开发优先
• 游戏开发

广义的HTML5

• 狭义的 HTML5 是指 HTML 语言的第 5 个版本。
• 而广义的 HTML5 是 HTML5本身 + CSS3 + JavaScript 技术的综合。

HTML5 新增语义化标签

标签语义化

以前制作网页布局，我们基本用div 来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。

新增语义化标签

• <header>：头部标签
• <nav>：导航标签
• <main>: 主体标签
• <article>：独立的内容标签
• <section>：区段标签
• <aside>：侧边栏标签
• <footer>：尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎的
• 这些新标签页面中可以使用多次的
• 在IE9中，需要把这些元素转换为块级元素
• 其实移动端更喜欢使用这些标签
• HTML5 还增加了很多其他标签，我们后面再慢慢学
• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

HTML5 新增多媒体标签

多媒体标签包含两个，具体如下：

• 音频：<audio>
• 视频：<video>
  使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。

<audio>音频标签

HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。
音频格式

格式	MIME-type	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg	audio/ogg		√	√	√
MP3	audio/mpeg	√			√	√
Wav	audio/wav		√	√		√

<audio>音频标签语法格式

<audio src="文件地址" controls="controls"></audio>
h5中如果标签的属性名和属性值是一样的，那么可以省略属性值不写
<audio src="文件地址" controls></audio>

兼容写法：
为了更好的兼容所有浏览器，可以使用兼容写法
用MP3和ogg格式覆盖所有浏览器，如果实在不支持，则会显示文字提示

<audio controls="controls">
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="media/snow.ogg" type="audio/ogg">
    您的浏览器不支持音频播放
</audio>

<audio>音频标签常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载(不设置此属性，则音频不点击播放是不会加载的)，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

<video>视频标签

HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的。

格式	MIME-type	IE	Firefox	Opera	Chrome	Safari
Ogg	video/ogg	×	3.5+	10.5+	5.0+	×
MP4	video/mp4	9.0+	×	×	5.0+	3.0+
WebM	video/webm	×	4.0+	10.6+	6.0+	×

<video>视频标签语法格式

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

兼容写法
和音频文件类似

<video controls="controls">
    <source src="media/snow.mp4"type="video/mp4">
    <source src="media/snow.ogg"type="video/ogg">
    您的浏览器不支持视频播放
</video>

<video>视频标签常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决不会自动播放问题）
controls	controls	向用户显示播放控件
loop	loop	放完是否继续播放该视频，循环播放
preload	auto（预先加载视频）none（不应加载视频）	规定是否预加载视频(如果有了autoplay 就忽略该属性）
src	url	视频url地址
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

总结

• 音频标签和视频标签使用基本一致
• 浏览器支持情况不同
• 我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以
• 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件。

HTML5 新增表单标签

输入标签

h5 新增<input>表单类型

属性值	描述
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“range”	滑动条
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

数字type=“number”：
<input type="number" max="100" min="2" step="4" value="3">
type="number"中可以设置一些别的属性值：
max表示最大输入值，min表示最小输入值，step表示每2一步调整几个数，value表示默认值。
type="range"也有这些属性
<input type="range" max="100" min="2" step="4" value="3">

<datalist>标签

• <datalist>标签规定了<input>元素可能的选项列表。
• <datalist>元素包含了一组<option>元素，这些元素表示预定义的可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
• 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。

城市:<input type="text" list="list1">
    <datalist id="list1">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>  
      <option value="北京">bj</option>    
    </datalist>

也可以进行单标签书写：

城市:<input type="text" list="list1">
    <datalist id="list1">
      <option value="广州">
      <option value="深圳">  
      <option value="北京">    
    </datalist>

新增表单属性

新增表单属性

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

autocomplete:
搜索：<input type="search" autocomplete="on" name="sousuo">