HTML 超文本 标记 语言
标签：是由一对 <> 构成的，有开始、有结束。
html架构：
<!doctype html>
标签：
??块标签： ? ?单独占一行
1.标题标签 ?从1到6 文字大小依次变小?
行标签： 不单独占一行
7.span 标签 对文字起强调的作用
8.a标签
（1）链接
? ? ?外网
? ? ?内网
（2）锚链接 ?链接到一个确定的位置
? ? ?位置 锚点
? ? ?去锚点 ? ?
? ? ?回到顶部 ?
?(3)空链接 ?
9.图片标签
10.音频标签
<audio src="音频的地址" ?autoplay ?controls >
11.视频标签
<video src="视频的地址" ?autoplay ?controls>
CSS层叠样式表：
1.行内样式表
在标签的开始元素里面添加 style="" 属性
字体样式：
字体粗细 font-weight:bold;
字体大小 font-size:像素值; ?像素值=数字+px ? ? 如 24px
字体倾斜 font-style: italic; ?normal
字体下划线 text-decoration:underline ; ?上划线 ?text-decoration:overline ; ? 删除线 text-decoration:line-through ; 去掉线 text-decoration:none;
字体颜色 ? color: red; ?英文表示颜色 ?16进制颜色 #000-#fff ?第一位 代表 红 ?第二位代表 绿 第三位代表 蓝 ? #000000-#ffffff ? ?rgb颜色 rgb(0,0,0)-rgb(255,255,255)
字体 ? ? ? font-family:‘宋体‘
字体水平位置 ?text-align: right; ?left ?center
背景样式
背景颜色：background-color: green; ?英文 ? 16进制 ?rgb
背景图片：background-image:url(图片的地址) ;?
背景图重复：background-repeat:no-repeat ;
背景图大小：background-size:100% 800px; 第一个值 控制宽度 ?第二个值 控制高度 ?表示 像素值 ?百分比
背景图固定：
背景图位置：
div的盒子模型
宽度 ?width：像素值;
高度 ?height:像素值;
外边距 ?margin ?对div的大小没有影响
margin-left:像素值;
margin-right:像素值;
margin-top:像素值;
margin-bottom:像素值;
argin-left:20px;
内边距 padding 对div的大小有影响
padding-left:像素值;
padding-right:像素值;
padding-top:像素值;
padding-bottom:像素值;
padding-left:10px;
边框 border ?对div的大小有影响
border-left: 边框的宽度（像素值） ?边框的样式（solid、dashed） ? 边框的颜色;
border-right: 边框的宽度（像素值） ?边框的样式（solid、dashed） ? 边框的颜色;
border-top: 边框的宽度（像素值） ?边框的样式（solid、dashed） ? 边框的颜色;
border-bottom: 边框的宽度（像素值） ?边框的样式（solid、dashed） ? 边框的颜色;
border: 边框的宽度（像素值） ?边框的样式（solid、dashed） ? 边框的颜色;
border:1px solid red;
div的实际宽度=width+内边距（左右）+边框（左右）;
div的实际高度=height+内边距（上下）+边框（上下）;
div的水平居中?
margin:0 auto;
把块标签你变成行标签
float:left;
2.页内样式表
在head里面 title的下面加上：
选择器：
（1）标签选择器
(2)ID选择器 ? ? id名字不能重复出现
定义id
（3）class选择器 ? 多用class 选择器
定义
文字垂直居中
line-height:与height保持一致;
例：
height:50px;
line-height:50px;
伪类选择器
hover 鼠标移动到某个标签上面，设置器其样式
a:hover{
color:#fff;
}
把行标签变成快标签
display:block;
通用选择器 用于新建网页时，初始化网页的元素
*{margin: 0; padding: 0;}
子类选择器
充当父类选择器>充当父类的儿子{
}
.nav_div>ul>li{
list-style: none;
}
图片效果:
放大、缩小 ? transform:scale(放大的倍数); ?transform:scale(1.5);
放大镜 ? overflow:hidden;
样式
.img_div{
width: 300px;
height: 170px;
background-color: yellow;
overflow: hidden;
}
.img1{
width: 300px;
}
.img1:hover{
transform:scale(1.5);
}
延迟效果 ?transition: all 1s; /延迟 1s/
旋转2d
transform: rotate(180deg); ? ?deg时度数的意思
旋转3d
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
表单： ? 收取、记录信息
表单元素：
3.外部样式：
新建css文件，文件名与html的名保持一致；
在html中引入css外部文件 ?
4.阴影效果
box-shadow: 10px 15px 25px #ddd;
/*
第一个值 代表 阴影 水平移动 + 右 —左
?第2个值 代表 阴影 垂直移动 + 下 —上
第3个值 代表 阴影范围 越大越虚
?第4个值 代表 阴影颜色
原文：https://www.cnblogs.com/ltitca/p/11958968.html