HTML5简介
狭义: HTML5狭义上指的是HTML语言的第五个版本。
广义: 广义上是HTML5+CSS3+JavaScript技术的综合。
概述:
HTML5设计的目的是为了我移动设备上支持多媒体。
HTML5增加了新特性:语义化标签、本地储存特性、设备兼容性、链接特性、网页多媒体特性、三维、图形、特效、性能、集成特效。
废弃了一些元素和属性如:font、center ...
优势:
1. 提高可用性、改进用户的友好体验。
2. 更好的语义化标签。
3. 可以给站点带来更多的多媒体元素(视频、音频。
4. 可以很好地替代flash。
5. 更加友好的支持SEO,语义化的标签和其他设置有利于网站的抓取和索引。
6. 被大量的应用于移动端程序和游戏。
7. 可移植性好。 可以实现各个平台终端的移植使用。
劣势:
1. 该标准并未很好地 被PC端浏览器所支持。
2. IE9以下的浏览器几乎不兼容。
H5新增语义化标签
主体框架语义化标签:
<header> :头部
<nav> :导航
<main> :主体
<article> :主体内容标签
<section> :区段标签。 类似div
<aside> :侧边栏
<footer> :尾部
···
多媒体标签
音频标签:<audio>
常见属性:
属性名: 属性值: 描述:
autoplay autoplay 自动播放
controls controls 显示控件
loop loop 循环播放
preload preload preload值设置在页面加载后载入音频,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 音频地址
书写方式:
<audio src="文件地址" controls></audio>
兼容写法:
添加多个音频资源。适配各版本浏览器。
<audio controls>
<source src="media/demo.mp3" type="audio/mpeg">
<source src="media/demo.ogg" type="audio/ogg">
</audio>
视频标签:<video>
书写方式:
<audio src="文件地址" controls></audio>
常见属性:
属性 值 描述
autoplay autoplay 视频在就绪后马上播放。
controls controls 向用户显示控件,比如播放按钮。
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。
loop loop 当媒介文件完成播放后再次开始播放。
preload auto预加载/none不预加载 视频在页面加载时进行预加载。 如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
poster imgurl 加载等待图片。 封面
muted muted 静音播放
兼容写法:
添加多个视频资源。适配各版本浏览器。
<video controls width="300px">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.ogg" type="video/ogg">
</video>
H5新增标签
输入标签
增加了input表单更多的语义的type类型: email、url、data、time、month、week、number、range、tel、search、color
浏览器会根据各type类型校验输入内容格式是否符合type类型并提醒用户重新填写。
<datalist>标签
规定了<input>元素可能的选项列表。
<datalist>标签包含了一组 <option>元素,预定义的可选项列表。
绑定的<input>标签必须设置list属性,list属性值等于<datalist>标签的id属性值。
表单属性
required 属性 规定必须在提交之前填写输入域(不能为空)。
placeholder 属性 属性值定义了input表单里面的默认提示用户输入信息的提示信息
autofocus 页面加载完自动聚焦到指定的表单
autocomplete 用户键入时浏览器会显示之前用户 成功提交过的历史记录
multiple 规定上传文件是可以多选