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">