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