1.前言
现如今科技进步,足不出户尽晓天下事,一转身便仿若隔世茫然。科技绽放时代,网络技术对人们的触变无疑是深远而重大的,隐于缤纷绚丽的网页背后,是前端的蜕变更新。
如今,随意点开页面,绚丽华彩的特效及流畅的用户体验,是以前始料未及的。从切图到框架,从组件到模块,从简单到系统,前端渐成一方世界。
2.历史
1989年,出于地域交流不便,欧洲粒子物理实验室研发出一套远程资源共享系统,该系统基于浏览器实现文本信息的交换,万维网(www,即world wide web)诞生。
1993年,伴随万维网的萌芽,超文本标记语言(html,即HyperText Markup Language)顺势诞生,语义化标签让页面结构清晰简洁。
1994年,关于html标准化的万维网联盟(w3c,即world wide web consortium)建立,从此拉开万维网标准化规范化的革命历程。
在html的历史里,有两大版本值得注意,html 4.01版本(1999年),html 5版本(2008年),尽管路不同起,但在各自的时代里举足轻重。
尽管不在编程语言的范畴里,但它作为一门标记语言,负责页面的结构及语义,用正确的标签解释正确的页面结构。所及即所得,是html较为容易上手的的一点,从标签入手很快便能写出可读可维护的页面。
3.文档
网页丶页面及文档,通俗地说,可以理解为同一事物。文档分类型,除html类型外,还有xml,xhtml等类型,相较来说 html 类型的文档较为常见。
文档声明(DTD,即Document Type Denifition),声明页面的文档类型及版本,文档声明的意义是让浏览器能正确识别文档类型,并调用相应的处理引擎处理该文档。
如今的html,逐渐撇弃html4.01全面拥抱html 5,但有时仍需做兼容处理,在此介绍该两个版本的两种不同声明方式:
//html 4.01文档声明:w3c标准,写法繁琐但兼容性较好。
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
//html 5文档声明:去除部分非语义化标签,新增部分语义化标签,简洁清晰。
<!doctype html>
4.结构
<html>
为文档根标签,除文档声明外,文档所有内容均包含在<html>
标签里,而html标签及其内容组成的元素成为为根元素。
根元素下,包含<head>
及<body>
两大标签:
<head>
即头部标签,主要包含文档的元数据及各类声明,如字符编码,图标,样式表,脚本等,该元素内容通常不会在页面中直接显示,但对文档的解析及处理非常关键;
<body>
即主体标签,负责页面内容的展示,该元素内的内容便是我们在浏览器里所看到的内容
元素
:语法概念,由标签
丶内容
及属性
组成,以元素为语法单位可以有更直观的感受。
标签
:主要语法结构,可分为单标签及双标签,<hr>
为单标签,而<a></a>
为双标签(其中<a>
为开始标签,</a>
为结束标签)。
内容
:即双标签内的内容,单标签没有元素内容(或说没有直接内容)。
属性
:存在于开始标签内,以键值对的形式存在,布尔值类型的属性可以省略值,如hidden。
以下,以某元素为例解释下元素的组成内容:
<a href="http://www.html.com">Hello,World</a>
为元素,<a></a>
为标签; Hello,World
为元素内容,href="http://www.html.com"
为元素属性。
5.标签
随着html5的普及,语义化编写显得愈来愈重要,从前可以是span+div的格局,或table+font的布局,如今却是难以支撑。时代在进步,技术在迭代,身处变革环境里的我们同样需要紧随科技的步伐。
从作用来讲,语义化有助于盲视者的听力理解,也利于搜索引擎的爬取,同时也利于日后代码的维护。踏过html4.01的时代,html 5包含更多语义化的标签,未来也许还会增加。