基础的HTML标签及属性，简单的CSS样式

HTML标签

注释内容

1	<!--网页HTML语言的注释方法-->

根标签

1
2
3

<html>
    网页主框架，最外层嵌套的标签
</html>

头部标签

1
2
3

<head>
    网页主框架内的第一大类标签，主要用于设定网页的基本设置
</head>

标题栏标签

1
2
3

<title>
    网页标题内容
</title>

正文类型标签

1
2
3

<style>
    网页内嵌样式表
</style>

正文标签

1
2
3

<body>
    网页主框架内的第二大类标签，网页的主体，也是用户能看到的部分
</body>

普通标签

段落文本

代码：<p>段落</p>
样式：

段落

标题文本

代码：<hx>标题x</hx> x属于1到6 分别代表6级标题
样式：标题标签基础样式

斜体强调

代码：<em>斜体</em>
样式：斜体

加粗强调

代码：<strong>加粗</strong>
样式：加粗

单独样式

代码1：<span>单独</span>
样式1：单独
代码2：<div>单独</div>
样式2：

单独

引用文本

代码1：<q>引用句</q>
样式1：引用句
代码2：<blockquote>引用段</blockquote>
样式2：

引用段

换行

代码：换行<br/>换行
样式：换行
换行

空格

代码：空格 空格
样式：空格空格

水平线

代码：<br/>
样式：

联系地址信息

代码：<address>联系地址</address>
样式：

联系地址

代码行

代码1：<code>代码</code>
样式1：代码
代码2：<pre>代码</pre>
样式2：pre>代码

列表（无序，在信息内容前加点；有序，在信息内容前加序号）

代码1：<ul><li>内容1</li><li>内容2</li></ul>
样式1：

内容1
内容2

代码2：<ol><li>内容1</li><li>内容2</li></ol>
样式2：

内容1
内容2

超链接文本

代码：<a href="链接地址或邮件地址" target="打开链接的方式" title="提示内容">超链接</a>
样式：超链接

图片

代码：<img scr="图片地址" alt="加载失败后的提示" title="提示文本" />
样式：

表格标签

代码：

<table>
    <thead>
        <tr>
            <th>表头1</th><th>表头2</th><th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td><td>单元格</td><td>单元格</td>
        </tr>
    </tbody>
</table>

样式：

表头1	表头2	表头3
单元格	单元格	单元格

说明：

标签	作用
`<table></table>`	表格主框架
`<thead></thead>`	表格头部
`<tbody></tbody>`	表格主体
`<caption></caption>`	表格中的标题
`<tr></tr>`	表格中的一行
`<th></th>`	表格中的表头
`<td></td>`	表格中的单元格

表单标签

代码：

<form method="传送方式 post/get" action="服务器文件 输入数据的目标文件">
    <input type="password/text 类型 密码显示或普通文本" />
    <textarea cols="列数" rows="行数"></textarea>
    <input type="radio/checkbox 类型 单选或多选" checked="checked 设置默认选中" />
    <select multiple="multiple 设置多选">
        <option selected="selected 设置为默认值"></option>
    </select>
    <input type="submit/reset 提交或重置表单"/>
    <label for="控件ID"></label>
</form>

样式：

公有属性：

属性	作用
name	名称，为控件命名，供服务端使用，如asp、php文件，名称相同的控件视作同一组
value	显示值，也称默认值，也是表单向服务器提交的值
id	ID，唯一标识控件

说明：

标签	作用
`<form></form>`	表单框架
`<input/>`	输入框，单选或多选按钮，提交或重置按钮
`<textarea></textarea>`	文本域
`<option></option>`	下拉列表
`<select></select>`	多选列表框
`<label></label>`	文本控件链接

CSS层叠样式表

位置：于头标签的style标签内增添
格式：由选择符与声明组成，其中声明又是由属性和值组成，多条声明之间由分号(;)分隔
注释：格式为/*注释内容*/

形式

内联式：在控件或标签处，调用属性style=”CSS代码（即声明）”
嵌入式：对某一选择符标签的内容同意设置，内容嵌于<style type="text/css"></style>中
外部式：将CSS样式单独保存于一个文件中，在<head>标签中用<link>标签将文件链接

<link>标签属性： href=”CSS地址” rel=”stylesheet” type=”text/css”
优先级 内联式 > 嵌入式 > 外部式
一般情况下符合就近原则

选择器

标签选择器

即选择器为HTML标签类型

类选择器

用英文.号+类名称作为选择器名，在需要的标签中添加class="类名"属性即可使用类名设定的CSS样式

ID选择器

用英文#号+ID名称作为选择器名，在需要的标签中添加id="ID名"属性即可使用ID名设定的CSS样式
ID是具有唯一性的，能且只能被一个标签调用；而类可以被重复使用；
一个标签可以拥有多个类设定的样式，调用时用空格隔开。

通用选择器

用英文*号作为选择器名，设定所有标签和控件的样式

特殊选择器

伪类选择器：某种状态下的样式，有选择器名+英文:号+状态名构成新的选择器名，如hover，即鼠标移动到目标标签时的状态
分组选择器：令多个选择器具有相同的样式，不同选择器之间用英文,号分开
子选择器：指定某选择器下的第一代某种子元素的样式，一般两个选择器之间用英文>号分开
后代选择器：指定某选择器下的所有某种子元素的样式，一般两个选择器之间用空格分开

特性

继承性：某些样式具有继承性，即某选择器下所有元素军设定为某一样式；颜色可继承，边框不可继承
特殊性：同一元素应用不同样式时，根据权值选择实际应用样式（标签选择器为1；类选择器为10；ID选择器为100；继承的权值最低），当权值相同时，越靠后的越优先
重要性：!important最高权值，放在声明的分号前

声明

部分基本声明

序号	属性名	值
1	`font-family`	“字体”
2	`font-size`	字号
3	`color`	文字颜色，即颜色的英文或#+六位数字
4	`font-weight`	字体粗细，如bold表示一般粗
5	`font-style`	字体样式，如italic表示倾斜
6	`text-decoration`	文本装饰，如underline表示下划线；line-through表示删除线
7	`text-indent`	文本缩进，一般用字长当作单位
8	`line-height`	行高，一般用字长当作单位
9	`letter-spacing`	字间距
10	`word-spacing`	词间距
11	`text-align`	文字对齐，一般为left right center
12	`background-color`	背景颜色
13	`font`	文字统一设定，包含（样式、型式、粗细、字号、行间距、字体）
14	`background`	背景统一设定，包含（颜色、图片、重复方式、附件、位置）

批注：属性中的长度值单位一般为像素，即px；但有时也可以是字长，即em

元素

分类：块状；内联、内联块状

块状元素

用CSS声明display:block强制转换

独占一行，每个块状元素新起一行
元素的高度、宽度、行高、顶底边距都可以自行设置
宽度默认为父容器的100%

常用元素： div p hx ol ul dl table address blockquote form

内联元素

用CSS声明display:inline强制转换

与其他元素同行
元素的高度、宽度、行高、顶底边距都不可自行设置
宽度、高度都随着内容改变而变化

常用元素： a span br i em strong label q var cite code

内联块状元素

用CSS声明display:inline-block强制转换

与其他元素同行
元素的高度、宽度、行高、顶底边距都可以自行设置

常用元素： img input

盒子模型

1边界(margin)

2边框(border)

3填充(padding)

内容

边界(margin)

边界只有一个属性：size，可以分别设置某个方向上的边界，声明margin- + top/bottom/left/right即可
也可以统一设置，共有四种方式
margin: + 上+右+下+左/上下左右/上下+左右/上+左右+下

边框(border)

边框有三个属性：宽度、样式、颜色；样式有dashed(虚线)、dotted(点)、solid(实线)
可以分别设置某个方向的边框，只要在声明时，声明border- + top/bottom/left/right即可

填充(padding)

填充只有一个属性：size，可以分别设置某个方向上的填充，声明padding- + top/bottom/left/right即可
也可以统一设置，共有四种方式
padding: + 上右下左/上下左右/上下左右/上左右下

布局模型

流动(Flow)

块状元素自上而下依次排列，默认宽度为100%；
内联元素自左而右依次排列，水平显示

浮动(Float)

块状元素根据设置自左而右/自右而左依次排列
在CSS中声明float: + left(自左而右)/right(自右而左)

层(Layer)

使所有元素如同图层一般层叠显示
共有三种定位方式：position: + absolute(绝对定位，相对于父元素的位置)/relative(相对定位，相对于元素本身原来的位置)/fixed(固定位置，相对于浏览器视图的位置)
设置定位后在CSS中设置top和left属性即可确定位置