一、HTML5是什么
1.HTML5 的概念与定义
定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML
两个概念:
是一个新版本的 HTML 语言,定义了新的标签、特性和属性
拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
2.HTML5 拓展了哪些内容
-
语义化标签
-
本地存储
-
兼容特性
-
2D、3D
-
动画、过渡
-
CSS3 特性
-
性能与集成
3.HTML5 的现状
绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,
总的来说:HTML5 已经是大势所趋
4. HTML5舍弃的标签
-
标 签 说 明 basefont 定义页面文本的默认字体、颜色或尺寸 big 定义大字号文本 center 定义文本居中 font 定义文本的字体样式 strike 定义删除线文本 s 定义删除线文本 u 定义下划线文本 dir 定义目录列表,应该用ul代替 acronym 定义首字母缩写,应该用abbr代替 applet 定义嵌入的applet,应该用object代替 noframes 为那些不支持框架的浏览器显示文本 frame 定义frameset中的一个特定的框架
二、HTML5新增的标签
1.什么是语义化
语义化
优点:
- 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析,如盲人阅读器根据语义渲染网页
- 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
标签 | 含义 |
---|---|
header | 页眉通常包括网站标志、主导航、全站链接以及搜索框 |
nav | 标记导航,仅对文档中重要的链接群使用 |
main | 页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能 |
article | 定义外部的内容,其中的内容独立于文档的其余部分 |
section | 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分 |
aside | 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等 |
footer | 页脚,只有当父级是body时,才是整个页面的页脚 |
title | 页面主体内容 |
hn | h1~h6,分级标题, 与 |
ul | 无序列表 |
li | 有序列表 |
small | 呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权 |
em | 将其中的文本表示为强调的内容,表现为斜体 |
strong | 和 em 标签一样,用于强调文本,但它强调的程度更强一些 |
mark | 使用黄色突出显示部分文本 |
figure | 规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin |
figcaption | 定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置 |
abbr | 简称或缩写 |
address | 作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接) |
2.新增了那些语义化标签
header
— 头部标签nav
— 导航标签article
— 内容标签section
— 块级标签aside
— 侧边栏标签footer
— 尾部标签
3.使用语义化标签的注意
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在
IE9
浏览器中,需要把语义化标签都转换为块级元素 - 语义化标签,在移动端支持比较友好,
- 另外,
HTML5
新增的了很多的语义化标签,随着课程深入,还会学习到其他的
三、H5新特性
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 离线应用 manifest
- 桌面通知 Notifications
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
- 地理位置 Geolocation
- 多任务 webworker
- 全双工通信协议 websocket
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- 页面可见性改变事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 对象
- 绘画 canvas
四、新增 input 标签
属性 | 说明 |
---|---|
type=“email” | 限制用户输入必须为email类型 |
type=“url” | 限制用户输入必须为url类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“month” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
五、新增表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示器其内容不能为空,必填 |
placeholder | 提示文本(占位符) | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
multiple | multiple | 可以多选文件提交 |
六、多媒体音视频标签
1.video 视频标签
-
目前支持三种格式
-
<video src="src/video/one.mp4" controls="controls"></video>
2.video 参数
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(chrome浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户展示播放控件 |
width | px(像素) | 设置播放器宽度 |
height | px(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto,none | 规定是否预加载视频,若有autoplay则忽略该属性 |
src | url | 视频url地址 |
poster | Imgurl | 加载等待的画图图片 |
muted | muted | 静音播放 |
3.audio 标签
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(chrome浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户展示播放控件 |
loop | auto,none | 播放完是否继续播放该视频,循环播放 |
preload | 规定是否预加载视频,若有autoplay则忽略该属性 | |
src | url | 视频url地址 |
poster | Imgurl | 加载等待的画图图片 |
4.audio常用的控制函数
属性 | 值 |
---|---|
load() | 加载音频、视频软件 |
play() | 加载并播放音频、视频文件或重新播放暂停的音频、视频 |
pause() | 暂停处于播放状态的音频、视频文件 |
canPlayType(obj) | 测试是否支持给定的mini类型的文件 |
5.多媒体标签总结
-
音频标签与视频标签使用基本一致
-
多媒体标签在不同浏览器下情况不同,会存在兼容性问题
-
chrome浏览器把音频和视频标签的自动播放全都禁止了
-
chrome浏览器中视频添加
muted
标签可以自己播放