【无标题】

总结

head标签

meta / 作用是设置网站的源信息
charset属性，用来定义文本的编码格式
author属性，定义网站的作者，一般是公司名字
keywords属性，定义网站的关键字，中间用英文逗号隔开，最好不要超过10个
description属性，描述网站的内容，不超过100字
title标签，双标签

body标签

body标签里面的内容会渲染在页面的可视区域

块属性标签

-div标签，用来页面布局

• h系列标签 h1-h6标题标签
  在一个页面当中，h1最多只能出现1次，h2最多能出现20次，h3-h6次数不限
  h1的用法：
  1.logo处
  2.资讯详情页的大标题
  由于h1的权限较大，只能出现在以上两个地方

• p 标签，段落标签，它里面一般包含一段文字

• 无序列表
  ul>li
  可以设置他的 list-style-type 属性
  square: 实心方块
  circle：空心圆
  dotted：实心圆
  none：取消列表样式
  disc：高版本系统下的默认样式

• 有序列表
  ol>li
  可以设置他的list-style-type 属性
  lower-alpha：小写字母
  lower-roman：小写的罗马文
  upper-roman：大写的罗马文
  upper-alpha：大写字母

  ol.ul,li,都是块属性标签
  li是列表项
  并且ol，ul的 子元素 必须是li标签

• 定义列表
  dl>dt
  dl>dd
  dl：块标签，定义列表的父元素
  dt：块标签，定义列表的 标题项
  dd：块标签，定义列表的 列表项

• address 地址标签，一般的，他的内容是一个地址

• blockquote 引用标签，一般引用的是一段文字，他的cite属性表示该文字引用的文献名目
  不要使用html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范

行属性标签

• span 标记标签，没有实际意义，通常用来渲染文字

• iframe 框架
  src “需要显示的页面地址”
  height=“设置高度”
  width=“设置宽度”

• a 标签
  href 属性：用来设置超链接的地址
  target 属性：设置标签页的打开方式
  _blank 在新标签页打开
  _self 默认值，在当前页打开
  作用：
  1.设置一个超链接
  2.设置锚点
  最常见的效果是，回到顶部
  点不动，href=“##”
  回到顶部，则 href=“#”
  不要设置href为空，这样会导致页面刷新
  3.下载文件
  a.如果设置的下载文件是音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置文件的路径
  b.如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开

• strong 强调标签
  em 强调并且斜体
  b 文本加粗（不常用，h5中即将废弃）
  i 文本斜体
  var 文本斜体(不常用，h5中即将废弃）

  q 标签,引用标签，他引用的内容都比较简短
  pre标签，格式化输出
  code 标签，一般是嵌套代码使用
  &lt ,在html中渲染为<
  &gt ,在html中渲染为>
  &nbsp,在html中渲染为 空格

img 标签，是一个单标签

src 属性，用来设置图片资源路径*
文件资源路径 分为三种
a.网络路径
图片的网络地址
b.绝对路径
从服务器的根目录开始直到找到需要的文件的整个路径
通常不使用

c.相对路径
相对于当前文件所在的资源路径
./ 代表的是当前目录
…/ 代表的是上一级目录
相对路径在开发中最常用

alt 属性，用来解释图片的内容
作用：
1.当图片没有被加载出来的时候，会显示alt的内容
2.通过alt属性告诉浏览器当前图片的内容

width/heigth 设置图片的宽和高，在实际的开发中，一般只设置单个的宽或者高，另一侧根据比例显示大小

1.块属性标签
a.独自占据一行空间，支持宽和高的设置,设置完宽和高以后仍然独占一行
b.支持上下 padding 和上下 margin
2.行属性标签
a.不会独占一行，从左至右横向排列
b.无法设置宽高，他的宽高由内容撑开
c.不支持上下 padding 和上下 margin

emmet语法

E 代表标签名
E*n 创建n个E标签
> 表示下一层级元素（子元素）
E>a 在E标签中添加子元素 a 标签
加号+ 表示同级
E+p 表示同时创建兄弟元素E和p
^ 表示上一级
E>p^div 创建 div标签和 E 标签同级，也就是创建p标签的上一级
使用[] 设置属性

标签嵌套规则

标签嵌套规则
1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签

以下标签不能相互嵌套
1. p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2. a 标签不能相互嵌套

css样式表

设置类名
.类名{
样式内容
}

text-align:文本排布，一般放在块标签上，用来控制块标签中 行标签和 文本的对齐位置
值：
left：左对齐（默认）
center：居中对齐
right：右对齐
css 层叠式样式表，他是用来给html结构添加样式的
引入方式：
1.行间样式
在标签上，设置style属性，在style中设置样式表
2.内部样式表
在head中设置style标签，在标签中设置样式

css引入方式

css 层叠式样式表
css引入方式
1.行间引入
2.内部样式表
3.外部样式表
开发的时候常用

link 和 @import 引入css的区别
1. @import是css2.1之后才推出的，因此可能存在兼容问题，而link不存在兼容问题
2. link不仅可以引入css，也可以引入其他类型的文件，功能更加强大
推荐使用link

css文本操作

border 属性
border-width 设置border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以合写：
border：width style color；

可以给单独某一个边设置border
border-top 设置 上边
border-left 设置 左边
border-bottom 设置 下边
border-right 设置 右边
== 常用的border-style值==
1.solid 实线
2.dotted 圆点虚线
3.dashed 短线虚线
4.none 隐藏border
5.double 双实线（不常用）
6.3D边框 （不常用）
groove 3D凹槽
ridge 3D凸槽
inset 内嵌
outset 外嵌
color属性 设置文本颜色
值：
1.英文单词
2.十六进制颜色 0-F ，# 后面跟6位表示颜色数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc，如果两两相等，则可以简写为 #abc
3.rgb(),rgba() 设置颜色
括号当中设置对应位置的数字，0-255，0表示黑色，255表示白色
rgb（255，0，0） 红色
rgba 中的a表示 透明度，取值范围是0-1，0表示完全透明，1表示完全不透明
文本的修饰 text-decoration
值：
1.underline 下划线
2.overline 上划线
3.line-through 中划线(删除线)
4.none 去掉线(没有文本修饰线)
文本转化 text-transform
值：
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写
行高 line-height
对于单行文本，line-height 设的高度如果和标签的高度相同，则可以做 垂直居中效果
如果是多行文本，可以理解为行间距
direction 设置文字方向
ltr 默认，从左向右
rtl 从右向左
text-indent 首行缩进，他的值是具体的数值
letter-spacing 设置两个字符之间的距离
word-spacing 设置两个单词之间的距离

overflow 属性

处理子级内容超出当前容器的部分，主要是对父级元素添加该属性
值：
hidden 超出部分 隐藏
scroll 滚动查看超出的部分
auto 自动渲染超出的部分

overflow-x 控制x轴方向的超出部分
overflow-y 控制y轴方向的超出部分

white-space 设置文本的格式
nowrap 强制不换行
normal 强制换行

text-overflow： 对超出的文本内容进行剪裁
ellipsis 超出的内容变为 省略号
clip 直接裁掉超出的文本

单行文本超出添加省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

字体设置

font-style 设置字体的样式
值：
italic 设置字体斜体
normal 字体正常

== font-weight 设置字体是否加粗==
值：
normal 默认
bold 加粗
bolder 相对bold加粗
它的值也可以是具体的整百数字，范围是100-900
400-> normal
700->bold
900->bolder
fosize 设置所修饰的字体的大小
1.目前浏览器默认字体大小是 16px
2.PC端浏览器的最小字体大小可以设置为12px

== font-family 设置文字的字体==
可以同时设置多个字体，形如
font-family：‘A’,‘B’,‘C’…;
含义是 在客户端的设备上匹配A 字体，如果没有A字体，则继续匹配B字体，依次进行匹配，直到匹配成功即可显示匹配到的字体
通用字体
1.serif 又衬线（类似于锐化）
2.sans-serif 无衬线

font 也是一个复合型css属性
可以按照下面的顺序书写
font：style weight size family；

注意，style和weight不是必须写入的内容，如果简写，必须要有font-size和font-family
font：size family；

背景

background 设置标签元素的背景
background-color 设置背景色
他的值可以是
1.英文单词
2.16进制表示颜色
3.rgb（）表示颜色
background-image 设置背景图片
background-image：url（背景图地址）
background-repeat 背景图的平铺方式
值：
repeat 默认，x轴y轴都平铺
repeat-x 沿x轴平铺
repeat-y 沿y轴平铺
no-repeat 不平铺
background-position 设置背景图定位
background-position：x轴方向的值 y轴方向的值
值可以是：
1.具体的数值
2.方位名词组合
left top right bottom center
background-attachment 设置背景图的固定定位
值：
scroll 默认值，背景图片跟着页面一起滚动
fixed 根据浏览器可视区域固定在具体的位置，他的定位参考点是浏览器可视区域
background 是一个复合型属性，可以写在一起，他的顺序是
background：color image repeat position attachment；

可以单独写：
background：color；
background：image；

display 属性

隐藏一个标签元素
display:none 隐藏一个元素

display属性可以用来控制标签元素的显示属性
值：
block 把元素转化为块属性标签
inline 把元素转化为行属性标签
none 隐藏标签元素
设置内联块元素（行内块元素）
display:inline-block;
他的本质是 对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方式
原因：两个内联块元素之间键入了回车，回车也是个字符，他的大小跟父标签的font-size有关
解决办法：
1.去掉回车键
2.设置他们父元素的大小为0

注意：字体大小是可以传递到子元素上的

基础选择器

1.通配选择器
*表示通配符，他可以匹配任何标签
*{
css内容
}
2.标签名选择器
E{ css内容 } 给所有标签名为E的元素设置css样式
3.类名选择器
.类名{ css内容 }
使用的时候需要在标签上绑定class=“类名” 如果有多个类名，使用空格隔开，类名最好不要超过5个
4.id选择器
#id名{ css内容 }
在一个页面当中，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id
5.群组选择器
如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器
.wp， #abc ，div { css内容 }

层次选择器

1.后代选择器
E M {css内容} 通过E选择器设置E中的M选择器的css内容，M可以是E的子集，也可以是E的后代中的某一个选择器
2.父子选择器
E>M { css内容 } 通过E选择器找到E选择器的子集M选择器，设置css内容
3.兄弟选择器
E~M {css内容} 通过E选择器找到 该元素之后的所有选择器名为M的兄弟元素，并设置css样式
4.相邻兄弟选择器
E+M {css内容} 通过E选择器找到 该元素之后第一个兄弟元素M，并且对M设置css样式

伪类

a的伪类
伪类，是css系统创建好的内部的类，用来对标签的某个时机设置样式
link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
acitve：鼠标按下不松手时候的状态

顺序是 l -> v-> h -> a （先爱后恨）
ie8以后，任何标签都可以添加：hover伪类
可以根据hover触发元素本身，以及通过元素能找到的元素变化

选择器的优先级

什么时候需要考虑选择器的优先级
不同的选择器同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值
选择器优先级的强弱顺序
1. !important 100000
2. 行间样式，在标签上添加style属性 10000
3. id选择器 1000
4. 类名选择器，伪类选择器，属性选择器 100
5. 元素(标签名)选择器，伪元素选择器 10
6. 通配符选择器 1
7.系统默认提供的css属性 0

假设后面的数字是权重的值，那么在比较的时候只需要把选择器的值相加，然后比较大小既是权重的大小。如果他们的值相同，后来者居上

盒模型

盒模型：在html中每个标签都具有一个盒模型
盒模型的组成部分：content（内容），padding（内边距），boder（边框），margin（外边距）

content：标签元素的内容，一般自定义宽高，或者由子元素的内容撑开宽和高
padding：设置元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置当前元素到相邻元素之间的距离

设置内边距
padding-top：num；设置上边距
padding-right：num；设置右边距
padding=bottom；num；设置下边距
padding-left：num；设置左边距

合写：
padding：上 右 下 左；
左=右 上!=下
padding：上 右 下；
左=右 上=下
padding:上 右；
左=右=上=下
padding：上；
margin 设置外边距
margin-top 设置上边外边距
margin-right 设置右边距
margin-bottom 设置下边距
margin-left 设置左边距
合写：
margin：上 右 下 左；
上=下 右！=左
margin ：上 右 下 左；
上！=下 左=右
margin：上 右 下；
上=下 左=右
margin：上；
margin的经典bug
1.上下两个兄弟元素的margin重叠问题
上下两个兄弟标签设置margin的时候，他们之间的距离不是相加而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的

可以理解为上面元素的margin-bottom和下面元素的margin-top他们的值取最大的那个

解决方法：给下面的元素添加display：inline-block
2.父子级子元素的margin-top传递问题
在子元素中，设置margin-top表现的结果是该margin-top传递到父级元素上，使得父元素距离他上面的元素为该margin-top值
解决方法：
a.给父元素添加 overflow:hidden；
b.给父元素添加 border