本章内容
- Doctype
- Meta
- Title
- Link
- Style
- Script
- 常用标签
概述
HTML是英文Hyper Text Mark-up Language（超文本标记语言）的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义同意的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！（例：djangomoan模块引擎）
在开始笔记之前先来一个图，文档树：
上图就是一个Html文件的基本内容，我们可以知道html是由head（头部）和body（正文）组成。下面就来介绍一下head中的一些规则。
一、Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析文档，因为你知道我们现有的规范可不止一种，你不告诉浏览器用什么样的规范，那浏览器知道该用哪个来给你解析？
有和无的区别
- BackCompat:标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat:标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始--浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样依赖，你的页面在所有的浏览器里显示的就都是一个样子了。
那我们该用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，dtd文件爱你则包含了标记、attributes、properties、约束规则。
二、Meta（metadata information）
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1.页面编码（告诉浏览器是什么编码）
< meta http-equiv = "content-type"
content = "text/html;charset = utf-8">
2.刷新和跳转
< meta http-equiv = Refresh"
Content = "5;
Url = http://www.authome.com.cn"/>
3.关键词
< meta name = "keywords" content = "星际2，星际老男孩，专访，F91，小色，JOY"
4.描述
例如：cnblogs
5.X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候吗，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早起IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错软、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8对于行业标准提供了更加爱紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8引入了文档兼容性的概念，从而允许您指定站点所支持的Internet Explorer版本。文档兼容i系那个在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模式）显示该网页。
< meta http-equiv ="X-UA-Compatible"
content = "IE=EmulateIE7" />
三、Title
网页头部信息
例如：
<title> 百度一下，你就知道</title>
当然示例中只是单纯的文字，我是用pycharm写的，然后用Google Chrome打开的。
四、Link
- css
< link rel="stylesheet" type="text/css"
href="css/common.css"
2.icon
< link rel="shortcut icon"
href="image/favicon.ico">
<link>的用途是连接样式表，出现在head中，没有数量限制。
五、Style
用于定义页面中的样式，例如：
1 < style type="text/css" >
2 .bb{
3 background-color: red;
4 }
5 < /style>
.bb是什么呢？下一章你就知道了。
六、Script
1.引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js">
< /script>
2.写js代码
< script type="text/javascript" >...< /script>
七、常用标签
HTML标签是HTML语言中最基本的单位，与大小写无关，一般标签成对出现，当然也有单独呈现的，比如：<img src="百度百科".jpg />等。我们写静态网页就是用这些标签来写出来的。
标签一般分为两种：块级标签 和行内标签
- a、span、select等
- div、h、p等
各种符号
由于我认为对于我来说，并不想成为一个前端开发工程师，而是python高级开发工程师，所以呢，要用的时候就再翻吧。符号综合链接，点我吧-->
p 和br
p表示段落，默认段落之间是有间隔的！
br是换行
a标签
<a href="http://www.autohome.com.cn" > </a>
- target属性，_black表示新的页面打开
- 锚（根据我百度到的意思，大概就是指向某个链接（或超链接），如上。）
h标签
有h1、h2、h3、h4、h5、h6，h标签呢基本就是字号大小，h1最大，之后随数字增大减小。
select标签
这个标签基本就是用来做下拉框的，看以下例子：
1.单个下拉框
1 <select>
2 <option value="1" >上海</option>
3 <option value="1" >北京</option>
4 <option value="1" selected="selected">广州</option>
5 </select>
这段代码中，selected是option标签中的一个属性，就是为了给下拉框设置默认值。option详解，-->
看效果：
2.一次显示多个值
1 <select size='2'>
2 <option>上海</option>
3 <option>北京</option>
4 <option>广州</option>
5 <option>湖北</option>
6 </select>
size属性就是设置可显示的值的个数，例1中没有设置，则默认显示的值的个数为1。
看效果：
3.同时选定多个选项
1 <select multiple="multiple" size='2'>
2 <option>上海</option>
3 <option>北京</option>
4 <option>广州</option>
5 <option>广州</option>
6 </select>
multiple属性就是允许选定多个值，在例1、2中，我们都只能选定单个，加上multiple属性后按住ctrl即可同时选定多个值。
看效果：
4.选项组合
1 <select>
2 <optgroup label='河北省'>
3 <option>石家庄</option>
4 <option>邯郸</option>
5 </optgroup>
6 <optgroup label='山西省'>
7 <option>太原</option>
8 <option>平遥</option>
9 </optgroup>
10 </select>
optgroup标签可以把相关的选项组合在一起，label为选项组合规定描述，还有一个disabled属性是规定禁用该选项组。
看效果：
input标签
input标签就是一个输入框，这个效果就不演示了。
input：checkbox
checkbox属性是一个选择框
1 <div>
2 <input type='checkbox'/>
3 <input type='checkbox' checked/>
4 <input type='checkbox' checked='checked'/>
5 </div>
checked属性为默认勾选
看效果：
input：radio
radio属性是一个选择按钮
1 <div>
2 男<input type="radio" value="man">
3 女<input type="radio" value="male">
4 保密<input type="radio" value="no">
5 <br/><br/>
6 男<input type="radio" name="gender" value="man">
7 女<input type="radio" name="gender" value="male">
8 保密<input type="radio" checked="checked" name="gender" value="no">
9 </div>
第一行中的radio按钮默认是没有选中的，其次可以选择多个；第二行中只可选择一个并且必定要选择一个。
看效果：
input：password
password的输入是被掩盖的，提供用户输入某些敏感的数据，比如密码等。
1 <div>
2 <input type='text'/>
3 <input type='password'/>
4 </div>
看效果：
input： button&submit
button对象是一个按钮
submit对象是一个提交按钮
1 <div>
2 <input type='button' value='button' />
3 <input type='submit' value='submit'/>
4 </div>
button对象没有默认的行为，也就是说其实你点它它也不会鸟你，它主要通过onclick事件来进行使用的。
submit对象一般用来提交表单，在提交之前，触发onclick事件句柄，并且一个句柄可以通过返回fasle来取消表单提交。
看效果：
input：file
该对象是用于发送文件的
1 <div>
2 <input type='file' value='file' />
3 <p>提交文件时： enctype='multipart/form-data' method='POST'</p>
4 </div>
该元素的value属性保存了用户指定的文件的名称，但是当包含一个file-upload元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
看效果：
textarea
该标签定义多行的文本输入控件，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是Courier）
1 <div>
2 <textarea></textarea>
3 <textarea style='500px;height: 200px;'></textarea>
4 </div>
看效果：
label
带有两个输入字段和相关标记的简单HTML表单
1 <div>
2 姓名：<input id='name1' type='text' />
3 婚否：<input id='marriy1' type='checkbox' />
4 <br/>
5 <label for='name2'>姓名：<input id='name2' type='text' /></label>
6 <label for='marriy2'>婚否：<input id='marriy2' type='checkbox' /></label>
7 </div>
看效果：
ul、ol、dl
<ul>标签是无序HTML列表：
1 <ul>
2 <li>ul.li</li>
3 <li>ul.li</li>
4 <li>ul.li</li>
5 </ul>
看效果：
<ol>标签是有序HTML列表：
1 <ol>
2 <li>ol.li</li>
3 <li>ol.li</li>
4 <li>ol.li</li>
5 </ol>
看效果：
<dl>标签定义列表，用于结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）
1 <dl>
2 <dt>河北省</dt>
3 <dd>邯郸</dd>
4 <dd>石家庄</dd>
5 <dt>山西省</dt>
6 <dd>太原</dd>
7 <dd>平遥</dd>
8 </dl>
看效果：
table
定义HTML表格，简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。
tr元素定义表格行，th元素定义表头，td元素定义表格单元。
1 <table border='1'>
2 <tr><td>1</td><td>2</td><td>3</td></tr>
3 <tr><td>1</td><td>2</td><td>3</td></tr>
4 <tr><td>1</td><td>2</td><td>3</td></tr>
5 </table>
看效果：
更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
1 <table border='1'>
2 <thead>
3 <tr><th colspan='3'>1</th></tr>
4 <tr><th>1</th><th>2</th><th>3</th></tr>
5 </thead>
6 <tbody>
7 <tr><td>1</td><td>2</td><td>3</td></tr>
8 <tr><td>1</td><td>2</td><td>3</td></tr>
9 <tr><td>1</td><td>2</td><td>3</td></tr>
10 <tr><td rowspan='3'>1</td><td>3</td><td>3</td></tr>
11 <tr><td>3</td><td>3</td></tr>
12 <tr><td>3</td><td>3</td></tr>
13 <tr><td>3</td><td>3</td><td>3</td></tr>
14 </tbody>
15 </table>
看效果：
fieldset
可将表单内的相关元素分组
1 <fieldset>
2 <legend>登录</legend>
3 <p>用户名：</p>
4 <p>密码：</p>
5 </fieldset>
看效果：
form
用于为用户输入创建HTML表单，表单能够包含input、menus、textarea、fieldset、leqund和label元素。
1 <form method='POST' action='http://www.baidu.com'>
2 <input type='submit' value='submit'/>
3 </form>
4 <br/><br/><br/>
5 <form method='GET' action='http://www.baidu.com/s'>
6 <input type='text' name='wd'>
7 <input type='submit' value='submit'/>
8 </form>
看效果：
第一个submit是以POST方式提交的，所以呢，是会报错的。
第二个submit是以GET方式提交的，则会正确的转到百度。
如果想深入学习，可以去HTML参考手册看详细资料。
注：本文仅为学习笔记、摘要。
HTML参考手册：http://www.w3school.com.cn/tags/index.asp