html5

最新推荐文章于 2024-09-21 11:29:05 发布

峰回路转-张一峰

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量173

点赞数

分类专栏：前端技术文章标签： html5 前端 h5新特性

本文链接：https://blog.csdn.net/zyfdoudou110/article/details/89460004

版权

前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第二章html5和html4的区别

掌握HTML5与HTML4的基本语法上的区别
掌握HTML5中新增的元素和废除的元素
了解HTML5中新增的属性和废除的属性
掌握全局属性

2.1HTML5语法的变化

HTML5提高浏览器的兼容性是其重大目标之一，所以必须消原有规范和实现的背离，所以它重新定义了新的HTML语法，在新的版本的FireFox和WebKit中内置了HTML5规范的解析器，IE和Opera也正在为能提供更好的兼容性努力。

HTML5标记方法：
1.内容类型（ContentType）：扩展名还是html或者htm，内容类型还是text/html
2.doctype声明：浏览器通过判断文件开头有没有<!doctype html>这个声明来决定解析器和渲染类型是否切换成对应的HTML5模式。
3.在使用工具时，可以在doctype中加入system标记，不区分大小写，还可以将双引号替换为单引号使用，例如<!doctype html system 'about:legacy-compat'>
4.字符编码的设置:<meta charset="UTF-8">,不能混用html4的编码格式。

HTML5语法的要点

1.不允许写结束标记元素：<area> <base> <col> <command> <input>等，意思是例如<br/>是ok的，不能写成<br>....</br>
2.可以省略的元素：html，head，body，colgroup，tbody但是dom树上存在。
3.取得boolean值的属性：取得布尔值boolean的属性，如disable和readonly等通过省略属性的值来表达值为true，如果表达false，直接省略即可：例如以下属性都为true
	<input type="checkbox" checked>	
	<input type="checkbox" checked="checked">	
	<input type="checkbox" checked="">

2.2HTML5新增的元素和废除的元素

新增的结构元素：
section：定义了文档或应用程序的一个区段
article元素：表示文档中的一块独立内容
nav元素：表示导航链接的部分
footer元素：表示整个页面或页面中一个内容区块的脚注

新增的块级语义元素：
1.mark：视觉上向用户呈现突出显示或者高亮显示的文字
2.time元素：表示日期
3.meta元素：表示度量，用于一直最大值和最小值的度量，必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。
4.progress：表示运行中的进程，可以使用progress元素显示js中耗费的时间。

新增的嵌入多媒体元素和交互元素

嵌入的多媒体元素有：video和audio元素，分别用来插入视频和声音的
details元素：表示用户可以得到的细节信息，可以与summary配合使用，summary提供标题或图例，是details元素的第一个子元素，标题是可见的，当点击标题时，就会显示details内容
datagrid：表示可选数据的列表，通常用于显示树形表。配合<ol> <li>
menu:表示菜单列表，通常用于列出表单控件
command元素：表示命令按钮，如单选按钮，复选按钮或普通按钮

新增的元素类型

HTML5中，input新增了很多类型
email,url，number（数字），range（用户包含一定范围内数字的输入域），Date Pickers（数据检出器），search（搜索域），date，mouth，week，time，datetime，datetime-local

废除的元素

可以使用css元素：basefont，big，center，font，s，strike，tt，u
不再使用frame框架，只支持iframe框架，同时将frameset，frame和noframes三元素废除
只要部分浏览器支持的元素：applet，bgsound，blink，marguee等元素只有部分浏览器支持，所以html5中废除。applet可以被embed元素替代，bgsound可以audio元素替代，marquee可以由js编程方式替代。