全栈笔记-前端-第一部分:HTML5+CSS3-01-HTML5简介
一,前言
距离HTML5的推出,至今已有将近10年了
在这10年中,前端经历了翻天覆地的变化:
从切图+网页开发到前端工程师
从前后端不分离到前后端分离
浏览器大战,Ajax技术,Nodejs二次革命
移动端发展:Android,Ios,各种移动端框架的webApp,微信小程序...
模块化和组件化:AMD,CMD,CommonJs,ES6...还有npm...
框架演进:JQuery,Angular,Vue,React...
构建工具:从单独工具进行代码丑化,压缩,合并到grunt,gulp,webpack...
数据可视化:Canvas,SVG,Echarts.js,D3.js,three.js...
等等....
还包括即将普及的TypeScript
总的来说,前端的历史并没有太久,很多看似"古老"的东西还都是溯源的
很多其他语言及后端的思想正在逐渐应用在前端领域
现在的H5 = HTML5 + CSS3 + JavaScript
即便在当下,各种UI,JS框架的应用,使前端开发的门槛大幅度降低
作为前端的铁三角,三剑客,无论到什么时候都是重要的,相当于前端领域的"汇编"
这一篇简单介绍一下HTML5
二,什么是HTML
HTML:超文本标记语言(Hyper Text Markup Language)
HTML文件是普通文本+HTML标记,不同的HTML标记表示不同效果
三,HTML的发展历史
1991年HTML被推出,当时并没有严格的定义,显得很不正规
HTML 1.0: 1993年6月由互联网工程小组发布的HTML工作草案
HTML 2.0: 1995年11月作为RFC1866发布
HTML 3.2: 1996年1月14日,由W3C组织发布,是HTML第一个被广泛使用的标准
HTML 4.0: 1997年12月18日,由W3C组织发布,W3C推荐标准
HTML 4.01: 1999年12月24日,由W3C组织发布,HTML另一个重要的,被广泛使用的标准
XHTML 1.0: 2000年1月26日发布,W3C组织推荐标准,经修订后于2002年8月1日重新发布
HTML3.2之前,HTML的发展是极为混乱的,各软件厂商自行增加HTML标记
个浏览器厂商为了能保证兼容性,尽力支持各种HTML标记
整个HTML发展历史中,最广为人知的是HTML3.2和HTML4.01
W3C:
万维网联盟(World Wide Web ConSortium),web技术标准机构
主要进行标准定制与开发,例如:HTML5和CSS的标准规范等
四,HTML4.01和XHTML
XHTML: 扩展的超文本标记语言(eXtensible Hyper Text Markup Language)
XHTML和HTML4.01具有很好的兼容性,XHTML是更严格,更纯净的HTML代码
早期的HTML,由于未执行严格的规范和各浏览器对各种HTML错误的宽容,导致HTML极为混乱
例如,在HTML标准下的某些标签是可以不闭合的
所以W3C组织制订了最新版本的HTML规范--XHTML
XHTML致力于消除HTML中的不规范,并逐步取代原有的HTML
计算机里的浏览器可以应对各种不规范的HTML文档,
但很多运行在手机,平板等手持设备上的浏览器并没有处理这些HTML标签的能力
所以,XHTML要求HTML文档首先必须是一份XML文档
五,XML文档和基本规则
XML是一种结构化文档,有4条基本约定:
整个文档有且仅有一个根元素
每个元素都有开始标签和结束标签组成(除非使用空元素语法,如
)
元素间应合理嵌套
元素的属性必须有属性值并用引号引起来
W3C建议使用XML规范来对HTML文档进行约束,结合了HTML和XML的长处
得到现在和未来都可以使用的标记语言:XHTML
XHTML能够被所有支持XML的设备读取,
HTML强制了HTML的文档结构,保证能够被所有的浏览器解释
六,HTML和XHTML的文档类型定义DTD
DTD:文档类型定义(Document Type Dfinition)
W3C使用DTD为HTML和XHTML制订了严格的语义约束
包括在HTML文档中可以出现哪些元素,各个元素支持哪些属性等
在HTML的DTD文档中(https://www.w3.org/TR/html401/loose.dtd)
<!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body -->
<!ATTLIST BODY
%attrs; -- %coreattrs, %i18n, %events --
onload %Script; #IMPLIED -- the document has been loaded --
onunload %Script; #IMPLIED -- the document has been removed --
background %URI; #IMPLIED -- texture tile for document
background --
%bodycolors; -- bgcolor, text, link, vlink, alink --
>
Body的定义使用了element,所以,应该称之为body元素,而不应叫body标签
BODY能够接受的子元素由%flow决定,%flow是一个参数实体引用,定义如下:
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | CENTER |
NOSCRIPT | NOFRAMES | BLOCKQUOTE | FORM | ISINDEX | HR |
TABLE | FIELDSET | ADDRESS">
<!ENTITY % flow "%block; | %inline;">
%block也是一个参数实体引用,代表换行的"块模型"的HTML元素
%inline也是一个参数实体引用,代表不换行的"行内"HTML元素
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
XHTML1.0的DTD文档((https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)
<!ELEMENT body %Flow;>
<!ATTLIST body
%attrs;
onload %Script; #IMPLIED
onunload %Script; #IMPLIED
background %URI; #IMPLIED
background %Color; #IMPLIED
text %Color; #IMPLIED
link %Color; #IMPLIED
vlink %Color; #IMPLIED
alink %Color; #IMPLIED
>
定义了body元素可包含的子元素有哪些,除了支持%attrs指定的各种通用属性外,
还可以指定onload,onunload,background,background,text,link,vlink,alink属性
body元素可以包含的子元素由%Flow参数实体引用定义,定义如下:
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
通过上边HTML4.01和XHTML的对比发现:
HTML4.01允许元素使用大写字母
XHTML要求所有元素,属性都必须是小写字母
虽然HTML4.01和XHTML都有DTD作为语义约束作为严格的规范标准
但实际上很少有HTML页面完全遵守HTML4.01或XHTML规范
所以,在这样的背景下,WHATWG(Web Hypertext Application Technology Working Group,Web超文本应用技术工作组)制定了一个新的HTML标准----HTML5
七,HTML5
虽然W3C努力为HTML制订规范,但当时大部分网站开发者没有接受过专业训练,
他们对HTML,XHTML规范的不了解导致互联网上绝大多数HTML是不符合规范的
但各种浏览器却可以正常解析,显示这些不符合规范的页面,
使得W3C组织呼吁大家制作遵守规范的HTML页面,而HTML开发者根本不理会这种呼吁
HTML页面存在以下不符合规范的内容:
1,元素标签名大小写混杂
2,元素没有合理结束
3,元素中使用的属性没有指定属性值
4,元素的属性值没有使用引号引起来
WHATWG组织认为"存在即合理",所以,定制了一种"妥协式"的规范:HTML5
2008年WHATWG的努力终于别W3C认可,W3C着手制订HTML5草案
2014年10月28日,HTML5规范正式发布,标志着HTML5的时代已真正到来
2016年11月1日,W3C再次发布HTML5.1规范,并开始着手定制HTML5.2规范
HTML5规范网址:
https://www.w3.org/TR/2014/REC-html5-20141028/
HTML5.1规范网址:
https://www.w3.org/TR/2016/REC-html51-20161101/
从HTML4.01,XHTML到HTML5,并不是一种革命性的升级,而是一种规范向习惯的妥协
所以HTML5不会给开发者带来麻烦,可以非常轻松的从HTML4.01过度到HTML5
HTML5的目标是:"创建更简单的web程序,写更简单HTML代码"
为此,HTML5提供了大量新API,新的属性,元素和诸多新功能
八,HTML5的浏览器支持情况
HTML5的出现改变了这个局面,各大浏览器早已迫不及待地支持了HTML5功能
Edge(IE),Chrome(Google),Firefox,Safari,Opera主流浏览器已开始支持HTML5功能
尽快全面支持HTML5规范成为了浏览器厂商快速抢占市场的"杀手锏"
微软前期因为对HTML5的支持不够积极,就导致IE市场份额的下滑
九,HTML5的优势
HTML5时代的到来,对开发者来说是一种福音
HTML5之前,由于各浏览器之间不统一,需要花费大量的时间做兼容性处理,
新的时代迫切需要一个互联网通用标准,把目前Web上存在的各种问题一并解决掉
1,解决跨浏览器的兼容性问题
在当时,跨浏览器简直就是开发者的"噩梦"
同一个页面,换一个浏览器可能会发生布局混乱,JS报错等
所以开发者在编写代码时,往往会先判断浏览器环境,根据不同的浏览器进行编码
这些问题的主要原因:规范不统一,没有被标准化
HTML5通过详细分析各Web浏览器所具有的功能并以此为基础,要求浏览器实现一个通用标准
这样开发出来的程序就可以在各浏览器上正常运行
2,替代了部分JavaScript
HTML5新增了一些实用的功能,仅通过为标签添加属性就能够代替JavaScript
例如:打开页面后,文本框立即获得输入焦点:
HTML5之前:
document.getElementById("test").focus();
HTML5:
对比可发现,使用HTML5之后,使代码更加简洁了
HTML5提供能更多属性,后续会单独介绍
3,文档结构的语义化支持
在HTML5之前,为了表示文档结构中的”标题”,”正文”等,一般都使用元素
<div id="header">...div>
<div id="nav">...div>
<div id="article">
<div id="section">
...
div>
div>
<div id="aside">...div>
<div id="footer">...div>
可以看到,所有的页面元素全部使用HTML5为页面布局提供了更明确的语义元素:
<header>...header>
<nav>...nav>
<article>
<section>
...
section>
article>
<aside>...aside>
<footer>...footer>
H5为了解决这个问题,新增了很多结构化元素,并结合了微格式,无障碍应用等技术
使用HTML5新增的语义化结构标签,使页面结构更加清晰,内容一目了然,提供更清晰的语义
HTML5还提供能更多的语义化标签,后续会单独介绍
4,增强了Web应用程序功能
一直以来,web应用程序的功能受到了极大限制
HTML5规范增加了很多新API:本地存储API,文件API,通信API等
这些功能极大地增强了Web应用程序的功能,后续会单独介绍
十,结尾
万事开头难,终于写出了第一篇
这一篇中,总结了HTML的发展历史,从HTML4.01到XHTML再到HTML5
介绍了HTML5的产生背景,各浏览器的支持情况并简单介绍了HTML5的优势
维护记录:
20190722:
创建并编写文章