目录
html结构与标签
css样式
html结构之head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<head> <meta charset="UTF-8"> <!--页面编码--> <!--<meta http-equiv="REFRESH" content="20"> <!–刷新–>--> <!--<meta http-equiv="REFRESH" content="2; Url=http://www.baidu.com"> <!–跳转–>--> <meta name="keywords" content="百度,帮助,搜索"> <!--关键字--> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <!--模式选择--> <title>测试页面</title><!--标题--> <link rel="icon" href="favicon.ico"><!--标题图片--> </head>
html标签之标签分类、符号
1、文档标签(10 个)：<html>、<head>、<body>、<title>、<meta>、<base>、<style>、<link>、<script>、<noscript>
2、框架标签(4个)：<frame>、<frameset>、<iframe>、<noframes>
3、布局标签(1个)：<div>
4、表格标签(10 个)：<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<col>、<colgroup>、<caption>
5、表单标签(10 个)：<from>、<input>、<textarea>、<button>、<select>、<optgroup>、<option>、<label>、<fieldset>、<legend>
6、列表标签(6个)：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
7、链接标签(1个)：<a>
8、多媒体标签(5个)：<img>、<map>、<area>、<object>、<param>
9、文章标签：<h1> - <h6> 、<p>、<br>、<span>、<bdo>、<pre>、<acronym>、<abbr>、<blockquote>、<q>、<ins>、<del>、<address>
10、字体样式标签：<tt>、<i>、<b>、<big>、<small>、<em>、<strong>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>、<sup>、<sub> 11、特殊标签(3个)：<!DOCTYPE>、<!-- -->、<hr>
备注：
1、当文档中使用了<frameset>标签和<body>标签是互斥的，两者不能同时使用生效。
2、<thead>、<tfoot>、<tbody>这三个标签必须一起使用，而且顺序 是<thead>第一，<tfoot>第二，<tbody>第三。<tfoot>之所以排 在<tbody>之前，据说是为让浏览器先渲染<tfoot>，这样当<tbody>中的单元格太多时不至于要等所 有<tbody>单元格都渲染完再渲染<tfoot>。
3、<ul>无序列表，unordered list；<ol>有序列表，ordered list；<li>列表项，list item；<dl>定义列表，definition list；<dt>定义项，definition term；<dd>定义描述，definition description。
4、以下元素均是字体样式元素。<tt> <i> <b> <big> <small> 标签，以下元素都是短语元素<em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，短语元素标签都拥有确切的语义。
符号详见：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
html标签之a标签
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a href="http://www.baidu.com" target="_blank">百度</a> <a href="test2.html" target="_blank">test2</a><!--targer作用是打开一个新的页面--> <a href="#tt">跳转章节</a> <!--通过识别id进行跳转-->
html标签之select标签
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
<select id="1"> <!--一般都需要加id--> <option value="1">北京</option> <!--一般都需要加value提交数据s时使用--> <option value="2">成都</option> <option value="3">上海</option> </select> <!--下拉框--> <select size="2" multiple="multiple"> <!--size显示多个选项,multiple:多选--> <option>北京</option> <option>成都</option> <option>上海</option> </select> <select> <optgroup label="浙江"> <!--用于分组--> <option>杭州</option> <option>温州</option> <option>台州</option> </optgroup> <optgroup label="广东"> <option>广州</option> <option>深圳</option> <option>珠海</option> </optgroup> </select> <select> <option>北京</option> <option>成都</option> <option selected="selected">上海</option> <!--selected选择默认值--> </select>
html标签之input系列
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input type="checkbox" checked="checked" /> <!--复选框,checked设置默认选中(单选框也可用）--> <input name="gender" type="radio" /> <!--单选框,name相同才可以互斥--> <input name="gender" type="radio" /> <!--单选框--> <input type="text" /> <!--文本框--> <input type="password" /> <!--密码框--> <input type="button" value="btn" /> <!--按钮，value为按钮上的文字--> <input type="submit" value="sub" /> <!--按钮--> <input type="file" /> <!--选择文件，如果想要提交文件，需要在其所在的form标签中添加一个特殊属性-->
html标签之span标签
<span> 标签被用来组合文档中的行内元素。
<p><span>some text.</span>some other text.</p>
html标签之form标签
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
<form action="http://www.baidu.com"> <!--用于提交数据到后台--> 主机：<input name="host" type="text"> <!--name用于提交后台后识别数据--> 端口：<input name="port" type="text"> 用户：<input name="user" type="text"> 密码：<input name="passwd" type="text"> <input type="button" value="提交"> <input type="submit" value="提交表单"> </form>
html标签之label标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<label for="cb1">婚否</label> <!--通过for与id属性进行关联--> <input id="cb1" type="checkbox" />
html标签之ul标签
<ul> 标签定义无序列表。
<ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul>
html标签之ol标签
<ol> 标签定义有序列表。
<ol> <li>bbb</li> <li>aaa</li> <li>ddd</li> <li>ccc</li> </ol>
html标签之dl标签
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
<dl> <dt>标题</dt> <dd>内容</dd> <dt>标题</dt> <dd>内容</dd> </dl>
html标签之table标签
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<table border="1"> <!--表，border边框属性--> <thead> <!--表头--> <tr> <!--行--> <th>第一列</th> <!--表头列--> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">h1,h2</td> <!--内容列,colspan横向合并单元格--> <!--<td>h2</td>--> <td>h3</td> </tr> <tr> <td rowspan="2">a1,b1</td> <!--内容列,rowspan纵向合并单元格--> <td>a2</td> <td>a3</td> </tr> <tr> <!--<td>b1</td>--> <td>b2</td> <td>b3</td> </tr> </tbody> </table>
html标签之fieldset标签
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。
<fieldset> <legend>登陆</legend> <!--在默认边框的左上角显示文字--> <p>用户名：</p> <p>密码：</p> </fieldset>
css选择器之类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
.bb{ color: antiquewhite; font-size: 29px; } <div class="bb">ggggg</div>
css选择器之属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
a{
color: antiquewhite;
}
根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
css选择器之ID选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式
#uu{ } <div>123</div> <div id="uu">123</div>
css选择器之后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
<div class="c3"> <a id="i8"> <div> <span class="c4"></span> </div> <span class="c4"></span> </a> </div>
css选择器之选择器分组
选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
css样式之backgroud属性
| 参数 | 描述 | 值 |
| background-color | 设置元素的背景色。 |
color-name color-rgb color-hex transparent |
| background-image | 设置背景图像。 |
url(URL) none |
| background-repeat | 设置背景图像是否及如何重复。 |
repeat repeat-x repeat-y no-repeat |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
scroll fixed |
| background-position | 设置背景图像的起始位置。 |
top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
html样式之border属性
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
p
{
border:5px solid red;
}
html样式之display属性
<div style="display: none;background-color: coral">asdf</div> <!--隐藏标签--> <span style="background-color: coral">asdf</span> <span style="display: block;background-color: coral">asdf</span> <!--内联标签变成块级标签--> <hr/> <div style="background-color: coral">asdf</div> <div style="display: inline;background-color: coral">asdf</div> <!--块级标签变成内联标签-->
display values
| 值 | 描述 |
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline |
默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| list-item |
此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | 此元素会根据上下文作为块级元素或内联元素显示。 |
| marker | |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group |
此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption |
此元素会作为一个表格标题显示（类似 <caption>） |
css样式之cursor属性
<h5>基础属性</h5> <span style="cursor: pointer;">pointer</span>||<span style="cursor: help;">help</span>||<span style="cursor: wait;">wait</span>||<span style="cursor: move;">move</span>||<span style="cursor: crosshair;">crosshair</span> <h5>自定义</h5> <span style="cursor: url(image/favicon.ico),auto;">pointer</span>
可能的值
| 值 | 描述 |
| url |
需被使用的自定义光标的URL 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize |
此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize |
此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize |
此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize |
此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
html样式之float属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
<div style="background-color: cadetblue;widows: 300px;"> <div style="background-color: coral;float: left; 20%; ">123</div> <div style="background-color: aqua;float: left; 50%">456</div> <div style="background-color: burlywood;float: right; 10%;">789</div> <div style="clear: both"></div> </div>
可能的值
| 值 | 描述 |
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
html样式之position属性
定义和用法
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
<h5>fixed(固定，针对窗口)</h5> <h5>abslute(绝对)</h5> <h5>relative(相对)</h5> <div style="height: 5000px;background-color: aquamarine;"></div> <div style="position: fixed;;right: 40px;bottom: 60px;">返回顶部</div> <div style="position: relative;background-color: cadetblue;height: 400px; 500px;"> <div style="position: absolute;bottom: 50px;right: 30px;">定位</div> </div>
可能的值
| 值 | 描述 |
| static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 |
| relative | 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 |
html样式之opacity属性
opacity 属性设置元素的不透明级别。
div
{
opacity:0.5;
}
可能的值
| 值 | 描述 |
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit |
应该从父元素继承 opacity 属性的值。 |
html样式之z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
可能的值
| 值 | 描述 |
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
html样式之padding属性
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值：
- 如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
- 如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。
- 如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。
- 如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。
<div style="height: 70px;border: 1px solid red;"> <div style="height: 50px;background-color: aqua;padding-top: 10px;"></div> </div> <!--内边距--> <!--padding:10px 20px 10px 11px--> <!-- 上 右 下 左--> <!--padding:10px 20px--> <!-- 上下 左右--> <!--padding:10px 上下左右都加-->
Possible Values
| 值 | 描述 |
| padding |
设置内边距。 值可以是：
|
html样式之margin属性
margin 属性设置元素的外边距。
该属性可使用 1 到 4 个值：
- 如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
- 如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。
- 如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。
- 如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。
<div style="height: 70px;border: 1px solid black;"> <div style="height: 50px;background-color: slateblue;margin-top: 10px;"></div> </div> <!--外边距--> <!--margin:10px 20px 10px 11px--> <!-- 上 右 下 左--> <!--margin:10px 20px--> <!-- 上下 左右--> <!--margin:10px 上下左右都加-->
Possible Values
| 值 | 描述 |
| margin |
设置外边距。 值可以是：
|