即使有一颗强大的心，也要让人看到你美丽的外表

html的结构图：

一、Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面。那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了DOCTYPE的声明，那么就等同于开启了标准模式，那么浏览器就严格的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

即使有一颗强大的心，也要让人看到你美丽的外表

二、head 头部信息

　　1.Meta(metadata information)

　　　　提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

- 页面编码（告诉浏览器是什么编码）　　
```
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
```
- 刷新和跳转
```
<meta http-equiv="Refresh" content="5"/>   
<meta http-equiv="Refresh" content="5; Url=http://www.baidu.com"/>
```
- 关键词
```
<meta name="keywords" content="oldboy,chenchao,python_html"/>
```
- X-UA-Compatible 定义文档兼容性
  与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
  
  当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。

　　2.Title 网页头部信息

　　　　<title>陈超11期</title>

　　3.Link

    <!--本地图标地址-->
　　<link rel="shortcut icon" href="image\logo.jpg"/>

    <!--css样式表，相当于衣柜-->
　　<link rel="stylesheet" href="css/common.css"/>

　　4.Style 定义在文件内部的样式集合

　　<style type="text/css">
    　　.cc{
        　　background-color: red;
    　　}　　</style>

三、body 身体部分

　　行内标签

　　　　1.a标签　　<a></a>

　　　　就地跳转：
　　　　<a href="http://www.baidu.com">this is a </a> <br/>
　　　　新页面打开：
　　　　<a href="http://www.baidu.com" target="_blank">This is new A</a>

　　　　　锚：自动跳至相应的位置

　　　　<a href="#d2">跳转到第二章</a>
　　　　<div >第2章</div>

　　　2.select标签　

 1 <!--普通样式-->
 2 <select >
 3     <option value="1">北京</option>
 4     <option value="2">上海</option>
 5     <option value="3" selected="selected">广州</option>
 6 </select>
 7 
 8 <!--显示三个-->
 9 <select size="3" >
10     <option value="a">First Day</option>
11     <option value="b" selected="selected">Sec day</option>
12     <option value="c">Third day</option>
13 </select>
14 
15 <!--多选-->
16 <select  multiple="multiple" size="3">
17     <option value="1">多选一</option>
18     <option value="2">多选二</option>
19     <option value="3">多选仨</option>
20     <option value="4">多选四</option>
21 
22 </select>
23 
24 <!--分组-->
25 <select >
26     <optgroup label="北京">
27         <option>朝阳</option>
28         <option selected="selected">海淀</option>
29     </optgroup>
30     <optgroup label="上海">
31         <option>浦东</option>
32         <option>商业</option>
33     </optgroup>
34 </select>

select