1、html5的特点
增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性。常问的问题:html5有哪些特点(跟html5以前有什么区别),css有哪些新属性?
(文档声明更简单,html5更语义化,html5三维空间,canvas)
(css3新属性:图片边框,圆角边框,渐进背景色,3D动画,阴影)
2.h5新增语义化标签
1)<header>
<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部,但它不局限于写在网页头部,也可以写在网页内容里面。
2)<nav> 作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分。在语义化方面更加精确,同时对于屏幕阅读器等设备支持更好(简而言之,就是导航栏)
3)<main>(一个页面只有一个main)
在一个文档中,不能出现一个以上的 <main> 元素。
4)<article>
比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其它内容使用
5)<section> 标签定义了文档的节。比如章节、头部、底部或者文档的其他区域,它表示一段专题性的内容,通常由内容及其标题组成。区块
6)<aside>
网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。(广告,文章的链接,作者的简介)用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到
7)<footer>
眉脚一般会包含作者姓名、文档版权信息、使用条款链接、联系信息等. (可多个)
8)<hgroup>(没有怎么用)
<hgroup> 标签用于对网页或区段(section)的标题进行组合。
9)<figure>、<figcaption>
<figure>用于对元素进行组合。一般用于图片,文字组合。
<figcaption>是 figure的子元素,用于对figure的内容进行说明
3.h5新增表单元素/标签
1)<datalist>
与<input>配合,实现类似于拥有输入功能的下拉列表。<input> 元素的 list 属性和 <datalist> 元素的id属性值相同。
<input type="text" list="biao">
<datalist id="biao">
<option value="花">花</option>
<option value="小花">小花</option>
</datalist>
2)<details>
用于描述文档或文档某个部分的细节。
<summary>可以为<details>定义标题。标题可见,用户点击标题时,会显示出 details中的内容。任何形式的内容都能被放在 <details> 标签里边(任何标签都可以放进去)。open属性,规定 details中内容是否默认可见。<details open="open">
<details>
<summary>天京</summary>
<p>njjn你不对劲</p>
</details>
3)<mark></mark>
定义带有记号的文本,在需要突出显示文本时使用 <mark> 标签。
4)<progress></progress>
定义进度条
<progress max="200" values="100">
<span>50</span>%(给盲人识别)</progress>
5)<meter></meter>度量尺
<meter max="100" min="0" high="990" low="30" value="12" optimum="87"></meter> optimum如果该值高于“high”属性值,意味着值越高越好。
optimum如果该值低于“high”属性值,意味着值越低越好。
6)注释标签
<ruby> 标记定义 注释或音标
<rt> 标记定义对ruby的注释内容文本
<ruby>
高
<rt>gao</rt>
</ruby>
7)<output>
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<form oninput="res.value=no1.value*no2.value”(不能进行加法) >
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>
4.语义化标签兼容IE8-6
1)可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。?
<!--[if lt IE 9]-->
<script src="路径"></script>
<!--[endif]-->
2)HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
<style>
article, aside, canvas, details, figcaption, figure,main,
footer, header, hgroup, menu, nav, section, summary
{
display: block;
}
</style>
下载地址:http://www.bootcdn.cn/html5shiv/
(复制链接-搜索-右键另存为)
5.删除的HTML标签
纯表现的元素:
basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:
frame,frameset,noframes;
产生混淆的元素:
acronym ,applet,isindex,dir。
6.重新定义的html标签(语义化)
<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体 ,没有传递表示重要的意思
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> 可以同details与figure一同使用,汇总细节,dialog也可用
<hr> 表示主题结束,而不是水平线,虽然显示相同
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
7.表单新增输入类型
1)email <input type="email">email 输入类型用于应该包含电邮地址的输入字段。当提交表单时,会自动地对 email 字段的值进行验证。(正则)
2)tel <input type="tel">电话号码,移动端会弹出数字键盘
3)url <input type="url"> 网页的URL,会在提交表单时对 url 字段的值自动进行验证。
4)number <input type="number"> 特定范围内的数值选择器,min、max、step( 步数 )、value
5)search <input type="search">
6)range <input type="range">
7)color <input type="color">
8)time <input type="time">显示时间
9)date <input type="date"> 显示日期
10)datetime <input type="datetime"> 显示日期
11)month <input type="month"> 显示日期
12)week <input type="week"> 显示日期
8.表单新增属性
1)placeholder 占位符 <input type="text" placeholder="请输入用户名">
2)autofocus 获取焦点 <input type="text" autofocus>可以不用写属性值
3)multiple 文件上传多选或多个邮箱地址 <input type="file" multiple>
4)required 验证条件,必填项 <input type="text" required>
5)Pattern 正则表达式
<input type="text" pattern=“/d+”>
"d"表示数字 “D”表示非数字 “/d+”表示至少一个数字