HTML5 快速学习一
关注HTML5有一段时间了,一直没系统的去学习过。
对于HTML5的理解,之前停留在一些新的标签,一些api可以完成部分js完成的事情,仅此而已。
前段时间HTML5定稿了,看了一些这方面的报道,进行了系统的学习,HTML5能做的远比你想象的多。
是时候开始学习了。
本系列内容主要参考"HTML5高级程序设计"和W3SCHOOL.
本文是系列的第一篇: HTML5初窥。
文章提纲
- 概述
- HTML5发展史 & 设计理念
- HTML5新功能快速预览
- 总结
概述
随着未来桌面移动化进程的逐渐普及, 移动设备与桌面设备使用的技术架构不可避免会有趋同的走势,HTML5 是唯一通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平台的跨平台语言, 是时候采用HTML5+CSS3+JS构建新的Web应用了。
作为下一代Web语言,HTML5不再只是一种标记语言,它为下一代Web提供了全新的框架和平台,包括提供免插件的音频视频、图像动画、本地存储及更多酷炫的功能,是Web能够轻松实现native的体验。
HTML5发展史&设计理念
HTML5发展史
我把HTML5的发展史概括成三句话,详细内容有兴趣自己查阅,我就不多说了。
1993年HTML首次以因特网草案的形式发布,从2.0,3.2,4.0直到1999年的4.01版,4.01后开始停滞不前,W3C掌握着HTML规范的控制权。
一组人2004年成立了WHATWA(Web Hypertext Application Technology Working Group), 他们创立了HTML5规范, 同时针对Web应用开发新功能。(Web 2.0就是这个时候被发明的)
2006年,W3C又重新介入HTML,并于2008年发布了HTML5的工作草案,上个月正式定稿。
HTML5设计理念
1. 兼容性
支持现有文档并保持平滑过渡。
例如Google分析了上百万的页面,从中分析出DIV标签的通用ID名称,发现其中重复量很大, 很多开发人员都喜欢用DIV id="header"来标记页眉区域。HTML5于是直接定义了一个<header>标签。
2. 实用性(效率和用户优先)
HTML5规范是基于用户优先准则编写的,其宗旨是"用户至上",这意味着遇到无法解决的冲突时,规范会把用户放到第一位,其次是页面作者,再次是实现者(浏览器),最后才考虑到理论的纯粹性。
3. 化繁为简
主要做了以下改进:
以浏览器原生能力代替复杂的js代码;
新的简化的DOCTYPE;
新的简化的字符集声明;
简单而强大的HTML5 API;
4. 通用访问性
这个原则分为三个概念。
可访问性:出于对残障人士考虑,HTML5和WAI(Web Accessibility Initiative)和ARIA(Accessible Rich Internet Applications)做了紧密结合,WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。
媒体中立:如果可能的话,HTML5的功能在所有不同的设备和平台上应该都能正常运行。
支持所有语种:例如,新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。
Note
<ruby>定义和用法:
<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
HTML5新功能快速预览
新的DOCTYPE和字符集
根据上面提到的HTML5设计准则化繁为简,Web页面的DOCTYPE被极大的简化了。
HTML4 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>
谁能记得住?
请看HTML5 DOCTYPE
<!DOCTYPE html>
跟DOCTYPE一样,字符集的声明也被简化了。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
现在成了
<meta charset=utf-8" />
新元素和旧元素
HTML5标记元素根据内容类型的不同,分成7大类:
内嵌
像文档中添加其他类型的内容,例如audio、video、canvas和iframe等
流
在文档和应用的body中使用的元素,例如form、h1和small等
标题
段落标题,例如h1、h2和hgroup等
交互
与用户交互的内容,例如button和textarea等
元数据
通常出现在页面的head中,设置页面其他部分的表现和行为,例如script、style和title等
短语
文本和文本标记元素,例如mark、kbd、sub和sup等
片段
用于定义文档中片段的元素,例如article、aside和title等
语义化标记
HTML5新的片段类元素介绍
header
标记头部区域的内容(用于整个页面或页面中的一块区域)
footer
标记脚部区域的内容(用于整个页面或页面中的一块区域)
section
web页面中的一块区域
article
独立的文章内容
aside
相关内容或引文
nav
导航类辅助内容
下面是一个标签位置的示意图
使用Selectors API简化选取操作
除了语义化元素外,HTML5还引入了一种用于查找页面DOM元素的快捷方式。
HTML5之前查找元素的js举例:
函数:getElementById()
举例:<div id="foo"> getElementById("foo")
HTML5有了新的Selectors API, 可以用更精确的方式来指定希望获取的元素,而不必再用标准的DOM的方式循环遍历。使用方式类似于CSS中使用的选择规则一样。举例:
函数1:querySelector()
描述:根据指定的选择规则,返回在页面中找到的第一个匹配元素
示例:querySelector("input.error")
结果:返回第一个CSS类名为"error"的文本选择框
------------
函数2:querySelectorAll()
描述:根据指定规则返回页面中所有相匹配的元素
示例:querySelectorAll("#results td")
结果:返回id值为results的元素下所有的单元格
Note
1. 可以为Selector API函数同时指定多个规则,例如
//选择文档中名为highClass或lowClass的第一个元素
var x= document.querySelector(".highClass",".lowClass");
2. Selectors API不仅仅只是方便,在遍历DOM的时候,
Selectors API通常会比以前的遍历搜索更快,浏览器对选择器匹配进行了高度优化。
window.JSON
JSON作为js语法的一个子集,它将数据表示为对象字面量。
由于其语法简单和在js编程中与生俱来的兼容性,JSON变成了HTML5应用内部数据交换的事实标准。
典型的JSON API包含两个函数,parse()和stringify(), 分别用于将字符串序列化成DOM对象和将DOM对象转换成字符串。
如果旧的浏览器使用JSON,需要js库。
在js中执行解析和序列化效率往往不高,所以为了提高执行速度,新的浏览器原生扩展了对JSON的支持,可以直接通过js来调用JSON了。
总结
本文首先介绍了HTML5的一些重要特点,HTML的历史和设计理念。
最后对HTML5的新功能进行了快速预览。
赶紧抽时间学习HTML5吧!
好了,今天就到这里。
欢迎大家多多评论,让下一篇文章更好 :)
HTML5 快速学习一的更多相关文章
- HTML5 快速学习二 Canvas
本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 60分钟Python快速学习(给发哥一个交代)
60分钟Python快速学习 之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空 ...
- LinqPad工具:帮你快速学习Linq
LinqPad工具:帮你快速学习Linq 参考: http://www.cnblogs.com/li-peng/p/3441729.html ★:linqPad下载地址:http://www.linq ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
随机推荐
- python 获取文件和文件夹大小
1.os.path.getsize可以获取文件大小 >>> import os >>> file_name = 'E:\chengd\Cd.db' >> ...
- [LOJ#6044]. 「雅礼集训 2017 Day8」共[二分图、prufer序列]
题意 题目链接 分析 钦定 \(k\) 个点作为深度为奇数的点,有 \(\binom{n-1}{k-1}\) 种方案. 将树黑白染色,这张完全二分图的生成树的个数就是我们钦定 \(k\) 个点之后合法 ...
- pycharm如何在虚拟环境中引入别人的项目
如果你想引入别人的项目,但是呢引入的项目可能与自己原先装的模块的版本产生冲突,而且如果引入一个项目就在本地进行运行使用,每个项目用的依赖包都不大相同,就会导致解释器安装包过多,就会导致加载过慢,甚至会 ...
- 微服务监控zipkin、skywalking以及日志ELK监控系列
0.整体架构 整体架构目录:ASP.NET Core分布式项目实战-目录 一.目录 1.zipkin监控 2.skywalking监控 3.ELK日志监控 asp.net Core 交流群:78746 ...
- 设计模式 笔记 桥接模式 Bridge
//---------------------------15/04/15---------------------------- //Bridge 桥接模式----对象结构型模式 /* 1:意图:将 ...
- vs2017 用 nuget发布包时报错
安装了 vs2017后, 发布nuget 时报错: Failed to load msbuild Toolset 未能加载文件或程序集"Microsoft.Build, Version=14 ...
- 最简单的iOS网络请求
做iOS开发,说到网络请求,大家可能都不约而同的提到AFN,可以说大家的网络请求都是用AFN封装而成,AFN的强大易用的确很好. 但是版本升级就会出现一些问题,所以就自己基于iOS原生封装了一个网络请 ...
- idou老师教你学Istio :如何用istio实现监控和日志采集
大家都知道istio可以帮助我们实现灰度发布.流量监控.流量治理等功能.每一个功能都帮助我们在不同场景中实现不同的业务.那Istio是如何帮助我们实现监控和日志采集的呢? 这里我们依然以Bookinf ...
- Spark RDD深度解析-RDD计算流程
Spark RDD深度解析-RDD计算流程 摘要 RDD(Resilient Distributed Datasets)是Spark的核心数据结构,所有数据计算操作均基于该结构进行,包括Spark ...
- Notes of Daily Scrum Meeting(12.21)
今天的燃尽图把周六的进度加了进来,由于我的失误没有及时更新TFS,所以出现了一些错误,向大家道歉. 下面是今天的任务总结: 团队成员 今日团队工作 陈少杰 继续进行网络连接的调试 王迪 测试搜索的功能 ...