前端一班：HTML5当天学习总结-摘抄张果博客园

时间 2019-11-17

标签前端一班 html5 html 当天学习总结摘抄博客栏目 HTML5 繁體版

原文原文链接

1、初步了解HTML5，相关涉及技术以及行业前景

2、HTML5特性

HTML5 八个特性类别对应的8个Logo
语义化、离线&存储、设备访问、通讯
多媒体、图形和特效、性能和集成、呈现（CSS3）web

1）语义化：使标签更有意义浏览器

2）本地存储特性（Class: OFFLINE & STORAGE）安全

HTML5 APP Cache、本地存储功能、IndexedDB、FileAPIruby

3）设备访问特性 (Class: DEVICE ACCESS)服务器

为移动开发而生。重力感应、全球地理定位、麦克风、摄像头网络

4）链接特性（Class: CONNECTIVITY）app

WebSocket、Server-Sent Events实现双向链接，消息推送框架

5）网页多媒体特性( Class: MULTIMEDIA）socket

支持网页端的Audio、Video等多媒体功能。ide

6）三维、图形及特效特性（Class: 3D, Graphics & Effects）

这一招将Flash战胜，图形加强，SVG，Canvas，WebGL，2D/3D游戏和页面视觉特效。

7）性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading，HTML5增长WebWorker、XMLHttpRequest2

8）呈现（CSS3/styling)

除了DOM接口，HTML5增长了更多样化的应用程序接口（API）：

1.五、HTML5优势与缺点

1.5.一、优势

一、网络标准统1、HTML5自己是由W3C推荐出来的。
二、多设备、跨平台
三、即时更新。
四、提升可用性和改进用户的友好体验；
五、有几个新的标签，这将有助于开发人员定义重要的内容；
六、能够给站点带来更多的多媒体元素(视频和音频)；
七、能够很好的替代Flash和Silverlight；
八、涉及到网站的抓取和索引的时候，对于SEO很友好；
九、被大量应用于移动应用程序和游戏。

1.5.二、缺点

a)、安全：像以前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
b)、完善性：许多特性各浏览器的支持程度也不同。
c)、技术门槛：HTML5简化开发者工做的同时表明了有许多新的属性和API须要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
d)、性能：某些平台上的引擎问题致使HTML5性能低下。
e)、浏览器兼容性：最大缺点，IE9如下浏览器几乎全军覆没。

1.八、HTML5语法规则与文档声明

1.8.一、语法规则

a)、标签要小写
属性值不加" "或 ' '
b)、能够省略某些标签
HTML body head tbody
c)、能够省略某些结束标签
tr td li
d)、单标签不用加结束标签
img input
e)、废除的标签，看第二点
font center big

1.8.二、文档声明

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <HTML> 标签以前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签，它是一条指令，告诉浏览器编写页面所用的标记的版本。
在全部 HTML 文档中规定 doctype 是很是重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 须要对 DTD 进行引用，由于 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，所以不须要对 DTD 进行引用。

1.8.二、文档声明

2、废弃的标签

如下的 HTML 4.01 元素在HTML5中已经被删除，虽然浏览器为了兼容性考虑都还支持这些标签，但建议使用新的替代标签，矛盾的是老浏览器对新标签的支持度又不够，视项目的受众对象而定了。

2.一、能用CSS代替的元素

这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页面展现用的，表现的内容应该由CSS完成。

2.二、frame框架

这些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方建立的由多个页面组成的符合页面的形式，删除以上这三个标签。

2.三、只有部分浏览器支持的元素

这些元素包含applet、bgsound、blink、marquee等标签。

2.四、其余被废除的元素

废除rb，使用ruby替代
废除acronym使用abbr替代
废除dir使用ul替代
废除isindex使用form与input相结合的方式替代
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
废除plaintex使用“text/plian”（无格式正文）MIME类型替代

3、新增的标签

3.一、新增的结构标签

在HTML4.01中div被普遍用于各类布局环境在，没有明确的定义，HTML5为了SEO将div语义化了，新增长结构标签以下：

a)、section元素
表示页面中的一个内容区块,好比章节、页眉、页脚或页面的其余部分。能够和h一、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素
表示页面中一块与上下文不相关的独立内容。好比一篇文章。

c)、aside元素
表示article元素内容以外的、与article元素内容相关的辅助信息。

d)、header元素
表示页面中一个内容区块或真个页面的标题。

e)、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。

f)、footer元素
表示整个页面或页面中一个内容区块的脚注。通常来讲，他会包含创做者的姓名、创做日期以及创做者的联系信息。

g)、nav元素
表示页面中导航连接的部分。

h)、figure元素
表示一段独立的流内容，通常表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常写做
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

案例：参考做业（完成基本的语义化布局）