码迷,mamicode.com
首页 > Web开发 > 详细

[笔记]《HTML5秘籍》- HTML5简介

时间:2018-01-14 15:18:17      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:原因   组成   特定   web应用   多少   mod   消息   通过   添加   

一、HTML5的故事

        HTML的 基本思想——使用元素为内容添加结构——从Web诞生以来就没有变过。

1 XHML 1.0:更严格的标准

        HTML5包含多个标准,这些标准之间彼此关联。

  • HTML5核心。这一部分组要由W3C官方的规范组成,涉及新的语义元素、新的增强的Web表单微件、音频和视频支持以及通过JavaScript绘图的Canvas。
  • 曾经属于HTML5的功能。这一部分源自WHATWG最初制定的HTML5规范,其中大多数功能需要JavaScript且支持富Web应用开发。最重要的包括本地数据存储、离线应用和消息传递。
  • 有时候会被称为HTML5的功能。这些通常是指下一代功能。虽然它们从未进入过HTML5标准,但人们还是经常会把它们与HTML5相提并论。这部分包括CSS3和地理定位。

二、HTML5的三个主要原理

1 不破坏Web

        “不破坏Web”的意思是标准不应该引入导致已有的网页无法工作的改变。

        “不破坏Web”还意味着标准不应该出人意料地更改规则,不能认定今天还完美无缺的网页到了明天就要作废。

2 修补牛蹄子路

        HTML5标准化了这些非官方的技术。

3 实用至上

        改变应该以使用为目的。

三、HTML5标记初体验

1 HTML5文档类型

        每个HTML5文档的第一行都必须是一个特定的文档类型声明。这个文档类型声明用于宣告后面的文档标记遵循哪个标准。以下文档声明标记遵循HTML5标准:

        <!DOCTYPE html>

        保留文档类型声明,主要是由于历史原因。如果没有文档类型声明,那大多数浏览器将转换到一种混杂模式(quirk mode)。在这种模式下,浏览器会尝试根据有点不那么正常的规则呈现网页(那些规则是在浏览器的老版本中使用的)。而问题是,不同浏览器的混杂模式也不一样,因为为一种浏览器设计的页面到了另一个浏览器中,不是字体大小不一样,就是布局上的瑕疵,或者出现其他不一致的问题。

        而添加了文档类型声明后,浏览器就知道了你想要使用更严格的标准模式(standard mode),在这种模式下,所有现代浏览器都会以一致的格式和布局来显示网页。

2 字符编码

字符编码是一种标准,计算机根据它把文本转换成保存在文档中的字节序列。

        在HTML5文档中添加字符编码信息也很简单。只要在<head>区块的最开始处添加相应的<meta>元素即可:

<head>
    <meta charset="utf-8">
    <title>A Tiny HTML Document</title>
</head>

3 页面语言

        指明网页中使用的自然语言是一个好习惯。这个信息有时候对其他人有用,比如搜索引擎可以通过它来筛选搜索结果,确保只向搜索着返回页面语言与他使用的语言相同的页面。

        为给内容指定语言,可以在任何元素上使用lang属性,并为该属性指定相应的语言代码(比如,en表示英文)。

四、今天开始用HTML5

1 对付旧版本的浏览器

        1)平稳退化。有时候,如果某个功能不被浏览器支持,也不是什么大问题。例如,<video>元素提供了一种后备机制,可以为老的浏览器提供替代内容。还有一些表单功能(例如占位符文本),以及像圆角和投影之类的CSS3属性,较老的浏览器完全可以忽略他们。当然,可以写一些JavaScript代码来检测浏览器是否支持你想使用的功能。如果不支持,则显示较少内容或使用不那么花哨的方式。

        2)借助JavaScript。HTML5中的某些功能完全可以使用优秀的JavaScript库来实现。其中有一些比较成熟的则成为“腻子脚本”。

2 了解浏览器支持情况

        Can I use网站可以详细列出每一款主流浏览器对HTML5的支持情况。

3 浏览器装机情况统计

        浏览器采用情况统计可以告诉你,有多少用户的浏览器支持你想要的功能。为此,可以查看流行的流量跟踪站点GlobalStats。网址http://gs.statcounter.com。

4 通过Modernizr检测功能

        检测功能是应对浏览器支持差异的一个重要策略。典型的模式是,加载页面,通过JavaScript脚本检测某个具体的功能是否可用。

        Modernizr(www.modernizr.com),它是一个小巧的、持续更新的工具,专门用于测试浏览器对很多HTML5及相关功能的支持情况。

5 使用“腻子脚本”填补功能缺陷

        腻子脚本就是一大堆五花八门的技术,目的就是填平旧浏览器对HTML5支持上的缺陷。

 

[笔记]《HTML5秘籍》- HTML5简介

标签:原因   组成   特定   web应用   多少   mod   消息   通过   添加   

原文地址:https://www.cnblogs.com/SyMind/p/8283281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!