HTML5知识总结
HTML5
一、HTML5简介
1、什么是HTML5
-
HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟( W3C )完成标准制定。
-
官网地址:
W3C 提供: https://www.w3.org/TR/html/index.html
WHATWG 提供:https://whatwg-cn.github.io/html/multipage
-
HTML5 在狭义上是指新一代的 HTML 标准,在广义上是指:整个前端。
2、HTML5 优势
- 针对 JavaScript ,新增了很多可操作的接口。
- 新增了一些语义化标签、全局属性。
- 新增了多媒体标签,可以很好的替代 flash 。
- 更加侧重语义化,对于 SEO 更友好。
- 可移植性好,可以大量应用在移动设备上。
3、HTML5兼容性
支持: Chrome
、 Safari
、 Opera
、 Firefox
等主流浏览器。 IE 浏览器必须是 9 及以上版本才支持 HTML5 ,且 IE9 仅支持部分 HTML5 新特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
二、新增的语义标签
新增的布局标签
<header>
头部标签
<nav>
导航标签
<article>
文章、帖子、杂志、新闻等。
<section>
页面某段文字(通常包含标题)
<aside>
侧边栏标签
<footer>
尾部标签
<main>
文档的主要内容 ( WHATWG 没有语义, IE 不支持),几乎不用。
关于<article>
和<section>
artical
里面可以有多个section
。
section
强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section
元 素。
article
比section
更强调独立性,一块内容如果比较独立、比较完整,应该使用article
元素。
标签可以使用多次,IE9,需要把这些元素转换成块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header,nav{
width:900px;
height: 150px;
margin: 10px auto;
background: rebeccapurple;
text-align: center;
}
section{
width: 900px;
height: 400px;
background: red;
margin: 0 300px;
display: inline-block;
text-align: center;
}
aside{
width: 300px;
height: 350px;
background: lawngreen;
margin: 25px 10px;
text-align: center;
}
footer{
width:900px;
height: 150px;
margin: 10px auto;
background: blue;
text-align: center;
}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
section
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>
</html>
新增的状态标签
<mether>
定义已知范围内的标量测量。例如:电量、磁盘用量等。
常用属性:
属性 | 值 | 描述 |
---|---|---|
hight | 数值 | 规定高值 |
low | 数值 | 规定低值 |
max | 数值 | 规定最大值 |
min | 数值 | 规定最小值 |
optimum | 数值 | 规定最优值 |
value | 数值 | 规定当前值 |
<span>手机电量</span>
<meter max="100" min="0" low="20" high="80" value="90" optimum="90"></meter>
<progress>
显示某个任务完成进度,一般用于进度条。
常用属性:
属性 | 值 | 描述 |
---|---|---|
max | 数值 | 规定目标值 |
value | 数值 | 规定目标值 |
<progress max="100" value="80"></progress>
新增的列表标签
<datalist>
用于搜素框关键字提示。
<details>
用于展示问题和答案,或对专有名词进行解释。
<summary>
写在<details>
里面,用于指定问题或专有名词。
<form action="">
<input type="text" list="mylist">
<button>搜索</button>
</form>
<datalist id="mylist">
<option>数学</option>
<option>语文</option>
<option>英语</option>
</datalist>
<details>
<summary>如何学习</summary>
<p>认真学习</p>
</details>
新增的文本标签
文本注音
标签名 | 语义 |
---|---|
ruby | 包裹需要注音的文字 |
rt | 写注音,rt 标签写在ruby 里面 |
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
文本标记
标签名 | 语义 |
---|---|
mark | 标记 |
注意: W3C 建议 mark 用于标记搜索结果中的关键字。
新的多媒体标签
视频标签
video
视频
只支持三种视频格式:MP4、webm、ogg
常用属性:
src
链接视频地址
controls
向用户显示视频控件
muted
视频静音
autoplay
视频自动播放
loop
循环播放
preload
视频预加载:
none
不预加载metadata
仅预先获取视频原数据auto
可以下载整个视频
<video src="../img/小电影.mp4" controls loop muted autoplay preload="auto"></video>
音频标签
audio
音频
支持三种视频格式:MP3、wav、ogg
常用属性:
src
音频地址
controls
向用户显示音频控件
autoplay
音频自动播放
loop
循环播放
preload
音频预加载:
none
不预加载metadata
仅预先获取音频原数据auto
可以下载整个音频
<audio src="../img/音频.mp3" controls loop muted autoplay preload="auto"></audio>
三、新增表单功能
form
新增属性
novalidate
如果给 form 标签设置了该属性,表单提交的时候不再进行验证。
新增表单控件属性
placeholder
提示文字,适用于文字输入类的表单控件。
``required`表示该输入项必填,适用于除按钮外的其他表单控件。
autofocus
自动获取焦点,适用于所用表单控件。
autocomplete
自动完成,可以设置on
或off
适用于文字输入类的表单控件。
密码框、多行输入框不可用。
pattern
填写正则表达式,适用文本输入类表单控件。
多行输入不可用,且空的输入框不会验证,往往与``required`配合。
<form action="" novalidate>
账号:<input type="text" name="account" placeholder="请输入账号" autofocus required autocomplete="on">
<br>
密码:<input type="password" name="pwd" placeholder="请输入账号" required>
<br>
性别:<br>
<input type="radio" value="male" name="gender">男
<br>
<input type="radio" value="female" name="gender">女
<br>
爱好:<br>
<input type="checkbox" value="smork" name="hobby">抽烟
<input type="checkbox" value="drik" name="hobby">喝酒
<input type="checkbox" value="perm" name="hobby">烫头
<br>
<textarea name="other"></textarea>
<br>
<button>提交</button>
</form>
<input>
新增属性值
<input type="url">包含 URL 地址的输入字段。
<input type="tel">包含电话号码的输入字段。
<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。
<input type="email"> 用于应该包含电子邮件地址的输入字段。
<input type="datetime-local"> 允许用户选择日期和时间(无时区)。
<input type="datetime"> 允许用户选择日期和时间(有时区)。
<input type="time"> 允许用户选择时间(无时区)。
<input type="week"> 允许用户选择周和年。
<input type="month"> 允许用户选择月份和年份。
<input type="range"> 用于应该包含一定范围内的值的输入字段。
<input type="color"> 用于应该包含颜色的输入字段。
<input type="date"> 用于应该包含日期的输入字段。
<input type="number">数字类型的输入框