html5

最新推荐文章于 2023-09-12 17:35:03 发布

张一峰

最新推荐文章于 2023-09-12 17:35:03 发布

阅读量247

点赞数

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

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

版权

前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一章html5新特性

1.1html5介绍

HTML5由以下三个组织在负责

1.WHATWG：由Apple，Mozilla，Google，Opera这些浏览器开发者组成，他们开发HTML和WEB应用API，同时为其他浏览器开发者提供开放式合作。

2.IETF：（Internet Engineering Task Force，因特网任务组），这个任务组旗下HTTP负责Internet协议，HTML5定义的API是基于WebSocket协议，IETF工作者在开发这个协议。

1.2html5认识

html5虽然给人很多兴奋，但是会担心其是否兼容浏览器，会不会有错误等问题。

1.2.1兼容性

	虽然HTML5时代，但是它是兼容HTML4，它的核心理念就是保持一切新特性的平滑过渡。
	尽管HTML5新特性具有革命性，但是HTML5旨在进化而非革命，正式保障了兼容性，所以会选择HTML5开发网站。

1.2.2化繁为简

	**HTML5的口号是：简单至上，尽可能简化**
	- 以浏览器原生的能力代替复杂的js代码
	- 简化DOCTYPE
	- 新的简化字符集声明
	- 简单而强大的HTML5API

1.3插件范式

之前，很多功能通过插件或者复杂的hack（本地画图API，本地socket等）来实现，在HTML5中提供了对这些功能的原生支持，插件的方式有一些问题。

	1插件安装可能会失败
	2插件可能被禁用或者屏蔽
	3插件自身会被成为攻击的对象
	4插件不容易与html文档的其他部分集成

插件的问题：

1.安全-安装插件会有安全隐患。

2.广告-安装插件有附带广告。

3.插件与html元素不同，弹出后会遮盖重叠。

1.4HTML5特性##

1.HTML5新特性基于HTML,CSS,DOM,和js

2.减少了对外部的插件需求如flash

3.更加优秀的错误处理

4.HTML5独立于设备

5.用户绘画的canvas元素

6.用户媒体回放的video和audio元素

7.对本地离线存储的支持

8.新元素和表单控件

第二章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编程方式替代。

2.3新增的属性和废除的属性

表单的属性：

1.autocomplete属性：规定form和input域自动完成，适用于form标签内的input：text，search，url，telephone，email等
2.autofocus：属性，域自动获取焦点。
3.form属性：规定输入域所属的一个或者多个表单，绑定form表单的id。
4.list属性：规定用于输入域的datalist，适用于input标签的text，配合<datalist><option value="" /></datalist>	
5.min,max,step属性：用于包含日期或者数字的input类型限定
6.multiple：输入域中可选择多个值，适用于input标签的email和file
7.novalidate属性：规定在提交表单时不验证form或者input域。
8.pattern属性：用户验证input域的模式，模式是正则表达式。
9.required属性，规定必须在提交之前填写输入域不能为空。

链接相关属性：

1.media属性：为a和area属性添加了media属性，规定目标URL是给什么类型的媒介/设备进行优化的，只能在href属性存在时使用。
2.hreflang：<link href="tag_link.action" hreflang="en"/>，声明是英文版，搜索引擎会获取到。
3.target：为base元素添加了target属性，尤其在与iframe结合时，非常有用。

其他属性
1.reversed属性：制定列表倒序显示
2.charset属性：文档的字符编码
3.type属性与lable属性，menu元素添加了两个新的属性，lable属性为菜单定义了可见的标注，type属性让菜单可以上下文菜单，工具条和列表菜单三种形式。
4.scoped属性：用来规定样式的作用范围，譬如只对页面上某个数起作用。为script元素添加async属性，定义脚本是否异步执行。
5.manifest属性：为html元素添加了manifest属性，程序缓存。

废除的属性

2.4全局属性

在html5中，新增全局属性，是指可以对任何元素都使用的属性。

1.contentEditable属性：该属性的主要功能是允许用户编辑元素中的内容，是一个boolean类型属性，可以设置成true或者false，修改之后只能通过innerHTML发送到服务器进行保存，目前没有其他的API来保存内容。

2.designMode属性，用来指定整个页面是否可编辑，当页面可编辑时，页面上任何支持contenEditable属性的元素都变成了可编辑状态，designMode属性只能在javaScript脚本中被编辑修改。document.designMode = ‘on’

3.hidden属性：不显示true不可见，false处于可见

4.spellcheck属性：是boolean值，告诉浏览器检查元素的拼写和语法this is na me会以下划线的方式提示是否有错误。

5.tabindex属性：指用户使用键盘导航一个页面时，通常使用tab键，页面上元素获得焦点的顺序。在html4中-1是一个无效的值。在html5使得其有效。

第三章html5的结构

HTML5新增的主体结构元素的定义
HTML5新增非主体结构元素的定义
HTML5新增的主体结构元素的使用方法
HTML5新增非主体结构元素的使用方法

主体结构元素

article元素，表示页面、文档、应用程序或站点自包含成分所构成的一个页面的一部分，并且这部分独立地分类或复用。

<h1>导入插件</h1>
	<article>
		<h2>选择资料</h2>
		<object>
			<param name="allowFullScreen" value="true" />
			<embed src="source/01.mp4" width="600" height="400"></embed>
		</object>
	</article>

–

section元素：代表文档或应用程序中一般性的段或节。section元素的作用是对页面内容进行分块或者分段。不要和article混淆，因为artical有着自己的完整的、独立的内容。

nav元素：用来构建导航，nav元素的内容可能是链接的一个列表，nav是一个包容器，它不会替代ol或ul元素，但是会包围它们

aside元素：表示页面或者文章的附属部分，可以认为内容与article的内容是分开独立的。可以用于摘录引用或边栏这样的排版效果。用于广告或一组导航元素

time元素：明确对机器的日期和时间进行编码，datetime属性中日期与时间之间要使用T分割，T表示时间，在时间字母上加上Z，表示机器编码时使用UTC标准时间，可以添加时差。

pubdate属性：表示特定的time思一个最终的发布日期。

新增的非主体结构元素
1header元素：具有引导和导航作用的结构元素，不限制header的使用个数

2hgroup元素：将标题及子标题进行分组的元素，hgroup通常对h1-h6元素进行分组，如果有多个标题就需要使用dgroup进行分组。

3footer元素,使用个数不限

4address元素：用于当前article或者文档的作者的详细联系方式

第四章html5的文件与拖放

第五章多媒体播放

第六章绘制图形

第七章数据存储

第八章离线应用程序

第九章使用webWorker处理线程

第十章通信API

第十一章获取地理位置信息

第十二章html5项目实战

张一峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5

第一章html5新特性1.1html5介绍HTML5由以下三个组织在负责1.WHATWG：由Apple，Mozilla，Google，Opera这些浏览器开发者组成，他们开发HTML和WEB应用API，同时为其他浏览器开发者提供开放式合作。2.IETF：（Internet Engineering Task Force，因特网任务组），这个任务组旗下HTTP负责Internet协议，HTM...
复制链接

扫一扫