标签：

1html介绍

<meta>界说关于 HTML 文档的元信息。<link>界说文档与外部资源的关系。<style>界说文档的样式信息。<script>界说客户端脚本

2标签（1），代码语义化

<p></p>段落

<hx></hx>标题

<em></em>斜体强调

<strong></strong>粗体更强调

<span></span>设置单独样式

<q></q>短引用“”

<blockquote></blockquote>长引用，居中文本

<br/>回车

&nbsp;空格

<hr/>支解横线

<address></address>斜体地点

<code></code>贴入一行代码

<pre></pre>放入多行代码

3标签（2）

<ul>

<li></li>

</ul>排序，不分先后挨次

<ol>

<li></li>

</ol>排序，从1开始排序

<div></div>划分板块，逻辑独立分出来

<div id=”xxx”></div>给板块定名

<table summary=http://www.mamicode.com/””>表格，表格简介介绍（不显示出来）

<caption></caption>表格标题

<tbody>表格分块，板块

<tr><th></th></tr>表格行/表格标头

<tr><td></td></tr>表格行/表格单元格

<tr><td></td></tr>

</tbody>

</table>

4标签（3）

<a href=http://www.mamicode.com/”” title=http://www.mamicode.com/””> </a>

<a name=http://www.mamicode.com/”” title=http://www.mamicode.com/””> </a>锚点

href

title

target=”_blank”

mailto:xx；aa？cc=xx&bcc=xx&subject=xx&body=xx

<img src =http://www.mamicode.com/”” alt=http://www.mamicode.com/”” title=http://www.mamicode.com/””></img>

5使用表单标签，与用户交互

<form> method=http://www.mamicode.com/”” acion=http://www.mamicode.com/””</form>表单/方法postget/行为传送到好比save.php

<input type=”text” name=”myname”/>输入标签，文本框

<input type=”password” name=”pass/”>暗码框password

type=http://www.mamicode.com/”” 类型

text文本框

password暗码框

submit提交按钮

reset重置按钮

radio单选框

type=”checked” checked=”默认值” 复选框和默认值设置

name=http://www.mamicode.com/””文本框定名，为后台措施ASP、PHP使用

value=http://www.mamicode.com/””为文本框设置默认值，为按钮文字

<testarea rows=”10” cols=”50”>在这里输入内容……</textarea>多行文本，rows行cols列

<select>下拉列表框

<option value=”xx” selected=”selected”>xx</option>设置默认 select=”select”，value向处事器提交的值

<option value=”cc” >cc</option>

</select>

<select multiple=”multiple”></select>下拉列表多选，复合multiple

<input type=”submit” vaue=”提交” name=”submit”>

<input type=”reset” value=”重置” name=”reset”>

<label for=”控件id名称”></label>注释，，与id关联，for与id对应

6认识css

/**/

7嵌入式css

<style type=”text/css”>

p{ color : red };

</style>

<p style=”color:blue”></p>

<link href=http://www.mamicode.com/”” rel=”stylesheet” type=”text/css”>

8选择器

.class多次，同时多个样式

{

color : red

};

…

<span class=”a”></span>

#id独一，只能一个样式样式

{

color : red

};

…

<span id=”a”></span>

*{}

a:hover{}

9.担任

p{color:red;}具有

p{border:1px solid red;}不具体

10.排版

（文字排版——字体）font-family:"宋体",sans-serif;

（文字排版——字号）font-size:12px;color:#666

（文字排版——粗体）font-weight:bold

（文字排版——斜体）font-style:italic;

（文字排版—下划线）text-decoration:underline;

（文字排版—删除线）text-decoration:line-through

（段落排版——缩进）text-indent:2em;

（段落排版—行间距）line-height:2em;

（段落排版—字间距）letter-spacing:50px

（段落排版——对齐）text-align:center;

11.模型

块级元素<div>、 <p>、<h1>、<form>、<ul> 和 <li>

display:block;

内联元素<span>、<a>、<label>、<strong>、<em>

display:inline;

内联块状元素<img>、<input>

display:inline-block

盒子模型

盒子里padding内边距、盒子与盒子的margin外边距

盒子边框border

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{

border:2px solid red;

}

上面是 border 代码的缩写形式，可以分隔写：

div{

border-width:2px;

border-style:solid;

border-color:red;

}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘失。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。