html5新标签
HTML标签的语义化
- 语义化标签更具有可读性，便于团队的开发和维护
- 没有css的情况下，网页也能很好的呈现出内容结构和代码结构
- 关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息
header标签（头部）
- 用来定义文档（网页或者是某一个段落）的页眉（头部）
- 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
<header>元素不是分段内容，而是属于独立分块的头部.因此不会往 大纲 中引入新的段落。也就是说，<header>元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。- 完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）
- 整个页面没有header限制个数，可以使用多个
<header>元素不能作为<address>、<footer>或另一个<header>元素的子元素。
footer标签（底部）
- footer标签代表一个网页或者章节内容的底部区域（页脚）
- footer通常包含章节的作者，版权数据和文章的其他链接
- 其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
<footer>元素不能作为<address>、<header>或另一个<footer>元素的子元素。
nav 标签（导航栏）
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。- 导航部分的常见示例是菜单，目录和索引
- 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
- 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航
注意 nav使用有两种方法：
- 当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可
- 当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签
section标签（代替div 分块）
- section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
- 假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
- section主要是对网页进行分块，也可以对网页中的某块内容进行分块
- 通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
- 如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div
article标签（很强独立性）
- 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
- 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
- 一般来说 一个article也有自己的头部header，或者是footer
div article 和 section
-
article和section
- article元素可以看做是特殊的section，但是强调独立性比section更强
- section主要强调分段分块，article是强调很强的独立性
- 原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article
-
div、article和section
-
div、section、article语义依次递增
-
div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系
-
对于主题性的区域，我们可以使用section
-
加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article
-
aside元素（侧边栏）
- 表示一个和其余页面内容几乎无关的区域
- 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
- 这个里边的内容和其他元素内容关联性不强
figure元素（引用）
- 代表一块独立的内容，是一个独立的引用单元
- 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
- 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
- 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
<figure>
<figcaption>海贼王的图片</figcaption>
<img src="../images/05.jpg" alt="" width="300">
</figure>
datalist 元素
- 包含了一组option元素，代表是列表可选的值
- 和input进行相关联，用来配套使用
- input中的list属性 == datalist的id属性
<input list="city" type="text">
<datalist id="city">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="湖北">湖北</option>
<option value="湖南">湖南</option>
<option value="胡建">胡建</option>
</datalist>
time元素
- 用来表示24小时制 或者是 一个公历时间
- 作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
- 通用时间格式 XXXX-XX-XX XX[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-42hDfBVs-1610017824915)(https://github.githubassets.com/images/icons/emoji/XX.png)]XX
- 两种用法：
- time标签直接包含时间
- 使用datetime属性来表示时间
<p><time>2019-9-12 19:00:00</time></p>
<p><time datetime="2019-9-12 18:00:00">一小时之前</time></p>
progress元素
- 主要用来显示一项任务的完成程度
- 规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同
- 属性:
- value：是当前进度的值
- max：是总进度的长度
<progress max="100" value="80"></progress>
HTML5新表单属性
表单的新属性规范
-
h5规范允许 当属性名和属性值相等的时候 可以直接书写属性名即可
-
在js中，h5允许以布尔值的形式控制属性开启或关闭
也就是在js中 给autofocus属性设置值为true（真，打开） 或者是 false（假，关闭）
但是在元素的属性中 不允许使用true或者是false来控制开启或关闭
-
如果多个表单书写autofocus(只能出现一次的属性)，那么以第一个书写的为准
表单的新属性（直接写在input后面的）
-
placeholder：
占位符
-
autocomplete：
是否提示用户曾经输入过的值 默认是on 关闭是off
-
autofocus：
默认自动获取焦点
他有唯一一个值是autofocus
-
required：
必填项，当提交的时候，此表单必须填写
-
disabled：
禁用任何表单元素，这个元素就被禁止输入或选择等等操作
使用disabled禁用表单，表单元素是不会在被提交了
-
checked：
单选框或多选框 默认被选中
-
readonly：
对于可编辑的表单来说 表示不能再次被编辑 但是是可以被提交的
对单选多选按钮不支持
- form：
如果input存在form属性，表示当前的input属于某一个表单
此时form表单的id的值 就是这个input的值
那么form表单 和当前的input就进行关联了
无论input书写在哪里，都能随着表单发送数据
- multiple（可以多选）
表单的新类型（type新类型）
type新类型
-
color：
用来引入或者打开指定颜色的控件
-
date：
日期的控件（年月日）
-
week：
日期的控件（年周）（火狐不支持）
-
month：
日期的控件（年月）（火狐不支持）
-
email：
编辑email的字段
自带验证，但是验证不完整，一般还是自己书写
在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键
-
number：
用来输入数字的控件
多了一个上下的按键，可以增加和降低数字大小
验证必须是数字
其他属性
- min：最少数量
- max：最大数量
- value：当前数量
- step：每次累加累减数量
-
search：
用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
-
tel：
电话号码输入框
-
url：
url地址
-
range：
输入一个拖拽的控件
属性：
- max：最大值
- min：最小值
- step：每次走的最小单位
- value：当前值
<form action="###" method="get">
请选择你喜欢的颜色：
<input type="color" name="color">
<br>
请选择你的出生日期：
<input type="date" name="brithday">
<br>
请输入当前的周数：
<input type="week" name="week">
<br>
请输入你几月生日：
<input type="month" name="month">
<br>
请输入您的邮箱地址：
<input type="email" name="email">
<br>
请选择您购买的数量：
<input type="number" name="num" min="2" max="10" step="2">
<br>
请在本框中进行检索：
<input type="search" name="sear">
<br>
请输入您的电话号码：
<input type="tel" name="tel">
<br>
请输入你的个人博客的网址：
<input type="url" name="url">
<br>
请选择：
<input type="range" name="range" min="30" max="100" value="50">
<br>
<br>
<button>提交</button>
</form>
调用相册和摄像头
-
input的file补充：
<input type="file" accept="image/*" capture="camera">文件域 的 accept属性书写 image/* 代表接受任何格式的图片
capture=camera 代表从相机拍照接收
capture=photo 代表从相册选取照片
但是在pc端的表现都是选取文件
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" capture="photo">
音视频：
视频基本标签用法 ：
-
<video width=" " height="" src=""> </video> -
src 属性：指定播放文件的URL。
-
width、height属性：
- 设置媒体元素的大小，单位为像素；
- 省略该属性，则使用播放源文件的大小；
- 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值，如果设置高度过高会在设置高度中居中
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
音频基本格式 ：
-
<audio src="" controls> </audio> -
src 属性：指定播放文件的URL。
-
其他和视频一样。
-
指定一种视频格式，不能播就提示：
<video src="examp.mp4" >您的浏览器不支持</video> -
给定多个source标签，给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
<source src="1.mp4" type="video/mp4" />
controls :添加控件
autoplay:制动播放 需开启静音
muted：静音
loop：是否循环
poster：视频播放前一帧
C3
浏览器前缀
一个css属性，可能是通用的，也可能是私有的（自己兼容或者正在测试，其他还不能用），需要给当前的属性添加前缀
前缀可能添加在属性名上，也可能添加到属性值上
谷歌前缀：-webkit-
safari：-webkit-
欧朋：-webkit- -o-
火狐前缀：-moz-
ie前缀：-ms-
结构选择器：
| E:first-child | 选择第一个子元素E |
|---|---|
| E:last-child | 选择最后一个子元素E |
| E:nth-child(n) | 选择一个或多个特定的子元素 （第一个编号为1） |
| E:nth-last-child(n) | 选择一个或多个特定的子元素，从最后一个子元素开始算 |
| E:only-child | 匹配父元素下仅有的一个子元素 |
| E:empty | 匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 ) |
| E:not(s) | 匹配不符合当前选择器的任何元素( 反选 ) |
nth-of-type() 是当前同类型元素在父元素中的第几个
圆角边框
border-radius：
/*8个值：1 2 3 4/5 6 7 8*/
/*1 2 3 4代表横向上的4个位置 5 6 7 8 代表竖向上的4个位置*/（顺时针）
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
/*设置每个角1个半径，总共4个值*/
border-radius: 30px 40px 50px 60px;
/*横向都是40 竖向都是60px*/
border-radius: 40px/60px;
/*左上右下是40 左下和右上是60*/
border-radius: 40px 60px;
/*border-radius百分比是相对于自身的宽高*/
border-radius: 10% 0 0 0;
文字阴影
text-shadow: 1px 1px 1px color;
none： 无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值
第3个长度值：可选，阴影模糊值。不允许负值
color： 设置阴影的颜色
可以重叠做成其他效果
text-shadow:
1px 1px 1px color，
1px 1px 1px color，
1px 1px 1px color，
1px 1px 1px color;
盒子阴影
和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）
box-shadow: 0px 0px 0px 0px #666;
也可以重叠
div p:nth-child(2){
box-shadow:
1px -1px 0px 0px rgba(100,100,100,.8),
2px -2px 0px 0px rgba(100,100,100,.7),
3px -3px 0px 0px rgba(100,100,100,.6),
4px -4px 0px 0px rgba(100,100,100,.4),
5px -5px 0px 0px rgba(100,100,100,.3),
6px -6px 0px 0px rgba(100,100,100,.2),
7px -7px 0px 0px rgba(100,100,100,.1);
}
图片移入阴影效果
img{
transition: all .2s linear;
}
img:hover{
box-shadow: 3px 3px 3px 0 #666;
}
滤镜设置
-
使用filter属性（IE不支持）
blur(px)：模糊
brightness(%)：亮度
contrast(%)：对比度
opacity(%)：透明度
saturate(%)：饱和度
….
合写：
filter: blur(1px) brightness(100%) contrast(100%) saturate(100%);
CSS3多列
- css column 定义了多栏布局的模块
- 表现出列之间怎么流动，及多列之间的间隙和分割线，并且使用了列高平衡，除了最后一列，其他列高度一样
多列属性
-
column-count
- 定义：规定元素应该被分隔的列数
- 语法：column-count: number;
-
column-width
- 定义：列的宽度
- 语法：column-width:像素值
column-count和column-width用来控制列的宽度和数量：
- column-count是控制列数
- column-width是控制每一列的最小宽度
- column-count和column-width冲突的时候,分为栏数少的优先
columns是简写，后边跟 count和width 也可以随意跟count和width其中的一个值
columns:200px 10;
-
column-gap
-
定义：规定列之间的间隔
-
语法：column-gap: 像素值;
-
-
column-rule(列与列之间的线)
-
定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度)
-
语法：column-rule: 颜色，样式，宽度;
-
列之间规则的颜色：[column-rule-color]
列之间规则的样式：[column-rule-style]
列之间规则的宽度：[column-rule-width]
-
-
column-span（一般是头部标题）
- 定义：元素应该横跨的列数
- 语法：column-span:all
图片瀑布流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awA6mxhc-1610017824924)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200628182120670.png)]
.box{
column-width: 300px;
}
.box img{
width: 100%;
/*
img的宽百分百以当前列宽为参考
*/
}
线性渐变
渐变的写法：
- 从上到下（默认）：background: linear-gradient(red,blue);
- 从左到右：background: linear-gradient(to right,red,blue);
- 对角：background: linear-gradient(to right bottom,red,blue);
- 角度background: linear-gradient(45deg,red,blue);
重复渐变
background: repeating-linear-gradient(90deg,red 0%,blue 20%);
background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
径向渐变
background: radial-gradient(at center center,red 25%,white 25%);
第一个参数at书写圆心的地址
背景设置
背景图原点：
-
background-origin ：padding-box; (默认)
border-box | padding-box | content-box
-
background-origin是用来决定图片的原始起始位置。
-
它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示。
背景图裁剪：
-
background-clip
border-box | padding-box | content-box
-
background-clip的作用为将背景图片做适当的裁剪，以适应需要。
-
background-clip有content- box,padding-box,border-box，text几个值剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。
设置原点与裁剪互不冲突
背景图大小：
背景图大小：（不会设置背景颜色）
background-size:
cover: 充满容器，比例不发生变化，但是图片可能超出
contain: 保证至少有一边充满容器，比例不发生变化，图片可能不能填充满容器
百分比： x和y的值 百分比是相对容器的宽高 图片比例可能发生变化
background-size: cover;
background-size: contain;
background-size: 100% 100%;
background-size: 100px 150px;
多重背景
多重背景：书写在前边的覆盖书写后边的
background:
url("../images/03.jpg") left center no-repeat,
url("../images/01.jpg") right center no-repeat;
css动画
过渡动画（transition）对自己设
-
允许 CSS 的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值
-
transition-property ：规定过渡的属性，多个可以使用逗号间隔，或者直接书写all
-
transition-duration ：规定当前动画持续时间。
-
transition-timing-function ：控制动画类型
http://cubic-bezier.com/（贝塞尔曲线生成器），可以自定义动画类型。 linear:匀速
-
transition-delay：控制动画延迟时间
-
常用合写：
transition: all 1s linear 1s;
-
注意事项:
并不是所有元素都支持过渡
元素没有渲染完的情况下，过渡不生效
过渡动画的触发方式
1.hover触发
2.js触发
直接改变样式
改变或添加删除类名
关键帧动画：
@keyframes
关键帧名称 animation-name
关键帧持续时间 animation-duration
动画执行方式 animation-timing-function: linear 逐帧动画用steps(多少份)
动画延迟时间 animation-delay:
动画循环次数 animation-iteration-count: infinite为无限次
动画播放方式 animation-direction:
默认normal，动画正常播放； alternate，动画轮流反向播放（播放完又倒播放回去）
合写：animation：名字 时间 方式 延迟 循环次数
@keyframes change {
from{
width: 100px;
height: 100px;
background-color: red;
}
to{
width: 200px;
height: 200px;
background-color: pink;
}
<!--
@keyframes用来定义关键帧
关键帧的起点是0%（from） 结束点是100%（to）
当from和to不是默认样式的话，动画开始后会直接跳到0%的样式，动画结束后，会跳到动画默认样式
如果百分之0和百分之百不写，那么默认效果就是百分之0和百分百
-->
动画的暂停和播放
animation-play-state 属性
- paused：规定动画已暂停
- running：规定动画正在播放
动画开始和结束状态
animation-fill-mode 属性
- none：使用得动画不会对动画等待和动画完成的元素样式产生改变
- forwards：告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式
- backwards ：那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式
- both：在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式
元素变换（transform）2D
-
可以分为旋转（rotate） 移动（translate）缩放（scale）扭曲（skew）
-
rotate沿着中心旋转 ，正值为顺时针，负值为逆时针
rotateX 沿着x轴旋转，正值元素的上侧，向屏幕内旋转
rotateY 沿着y轴旋转，正值元素的左侧，向屏幕外旋转
transform:rotatey(30deg)
-
scaleX水平方向缩放 scaleYf垂直方向缩放，缩放的值是比例。
scale则是合写 ，水平垂直一起缩放。
transform:scale(倍数)
-
translate移动，translateX水平移动 ，translatey垂直移动
合写translate：后跟两个值，一个代表X，一个代表Y; 只有一个值的话代表X.
transform:translate(x y)
-
skew(deg)扭曲 ，skewX水平方向扭曲，skewY垂直方向扭曲
合写skew：后跟两个值，一个代表X，一个代表Y; 只有一个值的话代表X.
transform:skew( deg deg)
弹性盒子（flex布局）
- 开启：display:flex;(safari兼容)-webkit-flex
- 开启flex的元素自身不会受影响，子元素的浮动会失效，vertical-align也会失效
- flex盒子只能影响子元素，不会影响子元素以下的元素，如要的话可以给子元素再设。
- 开启后父级叫伸缩容器，子元素叫伸缩项目
- 默认情况下从左往右排，横向主轴，竖向叫侧轴（交叉轴），开始是主轴开始，结束是主轴结束。
开启后特性：
项目沿着主轴从左至右依次排列（可以改变主轴方向，从而改变元素的排列方向）
项目没有设置高度的话则高度撑满容器
当项目宽度超出总宽度，并不会超出或换行，而是按比例压缩项目。
不会影响当前元素的浮动和定位。
flex-direction:主轴布局方向（按方向元素依次排）
row:默认 主轴方向从左至右。
row-reverse:主轴方向从右至左。
column: 主轴方向从上至下，侧轴主轴交换位置（元素未设宽的话，侧轴充满）
column-reverse:主轴方向从下至上，侧轴主轴交换位置，侧轴依然从左往右。
justify-content：主轴富裕空间管理
flex-start：项目排列在主轴开始位置
flex-end:项目排列在主轴结束位置（和反转主轴不一样 ，这个是整体移动到结束位置）
center：项目居中
space-between：项目包含富裕空间
space-around：富裕空间包含项目
space-evenly：富裕空间包含项目，所有项目左右富裕空间一致。
align-items：侧轴富裕空间管理
flex-start：元素在侧轴的开始位置
flex-end：元素在侧轴的结束位置
center：元素在侧轴居中
baseline：元素以基线对齐
stretch：默认，项目撑满侧轴（如果设置了宽高，以宽高为优先）
flex-grow：富裕空间分配（设置给项目的）后接数字
flex-wrap:项目换行（超出才换）
nowrap:不换行
wrap:换行（无论主轴方向如何，超出容器的宽度或高度都会换行）
wrap-reverse:换行并且反转侧轴。（从左至右变从右到左排；从上至下变从下至上排）
超出换行后每行都有自己独立的主轴侧轴。操作都在自己的轴里进行。
align-content：控制项目换行后，整体的侧轴对齐方式。(必须有换行才能生效)
意思是换行元素跳出自己独立的轴空间，整体打包 相对于整个容器的侧轴的对齐方式。
flex-end:结束位置
flex-start:开始位置
center：居中位置
space-between：项目包含侧轴富裕空间
space-around：侧轴富裕空间包含项目
space-evenly：侧轴富裕空间包含项目，富裕空间一致。
align-self：项目自身侧轴的富裕空间（设置给项目）不需要换行也可以
每一个项目控制自身的侧轴
align-self: flex-start;
align-self: flex-end;
align-self: center;
order排序：设置给项目 后接数字
正order > 无order（order为0）> 负order
order越大越往后排，越小越往前排，可以用来改变顺序。
flex-basis: 0 子元素的基准值 设置给项目
定义了在分配剩余空间之前，项目所占据主轴的位置多少。
一般和flex-grow 搭配使用，使项目等高等宽（等高等宽视主轴方向而定）
flex-shrink：项目的收缩率 设置给项目 超出压缩分配
默认为1
flex属性合写 设置给项目
flex: flex-grow flex-shrink flex-basis的合写
默认值： 1 1 auto
flex-flow属性合写 设给容器
flex-flow: flex-wrap flex-direction
低版本IE兼容
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
