这是我自己在学习html、css时觉得要记的东西太多总结一些较为常用的标签。
HTML
<p></p>段落标签
<hn></hn>标题标签n数值为1~6之间，n值越大标题文字越小。
<br />换行
<img />图像标签
属性：src:图片的路径
width:宽度
height:高度
alt:图片加载失败时，显示该文字
title:鼠标悬浮显示文字
<audio></audio>音频标签
属性：autoplay ：自动播放
controls:控制条
loop：循环播放
<video></video>视频标签
属性：autoplay ：自动播放
controls:控制条
loop：循环播放
<a></a>超链接
属性：href:表示需要链接到的目标文件的路径【类似于src属性】
target:设置打开的方式，默认在当前窗口中打开
_blank:在一个新的窗口中打开
_self:在当前窗口中打开
注意：默认字体颜色为蓝色，自带有一个下划线
块标签
<pre></pre>：其中的内容原样输出
<div></div>：会自动的换行；主要用于页面的划分，其中可以嵌套任意的标签。
<span></span>：类似于div，不会自动换行；主要用于注册错误提示。
自定义列表/解释性列表
<dl></dl>:父标签
<dt></dt>：子标签
<dd></dd>：子标签
有序列表
<ol></ol>:父标签，表示有序列表的范围
<li></li>:具体内容，子标签
属性：type:设置排序方式，默认为阿拉伯数字
无序列表
<ul></ul>:父标签，表示无序列表的范围
<li></li>：具体内容，子标签
表格标签
<table></table>:表示表格的范围，父标签
<tr></tr>:表示行，子标签
<td></td>:表示单元格【列】，子标签
<th></th>:表示单元格【列】，子标签，其中的文本会加粗显示，会居中显示
<caption></caption>:设置表格标题
属性： border:表格线条宽度
bordercolor:线条颜色
cellspacing:单元格之间的间隔
width:宽度
height:高度
align:对齐方式【局左对齐，居中，居右对齐】
使用tr中：设置整行的对齐方式
使用td中：设置某一个单元格的对齐方式
表单标签【重点掌握】
<form></form>:表示表单的范围，父标
<input />:表示输入项，是form标签的子标签，可以单独使用，可以输入内容或者选择内容
作用：可以提交不同的数据到指定的服务器，主要用于采集用户信息，
分为三部分：
a.表单标签：包含数据需要提交到的服务器的地址，数据提交的方式【get和post】
b.表单域：用于采集用户信息的
c.表单按钮：普通按钮【button】 重置按钮【reset】 提交按钮【submit】
form标签的属性：
a.action:数据需要提交到的服务器的地址
b.method:数据提交的方式
c.enctype:很少用，做文件上传的时候需要设置该属性
<input />:表示输入项，是form标签的子标签，可以单独使用，可以输入内容或者选择内容
input标签的属性：
type：
a.<input type="text"/> 普通输入项
b.<input type="password"/> 密码输入项
c.<input type="radio"/> 单项选择
d.<input type="checkbox"/> 多项选择
e.<input type="file"/> 文件选择项
f.<input type="email"/> 邮箱输入项
g.<input type="hidden"/> 隐藏项【了解】
h.<input type="date"/> 日期选择【了解】
j,<input type="color"/> 颜色选择 【了解】
k.<input type="button"/> 按钮，reset/submit
placeholder:提示文字，一般结合text或者password使用
checked:checked = “checked”,表示设置默认选中，一般结合radio和checkbox使用
value：设置默认值
name：用于区分不同的输入项，提交给服务器
id：区分
style：设置样式
<select></select>:表示下拉选择项 ，是form标签的子标签
<option></option>:选项，是select标签的子标签
name：区分
value：默认值
selected = "selected":设置默认选中
<textarea></textarea>:表示文本域，是form标签的子标签
cols；列
rows:行
头标签
html的子标签head被称为头标签
title:设置当前页面的标题
base：设置超链接的基本位置，可以统一设置超链接打开的方式
meta：设置页面的一些相关内容【编码格式】
charset:字符集
name:关键字
content:内容
link:引入外部的css文件
框架标签
<frameset></frameset>:指定页面的划分规则【父标签】
rows:按照行进行划分
cols:按照列进行划分
<frame />:具体显示的页面
注意：使用框架标签的时候，不能写在body中，也不能写在body外面，使用框架标签之后，则需要将body删掉
css
通配符选择器
语法：
*{
}
作用：当前页面中的所有的html标签都会被设置相同的样式
使用场景：一个网页中所有标签共同的样式【一般设置内外边距】
标签名称【元素】选择器
语法：
html标签名称{
}
作用：根据给定的标签名称，在当前 页面中只匹配指定的标签
弊端：如果多个同类的标签需要设置不同的样式，使用标签名称选择器解决不了问题，可以使用类选择器或者id选择器
类选择器
跟class属性有关，通过设置class的值确定类名
语法：
.类名{
}
作用：对同类的标签，需要设置不同的样式，可以使用类名进行区分
使用场景：标签名称选择器一旦声明，那么页面中所有相关的标签都会发生变化，但是，如果希望其中的某些个标签具有不同的特征，则就可以选择类选择器
id选择器
语法：
#id名称{
}
说明：id选择器的使用和类选择器的使用基本相同，不同之处在于：id选择器在同一个html页面中最好只使用一次
跟id属性有关
属性选择器
语法：
基本选择器[属性名]{
}
基本选择器[属性名=“值”]{
}
作用：根据某个标签的指定属性进行匹配
结构选择器
语法：
第一个字标签
ul li:first-child{
}
结合前面的选择器，使用冒号
包含选择器
语法：
匹配子标签或者后辈标签
先辈选择器 后辈选择器{
}
匹配子标签
父标签选择器 > 子标签选择器{
}
伪类选择器
语法：
1.鼠标悬浮效果
#first:hover{
}
2.添加头部
.second:before{
}
3.添加尾部
.second:after{
}
4.设置第一个字符的样式
.second:first-letter{
}
5.设置第一行的样式
#third:first-line{
color: cyan;
}
结合前面的选择器，使用冒号
注意：是结构选择器还是伪类选择器，看冒号后面的限定条件
组合选择器
语法：
选择器1，选择器2,。。。{
}
#first,.second,div{
}
行内样式
<p style="color: red;font-size:20px;text-decoration: underline;">于同一个html文件</p>
仅作用于当前标签
内嵌样式
<style>
p{
color: red;
font-size:20px;
text-decoration: underline;
}
</style>
仅作用于当前html文件
链接样式
将css样式单独分离出来，其中书写的是css的选择器
优点：同一个css文件可以同时作用于多个html文件，作用于整个网站，使得整个网站风格统一，后期维护成本降低
使用方式：
a.创建css文件，其中书写选择器
b.在需要使用的html文件中引入【链接进来】，使用<link />
<link href="外部css文件的相对路径" rel="stylesheet" type="text/css" />
href:css文件的相对路径
rel:stylesheet
type:MIME类型【标记文档类型】，格式：大类型/小类型
css文件：text/css
javascript文件：text/javascript
jpg图片：image/jpg
关联该css文件的所有html文件
导入样式
和链接样式基本相同，只是语法和运作方式不同
语法：
在<style></style>进行导入
导入方式：
a.@import url("外部css文件的相对路径") ,建议使用
b.@import url(外部css文件的相对路径)
c.@import url('外部css文件的相对路径')
css常用属性
字体属性
font-family:字体类型
font-style:设置是否倾斜
normal:正常
italic:意大利体
oblique：斜体
font-weight:设置文字的粗细
设置方式有两种：数字【取值范围为100~900，数值越大，字体越粗】或者英文单词
normal:正常
bold；粗体
bolder:加粗体
lighter：细
font-size:文字大小，一般使用像素，默认的大小为16px
文本属性
text-decoration:设置文字的装饰效果
none:正常显示
underline；下划线
overline;顶线
line-through:删除线
text-indent:段落缩进，中文中常用2em【em也是一种计量单位，一般情况下，一个中文占1em，1em = 16px】
text-align:对齐方式
left,center,right,justify【两端对齐】
letter-spacing:设置单词内部字母之间的间距
word-spacing:设置单词之间的间距
text-transform:变化，大小写转换
none:无变化
capitalize:单词首字母大写
uppercase
lowercase
direction:文本方向
ltr:默认，从左到右
rtl: 从右到左
盒子属性
border:表示统一【上下左右】设置，包括边框的宽度，边框样式，边框颜色
border-top
border-left
border-bottom
border-right
border-width:边框宽度
border-style：边框样式
dotted:点画线
dashed:虚线
solid：实线
double：双线
border-color：边框颜色
border-radius:边框削圆角【一般使用百分比设置圆角的程度，当取值为50%，则是一个圆】
margin:外边距，可以统一设置,使用px为单位设置距离
margin-top
margin-left
margin-right
margin-bottom
padding:内边距，可以统一设置,使用px为单位设置距离
padding-top
padding-left
padding-right
padding-bottom
尺寸属性
width:设置元素的宽度
height：设置元素的高度
line-height:行高【注意：当一个元素的文本内容只有一行，如果设置line-height = height,则表示该元素的文本在垂直方向上居中】
text-align:center；水平方向居中
背景属性
background:背景图/色
background-image:背景图
background-repeat:背景样式是否平铺
repeat:沿着水平和垂直方向同时平铺，默认值
no-repeat:不平铺，只显示一次
repeat-x:只沿着水平方向平铺
repeat-y:只沿着垂直方向平铺
background-position：背景图像的位置
left right center top bottom
background-attachment:设置背景图是否随着网页滚动条一起滚动
scroll：会随着滚动，默认值
fixed: 固定的
和列表相关的属性
list-style:列表类型 ，项目符号 项目符号的位置【inside outside】
list-style-image:项目符号
list-style-position:项目符号的位置
浮动属性
div是块级元素，一个div在页面中独占一行【自动换行】，默认从上往下依次排列，这种排列方式称为流
元素浮动之前，是竖向排列的，但是，浮动之后，变为横向排列
float：设置元素浮动
none:
left:以左边为参照，浮动起来
right:以右边为参照，浮动起来
clear:清除浮动，取值只能是left或者right【表示将原先设置的浮动清除掉，避免对后面其他元素位置的影响】
显示属性
display:设置标签的显示状态
none：隐藏状态，不会占据空间，也无法显示，相当于该元素不存在，主要用于页面的重绘或者重排，在动画中使用较多
block：块级标签
特点：总是以一个块的形式表现，可以独占一行
注意：可以设置宽高以及内外边距，如果不设置宽，默认和父标签的宽相等，如果不设置高，则高度随着自身的内容自适应
代表：div li hn p
inline：行内标签
特点:不会自动换行
注意：宽高随着内容自适应，设置宽高或者内外边距无效
代表：span a
作用：如果给一个块级标签设置inline值，则可以将一个块级标签转换为行内标签
inline-block:行内块级标签
特点：不但具有block的特点，同时也具有inline的特点，【可以设置宽高，同时可以换行】
使用场景：导航的实现
定位属性
position：设置元素的位置，
absolute：绝对定位，参照父标签或者先辈标签设置有效定位，通过left，top，right，bottom设置有效定位【类似于坐标轴，至少需要其中的两个值可以确定一个标签的位置】
参照物：如果给一个元素设置位置，则查看该标签的父标签是否设置有效定位，如果有，则以父标签作为参照物；如果没有设置，则查找所有的先辈标签，如果所有先辈标签没有设置，则以body作为参照物【设置了绝对定位，该标签对象会从流中拖出，会脱离流，不会保留原来的位置】
relative：相对定位，通过left，top，right，bottom设置有效定位
参照物：该标签自身原来的位置【设置了相对定位，该标签对象不会脱离流，会保留原来的位置】
fixed：固定定位
参照物：窗体【脱离流】
使用场景：一般应用在广告中
注意：left，top，right，bottom可以是正数，也可以是负数
z-index:设置元素的优先级
过渡和形变属性
形变：transform，可以设置标签的放大或者缩小，旋转角度
1.设置旋转
默认沿着z轴旋转
rotate()
rotateX()
rotateY()
rotateZ()
xxxdeg
正数：顺时针，负数：逆时针
2.设置缩放
scale（）
scaleX（）
scaleY()
0~1之间：缩小
大于1：放大
3.设置旋转和缩放
transform: scale(2) rotate(75deg);
过渡：transition，结合其他属性使用，一般应用在动画中，主要是为了声明使用动画的是哪个属性
1.发生过渡需要的时间
transition-duration: 10s;
2.哪个属性的值需要过渡，all表示所有属性
transition-property: all;
动画属性
animation:设置动画
设置动画
1.动画的名字，自定义的
2.动画执行一次需要的时间
3.动画需要执行的次数 ，默认为1次，无限次：infinite
4.动画的形式
线性动画：linear
由快到慢：ease
div{
width: 300px;
height: 200px;
background-color: orange;
animation:customAnimate 5s linear infinite;
@keyframes customAnimate{
/*from{background-color: cyan;}
to{background-color: red;}*/
/*
* from{起始属性操作}------》%0
* to{最终属性操作}-------》100%
*/
0%{
background-color: blue;
}
100%{
background-color: cyan;
}
}