HTML5

1、HTML5是什么?

HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:

1. 新的解析规则增强了灵活性

2. 新属性

3. 淘汰过时的或冗余的属性  

4. 一个HTML5文档到另一个文档间的拖放功能 

5. 离线编辑  

6. 信息传递的增强  

7. 详细的解析规则  

8. 多用途互联网邮件扩展(MIME)和协议处理程序注册  

9. 在SQL数据库中存储数据的通用标准(Web SQL)

2、HTML5有哪些新特性?

2.1 语义特性

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

2.2 本地存储特性

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

2.3 设备兼容特性

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

2.4 连接特性

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

2.5 网页多媒体特性

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

2.6 性能与集成特性

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助你的Web应用和网站在多样化的环境中更快速的工作。

2.7 CSS3特性

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

3、HTML5有哪些变化?

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其它浏览要素提供了新的功能,如<audio>和<video>标记。

  1. 取消了一些过时的HTML4标记 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。 HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。
  2. 将内容和展示分离 b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了
  3. 一些全新的表单输入对象 包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好
  4. 全新的,更合理的Tag 多媒体对象将不再全部绑定在object或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。
  5. 本地数据库 这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。
  6. Canvas 对象 将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。
  7. 浏览器中的真正程序 将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。
  8. Html5取代Flash在移动设备的地位。
  9. 其突出的特点就是强化了web页的表现性,追加了本地数据库
标签和元素的变化:

1、DOCTYPE

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5:

<!DOCTYPE html>

2、文档编码

XHTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5 :

<meta charset="UTF-8" />

3、标签结尾

在XHTML中没个标签都必需结束,在HTML5中对于一些标签不再是必要的

lidtddprtrpoptgroupoptioncolgrouptheadtbodytfoottrtdth

自结束的标签最后的/也不再必要

imginputbrhr

4、具有boolean值的属性

对于具有boolean值的属性,例如disabledreadonly等只写属性不写属性值时值为true。

<input type="checkbox" checked >
<input type="checkbox" checked="checked" >

<input type="text" value="China" readonly />
<input type="text" value="China" readonly="readonly" />

<input type="text" disabled />
<input type="text" disabled="disabled" />

5、省略属性值的引号

属性值可以用单引号或者双引号,在属性值不包括<>='、"时可以忽略引号。

<input type=text >

<input type=text  disabled=disabled />

4、有哪些新增标签?

元素

描述

canvas

标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

audio

定义音频内容

video

定义视频(video 或者 movie)

source

定义多媒体资源 <video> 和<audio>

embed

定义嵌入的内容,比如插件

track

为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道

datalist

定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值

keygen

规定用于表单的密钥对生成器字段

output

定义不同类型的输出,比如脚本的输出

article

定义页面正文内容

aside

定义页面内容之外的内容

bdi

设置一段文本,使其脱离其父元素的文本方向设置

command

定义命令按钮,比如单选按钮、复选框或按钮

details

用于描述文档或文档某个部分的细节

dialog

定义对话框,比如提示框

summary

标签包含 details 元素的标题

figure

规定独立的流内容(图像、图表、照片、代码等等)

figcaption

定义 <figure> 元素的标题

footer

定义 section 或 document 的页脚

header

定义了文档的头部区域

mark

定义带有记号的文本

meter

定义度量衡。仅用于已知最大和最小值的度量

nav

导航

progress

定义任何类型的任务的进度

ruby

定义 ruby 注释(中文注音或字符)

rt

定义字符(中文注音或字符)的解释或发音

rp

在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容

section

定义文档中的节(section、区段)

time

定义日期或时间

wbr

规定在文本中的何处适合添加换行符

5、如何让低版本的 IE 支持 HTML5新标签?

让ie6-ie9等低版本支持html5新标签的方法:在head中加上下面这段代码:

image.png

html5shiv.js下载地址:https://github.com/aFarkas/html5shiv

6、input 有哪些新增类型?

  1. email
  2. url
  3. number
  4. range
  5. Date Picker
    • Date
    • month
    • week
    • time
    • datatime

7、浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据?

特性

Cookie

localStorage

数据的生命期

一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效

除非被清除,否则永久保存

存放数据大小

4K左右

一般为5MB

与服务器端通信

每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题

仅在客户端(即浏览器)中保存,不参与和服务器的通信

易用性

需要程序员自己封装,源生的Cookie接口不友好

源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

localStorage存储删除数据:

//增改
localStorage.setItem('name','zzz');
//删
localStorage.removeItem('name');
//查
localStorage.getItem('name');
//清除所有数据
localStorage.clear();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lgp20151222

Java引用外部字体(路径引用)的一些坑

然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面.

861
来自专栏微信小程序开发

微信小程序开发常见问题(二)

知晓程序员,专注微信小程序开发的程序员! 今天再给大家分享几个微信小程序开发的常见问题,顺便吐槽一下,武汉的冬天太TM冷了,没有暖气的冬天真的很难过,写文章的心...

4175
来自专栏jojo的技术小屋

原 微信小程序踩坑录(canvas、pos

作者:汪娇娇 日期:2016.11.24 现在也不知道距离微信公测多少日子了,反正感觉我是埋在微信小程序这个坑里很久了,公司的项目终于快接近尾声,现在就腾点时间...

3195
来自专栏微信小程序开发

小程序中数字验证码的实现

先说说为什么要折腾这个demo,之前经常有用户反馈,说是删除自己的记录时,能否给个强一点儿的提示,因为确认框弹出后,大家会习惯性的点击确认,内容可能根本没有看清...

882
来自专栏iKcamp

追溯 React Hot Loader 的实现

文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影。他于...

43014
来自专栏菩提树下的杨过

silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然! 因为silverlight中的image控件不支持直接把gif动画做为source,所以象做...

1797
来自专栏前端菜鸟变老鸟

表格按列方向上渲染数据

如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。

684
来自专栏技术小黑屋

利用WebView实现网页的i18n

软件如果想在全球获得更多的用户,国际化与本地化(internationalization and localization 简称:i18n 和L10n)是非常必...

582
来自专栏九彩拼盘的叨叨叨

BEM 简介

BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Eleme...

674
来自专栏日常学python

爬取《The Hitchhiker’s Guide to Python!》python进阶书并制成pdf

这是日常学python的第15篇原创文章 前几篇文章我们学习了requests库和正则,还有个urllib库,我上篇文章也用了requests库来教大家去爬那些...

38217

扫码关注云+社区