HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书《HTML5/CSS3/JavaScript讲义》,今天读了第一章节的内容,趁热打铁,总结一下。

HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音。HTML5致力于解决跨浏览器问题,可以部分取代JavaScript,HTML5致力于把浏览器变成一个前端执行程序环境,而不是简单地视图工具。

第一部分,了解HTML和XHTML

HTML——Hyper Text Markup Language(超文本标记语言),它的发展史比较复杂,从1991年年底推出HTML,当时HTML并没有严格的定义,一路走来HTML2.0,HTML3.2,HTML4.0,HTML4.0.1,XHTML1.0。XHTML可谓是历尽了千锤百炼。

XHTML——eXtensible Hyper Text Markup Language(扩展的超文本标记语言)。

HTML4.0.1和XHTML具备了良好的兼容性,而且XHTML是更严格、更纯净的HTML代码。

我们习惯性的认为HTML是一种结构化的文档,但实际上HTML的语法十分的自由、宽容(主要是各个浏览器纵容的结果)比如如下的代码,HTML标签有头无尾,非常不规范:

    <html>
    <head>
    <title>混乱的html文档<title>
    <body>
    <h1>混乱的html文档

这显然违背了结构化文档的规则,但是用浏览器来浏览这份文档时,依然可以看到浏览效果——这就是html不规范的地方。而XHTML致力于消除这种规范,XHTML要求HTML文档首先必须是一份XML文档。

通常,计算机里的浏览器可以对付各种不规范的HTML文档,但现在很多浏览器运行在移动电话和手持设备上,它们就没有能力来处理那些糟糕的标记语言。

第二部分:从XHTML到HTML5

    WHATWG(Web Hypertext Application Technology Workding Group,Web超文本应用技术工作组)制定了一个新的HTML标准,HTML5。

大量的调查表明:即使在一些正规的网站中,也很少有网站能通过HTML规范验证。仅有6.57%的网站符合HTML规范验证。如果把那些名不见经传的小网站考虑在内,整个互联网几乎都是不符合规范的HTML页面。

现有的HTML页面大量存在如下4中不符合规范的内容

1.元素的标签大小写混杂。比如:<p></P>。

2.元素没有合理结束的情况。比如:只有<p>没有</p>。

3.元素中的属性没有指定属性值。比如<input type="text" disabled>。

4.为元素的属性指定属性值时没有使用引号。比如:<input type=text>。

出于“存在即合理”的考虑,WHATWG组织开始定义一种“妥协式”的规范:HTML5。HTML5成人以上的不规范是符合规范的。HTML5是规范制定者对妥协的实现。

HTML5的优势:

从HTML4.0.1、XHTML到HTML5,并不是一种革命性的升级,而是一种规范向习惯的妥协,因此从HTML到HTML5的过度非常的轻松。

1.解决跨浏览器问题。

跨浏览器问题绝对是一个永恒的“噩梦”,HTML的出现可能会改变这种局面,目前各种主流浏览器如:IE、Chrome、Firefox、Opera、Safari都表现出对HTML5极大的热情。如果各浏览器都遵循HTML5规范,以后前端程序员开发HTML+CSS+JavaScript页面将会变得更加轻松。

2.部分替代了原来的JavaScript。

比如HTML5以前要实现:打开一个页面后立即让某行文本框获得焦点,要通过javascript来实现,而现在只需要加上一个属性(autofocus)即可。

    <input type = text autofocus name = price/>

3.更明确的语义支持。

(1)HTML5提供了<header>...</header>;<nav>...</nav>;<article>...</article>;<section>...</section>;<aside>...</aside>;<footer>...</footer>来代替以前只能通过div来实现的文档结构。

(2)HTML5提供了两个新增的元素<time>2017-4-18</time>;<mark>被标记的语言</mark>提供了更加丰富的语义相比于原来的<em../>(em表示被强调的内容,但是到底是哪一种强调并不清楚)。

4.增强了WEB应用程序的功能。

一直以来,HTML被死死地限制着,客户端从服务器下载HTML页面数据,浏览器负责呈现这些HTML页面数据。出于对客户机安全性考虑,以前的HTML在安全性方面做的足够安全。

于是呢,我们就需要通过JavaScriptlai等其他方式来增加HTML的功能。

HTML5的语法变化

1.标签不再区分大小写。

2.元素可以省略结束标签。

3.允许省略属性值的属性。

4.允许属性值不使用引号。(但是对于包含空格等容易引起浏览器混肴的属性值时候,HTML5强烈建议使用引号把这种特殊的属性值引起来)

总结:HTML5说就是把不符合规范的HTML看做是一种规范,增加了一些新的api,新的实用的功能。

时间: 2024-08-06 09:54:37

HTML5——对HTML5的认识的相关文章

【html5】html5离线存储

html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强 2.准备工作 1.服务器配置 1.需要在 apache配置文件加:① AddType text/cache-manifest .manifest 2.创建缓存清单文件xxx.manifes

【html5】html5本地简单存储

html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的,复杂的数据,我习惯把前面的三个称之为小存储. 简单存储与cookie的区别 1.存储量大①web存储比cookie存储量更大,在数据量上可以达到5M,而cookie最多也就4KB,或者20个key/value对.2.安全

【html5】html5 本地存储

最近一直在学习 html5,为了后期的移动项目进行知识储备.html5 相对于 html4 新增加了一些有趣的标签.属性和方法,今天主要介绍下 html5 的本地存储. 在客户端存储数据 html5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对 session 的数据存储,一旦窗口关闭就没有了 两个方法用法完全一样,下面就以 localStorage 为例. 为什么要用本地存储 早期我们都是使用 cookie

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

二,细说 HTML5 之 HTML5 基础讲解 2

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. HTML5 样式.链接和表格 1.HTML5 样式 标签 描述 <style> 定义样式定义 <link> 定义资源引用 <div> 定义文档中的节或区域(块级) <span> 定义文档中的行内的小块或区域 属性: 属性 描述 rel="stylesheet" 外部样式表 type="text/css" 引入文档的类型 margin 边距 三种样式

【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)

序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式).感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下,发现是Html5的新特性. 0x01:IE内核的浏览器还不可以,但在Chrome与Firefox上已经实现了此API. 0x02:代码简单直接看吧 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml&qu

一,细说 HTML5 之 HTML5 基础讲解

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. 了解 HTML 1.什么是 HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 注:标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页 2. HTML版本 版本 年份 HTML 1991 HTML + 1993 HTML 2.0

跟KingDZ学HTML5之八 HTML5之Web Save

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵 弄不好,开个专题,也可以.(*^__^*) 嘻嘻--.好了开始我们今天的课程吧. 大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K  ?  真的啊,呵呵,要是工资底薪还可以..哈哈 这节课,俺说的这个和COOKIES 差不多.好了,废话不多说,我们讲课. HTML5 提供了两种在客户端存储数据的新方法: local

IT兄弟连 HTML5教程 HTML5的靠山 W3C、IETF是什么

无规矩不成方圆,软件开发当然不能例外.Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准.Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循,开发者一样要遵循相同的标准.而似乎和Web相关标准的制作组织机构很多,例如W3C.IETF.ECMA和  WHATWG等,哪些是我们需要了解的?需要掌握什么信息?都在本节详细介绍. W3C是什么 W3C创建于1994年,W3C是万维网(World Wide Web)联盟的