[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"

  "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包含更多语义化的标签，未来也许还会增加。