基础知识（HTML + CSS）整理

admin管理员组

文章数量:1547225

整理个笔记，虽然整理的不好，但怕忘记了，还可以翻一翻。。。不是很完整，只是列一些常用的。。。

网页的组成：结构HTML 表现CSS 行为JS
HTML指的是超文本表及语言www万维网的描述语言

标签与属性之间用空格隔开，属性与属性之间也用空格隔开，属性与属性值之间用 '=’ 号隔开，属性值一点要放在引号内，属性值与属性值也是用空格隔开

<div></div>：没有具体含义，统称为块级元素，是文本布局常用对象
<span></span>：文本节点标签，可是某一小段文本，或某一个字

图片标签： img

  <img src="" alt="" tlitle="" >

属性

src：图片形式的路径
alt：若图片加载不出来，显示文字
tlitle：鼠标上显示的句子
border：边框

标签

i、em：字体倾斜
br：换行
b、strong：字体加粗
hr、u：水平线

符号

sup：字体上标
sub：字体下标
&nbsp：不换行空格
&gt：>右尖括号right
&lt：<左尖括号left

超链接

<a	href="路径"	target=""	title="" ></a> 

说明：href部分url后面跟的是链接页面路径（它含文件名）

列表标签

有序列表 ol

有一定时间、先后、高低等顺序，如排名、热度。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    <!-- 默认排序样式 -->
    <ol>
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>
    <!-- 按大写字母排序 -->
    <ol type="A">
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>
    <!-- 按小写字母排序 -->
    <ol type="a">
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>
    <!-- 按大写罗马数字排序 -->
    <ol type="I">
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>
    <!-- 按小写罗马数字排序 -->
    <ol type="i">
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>

无序列表 ul

类别相同，但没有具体的顺序，一般用于导航栏、相关资讯

无序列表始于 <ul> 标签。每个列表项始于 <li>

<!-- 和不设置type一样，默认前置符号 -->
  <ul type="disc">
    <li>无序列表</li>
    <li>有序列表</li>
    <li>定义列表</li>
  </ul>
  <!-- 清除前置符号 -->
  <ul type="none">
    <li>无序列表</li>
    <li>有序列表</li>
    <li>定义列表</li>
  </ul>
  <!-- 设置空心圆符号 -->
  <ul type="circle">
    <li>无序列表</li>
    <li>有序列表</li>
    <li>定义列表</li>
  </ul>
  <!-- 设置实心方块符号 -->
  <ul type="square">
    <li>无序列表</li>
    <li>有序列表</li>
    <li>定义列表</li>
  </ul>

自定义列表 dl

一般用于名词解释，用的蛮少的

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

dt，表示关键字（词）
dd，表示对dt的描述内容

  <dl>
    <dt>列表
    <dd>无序列表</dd>
    <dd>有序列表</dd>
    <dd>定义列表</dd>
    </dt>
    <dt>蔬菜
    <dd>白菜</dd>
    <dd>油麦菜</dd>
    </dt>
  </dl>

列表嵌套

不管是有序无序还是自定义列表，列表项内部都可以使用段落、换行符、图片、链接以及其他列表等等

想什么嵌套就什么嵌套，就你喜欢和需求。

列表嵌套
  <ul>
    <li>水果</li>
    <ol type="a">
      <li>苹果</li>
      <li>火龙果</li>
    </ol>
    <li>
      <dl>
        <dt>茶</dt>
        <dd>红茶</dd>
        <dd>绿茶</dd>
      </dl>
    </li>
    <li>牛奶
      <ul type="circle">
        <li>酸奶</li>
        <li>纯牛奶</li>
      </ul>
    </li>
  </ul>

列表前面符号也可以换成图标或者小图片什么的，不过要依赖CSS帮助了

表格：table 行：tr 列：td

 <table>
    <tr>
      <td>序号</td>
      <td>语文</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>1</td>
      <td>98</td>
      <td>86</td>
    </tr>
  </table>

属性

边框：border
宽：width
高：hight
边框颜色：bordercolor
cellpacing=“单元格与单元格之间的距离”
cellpadding=“单元格与内容之间的距离”
align：水平的对齐方式 left center right

给table添加

1、border-spacing：单元格与单元格之间
2、border-collapse：1px合并 / separate不合并（合并单元格之间的边框）
3、empty-cells：hied隐藏/show显示 （单元边框不合并时才有用）

rules 添加分隔线
rows：行与行之间添加分隔线
cols：列与列之间添加分隔线
all：行与列都添加（行与行，列与列之间）
groups：添加组之间的
colgroup =><colgroup span="多少列一组"></colgroup> =>多少组写多少个colgroup
<col span='value'>也是列分组，但不能与rules一起使用

表单：form

属性

action=“路径，接口”
name=“表单的，名称”
method=“提交方式（GET）”
enctype=“表单编码方式”

表单的控件

属性：type

取值：

text：文本输入框
password：密码输入框
radio：单选框。如果有几个单选框是一组的，我们必须给他们添加name，name的属性一样（name的属性值一样有空格会变成输入框）
checkbox：复选框多选框
submit：提交按钮，提交之后会刷新页面
reset：重置按钮
button：普通的提交按钮

属性

placeholder：占位符
checked：默认选中，提交数据的方式

如果想要改变submit的默认文字，添加一个value属性，属性值你想要的文字

文本域：textarea

属性

cols：列，文本域的宽
rows：行，文本域的高

<textarea	  name=""   id=""	cols="30(宽)"	rows="10(列/行)">

下拉菜单

select >option
select：下拉菜单的默认选中

CSS语法

声明{属性：属性值}
属性与属性值之间用：号隔开
选择符{属性：属性值；属性：属性值；
选择器{属性：属性值；}

创建css样式的方式

1、内联样式：给html标签添加style属性，属性值为css声明语法
2、内联样式：在head标签添加style属性，在里面写css语法
3、外部样式：创建css文件，在这个文件里写css语法，在html页面的head里

用link引入外部样式

优先级：

内联样式 > 内部样式 、外部样式 （内部样式和外部样式，谁在后面，谁的优先级较高）

选择符

1、类型选择符（标签：div、h1-h6…）
2、id选择器（#id名），id名在页面时唯一的
3、class选择器（.class名）
4、特殊选择器
 （1）、伪类选择器
    a:link{ }
    a:visited{ }
    a:hover{ }
    a:active{ }
 （2）、通配符（*）
 （3）、群组选择符（选择器1，选择器2{ }）
 （4）、包含选择器（父元素选择器{ }）直接作用于子元素

选择器的权重

内联样式（1000）> id选择器（0100） > class选择器（0010）> 类型选择器（0001）> 通配符（0000）> 继承（0000）

字体样式

字体的大小：font-size：数值+单位（px），默认值16px
是否加粗：font-weight：
   bold（加粗），
   normal（正常），
数值（100-400，500正常，600-900加粗）
字体倾斜：font-style：italic（倾斜），normal（正常）
字体的样式：font-family：
   当字体是中文字体是需要加引号
   当文字是英文字体中有空格需要加引号
   如果有多个字体的时候，用逗号隔开
字体颜色：color：
   颜色是由三原色组成的：00红、00绿、00蓝
   0-f（0颜色最暗，f最亮）

字体大小：font-size
字体颜色：color
字体加粗：font-weight
字体倾斜：font-style
字体样式：font-family

颜色取值

1、颜色的英文单词
2、十六进制；#6位十六进制的值（0-f）
3、rgb（red（0-255），green（0-255），blue（0-255）） 0最暗，255最亮
4、rgba（red，green，blue，alpha（不透明））
5、hsla（0-360）H是色度 =>0是红色，120是绿色，240是蓝色，360也是红
   S是饱和度，取值在0%-100%，0%饱和度最低，100%饱和最高
   L是亮度，取值在0%-100%，0%最暗，50%正常，100%最亮
   A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。
文字水平居中：text-align：left（左对齐）center（居中对齐）right（右对齐）
文本垂直居中：line-height：容器的高度，line-height：数值+单位

垂直对齐方式（只对行内元素有作用）：
vetical-align：middle（居中）top（顶部）bottom（底部）baseline（基线对齐，默认值）
如果要实行实现行内元素垂直居中对齐：要有两个行内元素以上，都要给对比的元素添加vertical：属性值。

块级元素独占一行，可以设置宽高，默认情况下，宽度为父元素的100%
行内元素不独占一行，不可以直接设置宽高，宽由子元素或文字撑大

块级元素

div、dl、dt、dd、ol、ul、fiedest、h1-h6、p、form、hr、frame、colgroup、col、table、tr、td 等

特点

1、独占一行，可以设置宽高
2、块级元素可以为所有内联元素的容器和部分块级元素的容器（p除外）

注意：p标签不能作为其他块级元素的容器

行内元素

a、span、img、i、b、em、br、input、sub、sup、u、strong、textarea（多行文本框）、select、lable（表单的提示信息）等

特点

1、不独占一行，不可能设置宽高，宽高由内容撑开
2、行内元素也遵循盒子模型，但是margin-top、margin-bottom、padding-to、padding-bottom是没有效果的

行内元素不独占一行，不可以直接设置宽高，宽由子元素或文字撑大

置换元素

<img>、<input>、<textarea>、<select>都是置换元素

特点

浏览器根据元素的标签和属性来决定元素的具体显示内容
置换元素在其它显示中生成了框，这也是有的内联元素（img、input）能设宽高的原因

display改变元素类型的属性

属性值

block：将行内元素转换成块级元素，也是块级元素的默认值，除了li，li的默认值是list-item
inline：将块级元素转换为行内元素，也是行内元素的默认值，除了img、input、select
inline-block：将行内元素或者块级元素转换为行内块元素，既不独占一行，也可以设置宽高
none：隐藏

display：none隐藏元素，让元素隐藏（一般鼠标滑过显示）不占据原来的位置，不独占一行，可设宽高
display：inline不能设置宽高

img、input、select，他们的display属性的默认是inline-block
display隐藏之前是什么属性，显示时就设为该属性值（inline/block）

如果把块级元素设为inline-block，元素元素之间有空格，这个空格解析时会把标签换行当成一个字符，
怎么解决：1、把所有标签写在同一行，而且之间没有空格，2、给父元素设font-size：0，但是注意要给自己设字体大小

让一个不确定宽高的小盒子在一个大盒子里面水平居中

1、大盒子设置text-align：center
2、将小盒子设置display：inline-block；vertical-align：middle
3、在盒子后面添加一个元素，该元素设置display：inline-block；vertical-align：middle；width：0；hight：100%

文本修饰

text-decoration：none（没有）underline（下划线）overline（上划线）line-through（删除线）

浮动

作用：将从上往下排列的元素变成从左到右排列，或者从右往左排列，把垂直排列的元素变成水平排列

属性：float：left、right、none

clear：清除浮动
none：允许两边都可以有浮动对象
both：清除两边浮动
left：清除左边浮动
right：清除右边浮动

浮动之后脱离文档流，不占据原来位置
子元素浮动，如果子元素的宽度的和 > 父元素的宽度，那么子元素就会往下排列，如果子元素浮动，那么父元素一定要设高度

float：定义网页中它对文本如何环绕该元素显示

清除浮动

clear：left，right，both

清除浮动可以理解为打破横向排列
清除浮动的关键字clear=>只能影响使用清除的元素本身，不能影响其他元素

clear：none，left，right，both
   none：默认值，允许两边都可以有浮动对象
   left：不允许左边有浮动对象
   right：不允许右边有浮动对象
   both：不允许有浮动对象

盒子

所有的元素都可以称之为盒子

盒子的组成

外边距（margin）+边框（border）+内填充（padding）+内容（content）

内填充

在页面上实际显示出来的宽度

实际的宽

width：content（我们设的width）+padding（左右的padding值）+border（左右的border）

实际的高

hight：content（我们设的高hight）+padding（上下的padding值）+border（上下的border）

border的相关属性以及相关属性值

border-color：边框颜色
border-style：solid实线/dashed虚线/dotted点状边框/double双线/none无边框
border-width:边框的宽度

padding和margin的几种写法

一个值：padding/margin：上下左右
两个值：padding/margin：上下	     左右
三个值：padding/margin：上		 左右		下
四个值：padding/margin：上		 右		    下		左

padding/margin-left，right，top，bottom

overflow

overflow：容器溢出的时候对容器做一些处理取值
hidden：当内容或子元素大于容器的时候，就把多余的部分隐藏
auto：当内容大于容器时出现滚动条
scroll：都会出现滚动条
visible：（默认值）不隐藏也不会出现滚动条

文本出现省略号：text-overflow：ellispsis（有省略号）clip（无省略号）

单行想要省略号，一定要配合这三个属性

width：
overflow：hidden
white-space：nowrap

单行文本出现省略号：
text-overflow：ellipsis；
overflow：hidden；
white-space：nowrap；
width：
行内元素不可以设置，因为行内元素不可以设置宽高

单行省略号条件：块级元素

1、容器宽度：width：value；
2、强制文本在一行内显示：white-space：nowrap；
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis；

多行省略号条件：

1、容器宽度：width：value；
2、溢出文本显示省略号：text-overflow：ellipsis；
3、主要控制容器里面子元素的排列方式：display：-webkit-box；
4、实行限制文字显示多行，多余的用：-webkit-line-clamp：2（数值几行）；
5、属性规定框的子元素应该被水平或垂直排列：-webkit-box-ovient：vertical
6、溢出内容为隐藏：overflow：hidden；

行高

line-height：normal/数值

文本的垂直居中对齐，容器的高度=>line-height：
行类元素不独占一行，（span）不可以直接设置宽高
块级元素独占一行，（div）可以设置宽高，默认宽度100%

vertical-align

取值：
baseline（基线对齐，默认值）
middle（居中）
top（顶部）
bottom（底部）

如果要实现行内元素居中，要有两个行内元素以上，都要给对比的元素添加vetical：属性值

text-decoration

text-decoration：underline（下划线）overline（上划线）line-trongh（删除线）none（没有）blink（闪烁，高析本）

em是一个单位，根据父元素的font-size的值来确定em的值的大小，例如font-size：20px

字间距

lelter-spacing：value控制英文字母或汉字的字距
lelter-spacing：与字符为标识去添加间距

词间距

word-spacing：value控制英文单词词间距
word-spacing：以空格为标识去添加间距

控制文本大小写（只对英文有作用）

控制文本大小写（只对英文有作用）：text-trandform
取值：
none（默认值）
capitalize（每个单词首字母大写）
uppercase（都为大写字母）
lowercase（都为小写字母）

边框的属性和属性值

border：边框宽度 边框风格 边框颜色
边框：border，网页中很多修饰性线条都是由边框来实现的
边框宽度：border-width：数值
边框颜色：border-color：颜色
边框样式：border-style：solid实线 | dashed虚线 | dotted点划线 | double双线可单独设置一方向边框
上边框：border-top：边框宽度 边框风格 边框颜色 顶边框
下边框：border-bottom：边框宽度 边框风格 边框颜色 底边框
左边框：border-left：边框宽度 边框风格 边框颜色 左边框
右边框：border-right：边框宽度 边框风格 边框颜色 右边框

背景颜色

background-color：颜色值
背景图片的设置：background-imge：url（背景图片的路径及全称）
背景图片的平铺属性：
background-repeat：on-repeat / repeat / repeat-x / repeat-y
图片的固定性：background-attachment：scroll滚动fixed固定
fixed固定，不随内容一块滚动
scroll：随内容一块滚动
背景图片的的位置性：
background-position：left / center / right / 数值top / bottom数值 / center
background-position：属性值1（水平方向） 属性值2（垂直方向）
两个值：第一个值表示水平位置的值，第二个值表示垂直的位置

说明：向左方向、向上方向是负值
水平方向上的对齐方式：（left/center/right）或值
垂直方向的对齐方式：（top/center/bottom）或值

背景缩写：background：属性值1 属性值2 属性值3

.nav > li 表示找到.nav下面子元素li，第一级子元素

定位 position

当你设定属性值之后，必须配合left，right，bottom，top，这几个值去使用

1、static：静态定位，也是所有元素里面的默认值，设置之后没有变化
2、absolute：绝对定位，绝对定位的参考物：相对于浏览器的可视窗口或者最近的有定位（非static）的父级元素来定位，特点：给元素设置绝对定位之后，元素会脱离文档流，不占据原来的位置，下面的元素可以往上走
3、relative：相对定位，相对定位的参考物：元素本身原来的位置，设置left：value，往右移动value距离，right：value往左移动value距离，top：value往下移动value距离，bottom：value往往上移动value距离，特点：移动之后还占据着原来的位置，不脱离文档流（灵魂出窍）
4、fixed：固定定位，参照物：可视窗口，特点：脱离文档流，不占据原来的位置

二级导航中的定位使用：子绝父相（子元素绝对定位，父元素相对定位） 参照物：相对于什么位置或者什么物体（元素）来进行定位

层叠

z-index：value

作用：设置盒子的层级，层级最大的元素在最上面

注意：
1、z-index可以取（负整数，0，正整数），默认值为0，（没有单位，可以取负数）
2、层级关系：定位层级 > 浮动 >
标准文档流级 当这布局中一起使用的时候，出现层级问题，使用z-index，但只能给定位添加

定位必须配合：top、left、right、bottom四个词去使用
层级关系属性：z-index
包含地也是定位参照物

锚链接

作用：指定跳转到某个内容，返回本页面的最顶端

锚链接的语法：给想要出现的内容标签设置一个id

<标签  id="id名"><标签>  =>  <a href="#id名"></a>

注意点：需要显示的内容的高度，跟父元素（显示容器）一样高

两栏布局方法

首先，html,body { hight：100% }
再设置.box { hight：100% }
左边的盒子宽度给一个固定值，右边盒子设置固定定位，left为左边盒子宽度，top，right，bottom为0就会把整个盒子拉开

给盒子设圆角

语法：border-radius：value

滚动条

子元素溢出的时候给父元素加滚动条：overflow：auto

只想要给某一方向的滚动条：
overflow：scroll / auto
overflow-x|y：hidden

只想要水平方向的滚动条：overflow-y：hidden
只想要垂直方向的滚动条：overflow-x：hidden

滚动字幕

滚动字幕一定要用marquee，其它标签都不能实现

盒子居中

1、.box{
width：300px；
hight：300px；
background：pink；
position：absolute；
top：50%；//父元素高度50%
left：50%；//父元素宽度50%
margin-top：-150px；//子元素高度的一半
margin-left：-150px；//子元素宽度的一半
}

2、.box{
width：200px；
hight：200px；
position：absolute；
background：pink；
top：0；
left：0；
bottom：0；
right：0；
margin：auto；//是把小盒子剩余部分平分给小盒子的上下左右
|| tranform:translate(-50%,-50%)//利用2d的位移方法
}

高度塌陷

正常文档流：父元素的高度可以由子元素来撑开，当子元素浮动的时候，父元素没有高度，父元素不再去计算子元素的高度，所有导致父元素的高度为0

当父元素触发bfc的时候，父元素会去计算浮动元素的高度，从而撑开父元素的高度，解决高度塌陷overflow：hidden

块级格式上下文（Block Formatting Context）

BFC

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响

触发BFC的条件

满足下列的条件之一就可以触发BFC
1、根据元素，即HTML元素
2、float的值不为none
3、overflow的值不为visible
4、display的值不为inline-block
5、position的值为absolute

特性

1、阻止垂直外边距（margin-top，margin-bottom）折叠属于同一个BFC 的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠——分为两个BFC就可以消除这种margin重叠。
解决：触发其中一个div的BFC，是的两个div不在同一个BFC内，这样就可以阻止这两个div的margin重叠，display：inline-block
2、包含浮动元素
可以包含它内部的所有元素，包括浮动元素，因此清除内部浮动
解决：清除环绕overflow：hidden，为其本身创建一个BFC

bfc的作用

1、自适应两栏布局
2、可以包含浮动元素——清除内浮动
3、可以阻止元素被浮动元素覆盖
4、分别属于不同的BFC时可以阻止margin重叠
块级元素不设宽度或高度为100%的时候，默认为元素

前端性能优化

1、图片整合
2、压缩静态文件js、css、图片
3、HTML的页面结构，尽量减少HTML的结构

图片整合减少服务器的请求次数，减少网站的内容量
图片整合的核心属性：background-position：属性值1 属性值2
属性值1代表水平方向的值（left/right/center || 数值+单位（负数往左，正数往右） || 百分百）
属性值2代表垂直方向的值（top/center/bottom ||数值+单位 || 百分百）

高度自适应

1、高度设置hight：auto或者不设置高度（子元素撑开父元素的高度）

2、元素高度自适应窗口高度hight：100%；表示要box继承父元素的高度 ，如果要让布局适应窗口，html，body{ 100% }

宽度自适应

width：100%；当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。（继承父元素的宽度）

width：100%； 默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了

最小高度

语法：min-hight:value（数值+单位）

当你设置了最小高度：如果你的实际内容比最小高度小的时候，显示的是最小高度，实际内容比最小高度大的时候，显示的是实际内容的高度

最大高度

语法：max-hight:value（数值+单位）

如果实际高度小于最大高度的时候，显示的实际内容的高度，当实际内容的高度大于最大高度的时候，显示最大高度，多余的部分内容不计入元素的高度

最小高度：min-hight：value
最小高度的浏览器兼容：
min-hight：value
hight：auto ！important
hight：value
兼容ie6：-hight：value

过滤器

1、—在属性前面 添加，ie6以下的浏览器识别
2、！important在属性值后面添加，具有最高级别，只有ie6不识别
3、*在属性前面添加，表示ie7及以下浏览器识别
4、\9在属性值后面添加，ie浏览器识别
5、\0写在属性值后面，ie8及以下识别

最小宽度

语法：min-width:value（数值+单位）

块元素设置最小宽度时，需要将元素转换为inline-block后再去设置

最大宽度

语法：max-width:value（数值+单位）

高度塌陷

子元素浮动，脱离文档流，不能撑开父元素的高度

解决高度塌陷的方法

1、overflow：hidden（触发bfc）

缺点：会把元素定位，不在高度范围内的元素隐藏掉

2、在浮动元素的后面添加一个div，给这个div设样式

div{
clear：both；
hight：0
overflow：hidden
}

clear：清除浮动，取值：left、right、both（两端都清除）

缺点：如果页面有多个浮动时，就会有多个空的div，html结构太多，性能不好

3、万能清除浮动

选择符（高度塌陷的元素）：：{ //如果子元素浮动，这里就是父元素
content：" "；
display：block；
clear：both；
overflow：hidden；
visibility：hidden；
}

优点：弥补了以上三种方案的不足之处，是官方推荐的清除浮动的方法

选择符

1、选择符::after

一定要配合content属性去使用，给选择符添加一个最后的子元素（行内元素）

2、选择符::berfore

一定配合content属性使用，给选择符添加第一个子元素（行内元素）

3、选择符::first-line

定义选择符中内容的第一行的样式，只能用于块级元素

4、选择符::first-letter

定义选择符中的内容的第一个字符的样式，只能用于块级元素
first-letter、first-line只对块级元素起作用
content里面可以放文字也可以放图片
content：“文字” / url（图片路径）

三种影藏元素

1、display：none隐藏元素，不占据原来的位置，彻底消失
2、visibility：hidden隐藏元素，元素不消失，还占据原来的位置
3、opacity：0 也可以隐藏元素（让元素透明不见）

opacity透明度，也可以隐藏元素（让元素透明不见）

表单的控件 input

属性

type：类型

取值：
text：文本输入框
password：密码输入框
radio：单选框，如果有几个单选框是一组的，我们必须给他们添加那么
chekbox：复选框

定义列表符号样式：{list-style-type}

取值：
disc（实心圆）
circle（空心圆）
square（实心方块）
none（去除列表符号）

垂直对齐方式 {vertical-align :top/bottom/middle；}
当行文本的行高等于容器的高时，可实现单行文本在容器中垂直方向居中对齐，line-height
如果要实现行内元素垂直居中对齐，要有两个行内元素以上，都要给对比的元素添加vertical：属性值

首行缩进

首行缩进 {text-indent：数值}
设置第一行的缩进值，负值是向前进，可设置数值或百分
1、text-indent可以去负值，可实现隐藏文本，悬挂缩进
2、text-index属性只对第一行起作用

fiedset：表单字段集

colgroup-col：表单分列组元素

table：表格

最早的浏览器（网景NN）

五大浏览器的内核

1、Tridet 代表作IE、Maxthon（遨游）、腾讯、Theworld（世界之窗）、360浏览器
2、Gecsto
3、Presto
4、Webkit
5、Blink

Trider：IE、Maxthon（遨游）、腾讯、Theworld（世界之窗）、360浏览器、代表作IE，因为IE捆绑在Windows中，所以占用极高的市场份额，又称IE内核或是MSHTML，因内核只能应用于Windows平台，且是不开源的。
…

IE6常见css解析bug及hack

1、图片有边框bug

当图片加<a href="#"></a>在IE上会出现边框
hack（解决）：给图片加border：0；或者border：none

2、图片间隙

a、div中的图片bug
b、描述：在div中插入图片时，图片会将div下方撑大大约三像素
hack1：将<div>与<img>写在一行上（一般不适用）
hack2：将转化为块级元素，给添加声明display：block

3、双倍浮向（只有IE6出现）

描述：当IE6及更低版本浏览器在解析浮动元素时，会错误地把浮向边界（margin）加倍显示
hack：给浮动元素添加声明：display：inline

4、默认高度（IE6、IE7）

描述：当IE6及以下版本中，部分块级元素拥有默认高度（在16px左右）
hack1：给元素添加声明：font-size：0
hack2：给元素添加声明：overflow：hidden

5、表单元素行高对齐不一致

描述：表单元素行高对齐不一致
hack：给表单元素添加声明：float：left

6、按元素默认大小不一致

描述：各浏览器中按钮元素大小不一致
hack1：统一大小/用a标签模拟
hack2：input外边套一个标签，在这个标签里写按钮样式，把input的边框去掉（border：0，border：none不识别）。（去掉按钮的所有的样式再统一给a标签设置样式）
hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

7、百分比bug

描述：在IE6及以下版本中在解析百分比时，会按四舍五入的方式计算，从而导致50%加50%大于100%的情况（也会受系统影响）
hack:给右边的浮动元素添加声明：clear：right；（清除右浮动）

8、鼠标指针的bug

描述：cursor属性的hand属性值只有IE9以下浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其他内核浏览器都识别该声明

hack：如统一某一元素鼠标指针形状为手型，应添加声明cursor：pointer

9、透明属性

IE浏览器写法：filter：alphacopctiy：value；取值1-100（整数）
兼容其他浏览器写法：opacity:value;value取值范围0-1，没有单位

10、li列表的bug在IE6及以下有问题

1、当父元素（li）有float：left；子元素（a）没有设置浮动的情况下会出现垂直bug
hack：给父元素（li）和子元素都设置浮动

光标的形状 cursor

cursor：光标的形状
取值：
auto：默认
crosshair：加号
text：文本
wait：等待
help：帮助
progress：过程
inherit：继承
move：移动
ne-resize：向上或向右移动
pointer：手形

透明度 opacity

opacity：value（0-1）透明度
高版本浏览器的写法：opacity：value（0-100）
IE浏览器的写法：filter：alphacopactity=value（0-100）

表单新增属性

1、表单字段集

语法：<fieldset></fieldset> 呈现一个框，可嵌套使用（对表单进行分类）

说明：相当一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本
fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象，disable定义空间禁止可用

2、字段级标题
语法：<legend align="left/center/right/justify"></legend>

说明：legend元素可以在fieldset对象绘制的方框内插入一个标题
legend元素必须是fieldset内的第一个子元素

3、提示信息标签
语法：<lable for="绑定控件id名"></lable>

说明：lable元素用来定义标签，为页面上的其他元素指定提示信息。要将lable绑定到其他的控件上，可以将lable元素的for属性设置为该控件的id数值相同

4、文件上传
语法：<input type="file" multiple />（multiple可以选择多个文件）

说明：type属性值新增类型有：file文件类型，可进行文件选择

5、图像域
语法：<input type ="image" src=" " widht=" " hight=" " alt =" " />

type=“image” src=“图片路径” 点击之后默认带两个参数 x：value；y：value，鼠标在设置按钮上的位置水平方向和垂直方向的值

表格 table

由行和列组成

border-spacin

1、cellspacing：单元格与单元格之间的距离（为0）
2、cellspadding：内容与表格的距离
3、border-color：边框颜色
4、align：对齐方式
5、valign：垂直又对齐方式
colspan：列合并，删除本行下面的td
rowspan：行合并，删除下一行对应的td
都是给td添加

新增

1、单元格间距
语法：border-spacin：value
单元格之间的距离（不可以取负值）
说明：单元格间距（该属性必须给table添加）

2、合并边框
语法： border-collapse：属性值
取值：
separate：不合并（默认值）
collapse：合并

3、设置无内容的单元格的样式
语法：empty-cells：属性值
取值：
hidde：隐藏
show：显示（默认值）
注意点：如果设置border-collapse：collapse隐藏单元格没有效果

表头：thead
表体：tbody
表尾：tfoot

新增

th表格的表头标题（标签）
表格的行分组：thead，tbody，tfoot
caption设置表格的标题
caption-side：left、right（左右火狐识别）、top、bottom

隔行变色

单数：nth-child（2n+1/2n-1）
双数：nth-child（2n）
rules：all，cols，rows，groups
一个table中只能有一个thead和一个tfoot，但是可以有多个rules添加分割线（给table添加）

all：给行和列都添加分割线（在行与行之间，列与列之间添加）
rows：添加行与行之间的分割线
cols：添加列与列之间的分割线
groups：添加行组和列组之间的分割线
列分组：
colgroup：列分组：colgroup col
属性：span="value" 表示为value一组
分为几组就要写几个
col也是列分组，但是col不能和rules一起使用，用col分组的时候，添加列分组没有作用

HTML5与HTML5之前版本的区别

1、文档申明更简洁
2、HTML5的标记更有语义化
   可省略标记的元素
   不允许写结束的元素：br、col、embed、hr、img、input、link、meta
   指定字符集编码：
3、有媒体播放器vide视频和audio音频
4、画布

标签

section元素，表示页面中的一个内容区块（与div差不多）
aside元素在arlicle之外的，与arlicle内部相关的辅助信息，侧边栏
nav下面可以直接写li（导航）
header设置头部
footer设置底部
figure与dl差不多 （figure可以把字放在上面）

<figure>、<figcaption> 文字图标组合

<figure>用于对元素进行组合。一般用于图片、文字组合
<figcaption>是<figure>的子元素，用于对figure的内容进行
说明：

<figure>
<img src="路径"  width=" "  height=" ">
<figcaption>文字</figcaption>
</figure>

或

<figure>
<figcaption>文字</figcaption>
<img src="路径"  width=" "  height=" ">
</figure>

可写字上、图下或图上、字下

有输入框的下拉列表

input的list属性对应datlist的id名（有模糊搜索）

进度条

max：最大值
min：最小值
high：较好值
low：较差值
value：当前值
optimum：最佳值

1、如果optimum的值小于low的值，则表示value的值越小越好，value的值小于low的值则为绿色，value的值在low和high之间则为黄色，大于high则为红色
2、如果optimum的值大于high的值，则表示value的值越大越好，，value的值小于low的值则为红色，value的值在low和high之间则为黄色，大于high则为绿色

<datalist>与<input>配合实现类似于有输入功能的下拉列表
<input>元素的list属性来绑定<datalist>元素的id

input type = "text" list = "vallist">

<datalist id = "vallist">
<option value="妲己">妲己</option>
<option value="安琪拉">安琪拉</option>
<option value="张飞">张飞</option>
</datalist>

音标

<ruby>字符<rt>注释</rt></ruby>
<ruby>标<rt>biao</rt></ruby>

字符注释

标biao

input新增type类型的属性值

表单新增输入类型 stpe添加
1、color：颜色选择器

<form  action = " ">  <input stpe = "color"> </form>

2、email：电子邮件
3、number：数字输入框，只能输入数字
4、tel：电话号码
5、 l：网页地址，一点要包含http://www或https://www（有安全系统较安全）
6、search：搜索输入框
7、range：特定范围类的取值
8、date：日期，显示年月日
9、month：月，显示年月
10、week：周，显示年周数一年有52周
11、time：时间显示上年或下年，具体时间，上/下午具体时间点
12、file：文件上传
13、imge：图片域（图片按钮）

表单新增属性 input

1、placeholder：占位符
2、autofocus：获取焦点，自动获取焦点
3、multiple：文件上传时可以选择多个文件
4、required：验证条件，必填
5、pattern：正则表达式，例如：patter="\d{3}"
^1[3,4,5,7,8]\d{9} ： ： ：表示以a数字结尾、第二位数要为[3，4,5,7,8]
input的value值要满足patter的属性的条件才能提交
6、novalidat：取消验证，可以对form表单添加

<video  src = "...imge...路径"  width = " "  hight=" ">

渐进增强和优雅降级

渐进增强progressive enhancement 针对低版本浏览器进行构造页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。

优雅降级graceful degradation 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不扩充，以适应未来环境的需要，降级（功能衰减）意味着朝前看，同时保证其根基属于安全地带。

选择器

基本选择器

1、*通配符选择器，给所有元素都添加
2、E类型选择器（元素选择器），给页面上左右的E类元素添加
3、id选择器（#aa），给页面上id属性的属性值位aa添加
4、class选择器（.bb），给页面上class属性的属性值为bb的元素添加
5、群组选择器（选择器1，选择器2），给选择器1和选择器2都添加

关系选择器

1、后代选择器（E（父元素） F（子元素）），作用到E元素所有的F后代元素
2、子代选择器（E（父元素）> F（子元素）），作用到E元素下的所有的F子元素（儿子元素）
3、相邻兄弟元素选择器（E+F），E和F兄弟元素，并且F是E的相邻的后面的元素
4、通用选择器（E~F），比配到E元素后面所有的兄弟元素F

状态伪类选择器

1、a::link：未访问之前的状态
2、a::visited：访问之后的状态
3、a::hover：鼠标滑过的时候的状态
4、a::active：鼠标按下并没有跳转的时候的状态
5、input:focus(css:focus伪类选择器)input获取焦点的时候的状态

目标伪类

E：target既要是目标元素也是E元素才可以添加样式，跟url的指向有关系

语言伪类选择器

在要添加符号的文字用<q>标签括起来在css中
q:lang(no){ qoutes:“符号”,“符号”}

ui状态伪类选择器

文字背景

text-shadow：水平方向的距离（正值往右，负值往左） 垂直方向的距离（正值往下，负值往上） 模糊程度（值越大越模糊） 颜色

文字描边

浏览器前缀 + text-stroke：边宽大小 颜色
-webkit-text-stroke-color：颜色
-webkit-text-stroke-width：宽度

文字排版

direction：rtl（从右到左）/ltr（从左到右）
如果要实现最开始的文字从右到左（对联），要配合unicode-bidi：bidi-override

背景属性

background-size：number1（水平方向） number2（垂直方向）
background-size：100% 100% 这里的百分百的值的时候相对于容器的宽高来显示值为多少
background-size：cover；等比大，图片覆盖整个容器，图片显示不完整
background-size：contain；包含，当图片

deg角度的单位

transform

transform：translateZ（100px）：沿着Z轴移动，正值往前面移动
总写：transform：translate3d（x，y，z）
perspective：景深，设置观察的位置，一般的值要比盒子宽高大
transform：ratate3d（x(0,1),y(0,1),z(0,1),deg(角度)）如果x，y，z的值为1，就代表旋转，是0代表不旋转
transform：scale3d（x，y，z）没有单位
transform：scale（x，y）

animation和transtion的区别

相同点：都是随着时间改变元素的属性值
不同点：transtion需要触发事件或click事件等才会随时间改变其css属性；而animation在不需要触发任何事件情况下也可以显示的随着时间变化来改变元素的css属性值，从而达到一种动画效果，css3的animation就需要明确的动画属性值

自定义字体语法

   @font-face{
         /字体命名/
         font-family:"叶根"
         src:url(../imag/叶根...路径)
       }
       div{
         font-family:"叶根"
       }

header里面不能有header
nav 可以直接用li
main 只能有一个main，不能作为其语义化标签的子元素
article （内容块）
section定义文档中的节（section、区段）
<aside>（侧边）（装非正文内容）
<footer>底部
<hroup>区段标题
strong 表示重要加粗
b加粗没有强调重要
rgba（red(红) gree(绿) blue(蓝) a（透明度=>兼容））
hsba（1-360(色调) 0%-100%(饱和度) 0%-100%(亮度) 0-1(透明度)）
transparent 透明
border-color：上 右 下 左

浏览器前缀：

-webkit：谷歌、国内浏览器 （-webki-border-color）
-o-：Opera浏览器
-moz-：火狐
-ms-：IE

阴影

语法：box-shadow：水平方向 垂直方向 模糊度 阴影宽度
inset（内阴影）第三个值只能有一个值inset
图片作边框->使用图片边框必须写border属性边框（简写border-imge）
border-image-slice：（偏移量）没有单位，值为图片的大小

圆角

border-radius：1 2 3 4
border-radius：13 24（右上 左下）
border-radius：左上角 右上和左下 右下
border-radius：左上 右上 右下 左下
border-radius：1234（水平方向） 1234（垂直方向）

文本阴影：

语法：text-shadow：1（水平） 2（垂直） 3（模糊） 4（颜色）

文字描边

语法：text-stroke：
-webkit-text-stroke：宽度 颜色 （前缀兼容）

让文字从右到左排列

direction：rtl

重写文本

语法：unicode-bidi：bidi-override
unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。

背景

background-size：（改变背景的大小）
取值：
1、auto 默认值，保持图片原有的大小不平铺
2、直接给数值或百分比（相对于容器宽高来设置）
3、cover 覆盖，大于图片会拉伸，小于图片会压缩
4、contain 包含，大于容器会等比例缩小，小于容器等比例拉伸
背景图片从什么位置开始排放：background-origin
背景图从盒子的padding开始排放
1、border-box
2、padding-box
3、content-box
background-clip规定最终显示在哪些区域
取值： border-box（默认值）
    padding-box
    content-box
input{ outline：none }当获取input的焦点是去掉默认的蓝色框
focus获取焦点的时候的状态
图标伪类： :target ul li
语言 q:lang (no) {quotes:"~" "~"} <q lang ="no"></q>
IE浏览器不识别双冒号，要在IE浏览器下使用伪元素就把双冒号改为单冒号
伪元素是双冒号，伪类是单冒号

伪类选择器

:link :visited :hover :active
:focus :disabled :enabled :checked

伪元素只有5个

:after :before :first-letter
:first-line :selection

弹性盒模型

display:flex; 给父元素设置
flex:1; 子元素设置

父元素设置弹性盒模型，子元素可以设置宽高

display:flex; 表示这个盒子为弹性盒

flex-direction（主轴排列方向）父元素添加

定义弹性盒的方向：（flex-direction）
取值：1、row 水平排列（默认值），从左到右
    2、row-reverse 水平排列，从右到左
    3、column 垂直排列 从上到下
    4、column-reverse 从下到上

justify-content (主轴对齐的方式)

取值：flex-start：主轴的（顶端对齐）（开始）对齐
    flex-end：柱子的（末端对齐）（结束）对齐
    center：居中对齐
    space-between：两端对齐
    space-around：把多余的空间平均分给元素的两侧
    space-evenly：平均分配（表示两头的项目与容器壁之间的空隙和项目与项目之间的空隙都保持一个单位。evenly翻译成中文是均匀，指的是所有空隙平均分配）

align-items（侧轴的对齐方式）

取值：align-items: stretch(default) | flex-start | flex-end | center | baseline;

flex-wrap 是否换行

flex-wrap：是否换行（父元素设置）（这个属性声明的是当容器中的项目一行放不下的时候，是让大家挤一挤呢，还是换行）
flex-wrap: nowrap(default) | wrap | wrap-reverse;
取值：nowrap（不换行）弹性盒为单行
   wrap（换行）往下换行
   wrap-reverse（反转换行）往上换行

align-content：行与行之间的对齐方式（多行对齐）多行的情况下有效果

align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;（默认效果顶端对齐，但是行与行之间有间距）

flex-flow：这是一个集合属性，可以同时定义flex-direction和flex-wrap。

取值： flex-flow: row-reverse | wrap-reverse;
设置子元素在侧轴方向的对齐方向

align-self（给子元素设置）子元素的对齐方式

取值：auto（默认值）
   strech：拉伸，没有设置高度，会默认拉伸父元素高度
   center：居中
   flex-end：位于容器的开头
    flex-start：位于容器的结尾

order（子元素设置）数值越大越在后面，可以取负值

取值：number（默认值0）

设置项目的排序：

flex:子元素所占的比例（数值）

多列布局

1、column-count：数值（多少列），把内容分为多少列
2、column-gap：列与列之间的距离，不能为负数
3、column-rule：复合属性（设置列与列之间的分割线）
   分属性：
  column-rule-color：颜色
  column-rule-stye：样式
  column-rule-width：边框宽度
4、column-fill：列的高度是否统一（只有狐火识别）
  取值：balance（与最高一列一样高）
     auto（默认值）内容多少为多高，随内容自适应高度
5、column-span：横跨所有列（一般用于所有标题）
  取值：none（不跨）
     all
6、column-width：每一列的宽度（类似于列的最小宽度）会相应减少列数
7、columns：column-count与column-width的缩写
    columns：400px（宽度） 4（4列）

媒体查询

@media all and (min-width:value)
@media all and (){
  默认样式写在最前面
  当我们min-width作为媒体查询的时候，小的值写在前面
  当使用max-width作为媒体查询的时候，大的值写在前面
}

概念：获取设备，根据设备特征去相应显示不同的css样式

响应式布局

1、弹性布局 + 弹性布局（百分比作为单位）
2、媒体查询 + 固定定位
3、媒体查询 + rem布局+弹性布局
根据媒体查询去获取设备特征改变html{font-size}
4、vw + rem+弹性布局（html根节点的font-size，下面所有元素用rem单位）
vw相当于百分比（只是把全部内容都算上（比如padding））
  640px font-size：31.25vw
  750px font-size：26.67vw
  1080px font-size：27.78vw
5、用js插件 + rem + 弹性（定位）（用js获取设备的宽度，然后根据宽度变html根节点的font-size，下面所有的元素用rem）
  在设计图量出来的值/dpr(213)/100 = value(rem)
  量得的值/dpr(213)/100 = 元素所用的单位
…
em也是单位，相对于父元素的字体大小，font-size
rem也是单位，相对于根元素html的font-size设置 html{font-size：20em}=> 1rem=20px

响应式布局
什么是响应式布局？响应式布局的原理是什么？
响应式网页设计就是一个网站能够兼容多个端——而不是为每一个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和研发了。响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

线性渐变

background：linear-gradient(direction,颜色1，颜色2)
direction：to left/right/top/bottom
   to left bottom(去左下角)
   to right top(去右上角)
   还有角度deg
  使用角度的方向：value deg(角度的单位)
background : linear-gradient(value deg，颜色，颜色)
当角度为0deg是从下到上的渐变，90deg从左到右 顺时针（不过后为开始颜色）
旧版本：0deg从左到右，90deg从下到上（逆时针）
旧版本标准：-webkit-linear-gradient(direction，颜色，颜色)
新标准和旧标准的效果要一样，应该设置新标准+旧标准 = 90deg（x+y = 90）
background：blue
background-imge：linear-gradient( ) + 多个
background-size：50px 50px

径向渐变

background : radial-gradient(value1 , value2 )两个值（扩散大小）
位置（默认在容器中心）默认为椭圆渐变
方向取值:1、cater：起点的位置（两值x，y轴）
     2、shape：渐变的形状。取值：ellipse椭圆（默认） circle圆
     3、size：渐变大小，渐变到哪停止
取值：closest-side：最近边
   farthest-side：最远边
   closest-corner：最近角
   farthest-corner：最远角
语法：background:radial-gradient(center，shape，size，start-color，... ，last-color)

重复渐变（repeating）

background-linear-gradient()
background:repeating-linear-gradient()

过渡 transition

过渡：transition: 过渡对象(all所有对象) 时间
过渡需要一个事件触发（鼠标滑过，点击…）
 分属性：transition-property:参与过渡的属性
     transition-duration:过渡持续时间
     transition-delag:延迟过渡的时间（从什么时候开始）
     transition-timing-function:过渡的动画类型（取值：linear线性 ease …）
简写：transition:all/具体属性 运动时间 延时时间 动画类型
过渡效果给本身添加，而不是给事件添加

2D移动

transition:translate(x(水平),y(垂直)) || 位移方向 ==> translateX || translateY

2D缩放

2D缩放：（默认值 | 不缩放）
transform:scale(数值：x水平，y垂直) 0-1缩小， 大于1放大

2D旋转

2D旋转：rotate()
transform:rotate(数+deg) (正值顺时针，负值逆时针)
transform-origin：（改变旋转的点，本身设置）

2D翻转

2D翻转：改变元素形状：skew()
transform:skew(角度) 水平 垂直
水平方向：正值逆时针 负值顺时针 Y轴到X轴
垂直方向：正值顺时针 负值逆时针 X轴到Y轴

本文标签： 基础知识htmlcss