Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2、 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> #30秒之后刷新一次
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> #5秒之后跳转到某链接
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 版本。 文档兼容性在 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;ID=IE8" />
============================================================
Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< link rel="shortcut icon" href="image/favicon.ico"> 小图标 
Style
在页面中写样式
例如：< style type="text/css" >
.bb{
}
< /style>
Script
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 写js代码
< script type="text/javascript" > ... </script >
常用标签
标签一般分为两种：块级标签 和 行内标签
- a、span(白板，其它特性都不带，主要适用于css)、select 等
- div、H、p 等 块级便签
p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
H 标签 (标题大小)
H1 <h1>index</h1>
H2
H3
H4
H5
H6
账号密码框和登入按钮
<form> #表单的意思 账号 密码必须要放在表单里面 action=表单提交到哪 ，method 以什么方式提交
<input type="text" name=‘user’/> #要提交表单必须再后面加上name，没有name后台拿不到数值
<input type="password" name=‘user’/>
<input type="button" value="登入"/> #默认没啥用 配合js有效果
<input type="submit" value="登入"/> #submit提交表单才有效果
</form>
============表单也可以用于提交别人的服务器 =================================
<form action="https://www.sogou.com/web?"> <input type="text" name="query"/> <input type="submit"value="搜索"/> </form>
=======input 常用提交组件==========================
<form enctype="multipart/form-data"> <div> <span>请选择性别</span> 男：<input type="radio" name="dender" value="1" checked="checked"/> #radio 单选框，两个都不选中价格name值， value让后台能识别选中哪个 女：<input type="radio" name="dender" value="2"/> # ,checked =默认被选中 name相同互斥 <p> 爱好</p> 篮球：<input type="checkbox" name="fover"value="1"/> #多选款,后台拿到数据，name值设置相同，value设置不同获取地址 足球：<input type="checkbox"name="fover"value="2"/> #多选款相同批量获取 皮球：<input type="checkbox"name="fover"value="3"/> 网球：<input type="checkbox"name="fover"value="4"/> </div> <input type="submit" value="提交"> <p>上传文件</p> <input type="file" value="提交"/> #提交文件 ，依赖form表单的一个属性 "multipart/form-data" 一点一点发给服务器 <input type="reset"/> #----重置，先选中 然后可以重置 </form>
=====================文本款=========================
<textarea name="meno"> 默认值</textarea> #不是自闭和标签，里面也有name属性 内容放中间就可以了
=====================下拉款=========================
<select name="city" size="10" multiple="multiple"> #下拉款， size 下拉款形式展现出来 ，multiple 可以多选
<option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> selected默认南京
<option value="4">杭州</option> </select>
===========a 标签 以及锚的用法======================
<a href="http:www.baidu.com" target="_blank">百度</a> #a标签用来做跳转，不能提交到表单，还可以用来做锚点 target="_blank"代表打开新网页
============================================锚点使用方法========================== <a href="#i1" >第1章</a> 锚地ID 不能相同 a标签后面一定要加 # <a href="#i2" >第2章</a> <a href="#i3" >第3章</a> <div id="i1" style="height: 600px;">第1章内容 </div> <div id="i2"style="height: 600px;">第2章内容 </div> <div id="i3"style="height: 600px;">第3章内容 </div>
=============img src 使用=====================
<a href="http:\\www.baidu <img src="https://img.alicdn.com/imgextra/i3/740469814/TB20BB.adqgF1JjSsppXXaBNXXa-740469814.jpg" alt=“图片1” title=“”美女“” style="height: 600px;width: 600px;"> </a> #用了a 标签可以跳转指定链接 title可以指定获取图片标签 alt 没有图片可以显示出来名字
==============================表格操作=======================
<table border="1"> 创建表格 <tr> <td>第一行第一列</td> <td>第一行第一列</td> <td>第一行第一列</td> </tr> <tr> <td>第2行第一列</td> <td>第2行第1列</td> <td>第2行第3列</td> </tr> </table>
===================带有表头以及合并单元格===================================================
<table border="1"> <!-- 创建表头/--> <thead> <tr> <td >表头</td> <td>表头</td> <td>表头</td> <td>表头</td> </tr> </thead> <tbody> <tr> <td>第一行</td> <td>第一行</td> <td>第一行</td> <td>第一行</td> </tr> <tr> <td colspan="2">第二行</td> colspan 行合并 第二行横着占两个 <td>第二行</td> <td>第二行</td> </tr> <tr> <td>第三行</td> <td>第三行</td> <td>第三行</td> <td rowspan="2">第三行</td> rowspan 列合并第三行第四和第4行第4个合并 </tr> <tr> <td>第四行</td> <td>第四行</td> <td>第四行</td> </tr>
=======================列表相关=======
<ul> <li> we</li> <li> we</li><li> we</li> </ul>
<ol> <li> we</li> <li> we</li> <li> we</li> </ol>
========================label标签使用=======================
<fieldset> <legend>登入</legend> <label for="username">用户名</label>#label 标签可以点击用户名让编辑框可以输入 <input id="username" type="text" name="user"/><label for="pwd">密 码</label> <input id="pwd" type="password" name="pwd"/> </fieldset>
