HTML5、css3笔记整理复习
HTML5、css3笔记整理：
单纯的为了回忆一下HTML网页制作。
要制作html网页，只需将文件的后缀名改为name.html和name.css;
css文件通过在html的头部标签里添加标签和css文件相关联，就可以将css样式作用于html文件。
由于文章过长，这里插入一个bilibiliCSS3的超链接
尝试制作HTML网页：
HTML的基本格式：(大部分标签都是成对出现)
<!DOCTYPE HTML>
<head>
<meta charset = "UTF-8/gb2312"> //文档语言为UTF-8或者gb2312
<title>Html Title Name</title> //网页名称
<link rel = "stylesheet" href = "css.address"> //连接css文件
</head>
<body>
//网页内容
</body>
</HTML>
在万能的Visual Studio Code 中，html文件开头只需输入一个英文“!”按换行键则会出现除//link标签外的所有基础标签。
下面我们进行标签复习：
块标签（有宽、高）：p,h1~h6,列表标签（ul无序列表、ol有序列表、dl自定序列表）li，dl，dd;
行标签（有宽无高）：a,img,audio,video,span;
音频标签：
<audio src = "地址" controls = "constrolls" autoplay/>
加上：muted属性，则为静音；
文件地址格式有：mps,ogg,wav等;
controls 为播放器
视频标签：
<video controls/>
<source src = "地址">
好像在html5版本中可以不用source标签直接在video标签里面加src地址。
表格：<table> <td> 我就不详细列了，现在基本没人用了，显得很low；（cellpacing单元格间隔,cellpading单元格填充）
表单：<form></form>
<input = “……”>input 可以决定表单的很多样式，如下：
text 文本 radio 单选框 checkbox 复选框 range 范围 data 日期
reset 重置按钮 rearch 搜索框 tel 电话 color 色板 button 普通按钮
img 图片按钮 select 下拉框 （option 下拉框的选项） texarea 多行文本域 number 数字 email 邮箱
表单提示信息：
oninvalid = "setCustomValidity('提示信息')" 提交后提示信息
oninput = "setCustomValidity('提示信息')" 打字中的提示信息
下面我们进行css样式复习：
样式分为：内嵌样式、内行样式、外部样式;
内嵌样式是将样式写在head部分；
内行样式是把每个样式写在对应的body标签内；
外部样式则是写一个css文档进行link外部连接。
大部分我们都使用外部样式
我们可以通过class、id给标签命名，从而精确的在css对对应的html标签进行样式设计。
*{ //格式化整个网页标签样式
margin：0px；
padding:0px;
}
float-left(right) 左、右浮动，块标签变行标签；
width：宽
height：高
line-height:行高
font-size 字体大小;
font-family 字体种类；
color 字体颜色
font-weight 字体粗度 ;
font-style:italic;斜体字
underline 下划线
text-alight:文字对齐格式
vertical-align:middle 文本垂直居中
text-decoration 去下划线；
margin： auto；自动，相对于富文本居中
border边框属性，
border-radius；圆角弧度
border:#ccc solid 实线(dashed 虚线 dotted 圆虚线) 1px 宽度
背景属性：
background-color 背景颜色
background-image：url（地址） 背景图片
background-size 背景图片大小
background-repeat:no-repeat 背景图片不重复平铺
background-position 背景图片位置移动
display:block 行标签变块标签
a：hover{ //当鼠标移动到a超链接标签时，鼠标变成手指状态
cursor：pointer;
}
背景线性渐变：
linear-gradient:Xdeg（一个角度）,color position,color position;
背景径向渐变：
radial-gradient:clrcle正圆/ellipse椭圆 position 圆心位置 position color position，color position；
transparent 透明色，没有颜色。
z-index:1;盒子显示等级，等级高的盒子会把等级低的盒子遮住。默认盒子等级0。
阴影属性：
text-shadow：0px 0px 0px color 文字阴影
box-shadow： 0px 0px 0px 0px color 盒子阴影
opacit:0.3；整体透明程度
处理盒子塌陷：
1、clear:both;清除浮动效果，防止盒子塌陷：
2、给塌陷盒子的父级加overflow:hidden;
3、精确每个标签的宽高
盒子定位：
position:relative;相对定位，相对于自己本身的位置
position:absolute;绝对定位，相对于父级标签
position:fixed；锁定定位，相对于电脑屏幕
一个小套路：
父级用relative,自身用absolute 效果比较稳定
动画animation：
@keyframs name{
from 10%{css样式}
percent{css样式}
to 100%{css样式}
}
animation 调用@keyframs 动画执行
语法简写：animation:name duration 完成时间 timing-function 函数 delay 延时 iteration-count 播放次数 direction 动画持续过程;
语法属性：
animation-name:@keyframes名字
animation-duration：动画播放一次持续的时间
animation-timing-function：规定动画变化类型（快慢节奏）
animation-delay:播放前的延时
animation-iteration-count:播放次数
animation-fill-mode:forwards；最后一帧，默认为none
过渡transition：
语法简写：transition：property duration timing-function delay 过渡延时；
函数：transition-timing-function: ease 慢—>快
tinear 匀速
ease-in慢开始，加速
ease-out 慢结束，减速
ease-in-out 先加速，再减速
过渡和：hover相结合使用；