语义化标签
用最恰当的html元素标记的内容。
优点:
- 提升可访问性
- SEO
- 结构清晰,利于维护
通用容器:
- div 块级通用容器
- span 短语内容无语义容器
<title></title>
:简短、描述性、唯一(提升搜索引擎排名)。
搜索引擎会将title作为判断页面主要内容的指标,有效的title应该包含几个与页面内容密切相关的关键字,建议将title核心内容放在前60个字符中。
<hn></hn>
:h1~h6分级标题,用于创建页面信息的层级关系。
对于搜索引擎而言,如果标题与搜索词匹配,这些标题就会被赋予很高的权重,尤其是h1
<header></header>
:页眉通常包括网站标志、主导航、全站链接以及搜索框。
也适合对页面内部一组介绍性或导航性内容进行标记。
<nav></nav>
:标记导航,仅对文档中重要的链接群使用。
Html5规范不推荐对辅助性页脚链接使用nav,除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
<main></main>
:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<article></article>
:表示文档、页面、应用或一个独立的容器。
article可以嵌套article,只要里面的article与外面的是部分与整体的关系。
<section></section>
:具有相似主图的一组内容,比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
如果只是为了添加样式,请用div
<aside></aside>
:指定附注栏,包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
如果放在main内,应该与所在内容密切相关。
<footer></footer>
:页脚,只有当父级是body时,才是整个页面的页脚。
<small></small>
:指定细则,输入免责声明、注解、署名、版权。
只适用于短语,不要用来不标记“使用条款”,“隐私政策”等长的法律声明。
不单纯的样式标签(有意义的,对搜索引擎抓取有强调意义 strong > em > cite)
<strong></strong>
:表示内容重要性。
<em></em>
:标记内容着重点(大量用于提升段落文本语义)(斜体)
<cite></cite>
:指明引用或者参考,如图书的标题,歌曲、电影、等的名称,演唱会、音乐会、规范、报纸、或法律文件等。(斜体)
<mark></mark>
:突出显示文本(黄色背景颜色),提醒读者
<figure></figure>
:创建图(默认有40px左右margin)
<figcaption></figcaption>
:figure的标题,必须是figure内嵌的第一个或者最后一个元素。
<blockquoto></blockquoto>
:引述文本,默认新的一行显示。
<time></time>
:标记事件。datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。(不再相关的时间用s标签)
<abbr></abbr>
:解释缩写词。使用title属性可提供全称,只在第一次出现时使用就可以了
<dfn></dfn>
:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
<address></address>
:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)表示一个具体的地址,字体为斜体,会自动换行
<del></del>
:移除的内容。 <ins></ins>
:添加的内容。
少有的既可以包围块级,又可以包围短语内容的元素。
<code></code>
:标记代码。包含示例代码或者文件名 (< < > >)
<pre></pre>
:预格式化文本。保留文本固有的换行和空格。
<meter></meter>
:表示分数的值或者已知范围的测量结果。如投票结果。
例如:<meter value="0.2" title=”Miles“>20%completed</meter>
<progress></progress>
:完成进度。可通过js动态更新value。
标签新属性
细说data dataset(IE11,火狐谷歌)
在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。通过dataset来获取这些数据。这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。
一个实例教你如何使用data dataset
例如我们要在一个文字按钮上存放相对应的id
下面是元素应用data属性的一个例子:
<div id="food" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
// 要想获取某个属性的值,可以像下面这样使用dataset对象:
var food = document.getElementById(‘food‘);
var typeOfDrink = food.dataset.drink;
classList(火狐谷歌最新,IE10以上)
- obj.classList.add() 添加class类
- obj.classList.remove() 移出class类
- obj.classList.contains() 判断是否包含指定class类
- obj.classList.toggle() 切换class类
- obj.classList.length 获取class类的个数
HTML5新表单
新的input类型
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。
E-mail: <input type="email" name="user_email" />
url
url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
Homepage: <input type="url" name="user_url" />
number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:
Points: <input type="number" name="points" min="1" max="10" />
range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定:
<input type="range" name="points" min="1" max="10" />
search
search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
新的form属性
autocomplete
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo_form.asp" method="get" autocomplete="on">
E-mail: <input type="email" name="email" autocomplete="off" />
</form>
novalidate
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
新的input属性
autocomplete
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo_form.asp" method="get" autocomplete="on">
E-mail: <input type="email" name="email" autocomplete="off" />
</form>
autofocus
autofocus 属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有 <input> 标签的类型。
User name: <input type="text" name="user_name" autofocus="autofocus" />
form
form 属性规定输入域所属的一个或多个表单。
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。
- 表单重写属性有:
1. formaction - 重写表单的 action 属性
2. formenctype - 重写表单的 enctype 属性
3. formmethod - 重写表单的 method 属性
4. formnovalidate - 重写表单的 novalidate 属性
5. formtarget - 重写表单的 target 属性
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
<input type="image" src="img_submit.gif" width="99" height="99" />
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 属性
pattern 属性规定用于验证 input 域的模式(pattern)。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />
音频(audio)和视频(video)
支持的格式和写法
音频元素支持的3种格式:Ogg MP3 Wav
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
视频元素支持三种视频格式:MP4、WebM、Ogg。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
标签属性
- 音视频:autoplay、controls、loop、muted、preload、src
视频:autoplay、controls、loop、muted、width、height、poster、preload、src
方法
- load():重新加载音频/视频元素
- play():开始播放音频/视频
- pause():暂停当前播放的音频/视频
事件
durationchange:当音频/视频的时长已更改时
ended:当目前的播放列表已结束时
pause:当音频/视频已暂停时
play:当音频/视频已开始或不再暂停时
ratechange:当音频/视频的播放速度已更改时
timeupdate:当目前的播放位置已更改时
- volumechange:当音量已更改时
事件属性
-
只读属性
- duration:返回当前的总时长
- currentSrc:返回当前URL
- ended:返回是否已结束
- paused:返回是否已暂停
-
获取并可修改的属性:
- autoplay:设置或返回是否自动播放
- controls:设置或返回是否显示控件(比如播放/暂停等)
- loop:设置或返回是否是循环播放
- muted:设置或返回是否静音
- currentTime:设置或返回当前播放位置(以秒计)
- volume:设置或返回音量(规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。)
1.0 是最高音量(默认);0.5 是一半音量 (50%); 0.0 是静音; - playbackRate:设置或返回播放速度