HTML
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身 是一种文本文件，通过在文本文件中添加标记符，
可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读 网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，
且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出 错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果.
基本组成：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html> <head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息 <body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意 <html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
HTML文档
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老 实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。看起来很牛逼的样子。
HTML-HEAD
1、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词、兼容性
页面编码
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
刷新
<meta http-equiv="Refresh" content="30" />
刷新、跳转
<meta http-equiv="Refresh" content="2; Url=http://www.baidu.com" />
关键词和描述
<!--关键词-->
<meta name="keywords" content="星际2，星际老男孩，星际老女孩">
<!--描述-->
<meta name="description" content="博客园是一个面向开发者的知识分享社区。">
X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占
据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部
标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本
上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法
正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，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 模式）显示该网页。
<!--兼容IE8之前版本-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息
<title>测试页面</title>
3、link
定义了页面链接标签的默认链接地址 例如：导入页面头部图标，外部css
<!--图标-->
<link rel="icon" href="favicon.ico">
<!--调用外部css-->
<link rel="stylesheet" type="text/css" href="common.css">
4、Style
1、在当前文件中写Css样式
<style type="text/css">
.cc{
color: red;
font-size: 19px;
}
</style>
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
<link rel="stylesheet" type="text/css" href="common.css">
5、Script
1、在当前文件中写JS
引进文件
<script type="text/javascript" src="jquery-2.2.3.js"></script> <script>
js代码
<script type="text/javascript"> ... </script>
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
<script type="text/javascript" src="js/Form_menu.js"></script>
HTML-BODY
标签一般分为两种：块级标签 和 行内标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小
- a、span、select 等
- div、h1、p 等
特殊符号特殊处理
举例来说<h1>是标题标签，如果我想输出<h1>这个字符串，而不是想获取<h1>的样式怎么办呢？
正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示，所以特殊的标签需要特殊处理。
更多特殊符号请参看：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
1.标题(h标签)
<!--h1标签 块级标签 标题1 h2 .. h3..-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.段落（p标签）
<!--p标签显示段落,行间有间距 行内标签br换行-->
<p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p>
<p>wolegeca what are you nong sha ne <br/>how much fuck you once </p>
3.div（div+css）
<div style="width: 200px;border: 2px solid red;word-break: break-all;">
<!--p标签显示段落,行间有间距 行内标签br换行-->
<p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p>
<p>wolegeca what are you nong sha ne <br/>how much fuck you once </p>
</div>
4.超链接（a标签）
target 属性
<a href="http://www.baidu.com" target="_blank">百度</a>
使用 target 属性，你可以定义被链接的文档在何处显示。_black表示在新的页面打开。
锚属性
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置
<!--锚 id=tt href=#tt-->
<a href="#tt">看这里</a>
<div style="height: 1000px;background-color: red">第一章</div>
<div id="tt" style="height: 1000px;background-color: green">第二章</div>
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
5.图片标签（img）
title属性 即光标放在图片上显示的信息
可以设置图片大小height，width等
<img title="re" src="2.png" style="height: 78px;" />
6.下拉框标签（select）
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
selected属性
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<!--默认选择第一个，selected选择指定项-->
<option value="3" selected="selected">广州</option>
</select>
size 和 multiple属性
<!--下拉框只显示两个 实现滚轮效果 可以多选 默认单选-->
<select size="2" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
添加分组且组名不可被选
<!--下拉框添加分组标签,标签不可选-->
<select>
<optgroup label='河北省'>
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label='山西省'>
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
7.input系列
checkbox多选项
<h4>checkbox多选框 checked 默认已选择</h4>
<h5>爱好</h5>
<p>篮球：<input type="checkbox" checked="checked" /></p>
<p>足球：<input type="checkbox" /></p>
<p>排球：<input type="checkbox" /></p>
radio互斥项
<h4> radio 互斥框 </h4>
<h5> 性别 </h5>
<p>男:<input name="gender" type="radio" /></p>
<p>女:<input name="gender" type="radio" /></p>
text 和 password
<h4> text输入框 password输入框 value属性:输入默认值</h4>
<p>用户:<input type="text" value="username"></p>
<p>密码:<input type="password"></p>
button 和 submit
<input type="button" value="按钮">
<!--submit在表单中存在的时候表示把数据提交到后台 botton只是按钮-->
<input type="submit" value="提交">
textarea区域文本框
<!--textarea文本框输入多行内容-->
<p><textarea>默认值</textarea></p>
file 导入文件
<h4>导入文件</h4>
<input type="file"/>
8.表单（form）
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
<form>
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/></p>
<input type="submit" value="提交"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form action 指定上传位置 传输方式-->
<form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post">
<p>
<!--form提交数据后端接收为字典 指定name为字典key输入内容为value-->
<input type="text" name="host" />
<input type="password" name="pwd" />
</p>
<!--div中指定样式-->
<div style="background-color: rosybrown;color: white;">
<h6>爱好</h6>
<!-- checkbox默认为on form中需要指定name 和 value -->
篮球：<input name="favor" type="checkbox" value="1" />
足球：<input name="favor" type="checkbox" value="2" />
排球：<input name="favor" type="checkbox" value="3" />
</div>
<div>
<h6>性别</h6>
<!--同上-->
男：<input name="gender" type="radio" value="1"/>
女：<input name="gender" type="radio" value="0"/>
</div>
<div>
<h6>城市</h6>
<!--提交下拉列表框 name在select中指定，value在option指定-->
<select name="city">
<option value="888">上海</option>
<option value="999">北京</option>
</select>
</div>
<div>
<!--文本框 name为key输入内容为value-->
<textarea name=",moo"></textarea>
</div>
<div>
<h4>文件</h4>
<input type="file" name="file_name">
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
9.列表系列
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<u1>
<li>111</li>
<li>222</li>
</u1>
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>www</li>
<li>wwwooo</li>
</ol>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
10.table系列
border边宽, thead表头, tbody表身,colspan横跨两列的表格,rowspan横跨两行的表格
<table border="1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead> <tbody>
<tr>
<td colspan="2">h1,h2</td>
<!--<td>h1</td>-->
<!--<td>h2</td>-->
<td>h3</td>
</tr>
<tr>
<!--<td rowspan="2">hh1,hhh3</td>-->
<td>hh1</td>
<td>hh2</td>
<td>hh3</td>
</tr>
<tr>
<td>hhh1</td>
<td>hhh2</td>
<td>hhh3</td>
</tr>
</tbody>
</table>
11.fieldset
将表单内的相关元素分组。
<fieldset>
<legend>用户登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>