Doctype

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

有和无的区别

1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
2. 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”>

1. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

1. 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

1. 描述

例如：cnblogs

1. 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" />

Title

网页头部信息

Link

1. css

< link rel="stylesheet" type="text/css" href="css/common.css" >

1. icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：
< style type="text/css" >
.bb{
      background-color: red;
   }

< /style>

Script

1. 引进文件

　　　　　　< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

1. 写js代码

　　　　　　< script type="text/javascript" > ... </script >

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签（锚文本超链接标签）

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

A标签内常用属性：

1）、href：打开目标地址（网址），一般填写将要转到目标地址。如href="http://www.xxx.com/"这样浏览者在网页中鼠标点击对应此锚文本将打开到网页http://www.xxx.com/

2）、target：打开目标方式

如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页

_blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址

_parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址

常用就此两种打开目标方式，一个是新建窗口、一个不设置target将本页重新载入锚文本地址指向URL、一个是整个网页父级重新载入（类似于没有设置target）相同效果。

2、锚（同页面内上下转到指定位置）
使用语法：

1、需要转到地方添加，<a href="#top">文字</a>，注意href值是#开头+英文字母命名

2、需要在被转到位置添加，<span id="top" name="top"></span>，注意id和name值相同并且与a命名相同

这样就可实现点击“回到顶部”即可本页内快速浏览到网页顶部位置。

H 标签

在没有赋予H1 H2 H3 H4标签任何CSS样式时候，字体大小h1大于h2大于h3大于h4...

select 标签(下拉菜单)

select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值（用于数据的传值）

#显示选中的属性

<select>

    <option value='1'>上海</option>

    <option value='2'>北京</option>

    <option value='3' selected='selected'>广州</option>

</select>

#下拉菜单大小为2

<select size='2'>

    <option>上海</option>

    <option>北京</option>

    <option>广州</option>

    <option>广州</option>

</select>

#下拉菜单多选

<select multiple="multiple" size='2'>

    <option>上海</option>

    <option>北京</option>

    <option>广州</option>

    <option>广州</option>

</select>

#某些值不可选

<select>

    <optgroup label='河北省'>

        <option>石家庄</option>

        <option>邯郸</option>

    </optgroup>

    <optgroup label='山西省'>

        <option>太原</option>

        <option>平遥</option>

    </optgroup>

</select>

input  标签

属性值

Checkbox（多选复选框）

<input name="Fruit" type="checkbox" value="" />

使用html input标签，name为自定义，type类型为“checkbox”的表单

<input type='checkbox'/>

<input type='checkbox' checked/>

<input type='checkbox' checked='checked'/>

redio(单选框)

<input name="Fruit" type="radio" value="" />

使用html input标签，name为自定义，type类型为“radio”的表单，

注意对比以下两组，要实现单选，必须name 名称相同

男<input type="radio" value="man">

女<input type="radio" value="male">

保密<input type="radio" value="no">

男<input type="radio"  name="gender" value="man">

女<input type="radio"  name="gender" value="male">

保密<input type="radio" checked="checked" name="gender" value="no">

----按钮

button标签

<button> 标签定义一个按钮。
<button type="button">Click Me!</button>

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

<input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按 钮中创建一个吸引人的标记图像。

Submit

<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单.

submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。或者在使用submit时验证时加return true或false。

File

<input type="file" /> 用于文件上传。

提交文件时： enctype='multipart/form-data' method='POST'

textarea

<textarea rows="3" cols="20">

在w3school，你可以找到你所需要的所有的网站建设教程。

</textarea>

标签内属性说明

Name 为传值命名

Cols 为字符宽度（每行输入文字多少宽度），跟具体数字

Rows 为行数，默认输入框区域显示高度，跟具体数字

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

ul ol

• 有序列表（ol li）
• 无序列表(ul li)

dl dt dd

<dl>

<dt>列表标题</dt>

<dd>列表内容</dd>

<dd>列表内容</dd>

...

</dl>

语法解释：

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
同时dd内可以放置<ul>标签使用(放在<ol> 中无序号，效果同ul)。

table

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

无边框表格
如果在定义表格时，没有指定border属性，那么表格就没有边框

table表格语法与结构

    <table border="1">

        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

        </tr>

    </table> 
--------------------------------
<table>
<thead>
    <tr><th colspan='3'>1</th></tr>   #合并列
    <tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td rowspan='3'>1</td><td>3</td><td>3</td></tr>  #合并行
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</tbody>
</table>

<fieldset>

    <legend>登录</legend>

    <p>用户名：</p>

    <p>密码：</p>

</fieldset>

form 表单

下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面：

<form action="form_action.asp" method="get">

  <p>First name: <input type="text" name="fname" /></p>

  <p>Last name: <input type="text" name="lname" /></p>

  <input type="submit" value="Submit" />

</form>

规则定义
id方法：      #new{  }
class方法： .web{  }
标签方法：    div{  }

属性选择器

input[type='text']{
width:100px;
height:200px;
}

background

• background-color
• background-image
• background-repeat（no-repeat;repeat-x;repeat-y）
• background-position

1、四个边框

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

2、四边相同边框border简写

#divcss5{border:1px solid #00F}

设置了divcss5对象盒子1px像素蓝色实线边框

3、边框三个样式

通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。

1）、边框颜色：border-color:#000

2）、边框厚度（宽度）：border-width:1px

使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。

3）、border边框样式：border-style:solid

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

eg：
<div style='border:1px solid red; height: 10px;'></div>
<br/>
<div style='border:1px dotted red; height: 10px;'></div>
<br/>
<div style='border:1px dashed red; height: 10px;'></div>