HTML5新特性
//广义的HTML5包括HTML5+CSS3+JavaScript
ps:这些新特性都存在兼容性问题,基本都是IE9以上版本才支持
HTML5新增的语义化标签:
这些语义化标准主要是针对搜索引擎的,这些新标签页面中可以使用多次,在IE9中,需要把这些元素转换为块级元素
<header>
定义了文档的头部区域,在一个文档中可以定义多个元素。它是块元素
<header>
<p>这是文档的头部</p>
</header>
2.<footer>
定义文档页脚,它不只是页面的最底部,在文档中也可以定义多个。
3.<article>
定义页面独立的内容区域,标签定义的内容本身必须是有意义且必须独立于文档的其他部分,可用在的地方:博客文章,新闻,评论等。
<article>
<h2>五一劳动节</h2>
<div>
今天是五一劳动节
</div>
</article>
4.<aside>
定义页面的侧边栏内容
<aside>
<ul>
<li>腾讯</li>
<li>阿里</li>
<li>百度</li>
</ul>
</aside>
5.<time>
定义时间或日期,time标签中的datetime属性定义的时间不会被显示,但可能被其他应用使用
6.<ruby>
加注释,ruby标签有两个子元素,rt注释的内容,rp是该标签不显示时显示的文字
<ruby>
人<rt>ren</rt>
<rp>该标签无法显示</rp>
</ruby
7.<details>
用于描述文档或者文档某一部分细节,summary是details元素的标题
<details>
<summary>点击查看更多</summary>
<p>这是点击后的内容</p>
</details>
8.<mark>
定义带有几号的文本,它会给你想要突出显示的文本加个 背景色
<p>我最喜欢<mark>数学</mark></p>
9.<nav>
定义导航栏
<nav>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>
<nav>
10.<progress>
progress显示数据的进度,属性value指定当前值,max最大值,最小值0不用设置
<progress value="30" max="100"></progress>
11.<section>
section一般有两个作用,1.定义文档中的节,和div类似。2.定义文章,这时一般带有标题
<section>
<h1></h1>
<p></p>
</section>
12.<video>
定义视频,属性src引入资源,controls视频的控制控件
<video src="" controls="controls">你的浏览器不支持video标签</video>
以防用户浏览的视频不支持某些格式的视频,可以为用户多准备些格式的视频,目前支持的视频格式video/ogg,video/mp4,video/webm其他格式需要转换(尽量使用mp4)
<video width="320 height="240" controls>
<source src="" type="video/ogg">
<source src="" type="video/mp4">
<source src="" type="video/webm">
//你的浏览器不支持video标签
</video>
video常用属性:(可以给视频标签加 muted属性来静音播放视频)
<video controls="controls" width="500px" height="500px" loop autoplay poster="img.jpg">
<source src="video.mp4" type="video/mp4"/>
<source src="video.ogg" type="video/ogg"/>
</video>
13.<audio>
该标签可定义声音,及其他的音频文件
目前音频可用类型audio/ogg,audio/mpeg
<audio src="" controls="controls">你的浏览器不支持audio标签</audio>
<video controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx.mp3" type="audio/mpeg">
//你的浏览器不支持audio标签
</video>
常见属性:
autoplay:自动播放
controls: 显示音频的控制界面
loop: 循环播放
14.<datalist>
提示可能的值,datalist及其选项不会被显示出来,它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist,下面选项使用option定义
<input type="text" list="cars">
<datalist id="cars">
<option value="宝马"></option>
<option value="奔驰"></option>
<option value="奥迪"></option>
</datalist>
14.<embed>
定义插入的内容,如插件,flash,标签中间不要加内容会显现出来
<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>
15.<canvas>
canvas画布只是个容器,你可以通过控制坐标在canvas上绘制图形,一般配合js可以实现非常复杂的动画效果
16.新增的input类型
email :限制用户输入必须为Email类型
url :限制用户输入必须为URL类型
date :限制用户输入必须为日期类型
time :限制用户输入必须为时间类型
month :限制用户输入必须为月类型
week :限制用户输入必须为周类型
number :限制用户输入必须为数字类型
tel :手机号码
search :搜索框
color :生成一个颜色选择表单
17.新增的表单属性
autofocus:在打开页面时使元素自动获取焦点 //input,button,select,textarea
placeholder:提示文本,在用户输入时进行提示 // input,textarea
required:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea
max/min/step:限制值的输入范围,以及值的变化程度。上面的新增number元素有介绍。 //input
autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,关闭为off,默认为on
mulitiple : 可以多选文件提交