以下是常用html+相关css全部汇总：
# 01html标签
```
html标签 是组成网页的骨架
区域划分作用：
h1 ~ h6 标题标签
h1权重最高 (页面中 最重要的位置logo 新闻标题)页面中只能出现一次
标题标签 就用在 有标题效果的区域 让网页更有结构
div 盒子标签 布局 最最基础的划分区域的标签 包裹内容
p 段落标签 换行的效果 (包裹大篇新闻内容 )
列表标签 使用在 布局内容雷同(相似的地方 菜单区域)
ul 定义无序列表
li 列表项 (ul父子级关系 不允许 放入其他的标签) li里可以放任意标签
标签内部属性 style="" 属性名="属性值" 英文状态下的单双引号都可以
ol 定义有序列表
li 列表项
type="" 默认阿拉伯数字 a A i I
dl 定义术语列表
dt 描述术语标题
dd 描述术语内容
<div></div> 双标签 99% 开始标签 + 结束标签
<meta/> 单标签 / 可加可不加
css属性的写法
list-style-type:; 属性名:属性值; 写在能够存放css的地方
none 不需要列表样式 (取消 记忆)
disc 小黑心远点
square 方块
circle 空心圆
也可以直接写成:
list-style:; 可以继承 (除了字体 文本之外的其他的属性 都不能继承
内容展示作用
span 赋予样式 文字标签 最弱的内容标签 可以与文字横排显示 也可以存放小图标 小按钮
color:;
i 倾斜标签 存放阿里图标 小按钮 存放小图标
b 加粗标签 (不使用了)
em 倾斜标签 + 强调效果
strong 加粗标签 + 强调效果 用在需要着重强调的区域 em强调效果没有strong大
br 换行标签 单标签 不要使用 不利于维护
hr 分割线标签 不要使用
img 图片标签 单标签
四要素
src => 路径
绝对路径 打开文件后缀名
网络绝对 https://img.alicdn.com/tfs/TB1oquGGv9TBuNjy0FcXXbeiFXa- 468-1236.png
本地绝对 从盘符出发
C:/Users/HiWin10/Desktop/01/5.jpg
相对路径
./img/5.jpg 当前目录下 img 文件夹内的5.jpg
先找 找到了之后 一层一层去敲开门 直到找到图片为止
../img/123/5.jpg html文档退到上一级文件夹目录 图片最外层文件夹继续敲门
alt => 描述 seo
width => 宽度 标签属性 px值可以省略
height => 高度 标签属性 不用于修改图片的布局大小(通过css控制布局大小) 写图片的 实际大小
```
##### 重点：相对路径弄清楚；1、./是当前目录2、../是父级目录3、/是根目录
# 02 CSS
```
超链接标签
跳转功能
href="" 要跳转的地址
target="" 何处打开 _self 当前窗口打开 _blank在空白窗口打开
点击图片跳转
<a href="https://www.jd.com/" target="_blank">
<img src="../image/01.png" alt="">
</a>
锚点 先给目的地标记用id标记 a的href里 #id名
png 支持透明图片 色彩多 大 (精灵图 小图片)
jpg 不支持透明图片 小 失真
gif 支持动态图片 大
```
```
html 网页的骨架 组成
css 层叠样式表 赋予样式 血肉 穿好衣服 化好妆
js 与用户的交互 数据的交互
标签 自带默认css
css存放位置
1,标签内部(行内样式) <div style="css属性">第一个div</div>
<divstyle="color:red; font-size:14px">11</div>
优缺点: 精准度高 耦合度高(和html过分亲密) 不利于维护,不可复用 造成html文档 过大
js在操控样式的时候 操控行内样式
2,style标签(内部样式) css的区域
选择器{属性名:属性值;}
选择器=>精准控制到元素
{}=>需要设置的属性 (声明块)
p{color:red;} 一条声明color:red;
优缺点: 精准度高 耦合度中等 不利于维护, 造成html文档过大
3.外部样式
@charset "utf-8"; 必带 ;号
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" type="text/css" href="#">
css 属性名:属性值;
html注释<!--可视化区域--
css注释 /* 你好 */
行内样式 > 内部样式 = 外部样式
选择器类型
标签选择器 直接通过标签名 来控制标签
id作用(1,划分页面的主体结构 大盒子分布局用id属性 2.重要内容用id 3.用于给js提供控制)
id选择器 #id名{} 具有权重 具有唯一性 复用性低
取名字环节:(企业命名规范) 具体参照群内企业命名规范文档
1.见名知意 (不会就翻译一波)
2.英文字母开头(小写)
3.后面能跟数字
4.连接 - _ 驼峰命名information-bar => informationBar
5.不要命名带有advertising ad adv adver 防止该部分当成垃圾广告过滤掉
class选择器 .class名{} =>类名 代码复用性高 灵活
*选择器 选中全部标签 不要使用 (样式初始化的时候)
```
##### 重点：1、外链式css，js的写法 2、选择器的命名。
# 03 组合选择 盒模型
```
盒子模型
content区域
width: 100px;
height: 100px;
内容是在content区域的左上角开始排列的
border边框线 复合属性
border是占据空间的，outline是不占据空间的；
border-style 边框线样式 (必写)
solid 实线 dashed虚线 dotted点状线 double双线
border-color 边框线的颜色 (要写)
red blue关键字
十六进制颜色值 三对 红绿蓝
# 0~9 a~f
#0000ff
00=>红色 00=>绿色 ff=>蓝色
纯 000000 ff ff ff 0~f逐渐变白(灰的过程) cccccc
简写:=> #fff #000
border-width 边框线粗细
px值 关键词=>thin 细的1px thick 粗的5px medium默认3px
border-top上 left左 right右 bottom下
取消边框线 border:0; none也可以
快递 content=>电视机 border=>快递盒 padding=>填充物 margin=>外部泡沫板
border:4px solid #ccc;
border-top:0;
border-style:solid;
border-color:red;
border-width:3px;
border-top-color:blue;
border-top-color:blue;
border-left-color:red;
border-right-color:purple;
border-bottom-color:grey;
padding 内边距 边框线到内容区域的距离 撑大盒子实际大小 撑大多少 减去对应撑大的宽高
px
padding-top left bottom right
一个值 =>四个方向
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
margin 外边距 边框线以外 添加的泡沫板
auto 让块级元素 左右居中 布局元素
css 存放位置
样式
选择器+声明 {}
基础选择器
tagname标签
class
id
* 通配符选择器
组合选择器 =>目的 为了更加精准的控制元素
依赖于元素嵌套关系
通过后代关系:
.wrap p 空格 后代元素选择器 p必须是.wrap的后代
.wrap > p 选择 子元素选择器 选择wrap的子元素 p
通过兄弟关系:
p + div + 邻居关系(毗邻元素选择器) p后面的一个兄弟元素 div
p ~ div ~ 下面的所有的符合条件的兄弟元素
div.wrap 交集选择器 类名为wrap的div标签
```
##### 重点：1、记得用padding，撑大多少 减去对应撑大的宽高；2、margin用法。
# 04 样式初始化 元素类型
```
样式初始化
默认样式=> 保持最基本的可读性 html5 多元素选择器 怪异盒模型 元素类型
怪异盒模型 box-sizing:border-box;
盒子的实际大小 width: 200px;height: 200px;
标准盒模型
box-sizing:content-box;
盒子的实际大小 content + padding + border width: 200px; height: 200px;
元素类型
块级元素 行内(内联)元素
display: block块 =>显示类型的
块级元素特性:1.独占一行 2.支持宽高
不设置宽高 宽度 是父级content宽度 高度 由内容撑开
固定死宽高 什么都撑不开了 固定死了
3.margin padding 支持 margin:auto;
4.嵌套(包裹)其他任意的标签
5.p标签 不能嵌套块级标签 包括p自身
h1~h6 里面嵌套 块级标签 div ul li ol dl dt dd h1~h6 p .....
行内元素 内联元素
1.友好 和其他行内元素 横排显示的
2.不支持宽高 全部由内容撑开
3. margin 支持左右 不支持上下 不支持auto
padding 支持左右 不支持上下(上下显示效果没问题 但是不影响其他的元素)
4. 行内元素之间 会解析空格(跟文字大小相关)
父级去设置 font-size:0;
span设置回来字体大小
5. 基线对齐问题
6. 行内元素 不允许嵌套任意块级元素
a可以包裹任意块级元素 最好外面包裹一层div布局
span a i b strong em.... img input
元素类型的转换
(块级/行内)变成行内块
行内变成块级
display:inline;
行内块特性 中和
display:inline-block;
1.横排显示 inline/inline-block (行内)
2.能够支持宽高 (块级)
不设置宽高
由内容撑开 (行内)
固定死宽高之后
什么都不能撑开了
3 margin padding 只是不支持margin auto
4. 会解析空格 会有基线对齐的问题
行内不管变成啥 都不能嵌套块级元素 除了a
display:none; 让元素消失 包括所有的内容
img input 特殊的行内元素 可以认为是行内块元素
```
##### 重点：1、块级元素：div ul li ol dl dt dd h1~h6 p 和 行内元素：span a i b strong em.... img input；
##### 2、行内变块级元素display:block;
##### 3、行内块：inline-block：横排显示 能够支持宽高 (块级) 不设置宽高由内容撑开 (行内)。
##### 4、a可以包裹任意块级元素 最好外面包裹一层div布局
# 05 外边距合并 一般背景相关
```
外边距合并问题
合并取最大的一个值(显示距离为最大值)
条件: 块级 相遇 父级和子级 垂直方向相遇
解决方法：1.父级padding（常用）
2.父级border
兄弟和兄弟之间 垂直方向相遇
1,浮动 定位特性
2,给父级 overflow:hidden; 溢出的处理 hidden隐藏 bfc
3.给父级 inline-block
背景 色 元素的 底色
transparent 透明色 十六进制 # 0~9 a~f
rgb()red green blue 0 ~ 255 0 ~ 255 0 ~ 255
rgba() alpha 透明度 0~1 0完全透明 0.5 半透明 1 完全不透明 0.5 => .5
背景图片 => 装饰
background-image:url(03.jpg);
背景平铺
background-repeat 默认repeat 平铺 满盒子 no-repeat 不平铺
背景大小
px % 关键词 cover contain
background-size:;
只有一个值 背景图的宽度 高度等比缩放
两个值 第一个是宽度 第二个 高度
% 相对于盒子的宽高
cover 让背景图片 充满整个盒子
contain 让盒子包裹整个完整的背景图
背景位置
background-position
px % 关键词
一个值时 水平方向 另一个方向 居中
两个值 水平方向 竖直方向
% 父盒子的20%处 和 背景图的20%处重合 (父盒子-背景宽度)*百分比
left right top bottom center
background:url('22.jpg') no-repeat 100px;
image repeat position/size color
如果没有size image repeat position color
如果没有position
```
##### 重点：1、外边距合并问题：解决方法.父级padding（常用）；
##### 2、背景background:url('22.jpg') no-repeat 100px;
# 06 文本综合问题
```
牢记
行内元素可有左右margin（span img a）; display要常用；dl dt dd列表要记得用；
文字 文本 基线对齐
行内 行内块 横排对齐的时候 基于基线对齐
vertical-align:baseline;
1.图片下方间隙问题
解决方法 => 给img任意值覆盖baseline
2.图文的对齐方式 行内元素或者行内块元素之间的对齐方式
解决方法
顶部对齐 给两个元素 同时加上vertical-align:top;
top 对齐元素(你设置了vertical的元素)的顶端 与line-box 的顶端对齐
bottom 对齐元素(你设置了vertical的元素)的底端 与line-box 的底端对齐
middle (常用)对齐元素 的中线 父元素的基线加上小写x的一半
px进行微调 <input type=""><span>你好</span>
line-height 行高 决定了行框盒子的顶端和底端
文字属性 继承性
控制元素内的 文本
文字大小
font-size:
默认文字大小 16px
最小文字大小 12px 默认body里面设置字体大小的时候设置12px
% 相对于父级字体大小
em (响应式布局) em就是父级的字体大小
rem (移动端自适应) rem就是html根标签的字体大小 默认16px
color 字体颜色
font-family 字体族
serif 衬线字体 "宋体" 末端加粗 扩张 间隙末端以衬线
sans-serif 非衬线字体 微软雅黑 黑体
引入自定义字体
font-weight 字体粗细
bold 加粗
normal 正常
(忽视的:100 ~ 900 lighter更细的 bolder更粗的)
font-style 字体倾斜 i em
normal 正常的
italic 倾斜字体
oblique 使文字倾斜
line-height 行高
px em 当前元素的字体大小 rem (移动端)当前的html根标签的字体大小
复合写法:
font-family最后的一项 倒数第二项是font-size 并且两者必须要有 其他的 写前面就好
font-size/line-height 12px/1.5
font: bold italic 12px/1.5 "黑体";
font-variant 定义小型大写字母
small-caps
文本对齐方式
text-align 设置在父容器上,来控制自己内部的行内元素 行内块元素 文本
left左对齐 right 右对齐 center 居中对齐 justify 两端对齐
text-indent 首行缩进
px em 自身文字大小 rem
text-transform 控制文本的大小写
uppercase 大写 lowercase 小写 capitalize 首字母大写
text-decoration 文本修饰
underline 下划线 none 取消 overline 上划线 line-through 中划线
letter-spacing 字间距 字符
word-spacing 词间距 单词左右
white-space 决定文本是否换行
wrap 换行 nowrap 不换行
white-space:nowrap; 不适用于行内元素
overflow:hidden;
text-overflow:ellipsis; 实现单排溢出省略号
word-break:break-all;
文本 字体 继承性 list-style ul=>li
```
# 07 浮动
```
浮动
最初的作用 图文环绕效果
块级横排显示 布局
让元素 脱离文档流 左边或者右边浮动 直到遇到父级的边界或者是相邻的浮动元素 停下来
文档流中不占位置 display block inline不遵循
后面的 存在于文档流里面的元素 重新去排列文档流
浮动元素特性:
无论是块级还是行内还是行内块 只要给上浮动 那么就会具备以下特性
!.文档流里不占位置
1.支持宽高
不给宽高时 由内容撑开
固定死宽高时 什么都撑不开
2.横排显示 (跟 浮动元素横排显示)
3.margin padding 不支持margin auto
4.不会造成空格与基线对齐问题
问题
子元素掉下来:
1.查看是否全部设置好了浮动
2.子级宽度是不是太大了
padding border
3.父级宽度不够
卡住的问题
1.溢出的部分 或者是其他的浮动元素会卡住掉下的浮动元素
大问题
子元素浮动不在文档流 导致文档流内的爸爸 高度塌陷 页面布局会乱掉
解决方案:(清除浮动对父级的影响)(恰好)
1.给上父级高度 (不灵活 )(一般由内容撑开 )
2.overflow:hidden (设置出去的定位元素 隐藏掉)
3.display:inline-block 空格 基线对齐问题
4.父元素恰好就是浮动元素
5.父元素恰好是绝对定位
主动清除
.clearfix:after{
content:'';
display:block;
clear:both;
}
低版本ie 加给父级 zoom:1;
border-radius:10px;
px
% 相对于宽高
两个值:左上右下 右上左下 三个值:左上 右上左下 右下
四个值:顺时针方向
八个值:border-radius:20px 40px 50px 60px / 20px 40px 50px 60px;
```
# 08定位
```
绝对定位 那就相对这个元素
提升层级
后来居上
top
top距离定位父级top 正下 负上
left
left距离定位父级left 正右 负左
right
right距离定位父级right 正左 负右
bottom
bottom距离定位父级bottom 正上 负下
如果定位值 未赋值时 默认不是0 而是 auto auto会决定 你的初始位置是你未定位前的位置 但是文档流里 你已经不在了
如果给绝对定位元素 找合适的定位父级 那么就找到合适的祖先标签 给上相对定位
如果恰好祖先是相对或者绝对定位元素 那么就不需要给了
会改变元素的特性
1.能够支持宽高
2.如果不給宽高 由内容撑开宽高 但是不会超过定位父级边界
(最好是固定 宽度 )
3.不占位置
4 margin padding 不支持margin auto
相对定位 绝对定位
相对定位:
1.配合绝对定位使用
2.占有原来位置的轻微移动
3.让元素具备层级
绝对定位:
1.让元素飘在其他的元素上空
2.元素的位置 比较的特殊
固定定位:
特性同绝对定位 参考物浏览器窗口
作用:侧边导航栏 及 顶部导航栏
```
# 09高级选择器
```
比较优先级时 保证有精准的控制到元素
id > class > tagName > *
组合选择器中
先去看 id选择器 比较id选择器的个数
个数越多,优先级越高
个数相等
比较类名选择器个数
个数越多 优先级越高
个数相等
比较标签选择器个数
个数越多 优先级越高
个数相等 优先级同等 下面的覆盖上面的
伪类选择器
依赖于 状态
hover 依赖于鼠标和元素的状态
:link 未被点击链接的a的状态
:visited 已被点击链接的a的状态
:hover
:active 正在被点击的a的状态
关于文字
:first-letter 控制元素的第一个文字
:first-line 控制元素的第一行文字
::selection 控制元素中被鼠标选中的文字的样式
和结构有关的选择器
p:first-of-type
选择 父元素中 的第一个p元素 无视其他元素
p:last-of-type
选择 父元素中 的最后一个p元素 无视其他元素
p:nth-of-type(7)
选择 父元素中 的第n(7)个p元素 无视其他元素
2n-1 奇数
2n 偶数
p:nth-last-of-type()
选择 父元素中 的倒数第n(2)个p元素 无视其他元素
p:first-child
选择 父元素中 的第一个子元素 并且必须是p标签
p:last-child
选择 父元素中 的最后一个子元素 并且必须是p标签
p:nth-child(5)
选择 父元素中 的第n(5)子元素 并且必须是p标签
2n-1 奇数
2n 偶数
p:nth-last-child()
选择 父元素中 的倒数第n(5)子元素 并且必须是p标签
p:not(:first-child) 不要第一个p .box 不要类名为box的p 其他都要
标签类型统一时 用nth-child
标签种类换乱时 用nth-of-type
属性选择器
[src] 选择 具有 src属性的元素
[class = "box1"] 具有 class属性 并且值只能是 box1 不能有其他的类名
[class ~= "box1"] 具有 class属性 并且值内有 box1这个类名
[src ^= "i"] 具有 src属性 并以 i开头 模糊匹配
[src $= "jpg"] 具有 src属性 并以 jpg结尾 模糊匹配
[src *= "05"] 具有 src属性 值内存在 05 模糊匹配
after
在元素内容的后面添加伪元素
::before
在元素内容的之前添加伪元素
content:'';
伪元素的核心内容 伪元素 本质上 特性和行内元素一样
none 伪元素不存在
normal 伪元素不存在
"你好" 添加文本
url() 添加图片
作用 : 装小图标 制作小三角形 小原型 (不要用伪元素去做复杂的事情)
减少html代码 优化代码结构
opacity visibility
opacity 决定元素的透明度 会影响到里面所有的内容
0~1 0完全透明 虽然变透明看不见了 但是存在于页面 占位置并且鼠标能够摸到 1完全不透明
ie兼容
filter:alpha(opacity=0~100) 0完全透明 100完全不透明
visibility
visible 可见的
hidden 隐藏 让元素不可见 但是元素依然存在于界面 占位置但是鼠标摸不到
display:none
完全消失 不占位置 鼠标也摸不到
```
# 10表单元素
```
包裹表单元素的一块区域 键值对
action=>属性值 =>需要提交的后台的地址 url
method=>属性值 =>提交的数据的方式
get (获取数据)
数据拼接到url后面 => 后台 根据你的提交url做出对应的处理 (保存数据 清除数据 返回数据)
post (提交数据)
数据不会拼接到url后面
target='_blank' 跳转页面的打开位置
你好 123
数据的传输格式
键值对 键:值 性别:男 name:value =>age:12
input
type 定义表单类型
text 普通的文本框
submit 提交功能按钮 默认value="提交"
password 密码框
number 选择数字规格 最小值 min 最大值 max
range 选择范围框 最小值 min 最大值 max
color 选择颜色框
date 年月日 手动输入值 点击 上下调值
time 时间点
month 月份
week 周
datatime-local 日期信息输入
file 文件按钮 加上multiple这条属性 可以传入多个文件
button 功能按钮 普通的按钮
<button>1234</button> 也可以
reset 重置按钮
选项按钮
radio 单选按钮
好玩的属性:
placeholder ='请输入账户名'属性 用在普通输入文本框
一般性 我们会被 input取消border 需要就重新给一个border线
我们还需要取消 outline 外轮廓线 outline:none;
label 关联 通过for =>id名 点击对应的label标签 会选中对应 id名的 按钮
disabled 禁选的 checked 默认选中的
resize
none 不能拉动
vertical 垂直能拉动
horizontal 水平方向能拉动
both 两者都可以
textarea 文本域
select 下拉选框 size属性决定 露出来的选项个数
选项归类
optgroup
选项 option 默认选中 selected
datalist (推荐选项)id属性 => input list属性
表单分区
fieldset 分 区标题 legend
input相关伪类
focus 获取焦点(鼠标点击之后具有光标)的时候
checked 在按钮被选中时
disabled 在input失效(禁选)时
enabled 在input没有失效(没有禁选)时
写CSS属性只要注意的顺序
显示属性
float: left;浮动
position: absolute;定位
z-index
visibility
overflow
list-style
display
自身属性(盒子相关)
width
height
padding
margin
border
background
文本属性
line-height: ;
font-size: ;
text-align: ;这类的文本属性
css3属性
border-radius
box-shadow 盒子阴影
transition 过渡
```
以下是我个人在网上的总结：
现代前端开发中，iframe 很少用： iframe 用于在当前页面里嵌入一个页面-->
<noscript>如果用户浏览器不支持 script，则会显示 noscript 中的内容</noscript>
以下是 典型的可替换元素有：
<iframe>
<video>
<embed>
<img>
以下元素仅在特定情况下被作为可替换元素处理：
<option>
<audio>
<canvas>
<object>
<applet>
在 HTML 中有以下这些空元素：
<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
可以出现在<head></head>中出现的元素：base\title\meta\link\scrpt\noscript
<strong>强调内容的重要性</strong>
<b>单纯的加粗字体</b>
网友评论