<html> </html>:文档标签
<head> </head>:头部标签
<body> </body>:主体标签
<title> </title>:导航栏标签
<h1> </h1>:一级标签（最大）
<h2> </h2>:二级标签
<h3> </h3>:三级标签
<h4> </h4>:四级标签
<h5> </h5>:五级标签
<h6> </h6>:六级标签（最小）
<p> </p>:段落标签
<i> </i>:斜体标签
<b> </b>:粗体标签
<u> </u>:下划线标签
<strong> </strong>:同样也是粗体标签
<em> </em>:同样也是斜体标签
<s> </s>:删除线标签
<hr>:分割线标签 （该标签单体方式存在）
<ing>:图片标签 使用格式<img src="填写图片路径地址" width="设置图片宽" hight="设置图片高"alt="如果图片加载不成功里边输入的内容将会显示"> （该标签单体方式存在）
src:路径标签 （该标签单体方式存在）
alt:代替文字 （该标签单体方式存在，如果图片出现就不会出现文字，如果未出现就会显示）
title:提示文字 （显示图片与鼠标移至图片上提示文字）
width:宽 （该标签单体方式存在，用于设置图片的宽）
hight:高 （该标签单体方式存在，用于设置图片的高）
title:设置图片悬浮文字
<video> </video>:视频标签 使用格式<video src="填写视频路径地址" width="设置视频宽" hight="设置视频高"alt="如果视频加载不成功里边输入的内容将会显示" controls autoplay must loop> <video>
contros:控制标签
loop:循环标签
autoplay：自动播放标签 （必须与静音标签一块使用才能有效果）
muted:静音标签
source：资源标签 使用格式<video><source scr="视频所在路径地址"></video>
<small> </samll>:缩小标签
<b> </b>:边框标签（行级元素）
<div> </div>:盒子标签（块级标签） 使用方法<div style="border:设置边框宽度 单位：px solid #设置颜色"> <div>15:15 2020/12/115:15 2020/12/1
<a> </a>:超链接标签俗称链接 使用方法<a herf="输入链接地址"target=“_bank”> </a>
target:打开方式标签 使用方式target=“打开方式”
_self:在自身页面打开（默认打开方式）
_bank:在新建页面打开
块级元素含义：无论内容多少，该元素独占一行 行级元素：内容撑开宽度，左右都是行内元素的可以排在一行
background-color:背景颜色 border:1px solid red:设置边框一像素颜色为红 font-size:设置字体大小
font-weight:设置字体粗细（normal:正常 bold:粗体）
class=:命名 float:left表示向左浮动 text-decoration:none;去掉超链接下滑线 text-align：center;居中设置（在CSS中操作使用） heiht:高度设置 line-heighht:行高设置
text-indent:2px 首行缩进 border-radiius:5px 钝化边角 transform:skew(-10deg) 2D转换 3D斜体
clear:left 清除左浮动 no-repeat 不平铺 background-attachmant设置固定的背景图片
background-size:cover 背景尺寸覆盖 text-shadow 文本阴影
UTF-8:编码格式没他网页会乱码
<ul>
<li>
无序列列表特点：前面有黑色小黑点为块儿元素
</li>
</ul>
列表
无序列表，有序列表，定义列表
1.无序列表
特性：没有顺序，每一个<li>独站一行（块元素）默认每一个标签都有一个小黑点主要作用于我们的页面导航和侧边新闻
List—style—type(类型转换)
Circle空心小圆点
Square实心正方形
None没有无
display: inline-block;行内元素与块儿元素的转换(当ul里的li数量不一同时建议使用浮动 float)
2.有序列表
<ol>声明有序列表
<li></li>声明列表项
<li></li>
....
</ol>
特性：有顺序；每一<li>标签独占一行（块元素）默认每个<li>标签前面有顺序标记主要用作于我们试卷和问卷调查
Type：（类型转换）（a,A,i,I,1）
3.定义列表
<dl>声明定义列表
<dt></dt>声明列表项主题
<dd></dd>声明列表内容
<dd></dd>
<dd></dd>
<dl>
特性：没有顺序每一个<dt>标签和<dd>标签独占一行（块元素）没有默认的标记 一般作用于一个主题下有一个或多个列表项
注意当内容的高度不相同且需要两块儿从上对齐时建议使用float来解决不建议使用display
html知识点
一.基本标签
<h1>~<h6>:标题标签
p：段落标签
strong：字体加粗标签
em:斜体标签
i:斜体标签
hr:水平线标签
s:删除线标签
small:字体缩小标签
u:下划线标签
br：换行标签
二.特殊符号
空格：
大于号：>
小于号：<
双引号:"
版权符号:©
三.a标签的使用
href:跳转的位置
target:跳转方式
_self：在本窗口打开
_blank:在新窗口打开
锚链接跳转:
需要先给要跳转的位置设置一个Id
然后 href="#id名"跳转到相应位置
例如:
<a href="" id="top">大家好，我是页面顶部</a>
<a href="#top">点我就可以回到上一个标签的位置</a>
功能性跳转(发送邮件):
<a href=“mailot:邮箱地址”>发送邮件</a>
<!--表格函数：
<table>表格标签
<tr>行标签
<td>单元格标签
border:设置边框与边框大小 使用方法（<table border="0">设置边框大小）
colspan:设置跨列格数 使用方法（tr/td colspan:(填写想要跨的格数)）
rowapan:设置跨行格数 使用方法（tr/td rowapan:(填写想要跨的格数)）-->
四、表格
<table> 表格标签
<tr> 行标签
<td><td> 单元格标签
<tr/>
<table/>
属性：
rowapan:设置跨行格数
colspan:设置跨列格数
Border="1":表格边框，等与“0”就是没有边框
Cellspacing="0":表格中的空格缝隙为0px
Width="100px"单元格的宽度
Height=“100px”单元格的高度
Align="center"对齐方式:left(左)，right（右），center（居中）
五、媒体元素
1、视频元素
<video src=""></video>
解决浏览器兼容问题
<video>
<source src="" type="">
............
</video>
2、音频元素
<audio src=""></audio>
解决浏览器兼容问题
<audio>
<soure src="" type="">
............
</audio>
3、所有媒体元素的属性
Controls:播放控件
Autoplay:自动播放
Muted：静音播放
六、页面结构
1.header:页面头部
2.section:页面主体
3.footer:页面底部
七、页面内嵌
iframe:声明页面嵌套
属性:
Src:页面内部引入新页面地址（HTML页面、网页）
Width:新开辟空间的宽度
Height:新开辟空间的高度
Name：新开辟空间的标识
实现页面内嵌跳转的步骤
1.开辟新空间
2.a标签超链接跳转
3.a标签target跳转方式与新开辟空间的标识一致
八、表单
<from action="提交路径" method="get/post">
<input type="text"/>//文本框
<input type="password"/>//密码框
<input type="submit" value="提交"/>//提交按钮
<input type="reset" value="重置"/>//重置按钮
</from>
复杂表单属性：
1、 身份证：<input type="text" pattern="正则表达式">
正则表达式：验证规则
2、账号：<input type="text" value="账号"
Placeholder="提示信息">
Placeholder:表单元素的提示信息，只能起到提示作用
3、性别:<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
type="radio":单选按钮
name 值必须一致
checked:进入页面默认选中
4、爱好：
<input type="chackbox" name="hobbie"
Vale="读书" id="du">
<label for="du">读书</label>
Type:checkbox 复选按钮
Name值必须一致
Label:增强文本效果 for：指引我们要增强效果的ID
5、下拉列表：
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
Select:下拉列表框
Option:下拉列表项
Selected：下拉列表默认选中
下拉列表需注意的是value值要和后面的值保持一致
6、<textrea name="JY" cols="30" rows="30">
文本域（用来写建议、评价和操作流程）
</textarea>
Cos:高度 rows:高度 readonly：只读
7、邮箱
<input type="email" name="邮箱"
Type="email":邮箱格式（基本的邮箱格式验证）
8、数字
<input type="number" name="数字"
Min="1" max="120" step="5">
Type="number"数字输入框
Min="1"最小值
Max="2"最大值
Step="5"跨度
9、滑块
<input type="range" min="10" max="50"
Step="20">
Type=range:滑块
10、type="url":输入网址，进行验证
Type="hidden":隐藏域
Type="search":搜索框
九、CSS样式渲染
1.样式渲染方式
行内样式渲染
<p style="color:red">
内部样式渲染
<style>
P{
Color:red;
}
</style>
外部样式渲染
<link rel="stylesheet" href="css">css3.0
@importurl("") css2.1
区别：link 先加载css样式在加载html页面
@import 先加载HTML页面再加载css样式
原则：就近原则 行内>内部>外部
2.基本选择器
标签选择器<类选择器<ID选择器
3.层次选择器
a)后代选择器
E F{
Color:red
}
注意：空格必须要有，E的所有后代中为F标签的都被选择
b)子选择器
E>F{
Color:red;
}
注意：必须要有大于号，E的子代中的所有F标签都被选择
c）相邻兄弟选择器
E+F{
Color:red;
}
注意：必须要写+号，E的相邻兄弟级后面紧跟的一个F标签
d)通用兄弟选择器
E~F{
Color:red;
}
注意：必须要写~符号，且位于E标签后面的所有兄弟级的F标签
4.结构伪类选择器
a)E:first-child 注意：先找第一个位置再找类型渲染
b)E:last-child 注意：先找最后一个位置再找类型渲染
c)E:nth-child(n)注意：先找第n个位置，再找类型渲染
d)E:frish-of-type注意：先找类型，再找第一个位置
e)E:last-of-type注意：先找类型，再找在最后一个位置
f)E:nth-of-type(n)注意：先找类型，再找第n个位置
5.属性选择器
a)a[href]:匹配具有href属性的a标签
b)a[href="www.4399.com"]:匹配具有href准确值属性的a标签
c)a[href^="www"]:匹配href属性以www开头的a标签
b)a[href$="com"]:匹配href属性以com结尾的a标签
e)a[href*="4399"]:匹配href属性包含4399的a标签
十、美化网页元素
1.span标签 ：作用于选择渲染
2.字体样式：
font-family:字体类型
font-size:字体大小
font-style:字体风格
font-weight:字体粗细
font:字体全部样式（复合属性）
3.文本属性：
color:文本颜色
text-align:水平对齐方式
vertical-align:块儿的对齐，上top,下bottom,居中middem
text-indent:首行文本缩进
line-height:设置文本行高
text-decoration:文本装饰
text-shadow:文本阴影
4.超链接样式
a:link->未点击超链接之前的属性
a:visiited->点击超链接之后的样式
a:hover->鼠标悬浮时的样式
a:active->鼠标点击未释放时的样式
（
a:hover span{
background-color: red;
}使其a标签包裹的span标签鼠标悬浮时span的背景颜色单独变红
）
5.列表样式
List-style-type:列表类型的样式
List-style:列表样式（复合属性）
6.网页背景颜色
background-color:背景颜色
background-image:背景图片
background-repeat:重复方式
repeat:平铺
no-repeat:不平铺
repeat-x:水平方向平铺
repeat-y:垂直方向平铺
background-position: x轴方向 y轴方向 ：背景定位
background:背景样式（复合元素）
background-size:背景尺寸
auto:默认值，不变
cover:填充覆盖
contain:自适应比例缩放
40%:相对与父级的40%计算
7.渐变样式
线性渐变:Linear-gradient(方向，颜色1，颜色2，颜色3......)
径向渐变:radial-gradient(定位，尺寸，颜色1，颜色2....)
8.div由内边距.外边距.内容.边框
display: inline-block;行内元素与块儿元素的转换(当盒子里的内容宽高不一样时建议使用浮动 float)
9.盒子模型：
border-color ：边框颜色（四种渲染方式）
border-width ：边框粗细 单位为 px
border-style ：边框风格
常用值：solid 实线 dashed 虚线
所有的边框样式都可以添加方向关键字
来进行单一的边框渲染
方向关键字 上：top 下: bottom 左：left 右：right
方向关键词要紧跟border后面 : eg(border-top-color.........)
复合属性 ：border :1px solid black 无顺序
外边距margin
margin-方向关键词 (top、left、bottom、right)
盒子阴影模型 box-shadow: inset 10px 10px 10px gray;
第一个属性 类型 默认向外，inset是向内
第二个属性 x轴偏移量
第三个属性 y轴偏移量
第四个属性 阴影模糊半径
第五个属性 阴影颜色
十一、浮动
display
block ：块儿元素的默认值，元素会显示为块元素
并有块元素的特性
inline ：行内元素的默认值，元素会显示为行内元素
并有行内元素的特性
inline-block ：行内块儿元素，元素即有行内元素的
特性，又具有块儿元素的特性
none ：设置元素不会被显示
标准文档流：指元素根据块元素或行内元素的
特性按从上到下、从左到右的方式自然排列
这个也是元素默认的排列方式
浮动(float) ：
left ：元素向左浮动
right : 元素向右浮动
none ：默认值 元素不浮动
清除浮动 :
left : 左侧不允许浮动
right : 右侧不允许浮动
both : 左右两侧不允许浮动
none ：不允许该元素浮动
父级塌陷：
因为浮动会使元素脱离标准文档流，继而引发
了由标准文档流撑起的父级DIV, 导致塌陷
有四种方式可以防止父级塌陷
1.设置父元素的高度
2.浮动元素后添加空div
3.父级添加空overflow属性
eg overflow : hidden
4.父级添加伪类after
eg .first:after{
content : ' ' ; 在clear后面添加内容为空
display : block ; 该添加内容转化为块元素
clear : both ; 清除这个元素的两边浮动
}
写法有点复杂，但是没有副作用，推荐使用
display : inline-block 与 float的 区别
相同点 ：都可以设置宽度和高度，使元素并排在一行
不同点 ：display : inline-block 不可以对位置
方向进行控制，而float可以进行浮动
带来的影响处理
overflow处理内容溢出
visidle ：默认值 内容不会被修剪，会呈现在
盒子之外
hidden ：内容会被修剪，并且其余内容不可见
scroll : 内容会被修剪，但是浏览器会显示滚
动条以便查看其余内容
auto ： 如果内容会被修剪，则浏览器会显示滚
动条以便查看其余内容
十二.网页中的定位元素
position ：定位元素
1.static ：默认值没有定位
2.relative ：相对定位
特性：
a.设置的定位盒子会相对于原来的位置，通过
指定偏移（top、right、bottom、left）到达
新的位置
b.定位的盒子仍然在百敖准文档流中不会对父
级与其他盒子造成影响
c.设置相对定位的盒子原来的位置都会被保留
下来
3.absolute：绝对定位
特性：
a.使用了绝对定位的元素（relative）以它最近
的一个以经“定位”的“祖先元素”为基准
b.如果没有上述条件的达成，则会以浏览器窗
口为基准
c.绝对定位的元素会脱离标准文档流，不会对
其他元素的定位造成影响
d.元素偏移后，它原来的位置不会被保留下来
4.fixed: 固定定位
特性：
a.固定定位的基准只有浏览器窗口
b.固定定位的元素不会因为滚动条
的变化而变化
5.z-index ：调整元素的定位时重叠的上下位置
特性：
a.类型为整数，默认值为0
b.z-index值大的位于值小的上方
6.opacity ：网页透明度
特性：
a.x为0~1，值越小越透明
第十三章：网页动画
css变形（transform）是一些效果的集合
例如 ：平移 旋转 缩放 倾斜
1. 平移函数 ：translate(),基于x、y坐标
重新定位的元素位置
2. 缩放函数 ：scale(),可以使元素对象的尺寸
发生变化
注意： 0~0.999为 为缩小 1之后为放大
写法：scale(1.5) x轴和y轴 放大1.5倍
scale(1.5,1.4)x轴放大1.5倍
y轴放大1.4倍
scaleX(1.5)x轴放大1.5倍
scaleY(1.4)x轴放大1.4倍
3. 倾斜函数：skew(),取值是一个读书值（deg）
写法 ：skew(40deg,-20deg) x轴偏移40deg
y轴偏移-20deg
skewX(40deg) x轴偏移40deg
skewY(-20deg)y轴偏移-20deg
4. 旋转函数 rotate(), 取值是一个度数值（deg）
注意 ：正数为顺时针旋转，附属为逆时针旋转
5. 旋转与倾斜的区别
rotate()函数只能是旋转，不能改变元素的旋转
skew()函数是倾斜，元素不会旋转，数值会改变
元素的形状
css过渡（transition）
transition: width 10s ease-in 2s;
1.指定动画的过渡css属性
IDENT：指定CSS属性（width、background.......）
all：指定所有支持该属性的元素，一般用all
2.过渡的时间
定义转换动画的时间过渡 单位为s、ms
3.过渡函数
ease : 速度由快到慢（默认值）
linear ：速度恒速（匀速运动）
ease-in ：速度越来越块（渐显效果）
ease-out ：速度越来越慢（渐隐效果）
ease-in-out ：速度先加速在减速（渐显渐隐效果）
4.延迟时间
指定一个动画开始执行的时间，单位为s
正数 ：元素过渡效果不会立即触发，过了设置时间才会触发
0 ：默认值，元素过渡效果立即执行
负数 ：元素过渡效果会从该时间点开始显示，之后的动作会被拦截
animation动画
由两部分组成
1.类似与FLASH动画的关键帧来声明一个动画
@keyframes spread{
0%{CSS样式}
10%{CSS样式}
20%{CSS样式}
30%{CSS样式}
......
}
2.在animation属性中调节关键帧声明动画
a ：动画名称（animation-name）
由@keyframs创建的动画关键帧名称
b ：动画时间（animation-duration）
正数 单位s、ms
c ：动画方式（animation-timing-functio）
ease ：速度由快到慢（默认值）
linear ：速度恒速（匀速运动）
ease-in ：速度越快越快（渐显效果）
ease-out ：速度越来越慢（渐隐效果）
ease-in-out ：速度先加速在减速（渐显渐隐效果）
d ：延迟时间（animation-delay）
延迟播放动画 正数 单位s、ms
e ：动画播放次数（animation-iteration-count）
值通常为整数，默认值为1
特殊值infinite,并表示动画无限次播放
f ：动画播放的方向（animation-direction）
normal：动画每次都是循环向前
alternate ：动画播放为偶数次向前
g ：动画的播放状态（animation-play-state）
running ：将暂停的动画重新播放
paused ：将正在播放的元素动画停下
h ：动画发生的操作（animation-fill-mode）
forwards ：表示动画在结束后继续应用最后
关键帧的位置
backwards ：表示会在向元素应用动画样式
时迅速应用动画的初始帧
both ：表示元素动画具有forwards和backwards
的效果
05-03
616
616
01-11
1334
1334
04-03
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
