[01]HTML基础之简单介绍

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" 
  "//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="//www.html.com">Hello,World</a>为元素,<a></a> 为标签; Hello,World 为元素内容,href="//www.html.com"为元素属性。

5.标签

随着html5的普及,语义化编写显得愈来愈重要,从前可以是span+div的格局,或table+font的布局,如今却是难以支撑。时代在进步,技术在迭代,身处变革环境里的我们同样需要紧随科技的步伐。

从作用来讲,语义化有助于盲视者的听力理解,也利于搜索引擎的爬取,同时也利于日后代码的维护。踏过html4.01的时代,html 5包含更多语义化的标签,未来也许还会增加。