- HTML5≈HTML+CSS3+Javascript+API
文档声明类型(DTD):<!DOCTYPE html
>
目前支持HTML5的浏览器:IE9+/Firefox/Opera/Safari/Chrome 新增的HTML标签 — 结构标签
- (块状元素 )有意义的div
<article>
标记定义一篇文章
<header>
标记定义一个页面或一个区域的头部
<nav>
标记定义导航链接
<section>
标记定义一个区域
<aside>
标记定义页面内容部分的侧边栏
<hgroup>
标记定义文件中一个区块的相关信息
<figure>
标记定义一组媒体内容以及它们的标题
<figcaption>
标记定义figure元素的标题
<footer>
一个页面或一个区域的底部
<dialog>
一个对话框(类似微信) web应用标签
<progress>
表进度
<meter>
表程度多媒体标签
box-sizing:border-box;/*宽=width+margin*/
,宽包含了padding和border值。
HTML5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。
HTML5支持的视频格式:
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件,支持的浏览器:F、C、O
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件,支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式,支持的浏览器: I、F、C、O
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S- 视频标签
<video>
:
muted:ture/false;是否静音(布尔值),属性的用法是直接加muted.
poster 视频未播放前的显示图片。
autoplay 自动播放;
preload 预加载(auto/metadata/none);
loop 循环;
controls 控键
width height (调整播放器的大小)
playbackrate 播放的倍速
volumn 音量值
<video>
的使用:- (块状元素 )有意义的div
<video src="文件地址" controls="controls"></video>
< video controls="controls" width="300“ >
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签播放视频。
</ video >
<source>
标记定义媒体资源- 音频标签
<audio>
:
autoplay 如果出现该属性,则音频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop 如果出现该属性,则每当音频结束时重新开始播放。
preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
<src="url">
要播放的音频的 URL。
<audio>
的使用(同video):- 音频标签
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.MP3" >
<source src="happy.ogg" >
您的浏览器暂不支持audio标签播放音频。
</ audio>
布局的比较
传统div+css页面布局方式
HTML5布局方式
新结构标签意义
Form表单
HTML5中为了方便排版,可以使form中的表单标签脱离form的嵌套。
方法:form指定ID,所有表单标签均添加form=id属性。
<form action="" method="post" id="register" >
</form>
<input type="text" name="user" form="register" />
<select name="year" form="register" >
<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>
<form action="" id="myform"></form>
<p>邮箱:<input type="email" form="myform"/></p>
<p>网址:<input type="url" form="myform"/></p>
<p>日期:<input type="date" form="myform"/></p>
<p>时间:<input type="time" form="myform"/></p>
<p>月:<input type="month" form="myform"/></p>
<p>周:<input type="week" form="myform"/></p>
<p>数字:<input type="number" form="myform"/></p>
<p>滑动条:<input type="range" form="myform"/></p>
<p>颜色:<input type="color" form="myform"/></p>
<p>搜索:<input type="search" form="myform" placeholder="请输入查询内容"/></p>
<input type="text" form="myform" required autofocus autocomplete="off" name="username"/>
<input type="submit" form="myform"/>
效果图:
标签属性:
required 必填项
placeholder=“提示文本”,默认提示文本
autofocus(on) 自动获取焦点(增加用户体验)
autocomplete=”on/off” 自动完成功能(使用时必须给此标签个name值/id值;若此属性加给form是整个表单都有,加给标签是只有那个标签有。)
pattern 正则表达式 输入的内容必须匹配到指定正则
datalist列表:自动填充表单
input中的list跟datalist中的id值必须一致, datalist中option value值是下拉表单中的内容。
<input id="mi" list="music"/>
<datalist id="music">
<option value="love you"></option>
<option value="marry me"></option>
<option value="lalala"></option>
</datalist>