html+css学习笔记

阿文喜欢碎碎唠

已于 2024-05-31 20:36:28 修改

阅读量116

点赞数

分类专栏：前端文章标签：学习前端 vscode html css3

于 2023-09-03 23:50:58 首次发布

本文链接：https://blog.csdn.net/weixin_62189550/article/details/132657788

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Web标准

标准	说明
结构(Structure)	网页元素, 如HTML
表现(Presentation)	外观样式, CSS
行为(Behavior)	交互, Javascipt

最佳体验方案：结构、样式、行为相分离

HTML

一、语法规范

1.1基本语法概述

包含在尖括号内
多数双标签, 成对出现
少数单标签

1.2标签关系

包含关系（父子）
并列关系（姐妹）

二、基本结构标签

<html>  //根标签
    <head>  //头部
         <title>  //网页标题
              </title>
     </head>
    <body>  //主体
      </body>
</html>

三、VSC自动生成标签

3.1 <!DOCTYPE html> 文档类型声明标签，提示用html5显示页面；
3.2 <html lang= "en"> 告诉浏览器为英文网站，中文网站可改成"zh-CH"；
3.3 <meta charset="UTF-8" /> 必须写，采取UTF-8来保存文字，否则会乱码；

四、常用标签

标题标签

<h1> 标题标签 </h1>
<h2> 标题标签 </h2>
<h3> 标题标签 </h3>
<h4> 标题标签 </h4>
<h5> 标题标签 </h5>
<h6> 标题标签 </h6>

语义：做标题使用
特点：大小逐级递减、变粗、独占一行

2.<p> 段落标签 </p>

语义：分割段落
特点
- 根据窗口大小可自动换行
- 段落间有空隙

3.<br/>换行标签

语义：强制换行
特点
- 单标签
- 行间无空隙

4.文本格式化标签

加粗、倾斜、下划线、删除
语义：强调作用

<strong>加粗</strong>
<b>加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除</del>
<s>删除</s>

<ins>下划线</ins>
<u>下划线</u>

5.盒子标签(无语义，装内容，布局)

5.1<div> division缩写，表示分割、分区 </div>

特点：独占一行，一行只能放一个<div>,大盒子

5.2<span> 跨度、跨距 </span>

特点：一行可以有多个<span>，小盒子

6.图像标签（单标签）& 路径
6.1 <img src="URL"（必）+其他属性/

src为img标签必须属性，用于指定文件的路径和文件名

属性：属于该标签的特性

其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像无法显示时出现的文字
title	文本	提示文本。鼠标放置在图像上显示的文字
width	像素	宽度
height	像素	高度
border	像素	边框粗细

注意:
(1) 图像标签可以拥有多个属性, 必须写在标签名的后面
(2) 属性间不分顺序,属性和标签名, 属性与属性之间都以空格分开
(3) 属性采取键值对的格式。属性=“属性值”
(4) 想让图片居中，要让父标签p加css水平对齐代码

6.2 路径

铺垫
目录文件夹：普通文件夹
根目录：打开目录文件夹的第一层即根目录

6.2.1相对路径：图片相对与html页面的位置

同一级：<img src="picture.jpg" />
下一级：<img src="images/picture.jpg" />
上一级：<img src="../picture.jpg" />

6.2.2绝对路径：目录下的绝对位置
如：D:\web\img
logo.jpg 或 http://www.itcast.cn/images/logo.jpg
注意：从盘符开始为\ 而网址和相对路径为/

7.超链接标签
<a href="url地址" target="弹出方式">文本/图像 </a>

href必须属性
target指定链接打开方式，_self默认, _blank为在新窗口打开

分类
(1) 外部链接，如网页 http://www.baidu.com
(2) 内部链接，网站内部页面跳转 index.html
(3) 空链接
<a href="#">首页</a>
(4) 下载链接，一般为文件或压缩包
(5) 网页元素链接，如文本、图像、音频等都能添加超链接
(6) 锚点链接，类似目录，快速定位页面某一位置

链接文本的href属性，设置置为#名字，
如 <a href="#two">2</a>
目标位置标签+“id=名字”
如<ha id="two"> 22 </h3>

8.注释标签(ctrl+/)


9.特殊字符

空格  
< <
> >

10.表格标签
10.1 语法

<table>                                     //定义整个表格
     <tr>                                   //定义行
          <th> 表头单元格内文字 </th>            //常用于第一行，文字会居中加粗
          <td> 单元格内文字     </td>            
     ...
     </tr>
     ...
</table>

结构标签：
(1)<thead></thead>定义表格头部(一整行),内必须有<tr>,一般在第一行
(2)<tbody></tbody>定义主体,放数据
(3)以上标签都放在<table></table>里

10.2 表格属性 (一般写在table标签里)
- align 表格位置 = left，center，right
- border 边框 = 默认1
- cellpadding 文字与单元格距离
- cellspacing 单元格间的距离
- width 表格宽
- hight 表格高

10.3 合并单元格
（1）分类：

跨行合并：rowspan=“单元格个数”
跨列合并：colspan=“单元格个数”

（2）目标单元格：跨行最上，跨列最左
（3）步骤

确定分类
找到目标单元格。写合并方式=合并数量
eg.<td colspan="2"></td>
删除多余单元格

11.列表标签
11.1无序列表
(1) 语法

<ul>
     <li>列表1</li>
     <li>列表2</li>
     <li>列表3</li>
     ...
</ul>

注意：

列表项无顺序
<ul></ul>中只能嵌套<li></li>
<li></li>相当于容器，可以放所有元素
去掉前面圆点list-style:none;

11.2有序列表
(1) 语法

<ol>
     <li>列表1</li>
     <li>列表2</li>
     <li>列表3</li>
     ...
</ol>

11.3自定义列表
(1)语法

<dl>                                       //定义列表
     <dt></dt>                             //定义项目名
     <dl></dl>                             //描述每一个项目
     <dl></dl>
     ...
</dl>

注意：

<dl></dl>里只放dt和dd。dt和dd里可放任何标签
相当于大哥带着一群小弟

11.表单标签

构成：一个表单包含表单域、表单控件、提示信息
11.1表单域

<form action="url" method="提交方式" name="表单域名称">
     各种表单元素
</form>

属性
(1)action=url(属性值), 用于指定并处理表单数据的服务器程序的地址
(2)method=post/get, 设置提交方式
(3)name, 指定表单名称，区分多个表单域

11.2表单控件
11.2.1<input>输入元素

语法
<input type="属性值" />
注意：
(1)<input type="属性值" /为单标签
(2)type属性有不同的属性值指定不同类型，如下：

(3)除了type属性，还有些常用属性

注意：
name和value每个表单元素都有的属性值，给后台人员用
name表单，要求单选和复选按钮都要有相同的name值
单选和复选框可设置check属性，默认选中
name主要作用是区别不同的表单
checked默认选中状态，用于单选或复选

11.2.2 label标签(标注标签，常与input搭配使用)

作用：绑定某个元素，扩大用户的选择范围，提升用户体验
语法：

<label for="man">男</label>                     
<input type="radio" name="sex" id="man">

for属性值应该和id一样
是label!!! 不要打成lable!!!(之前就弄错了)
11.2.3 select下拉标签

使用场景：多个选项，使用该标签可节省空间
语法：

<select>
     <option>选项1</option>
     <option>选项2</option>
     <option>选项3</option>
     ...
</select>

注意：
(1)<select>中至少包含一对<option>
(2)在<option>中定义selected="selected"时，设置当前选项为默认选中状态

11.2.4 textarea文本域标签

使用场景：输入内容较多，多用于留言板
语法：双标签

<textarea>
输入默认文本
</textarea>

cols和rows属性控制列数和行数，但一般开发用CSS修饰

五、Emmet语法

5.1 html

六、新增特性（IE9+浏览器支持）

6.1语义化标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section定义文档某个区域，类似于div
<aside>侧边栏标签
<footer>尾部标签

注意：

1、主要针对搜索引擎

2、可用多次

3、IE9中需要转成块级元素

4、移动端常用

6.2多媒体标签

<video>视频

语法

/*第一种写法*/
<video src="文件地址" controls="controls"></video>

/*第二种写法:如果第一个文件类型播放不了会依次执行后面代码*/
<video controls="controls" width="300">
	<source src="" type="video/ogg">
	<source src="" type="video/mp4">
	您的浏览器暂不支持<video>标签播放器
</video>

<audio>音频

语法同上

总结
- 音频和视频标签使用基本一致
- 谷歌浏览器禁止了自动播放
- 视频可以加muted静音播放视频

视频便签重点！常设置自动播放，不加controls控件，并设置循环和大小

6.3新增input表单

重点：number、tel、search

6.4新增表单属性

CSS

一、语法规范

选择器 { 属性：值; }
注意：

多个属性值最好展开写，可读性强；
选择器是HTML标签，属性与值以键值对形式承成对出现；
选择器和{ }之间有空格，属性的：也要打空格，更美观；
每个属性值以；结束

二、选择器

2.1选择器分类

基础选择器：单个选择器组成
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器

2.2基础选择器

标签选择器
含义：用HTML标签名称作为选择器。统一某一类标签样式
缺点：不能差异化设置样式
类选择器（开发常用）
语法：.类名（自定义） { 属性：值；}

注意：

调用时在标签后加class=“类名”
类名不和标签一样
多次调用
不用纯数字和中文命名，类名较长时可用—分割
一个标签可以指定多个类名

id选择器（常与JavaScript搭配）
#id名 { 属性：值；}
注意：

标签后加“id=“id名”
只能调用一次

通配符选择器
含义：“*”定义，表示页面中所有标签
语法：* { 属性：值； }

三、字体属性

3.1字体系列

font-family

3.2大小

font-size：20px;

px(像素)是网页常用单位
谷歌浏览器默认大小为16px
不同浏览器显示字体大小不同，尽量设置确定值，不要默认大小
标题标签需要单独指定大小

3.3粗细

font-weight:normal/bold/bolder/lighter/数字（不带单位）
实际开发倾向于用数字指定粗细
400等价于normal，700等价于bold

3.4文字样式

font-style：normal/italic（斜体）；

3.5字体复合

语法

body{
     font: font-style font-weight font-size/line-height font-family;
}

顺序不能变!
size和family不能省略！！

注意：line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效

四、文本属性

4.1颜色color

表示	属性值
预定义颜色值	red、green、blue等
十六进制	#FF0000
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2水平对齐text-align

属性	属性值
left	左对齐(默认)
center	居中
right	右对齐

4.3修饰text-decoration

属性	属性值
none	无装饰(常用)（可去掉链接自带下划线）
underline	下划线（链接a自带）
overline	上划线
line-through	删除线

4.4缩进text-indent

用来指定文本第一行的缩进（通常用于段落首行缩进）
text-indent: 20px;
text-indent: 20em;
em是相对单位，1em为当前元素（font-size）1个文字大小

4.5行间距line-height

line-height：26px;

行间距有上间距、文本高度、下间距组成
文字实现垂直居中小技巧：让行高=盒子高度
若没设置盒高，盒子高度会调成行高

注意：line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效

五、引入方式

5.1内部样式表

含义：在HTML页面内部写样式，利用<style>标签，一般写在<head></head>中

5.2行内样式表

含义：在标签内部style属性设CSS样式，适于修改简单样式
要用双引号！

5.3外部样式表

含义：单独建CSS文件，再根据实际情况引入HTML
步骤：

建立CSS文件
引入相应的HTML文件
<link rel="stylesheet" href="css文件路径">

(1) link定义当前文档和被链接文档的关系，stylesheet表示被链接文档是一个样式表文件
(2) href定义URL, 可以是相对路径/绝对路径

六、复合选择器

6.1 后代选择器（空格）

含义：父元素里的子元素
语法：元素一元素二 {样式声明}
注意：

空格隔开
类似于路径，最终目标是元素二
元素一、二可以是任一选择器

6.2 子选择器（>）

含义：最近一级子元素
语法：元素一>元素二

6.3 并集选择器（,）

含义：不同标签设置相同属性，集体声明
语法：

属性1，
属性2，
属性3 {
     样式N;
}

通常竖着写

6.4 伪类选择器（链接伪类等）

6.5 :focus伪类选择器

用于选取光标选中的表单元素

input:focus {
     background-color:yellow;
}

七、元素显示模式

一般分为块元素和行内元素

7.1块元素

（如<div>)

特点：

独占一行
高、宽、外边距、内边距都可控
默认宽度为容器的100%
是容器（盒子），里面可放行内/块级元素
文字类的元素内不能放块元素（如<p>、<h1>

7.2行内元素/内联元素

(如<span>)

特点：

一行可放多个行内元素
高宽为本身文字大小，再设置无效
行内元素只能容纳文本/行内元素
特殊情况链接<a>里可放块级元素，但最好转换成块级模式

行内元素的左右内外边距有效，但上下内外内边距无效，对于该行内元素，竖直方向的内边距有效果但对其他元素无影响。

7.3行内块元素

(如<img/>、<input/>、<td/>)

特点：

一行可放多个，之前见会有间隙
默认宽为本身内容宽度
可设置高、宽、内外边距

具有前两者的共同点：一行能放多个又能设置高宽

7.4模式转换（常用于增大链接的触发范围）

转换成块级元素：display:block
转换成行内元素：display:inline
转换成行内块元素：display:inline-block

八、背景

属性	作用	值
background-color	背景颜色	颜色值/十六进制/rgb
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position:x y	背景位置	方位(left right center top bottom)/精确单位
background-attachment	背景附着	scroll(滚动)/fixed(背景固定)
背景简写	简写	颜色图片地址平铺滚动位置
背景色半透明	透明效果	background:rgba(0,0,0,0.5);透明值`[0,1]`

方位词：水平(left,center,right)、垂直(top,center,bottom)

九、CSS三大特性

9.1层叠性

（相同选择器设置相同样式）

若冲突：就近原则

9.2继承性

（一般继承父元素的文字样式）

特殊：行高继承性 12px/1.5字号大小/行高（相对单位）

9.3优先级

（一个元素有多个选择器）

选择器相同，则执行层叠性；若不同则按选择器的权重

选择器	权重
继承/*	0，0，0，0
元素选择器	0，0，0，1
类选择器/伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important	无穷大

注意：

若选择器是继承关系，则权重为0
权重叠加：若是复合选择器，需计算权重
权重四位数，不会出现进位

十、盒子模型

10.1 盒子组成

10.2 边框

组成：宽度（border-width）、样式（border-style）、颜色（border-color）
常用样式：
- 实线边框（solid）
- 虚线边框（dashed）
- 点线边框（dotted）
边框简写 border：2px solid pink；也能分开写

div{
     border:2px solid blue;
     <!-- 层叠性：覆盖了上边框 -->
     border-top:4px solid pink;
}

注意：边框的层叠性，分开写时先大后小

表格细线边框
border-collapse：collapse；表示合并相邻边框

注意：边框会影响盒子大小，不占用，只增加高或宽

10.3 内边距

padding控制边框和内容间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法（需记）

值个数	含义
padding:5px;	1值，上下左右边距
padding:5px 10px;	2值，上下、左右
padding:5px 10px 20px;	3值，上、左右、下
padding:5px 10px 20px 30px;	4值，上右下左，顺时针

注意：
1.若盒子制定了高宽，再加内边距会撑大盒子大小;
2.padding适用于块元素，因此当扩大链接范围，需要先将<a>转为行内块元素display：inline-block；，再设置宽高，实现扩大链接范围的目的。
3.padding不会撑开盒子的特殊情况：当没设置宽/高，块级元素会继承父容器的宽（不继承高），此时设置padding不影响没设置的宽。

10.4 外边距

margin控制盒子与盒子间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式和padding一样

应用：
1.margin可让块级盒子水平居中，但盒子要满足1.指定盒子宽度；2.左右margin设成auto. 比如：

margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

2.想让行内/行内块元素水平居中，在父容器添加text-align:center即可

外边距合并问题：父子关系的两个块元素，当父子都有上外边距，父元素会塌陷外边距
- 解决1.父元素定义上边框border-top
- 2.父元素定义上内边距padding-top:1px
- 3.父元素添加overflow:hidden;
清楚内外边距
作用：网页会自带默认边距，在布局前要清除

*{
     padding：0；/* 清除内边距 */
     margin：0； /* 清除外边距 */
}

行内元素只设置左右内外边距

10.5 ps切图

10.6 圆角边框

border-radius:length;
数值越大，圆弧越明显
应用：

length可以为具体数值/百分比
数值可以分开写，四个值代表左上（顺时针），两个值是对角
属性可以分开写,border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
想改成圆，可以把半径设成正方形盒子的一半，同理矩形盒子的半径也是一半

10.7 盒子阴影

语法：box-shadow:h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，水平阴影x,正右负左
v-shadow	必需，垂直阴影y，正下负上
blur	模糊程度
spread	阴影大小
color	建议用rgba(如：`(0,0,0,.3)`)表示透明度
inset	默认outset(外阴影)不写，inset为内阴影

盒子阴影不占空间

10.8 文字阴影

语法：text-shadow:h-shadow v-shadow blur color

值	描述
h-shadow	必需，水平阴影x,正右负左
v-shadow	必需，垂直阴影y，正下负上
blur	模糊程度
color	建议用rgba(如：`(0,0,0,.3)`)表示透明度

十一、布局

11.1三种常见布局

标准流/普通流：标签按默认方式排列
浮动
定位
实际开发一个页面包含了三种基本布局

11.2 浮动float

典型运用：块级元素一排显示
准则：块级元素纵向排列找标准流；横向排列找浮动；
含义：float属性创建浮动框，移动直到触及左/右边缘
语法选择器{float：属性值;}

属性值	描述
none	元素不浮动（默认）
left	左浮动
right	右浮动

特性一
- 脱离标准流的控制移动到指定位置（脱标）
- 浮动的盒子不再保留原先的空间位置，后面标准流的盒子会占据这个空间
特性二
- 若盒子全部设成浮动，则按值一行显示并顶端对齐
- 浮动的元素相互贴合无缝隙，若父级宽度装不下浮动的盒子则会另起一行对齐
特性三
- 任何模式的元素加了浮动都有行内块元素的特性
比如<span></span>属于行内元素无宽高，加了float属性则会具备宽高特点
若块级盒子无设置宽度，按标准流和父级一样宽，添加浮动属性后宽度根据内容决定
特性四
- 为了约束浮动元素位置，网页布局策略：1.用标准流的父元素纵向排列位置；2.内部子元素浮动左右排列

注意1.浮动和标准流的父盒子搭配；2.浮动的盒子只会影响后面的标准流，不会影响前面的标准流（前面的仍然独占一行）

11.3清除浮动

原因：为了与子盒子兼容，父级盒子不方便给高度，但子盒子浮动不占位置，父盒子高度变0，会影响后面标准流的子盒子
清除本质：清除浮动元素的影响，清除后父元素可以根据浮动元素的位置自动检测高度，父级有了高度就不会影响后面的标准流元素。
语法 选择器{clear:属性值；}
清除浮动的策略：闭合浮动

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	常用；同时清除左右侧浮动的影响

清除浮动方法
- 额外标签法（隔墙法），W3C推荐；
  
  应用：在浮动元素末尾加空标签，如<div style="clear:both"></div>，需注意元素必需是块级元素
  优点：书写方便；缺点：无意义标签，结构化差；
- 父级加overflow属性；
  
  属性值设为hidden、auto、scroll；缺点：无法显示溢出的部分
- 父级加after伪元素；
  
  额外标签法的升级，也是给父元素添加
```
.clearfix:after {
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
}
.clearfix { 
      
     *zoom:1;
}
```
  优点：结构简单；缺点：照顾低版本浏览器；
- 父级加双伪元素；
  
  优点：代码简洁；缺点：照顾低版本；
```
.clearfix:before,.clearfix:after {
     content:"";
     display:table;
}
.clearfix:after {
     clear:both;
}
.clearfix {
     *zoom:1;
}
```

十二、CSS书写顺序

布局定位属性
display/position/float/clear/visibility/overflow
自身属性
width/height/margin/padding/border/background
文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性CSS3
content/cursor/border-radius/box-shadow/text-shadow…

十三、定位

13.1定位组成

定位= 定位模式+边偏移

定位模式指元素的定位方式；边偏移决定元素最终位置

13.2定位模式

语法：position：值

值	语义
static	静态定位（了解）
relative	相对定位（重要）
absolute	绝对定位
fixed	固定定位
sticky	粘性定位（了解）

static:按标准流位置摆放，无偏移。
relative
- 移动位置参照自身原来位置
- 不脱标，仍保留原来位置
absolute：参考系是祖先元素。
- 若无祖先元素或祖先无定位，参考系为浏览器（Document文档）
- 若祖先元素有定位（静态除外），参考系为最近一级有定位的祖先元素
- 绝对定位不占位置，会脱标
==绝对定位实现水平居中和固定定位类似：也是先改成浏览器一半，在margin-left
fixed：固定在浏览器可视化位置。参考系是浏览器可视区
- 不占位置。脱标
- 固定版心右侧小技巧：1、固定盒子left50%；2、固定盒子margin-left：版心宽度的一半。实现贴着版心右侧对齐
- 固定定位是特殊的绝对定位，只是参考系不同
sticky：相对和固定定位的混合
- 参考系是浏览器可视化
- 占有原先位置
- 必须加边偏移才有效

子绝父相：子级绝对定位，那么父级用相对定位

原因：父级需要占位置，子级不需要占位置。

总结：定位要考虑1、是否占位置？2、参考系？

13.3 边偏移

语法：属性：属性值

边偏移属性	描述
top	顶端偏移量，定义相对于父元素上边线距离
bottom	底端偏移量，定义相对于父元素下边线距离
left	左侧偏移量，定义相对于父元素左边线距离
right	右侧偏移量，定义相对于父元素右边线距离

13.4定位叠放次序z-index

含义：控制盒子前后次序
语法:选择器{index：值；}，不加单位，有正有负，越大越前
默认顺序：后来者居上

只有定位盒子才有此属性

13.4 拓展

定位和元素模式有特殊联系
- 行内元素加绝对/固定定位，可以直接设置高宽度
- 块级元素添加绝对/固定定位，若不给高宽度，默认大小是内容大小
绝对/固定定位脱标，和浮动类似，不会有触发外边距合并问题（父级盒子塌陷）
固定/绝对定位会压住后面的标准流所有内容；浮动元素不会压住后面标准流的文字或图片

十四、元素的显示与隐藏

14.1 display属性

值为none：隐藏对象；值为block：转换为块元素且显示元素；
隐藏元素后，不占位置

14.2visibility可见性

visibility：visible；默认值，元素可视，仍占位置
visibility：hidden；元素隐藏

14.3overflow溢出

属性值	描述
visible	不剪切内容，不加滚动条
hidden	超出尺寸内容隐藏
scroll	总显示滚动条
auto	超出内容自动显示滚动条，不超出不显示

定位盒子慎用overflow：hidden

十五、高级技巧

15.1 精灵图

目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现CSS精灵技术
使用
- 主要针对小的背景图使用
- 实现——background-position
- 一般为负值
缺点
- 图片文件较大
- 图片放大/缩小会失真
- 更换复杂

15.2字体图标iconfont

主要为结构样式简单的小图标
优点：
- 本质属于字体，类似于矢量图，可随意换颜色，放大/缩小不会失真
- 兼容性高
不能完全取代精灵图
使用步骤
- 网站：icomoon.io下载压缩包，解压
- 加font文件移到同级目录
- 将压缩包的css的前部分移入应用页面的style样式表
- 在标签里使用特有符号（压缩包的demo文件），再声明font-family：icomoon…
追加新图标：icommon网址中点击import icons，导入原来的.json文件，在网站选择其他图标，下载新压缩包，使用步骤和上面一样

15.3 CSS三角

div {
    width:0;
    height:0;
    line-height:0; //兼容性
    font-size:0;   //兼容性
    border:50px solid transparent;
    border-left-color:pink;
}

高宽必须为0
利用的是边框

三角强化（常用于布局）

15.4 鼠标样式

语法li {cursor:pointer;}
含义：设置在对象上移动时鼠标的样式

属性值	描述
default	小白，默认
pointer	手
move	移动
text	文本
not-allowed	禁止

15.5取消外轮廓和防止文本域拖拽

取消表单的外轮廓线outline：none；
防止文本域能拖拽 resize:none;

文本域的一对标签最好放在一行，否则文本与框会有距离

15.6vertical-align属性对齐

vertical-align：baseline | top | middle | bottom
对齐一般分底线，基线，中线，顶线（从下到上）
仅对行内块元素有效
图片、表单都属行内块元素，默认基线对齐

图片底部默认有空白间距：因为默认与文字是基线对齐的，下面会空出一段距离

解决方案
- 图片添加vertical-align：middle | top | bottom （建议）
- 图片转换成块元素display：block（因为只有行内块元素有基线对齐的问题）

15.7 溢出文本省略号显示

单行文本省略显示

/* 1、先强制一行显示文本*/
whtie-space:nowrap;(默认normal会自动换行)
/* 2、超出部分隐藏*/
overflow:hidden;
/* 3、文字用省略号代替超出部分*/
text-overflow:ellipsis;

多行文本溢出显示省略

overflow:hidden;
text-overflow:sllipsis;
/*弹性伸缩盒子模型显示*/
display：-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子的子元素排列方式*/
-webkit-box-orient:vertical;

十六、常见布局技巧

16.1margin负值运用

每个盒子margin-left移动边框值，正好压住相邻盒子边框
当鼠标经过某盒子需要边框都亮，但由于前一步会有覆盖掉边框的情况发生

解决方案
- 若盒子无定位，那么选中时设置相对定位（浮上来了且保留位置）
- 若盒子有定位，那么选中时设置加z-index

16.2 行内块元素作页码

自带间距
可设置高宽
想让这些行内块元素水平居中，父级元素加text-align:center

16.3 三角强化

十七、CSS初始化

十八、CSS新增特性

18.1属性选择器

根据属性进行选择，不用借助类或ID

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择att属性且值=val的E元素（常用）
E[att^=“val”]	选择att属性且值以val开头的E元素
E[att$=“val”]	选择att属性且值以val结尾的E元素
E[att*=“val”]	选择att属性且值中含val的E元素

类选择器、属性选择器、伪类选择器权重都是10！！！

18.2结构伪类选择器

根据结构选元素，常用于父级里的子元素

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child和nth-of-type区别：

1.nth-child往前看，先将父元素搜有盒子排序，然后找到第n个孩子，再看与子元素E类型是否匹配，若不匹配可能失效

2.nth-of-type往后看，先将指定的子元素类型E排序，再选第几个盒子

3.总结：若父盒子有多种不同类型的子元素，建议后者；如果子元素类型都一样，两者皆可。

nth-child(n)选择某个父元素的一个/多个子元素
- n可以是数字、关键字、公式
- n可以是关键字：even偶，odd奇
- n可以是公式：括号里字母只能是n，不能是a,且从0开始依次+1
公式取值
2n 偶数
2n+1 奇数
5n 5、10、15…
n+5 从第5个到最后
-n+5 前5个

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15…
n+5	从第5个到最后
-n+5	前5个

18.3伪元素选择器

CSS标签，不是HTML元素，简化HTML结构，应用于以下装饰性元素不起实质作用

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

1、before和after属于行内元素

2、语法：element::before{}

3、必须有content属性

4、权重为1

伪元素使用场景：
- 字体图标
- 清除浮动

18.4盒子模型

box-sizing指定盒子模型，两种取值
- box-sizing:content-box(默认)，盒子大小：宽高+内边距+边框，再调整会撑大盒子
- box-sizing:border-box，指定了盒子大小，再调整padding或border往内挤压（若不超过盒子宽）
建议CSS初始化变成
```
* {
    margin：0；
    padding：0；
    box-sizing：border-box；
}
```

18.5 图片模糊

filter：函数（）; 例如filter：blur（5px); 数值越大越模糊

18.7calc函数

width:calc(100%-30px);

括号可用±*/计算

18.8新增属性过渡（重点）

动画效果
语法transition:过渡属性花费时间运动曲线延迟时间
- 前两个必须有
- 运动曲线默认ease，先快后慢，延迟默认为0s
- 时间一定带单位
- 若想要多个属性都变化，要么用逗号，分隔，要么加all
- 谁做过渡给谁加

网站TDK标签SEO优化

一、SEO含义

搜索引擎优化，目的是对网站深度优化获取免费流量，提升搜索引擎上网站的排名。

需要三个标签进行优化：title、description、keyword

二、title网站标题

网站名（产品名）-网站介绍（不超过30汉字）

三、description网站说明

<meta name="description" content="xxx" />

四、keywords关键字

页面关键字，最好在6~8个关键词，再用逗号隔开的形式

<meta name="keywords" content="网上购物，手机，笔记本，MP3,CD,VCD" />

布局

一、tab栏选项卡

1、原理

二、移动web开发之flex布局

2.1布局原理

给父元素(flex container)加flex属性，控制子盒子(flex item)的位置和排列方式

子盒子的浮动float和清除浮动clearfix和垂直居中vertical-align属性失效

2.2父项常见属性—flex-direction

设置主轴方向
子元素跟着主轴排列。主轴默认为x轴，可改。

属性值	说明
row	默认从左到右（主轴为x）
row-reverse	从右到左（主轴为x）（顺序颠倒）
column	从上到下（主轴变成y）
column-reverse	从下到上（主轴变成y）

2.3flex-wrap

设置子元素是否换行
两种值。默认nowrap（不换行），wrap（换行）

2.4flex-flow

复合了主轴和换行

flex-flow：column wrap；

2.5justify-content

设置主轴上的子元素排列方式

属性值	说明
flex-start	默认从头开始，（从左到右）
flex-end	从尾部开始排（顺序不变）
center	盒子整体在父元素的主轴居中
pace-around	平分剩余空间（margin-left/right）
pace-between	先两边贴边再平分剩余空间（重要）

2.6 align-item

设置侧轴上子元素的排列方式（单行，不换行时）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起再居中
stretch	拉伸

2.7align-content

设置侧轴上多行子元素的排列方式（换行）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起再居中
space-around	侧轴平分剩余空间
space-between	先在侧轴贴两边，再平分
stretch	子项高度平分父元素高度