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