html

<!-- 用来装东西，布局网页的 -->
<!-- 区别 -->
<div>
    <!-- 会强制换一行 -->
</div>
<span>
</span>

<!-- 图像标签 -->
<img src="图像的URL"
     alt="在图片不能显示的时候用文字代替"
     title="鼠标移到图片上的时候显示文本"
     width
     height
     border="图像边框">

超链接

<a href="跳转目标" target="窗口的弹出方式"></a>

target 可选 _self 和 _blank，前者是在当前窗口打开，后者是新开窗口。

锚点链接

<!-- href 中的属性填 "#+跳转名" -->

在被跳转的标签加上 id 并保持 id 与跳转名一致。

特殊字符

表格标签

<table> <!-- 表 -->
    <tr>
        <th></th> <!-- 表头单元格 -->
    </tr>
    <tr> <!-- 一列 -->
        <td>姓名</td> <!-- 单元格 -->
        <td>年龄</td>
        <td>评价</td>
    </tr>
</table>

<!-- 
align: 表格对周围元素的对齐方式 属性值: left center right
border: 表单边框 
属性值 1 或者 "" 表示没有
cellpadding: 单元边以及内容的空白
值：像素
cellspacig: 规定单元格间的空白
值：像素
width: 规定表格的宽度
值: 像素或者百分比
-->

分割标签

更好的分清表格结构

<thead>
    <!-- 标签表格 -->
</thead>
<tbody>
    <!-- 表格的主体 -->
</tbody>

跨行合并：rowspan="合并单元格的个数"

跨列合并: colspan="合并单元格的个数"

列表标签

<ul> <!-- 无序列表标签，只能嵌套 li 标签 -->
    <li></li>  <!-- 列表项，相当于一个容器，可以在其中嵌套所有元素 -->
</ul>
<ol> <!-- 有序标签 规则和 <ul> 类似 -->
    <li></li>
</ol>

<dl> <!-- 规则和 <ul> 类似, 自定义标签 -->
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

输入标签

css

css 选择器

基础选择器

标签选择器
类选择器（class）
- 可以有多类名，在 class 中用空格隔开
id 选择器
- 以 #+id 名来选择
- id 具有唯一性
通配符
- *，一般用于消除某某通用属性

文字样式

/* font-family: 字体 */
/* font-size: 字号 */
/* font-style */
/* font-weight 字体重量 */

/* 复合写法 */
font: style weight size family;

文本属性

/* 文本颜色 */
color: 属性值;
/* 属性值可选: 预定的颜色，16 进制，如 #FF0000, #FF6600
，RGB 代码: rgb(255,0,0) 或者 rgb(100%,0%,0%) */

/* 对齐文本 */
text-align: [center, right, left(默认)];

/* 装饰文本 */
text-decoration: [
    none(默认，什么都没有),
    underline(下划线),
    overline(上划线),
    line-through(删除线)
];

/* 文本缩进 */
text-indent: [像素 px 或者相对文字大小 em];

/* 设置行间距 */
line-height: ;

css 引入方式

放入 style 标签中（嵌入式引入）
行内样式表在标签内写 style
外部样式表

复合选择器

后代选择器

父标签 子标签 {}

子选择器

父标签>子标签 {} /* 只会选择到子标签 */

并集选择器

/* 也即多选，用逗号分开 */

伪类选择器

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择指针位于上的链接 */
a:active /* 选择活动链接(按下未弹起) */

注意顺序：按以上的就好

input:focus {
    /* 选取获得了焦点的表单元素 */
}

行内元素

<a></a>
<b></b>
<em></em>
<i></i>
<del></del>
<s></s>
<ins></ins>
<u></u>
<span></span>

<!-- 相邻元素在一行上，一行可以显示多个 -->
<!-- 宽高设置无效 -->
<!-- 默认宽度就是它本身内容的宽度 -->
<!-- 行内元素只能容纳文本或者其它行内元素 -->

行内块元素

<img/>, <input/>, <td> 同时具有块元素和行内元素的特点。

元素显示模式的转换

把 <a> 转换为块元素：display: block

转换为行内元素：display: inline

转为行内块：display: inline-block

单行文字垂直居中

让行高等于盒子的高。

背景元素

background:
    /* -color: 背景颜色 */
    /* -image: 背景图片 */
    /* -repeat: 是否平铺 */
    /* -position: 背景位置 */
    /* -attachment: 背景附着 */
    /* 背景颜色半透明 */
    background: rgba(,,,透明度);

css 盒子

边框

border-width: ;
border-style: ;
border-color: ;

/* 内边距 */
padding-left: ; /* 左边的 */
padding-top: ;
padding-bottom: ; /* 下边 */
padding-right: ;

/* 外边距 */
margin: ;
margin-left: ;
margin-right: ;
margin-top: ;
margin-bottom: ;

border-radius: ; /* 圆角边框 */
/* 只写一个就是所有角，写四个就是四个角不同 */
/* 也可以分开写 */

/* 盒子阴影 */
box-shadow: [参数 - 1: h-shadow 水平阴影 参数 - 2: v-shadow 垂直阴影  参数 - 3：blur 模糊距离 参数 - 4: spread: 阴影尺寸  参数 - 5: inset 将外部阴影改为内部阴影];

解决塌陷问题

为父元素设置上边框
定义上内边距
为父元素添加 overflow: hidden

如果盒子有浮动，固定，绝对定位就不会有塌陷问题。

清除内外边距：

{
    padding: 0;
    margin: 0;
}

去掉小圆点：list-style: none

浮动

float: left; /* 靠左 */
float: right; /* 靠右 */

浮动脱标

脱离标准流，有机会实现叠加
如果多个盒子都设置了浮动则他们会按照属性值一行内显示并且顶端对齐排列

只要是浮动元素就具有行内块元素的特性

<!-- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 -->
<!-- 浮动的盒子中间是没有缝隙的，是紧挨着一起的 -->
<!-- 行内元素同理 -->

定位

定位 = 定位模式 + 边偏移

定位模式：

static：静态
relative：相对依据自己本来的位置来进行偏移
absolute：绝对：对于自己的有定位的父级元素，如果没有父级元素，那么则默认为浏览器
fixed：固定定位以浏览器的可视窗口为基准

边偏移

属性：top，bottom，left，right

定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置宽高。

块级元素添加绝对或者固定定位，如果不给宽高，就是内容的宽高。

粘性定位：`sticky`

以浏览器的可视窗口为参照点移动元素。

会占有原先的位置。

必须添加 top，left，right，bottom 其中之一才有效。

定位的叠放次序 `z-index`

数字越大盒子越靠上。

绝对定位水平居中

绝对定位不能通过 margin: auto 水平居中。

绝对或者固定定位可以直接给高宽。

如果不给宽高就是默认内容的大小。

绝对定位和浮动的部分区别

浮动元素不会压住盒子的文字，但是绝对定位和固定定位会压住文字。

元素的显示和隐藏

display: none; /* 隐藏对象 */
display: block; /* 转换为块级元素，或者显示元素 */
/* 元素隐藏后不再占位置 */

visibility: visible;
visibility: hidden; /* 但是占位置 */
visibility: inherit; /* 指继承父的属性 */

overflow: ; /* 对溢出部分的处理：visible：显示  hidden：隐藏 scroll：显示滚动条 */

精灵图

为了有效减小服务器发送请求和收请求的次数，提高速率。

css 用户界面样式

/* 鼠标样式 */
cursor: default; /* 默认 */
cursor: pointer; /* 小手 */
cursor: move; /* 移动 */
cursor: text; /* 文本 */
cursor: not-allowed; /* 禁止 */

/* 表单轮廓线 */
outline: 0;
outline: none;

/* 防止拖拽文本域(textarea) */
resize: none;

`vertical-align`

经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

值：

baseline：默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低元素的顶端对齐

动画属性

css 建议书写属性

布局定位属性 (display/position/float/clear/visibility/overflow)
自身属性 (width/height/margin/padding/border/background)
文本属性 (color/font/text-direction/text-align/vertical-align/white-space/break-word)
其它属性 (content/cursor/border-radius/box-shadow/text-shadow/background: linear-gradient)