前端HTML、CSS基础汇总

前端组成的三大部分：

​ Html： HyperText Markup Language 超文本标记语言 （页面的结构标准）

​ Css：Cascading Style Sheet层叠样式表 （页面的表现标准）

​ JavaScript：js脚本语言 页面动态效果

HTML：

标签的分类： 单标签（单独闭合的标签），双标签（成对的标签）

img标签的常用属性：

src=“” 设置图片地址

width=“” 设置图片宽度

height=“” 设置图片高度

实际开发 width 和 height 只需要设置一边即可 另一边系统会自动按比例缩放

title=“” 鼠标提示文本

alt=“” 图片占位文字（图片加载不出来显示的文本）

src图片地址路径问题:

相对路径：跟当前网页所在的文件夹为参考的路径 从当前html文件的路径出发去找图片

绝对路径：网络路径 带协议的网络路径

超链接标签a的使用：

target属性:

_blank 新标签页面打开

_self(默认值) 在当前页面直接打开目标页面

base标签的作用:

对所有后来的a标签进行 统一设置:

href 表示基础路径的统一配置

a标签最终的跳转地址 = base标签的href地址+a标签本身的href 组成完整地址

​ 如果a标签的href地址里面没有协议开头 那么回去找base标签的href 把地址拼上

​ 如果当前a标签的href地址 是以协议开头 那么当前地址就是完整地址

​ 不再去找base标签拼接

base标签除了 href 还有target属性

​ 表示对所有a标签统一设置跳转的目标位置

​ 如果a标签未设置target属性 则按照base标签的target属性生效

​ 如果当前a标签已经设置了 target 那么按照当前标签设置的target生效

a标签的四大功能：

1.页面跳转 2.回到顶部 3.锚点 4.下载功能

列表标记：

无序列表 ul，li

有序列表 ol，li

自定义列表 dl dt dd

meta使用:

charset=“utf-8” 设置当前网页编码

name=“keywords” content=“关键字列表”

name=“description” content=“描述信息”

table标签的常用属性:

table表格标签 tr 一行 td一列

border 边框宽度 默认是0

width 宽度

height 高度

align=“left | right |center” 表格在页面中的对齐方式

cellspacing 单元格之间的间距

cellpadding 单与格内部的内容到单元格周围的距离

tr标签的常用属性

align 当前行文本的横向对齐方式

​ left | right |center

valign 当前行文本垂直对齐方式

​ top | center |bottom

td标签的常用属性:

align 当前单元格文本的横向对齐方式

​ left | right |center

valign 当前单元格文本垂直对齐方式

​ top | center |bottom

bgcolor 当前单元格背景颜色

细线表格：border-collapse:collapse;

表格语义化:thead tbody tfoot

合并单元格：

rowspan=“” 合并的行数 高度变高

colspan=“” 合并的列数 宽度变宽

表单控件的通用属性:

name属性 提交用的

value 提交的值

disabled 禁用

readonly 只读

input标签

type=“text”

“password”

radio

checkbox

submit

reset

button

image

file

Html5语义化标签

header nav main aside section footer

标签的四大通用属性:

title 鼠标提示文本

id 除了锚点功能以外 还有 配合 CSS选择器 完成css功能

class 配合 CSS选择器 完成css功能

style 定义css的行内样式

基本选择器:

• （通用选择器，通配符） ID class tag（标签）

复合选择器：

子代选择器 选择器1>选择器2

后代选择器 选择器1 选择器2

交集选择器 标签名.class名 标签名#id名

并集选择器 选择器1 , 选择器2 , …, 选择器n

font连写:

font:[weight] [style] size family;

​ font: style size family;

​ font: size family;

​ 连写中 前两个是可选 后两个是必须写

css三种引入方式：行内 内嵌 外链

块级元素：独占一行 可以设置宽高 默认有宽没高 h1~h6 div p ul>li ol >li dl dt dd

行内块：在一行内显示 可以设置宽高 默认没有宽高 img 表单中的控件 大部分都是 行内块（label不是行内块）

行内： 在一行内显示 不能设置宽高 默认有高度没有宽度 span a i/em u/ins b/strong s/del label

显示模式的转换

display: block; 转换成块级

display:inline; 转换成行内元素

display:inline-block; 转换成行内块

标签（元素）之间相互嵌套规则

块级标签可以嵌套一切其他标签

块级里面: 可以有行内 行内块 块级 都可以

ul ol里面只能出现 li标签 dl里面只能出现 dt和dd

li标签里面 可以嵌套一切

行内和行内块 之间可以互相嵌套 但是不能嵌套块级

p 不能嵌套其他任何块级元素 甚至包括自己

哪怕块级元素 通过display改变了显示模式也没用

一旦p标签嵌套块级元素 就会出现 被截断的情况 产生两个p标签

css三大特性：

层叠性：元素最终的样式 很可能由多个选择器 叠加而来的效果

继承性：某些css属性 给父元素设置以后 所有的后代元素都会生效（h标签不要设置字体大小，a标签不会继承文字颜色）

优先级：默认样式<通用选择器<标签(元素)选择器<class选择器<ID选择器<行内样式<!important（方便计算定义了额外的权值）

0 0110 100 1000<1000

伪类选择器:

选择器:link 普通链接状态
​ 选择器:visited 链接访问过后的状态

​ 选择器:hover 鼠标悬停状态

​ 选择器:active 鼠标按下状态

​ 选择器:focus 获取焦点状态 专门用在 表单控件

​ 方便记忆：驴哈lvha

background开头的css属性是专门针对 背景设置的

​ background-color: 背景颜色

​ background-image: 背景图片

​ background-image:url(图片路径) 如果图片路径中有特殊符号 最好是假双引号: url(“路径”)

​ 背景图片默认是按照图片原大小进行平铺

​ background-repeat 背景重复模式

​ repeat(默认值) 横纵都重复(平铺)

​ repeat-x 横向重复

​ repeat-y 纵向重复

​ no-repeat 不重复

​ background-attachment 背景依赖

​ scroll(默认值 会随着页面的滚动 跟着元素一起滚动)

​ fixed (固定 不会随着页面的滚动而滚动)

​ 设置fixed属性以后 表示当前图片的 position是按照当前浏览器窗口来进行位置计算

​ 浏览器窗口的左上角是0 0 点

​ background-position:

​ 背景图片的位置 主要针对 no-repeat

​ background-position:x y; 中间空格隔开

​ \1. 五个方向的单词

​ 横向: left right

​ 纵向: top bottom

​ 居中: center

​ \2. px值

​ background-position:xpx ypx

​ 如果 没有fixed属性 则按照当前盒子的左上角为0,0 点

​ 进行px值的位移

​ \3. 百分比

​ background-position: 数值% 数值%; 先横向 后纵向

​ 按照当前宽高减去图片宽高剩余距离的百分比计算

​ 如果只写一个方向 那么另一个方向默认值是 center

​ background-size:

​ image默认是按照图片原大小作为背景图片

​ 当前属性可以缩放图片大小

​ background-size:数值px 数值px; 先宽 后高

​ background-size:百分比 百分比; 先宽 后高

​ 百分比按照当前元素的宽高计算百分比

background属性连写:

background: color image repeat attachment position/size（可以只写一个 但是写size就必须写position）

单行文本在元素中纵向居中: line-height:当前元素高度;

css盒子模型：

什么是？盒子模型是把HTML中元素看作为一个矩形盒子，相当于一个装内容的容器。

盒子的最终宽高=盒子设置的宽高+padding+border

盒子模型一般分为两大类:

谷歌盒子模型:

​ 盒子最终的宽高=盒子自身的宽高+padding+border

​ 属性值:

​ box-sizing:content-box;

IE盒子模型:

​ 盒子最终的宽高就是设置的 width和height的值

​ padding和border浏览器自动计算并减去

​ 属性值:

​ box-sizing:border-box;

单个方向 三个属性的连写:

border-方向: width style color; style：solid 实线边框dotted 点线dashed 虚线double 双实线

四个方向 三个属性总连写:(四个方向统一设置)

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

padding连写：

四个值： 上 右 下 左

三个值： 上 左右 下

两个值： 上下 左右

一个值： 上下左右

margin连写（和padding一样）

四个值： 上 右 下 左

三个值： 上 左右 下

两个值： 上下 左右

一个值： 上下左右

margin关于auto的使用

auto值只能针对左右外边距生效 上下不生效

​ 表示自动分配的意思

​ 表示当前横向剩余空余 自动分配

​ 前提:

​ 当前元素必须是块级

​ 块级元素必须设置宽度 宽度小于父容器的宽度

​ auto值才可以分配剩余空间

​ 一个块级元素在另一个块级元素里面横向居中:

​ 给里面的块级设置:margin: 上下px auto;

​ 文字/行内/行内块元素 在块级里面横向居中:

​ 给块级元素设置: text-align:center;

margin边框合并的问题： 相邻元素之间如果都有边框 那么有可能产生 相邻位置边框比较宽 需要进行边框合并 利用margin负数进行盒子的重叠 从而实现盒子边框合并

边框塌陷:

子元素设置margin-top 会带着父元素一起下沉

​ 根本原因:

​ 父元素没有上边框 导致 子元素的margin-top作用到了浏览器上边

​ 导致父子元素一起下沉

​ 解决:

​ \1. 给父元素设置上边框

​ 同时设置box-sizing:border-box

​ 边框颜色: transparent

​ \2. BFC(块级格式上下文)

​ overflow:hidden;

​ 该属性可以清除一些异常显示效果

块级元素 margin和padding四个方向都可以任意设置

行内元素 设置padding依然会撑大盒子 但是撑大的部分不占位 不会挤其他元素 会导致盖住之前的元素

行内元素上下margin会忽略 不生效

左右margin正常使用

使用样式初始化 解决部分元素（标签）自带padding和margin的问题

浮动

float:left(左浮动) right(右浮动) none(默认值 不浮动) 让块级元素才一行内显示 行内元素浮动后就有了行内块的特点 浮动的元素会脱标 一旦脱标 就不在占位

针对父元素带来的影响解决方式:

​ 1. 给父元素设置高度

​ 2.BFC(块级格式上下文)

​ 3. 给父元素设置 overflow:hidden;

​ 4.给当前浮动元素加一个 伪元素选择器 :after

​ 浮动元素选择器:after:{

​ content:“”;

​ width:0;

​ height:0;

​ opacity:0;

​ line-height:0;

​ display:block;

​ clear:both;

​ }

​ 针对给后面元素/文字带来的影响:

​ \3. 定义一个class类 写上以下属性:

​ .clear{

​ width:0;

​ height:0;

​ opacity:0;

​ line-height:0;

​ display:block;

​ clear:both;

​ }

​ 在浮动元素跟后面元素之间 插入一个新元素 设置该类名

定位

position定位属性:

relative(相对定位) 不会脱标

absolute(绝对定位) 脱标 绝对定位是按照最近的有定位的父元素进行位置设置 如果父系元素都没有定位 则按照body定位（一般子绝父相）

fixed(固定)脱标 按照浏览器可视区域窗口定位(简称: 视口) 不会随着页面的滚动而滚动

static(静态定位) 默认值 没有定位

所有的居中布局:

​ 1. 横向居中

​ 行内,行内块,文本在一个块级的元素里面居中:

​ 给当前块级元素设置 text-align:center;

​ 行内,行内块,文本在一个行内块元素里面居中

​ 给当前行内块级元素设置 text-align:center;

​ 块级元素在另一个块级元素里面横向居中:

​ margin:0 auto;

​ 前提: 内部的可以有宽度

2.纵向居中
​ 行内,文本在一个块级元素里面纵向居中:

​ 给当前块级设置line-height: 当前元素高度

​ 前提: 行内或者文本必须是单行

​ 如果是行内块非要在一个块级里面纵向居中 那么前提

​ 给当前行内块设置: vertical-align:middle;

​ 给外面的块级设置line-height:当前块级高度

​ 行内,文本在一个行内块里面纵向居中

​ 给当前行内块级设置line-height: 当前元素高度

​ 块级元素在另一个块级元素里面纵向居中:

​ 1. margin-top:(父元素高度-当前元素高度)/2 px;

​ 2. 使用绝对定位 top:50% margin-top:-自身高的一半

​ 3.绝对居中

​ 1. 子绝父相的前提下:

​ 给子元素设置 left:50% top:50%

​ margin-left:自身宽的一半

​ margin-top:自身高的一半

​ 2. 子绝父相的前提下:

​ 给子元素设置:

​ left:0;

​ right:0;

​ bottom:0;

​ top:0;

​ margin:auto;

解决文字基线的问题：

vertical-align：top| middle|bottom|baseline(默认值 基线) |px值