HTML+CSS 知识点汇总
2024-01-03 11:13:40 15 举报AI智能生成
HTML和CSS是构建网页的基础。HTML（超文本标记语言）用于创建网页的结构，包括标题、段落、列表等元素。CSS（层叠样式表）则用于控制这些元素的样式，如颜色、字体、布局等。HTML使用标签来标记内容，而CSS通过选择器和应用的样式规则来控制这些标签的外观。HTML和CSS可以相互配合，实现丰富的网页效果。此外，HTML5引入了更多的语义化标签，使得网页结构更加清晰；而CSS3则提供了更多的动画和过渡效果，增强了网页的交互性。掌握HTML和CSS是成为一名前端开发者的基本要求。
作者其他创作
大纲/内容
CSS
如何编写CSS
1.在style中编写
<style>
div {
color:blue;
}
</style>
div {
color:blue;
}
</style>
2.引入外部css文件
<link rel='stylesheet' href='css/test.css'/
3.在元素的style属性中编写
<div style="font-size:14px color：red">
css注释
CSS的注释：/*注释的内容*/
选择器
css基本选择器
标签选择器
target_name{
样式列表
}
样式列表
}
类选择器
. class_name{
样式列表
}
样式列表
}
ID选择器
#ID class_name{
样式列表
}
样式列表
}
选择器的优先级：
ID选择器>Class选择器>标签选择器
组合选择器
交集选择器
选择器1选择器2{
样式列表
}
样式列表
}
并集选择器
选择器1, 选择器2, … {
样式列表…
}
样式列表…
}
通用选择器
* {
样式列表…
}
样式列表…
}
通用选择器就是对所有元素进行样式化
注意：通用选择器的优先级最低
超链接伪类选择器
对元素处于某一个特定状态进行样式化
:link
未访问状态，只对a标签有效
:visited
已访问状态，只对a标签有效
:hover
鼠标划过时候的状态
:active
鼠标选定时候的状态
高级选择器
层次选择器
E F
后代选择器
E>F
子选择器
E+F
相邻兄弟选择器
E~F
通用兄弟选择器
结构伪类选择器
E:first-child
E的第一个子元素
E:last-child
E的最后一个子元素
E F:nth-child(n)
E的第n个子元素
E F:nth-child(odd)单数行
E F:nth-child(even)双数行
E:first-of-type
E中指定类型的第一个子元素
E:last-of-type
E中指定类型的最后一个子元素
E F:nth-of-type(n)
E中指定类型的第n子元素
属性选择器
E[attr]
选择有attr属性的E元素
E[attr=val]
选择有attr属性为val的E元素
E[attr^=val]
选择有attr属性为val开头的E元素
E[attr$=val]
选择有attr属性为val结尾的E元素
E[attr*=val]
选择有attr属性包含val的E元素
伪元素选择器
E::before
E元素之前
E::after
E元素之后
可用于清除浮动
.classic-clearfix::after {
content: '';
display: block;
clear: both;
}
content: '';
display: block;
clear: both;
}
css属性
背景属性
background
background-attachment
背景图像是否固定或者跟着其余部分滚动
background-color
设置元素的背景颜色
background-image
把图像设为背景
background-position
设置背景图像的起始位置
关键字：1）left top（图像放置在元素内边距的左上角）。
如果只出现一个关键字，则认为另一个关键字是 center。
如果只出现一个关键字，则认为另一个关键字是 center。
长度值：2）50px 100px（图像的左上角将在元素内边距区左
上角向右 50 像素、向下 100 像素的位置上）。
上角向右 50 像素、向下 100 像素的位置上）。
百分比：例如：50% 50%（图像的左上角放置在元素内边距的中心）
background-repeat
设置背景图像是否平铺
repeat-x
在水平方向上重复
repeat-y
在垂直方向上重复
no-repeat
不平铺
字体
font简写
属性顺序
字体风格→字体粗细→字体大小→字体类型
font-style
字体风格
normal
标准
italic
斜体字体
oblique
倾斜
font-weight
字体粗细
normal
bold
bolder
lighter
font-size
设置字体的大小
smaller
larger
length
%
font-family
字体类型
有空格或中文要用双引号
文本
color
文本颜色
RGB
RGBA
text-align
设置文本的对齐方式；它的值可以是：left（左对齐）、居中（center）、右对齐（right）、两端对齐（justify）
text-indent
设置文本缩进的距离，它的值可以像素px、字体的尺寸em或百分比
line-hight
设置文本行高
text-decoration
设置文本修饰
underline
下划线
overline
上划线
line-throuhg
删除线
vertical-align
文本垂直对齐
middle
text-shadow
文本阴影
color x轴位移(px...) y轴位移(px...) 模糊半径(px...)
letter-spacing
设置文本内容的距离
text-transform
处理文本的大小写，它的值可以是：none、uppercase（大写）、lowercase（小写）、capitalize（驼峰）
背景图
background
简写属性
color url("") Xpos(x轴偏移量) Ypos(y轴偏移量) no-repeat(是否重复)
渐变背景色函数
linear-gradient(position,color1,color2...)
position
to bottom
to left
to right
to top left
右下→左上
to top right
to bottom left
to bottom right
径向渐变
radial-gradient
background-color
背景颜色
background-image
背景图路径
background-position
Xpos、Ypos
X% Y%
left right top bottom center
background-size
auto
保持原样
cover
覆盖
表格样式
border-collapse
设置表格边框是否合为单一边框
border-spacing
设置单元格边框距离
caption-side
设置表格标题的位置
empty-cells
设置是否显示表格中的空单元格
table-layout
设置显示单元、行列的算法
边框样式
边框属性
简写
四边不同样式
顺序：上右下左，没有对边找对边
四边统一样式
border:1px dashed red
border-color
设置边框的颜色
border-width
设置边框的宽度
border-style
设置边框风格
soild（实线）
dotted（点线）
dashed（虚线）
doble（双线）
各边对应样式
border
-
left
-
color
style
width
-
right
-
color
style
width
-
bottom
-
color
style
width
-
left
-
color
style
width
border-radius
圆角边框
length{1,4}
圆形
50%
半圆
两个角=宽度
长宽比=1:2
扇形
一个角=宽度
长宽比1:1
盒子模型
盒子模型用于处理元素内容
、内边距、边距和外边距
、内边距、边距和外边距
padding：内边距
padding：设置内边距
padding-left：设置左边距
padding-right：设置右内边距
padding-top：设置上内边距
padding-bottom：设置下内边距
margin：外边距
margin：设置元素的外边距
margin-left：设置元素的左外边距
margin -right：设置元素的右外边距
margin -top：设置元素的上外边距
margin -bottom：设置元素的下外边距
拯救布局
box-sizing
默认值：content-box
border-box
将盒子长宽设置为总长宽
inherit
继承
盒子阴影
box-shadow
inset
设置则为内阴影
x-offset
x轴偏移量
y-offset
y轴偏移量
blur-radius
模糊半径
color
阴影颜色
网页布局
display
block
独占一行
inline
行内元素
inline-block
可设置宽高的行内元素
none
不显示
浮动
float(脱离文本流)
left
right
noen
clear(清除浮动)
left
right
both
none
父级边框塌陷
1.加空div
div设置clear:both;
2.设置父元素高度
3.添加overflow
visible
hidden
溢出内容不可见
scroll
添加滚动条
auto
4.添加伪类after
.clear:after{content:'';display;clear;both;}
定位属性
定位类型
绝对定位
浮动定位
固定定位
相对定位
CSS定位属性
position
absolute（绝对定位）
脱离文本流
relative（相对定位）
父元素未设置相对定位 默认为body位置
fixed（固定定位）
left
指定元素左上角的横坐标
top
指定元素左上角的纵坐标
z-index
可正可负的整数 越大越上层
设置层透明度
opacity:x
x值0~1
filter:alpha(opacity=x)
x值0~100
IE浏览器
网页动画
变形
transform
transform-function函数
translate(tx,ty)
平移 x偏移量 y偏移量
scale(sx,sy)
缩放倍数
rotate(ax,ay)
旋转度数(deg)
skew(a)
旋转度数(deg)
过渡
transition
过渡属性
transition-property
IDENT
width
height
background-color
all
过渡时间
transition-duration
过渡动画函数
transition-timing-function
ease
快→慢
linear
匀速
ease-in
越来越快/渐显
ease-out
越来越慢/渐隐
ease-in-out
先加速再减速/渐显渐隐
延迟时间
transition-delay
触发
伪类触发
:hover
:active
:focus
:checked
媒体查询
@media
JavaScript触发
动画
关键帧
@keyframes
@keyframes 动画名0%{width：0；}10%{width：20px}...
调用关键帧
animation
animation-name
@关键帧
animation-duration
过渡时间
animation-timing-function
过渡方式
animation-delay
过渡延迟
animation-iteration-count
播放次数
infinite
无限次数
animation-direction
播放方向
normal
默认向前
alternate
左右横跳
animation-play-state
播放状态
runing
开始播放
paused
暂停播放
animation-fill-mode
准备阶段
forwards
当动画完成后，保持最后一帧
backwards
在 animation-delay 所指定的一段时间内，在动画显示之前，应用第一帧
both
forwards+backwards
HTML
文本
<h1>...<h6>标题标签
<p>段落标签
<br/>换行标签
文本标签
粗体标签: strong、b’
斜体标签: i、 em 、cite
上标标签: sup
下标标签: sub
中划线: u
水平线标签: hr
常见块级元素
<h1>...<h6>、p、div、hr、ol、ul
常见行级元素
strong、em、a、span
特殊符号
空格
大于号(>)
>
小于号(<)
<
引号(")
"
版权符号
©
图片
src
图片路径
alt
提示文字，描述图片给搜索引擎看的
tltle
描述图片给用户看，鼠标悬停时显示的提示性文字
超链接
a标签
页面间链接
href
链接地址
target属性
_self
默认值，在原来的窗口打开链接
_blank
在新窗口打开链接
_parent
在父窗口打开链接
_top
在顶层窗口打开链接
锚链接
href属性添加#()
name
id
功能性链接
电子邮箱
href="mailto：电子邮箱地址"
列表
有序列表ol,li
type属性
1：阿拉伯数字1,2,3
a：小写英文字母a、b、c
A：大写英文字母A、B、C
i：小写罗马数字i、ii、iii
I：大写罗马数字|、||、|||
无序列表ul,li
type属性
disc：实心圆（默认值）
circle：空心圆
square：正方形
注意：ul的子元素只能是li，不能是其他元素
注意：ul元素内部的文本，只能在li元素内部添加
定义列表
dl、dt、dd
表格
table标签
caption：表格标题（不在表格中）
tr：表格行
th：表头单元格
td：表格单元格
thead：表头、tbody：表身、tfoot：表脚
合并行：rowspan
合并列：colspan
内边距：cellpadding——撑大表格
外边距：cellspacing——消除单元格间空隙
标准的表格布局
表头
thead
表身（可省略）
tbody
表脚（可省略）
tfoot
媒体元素
video/audio
control
默认控件
source
添加多个视频文件
src
链接地址
loop
循环播放
结构元素
html结构元素
header
头部
footer
脚部
section
独立区域
article
独立文章内容
aside
侧边栏
nav
导航、辅助栏
iframe框架
引用页面地址(src)
框架名(name)
表单
form标签属性
name
表单名称
提交方式
post(安全性好)
get
action
提交地址
target
打开方式(与a标签属性一样)
enctype
编码方式
标准的编码格式
application/x-www-form-urlencoded
上传附件用到
multipart/form-data
纯文本
text/plain
input属性
text
单行文本框
value
设置文本框默认显示的文字
size
设置文本框的长度
maxlength
文本框中最多输入的字符数
password
密码文本框
value
设置文本框中默认显示的文字
size
设置文本框的长度
maxlength
文本框中最多输入的字符数
radio
单选框
name
type
value
checked
label
连接文本和文字
checkbox
多选框
button
普通按钮
reset
重置按钮
submit
提交按钮
file
文件上传
reset
重置
email
电子邮箱
number
数字
value
min
max
step
数字间隔
range
滑块
同number
url
网址
button
自定义按钮
hidden
隐藏
readonly
只读
disabled
禁用
textarea
多行文本框
rows=行数
cols=列数
value=取值
下拉列表
select
multiple
设置下拉列表选择多选
size
设置下拉列表显示几个列表项，取值为整数
option
selected
是否选中
value
选项值
元素标注
label标签
for=“id"
表单验证
placeholder
占位符
require
不允许为空
pattern
正则表达式验证
收藏
收藏
0 条评论
下一页
