超文本标签语言: 用文本来表示带有特殊标签的语言
对html5语义化标签的理解
标签具有语义的意义
有利更好呈现代码结构
便于SEO: Search Engine Optimization 搜索引擎优化
提升用户体验: [eg: label标签: 获取光标焦点]
便于团队开发维护: 更具可读性
方便其他设备解析 --- [可省略]
H5在客户端储存数据的新方法
localStorage -- 没有时间限制的数据储存
sessionStorage -- 针对一个session的数据储存,用户关闭浏览器窗口后,数据被删除
H5的表单input
-
action= " "表单跳转 -
method= " "请求方式扫描二维码关注公众号，回复： 6576879 查看本文章
-
name= " "name属性 ===> 设置了 name 属性的表单元素才能在提交表单时传递它们的值
类型 实例 文本类 Text[文本], Url[网络地址], Password[密码], Email[邮箱地址] 操作类 Checkbox[复选框], Radio[单选框], File[文件], Number[数值], Range[百分比滑动条] 功能类 Button[按钮], Image[图片提交按钮], Submit[文字提交按钮], Reset[重置表单] Date类 Date[年月日控件], Datetime[年月日 + 时间控件], ... 特殊类 Hidden[隐藏信息] TO扩展:
文本类属性:
placeholder占位符,作为提示信息
autofocus刷新后自动获取焦点
autocomplete自动记录输入信息
首先要提交按钮
form表单要有
name属性
required不能为空,必填项Url 和 E-mail, 在H5中会在提交表单的时候检测格式是否正确
操作类:
input标签结合label标签
非跨度:
<label><input></input></label>跨度:
<label for="input_id"></label> <input id="input_id"></input>File:
上传多个文件
multipleButton:
Button类型只能在value中定义按钮上显示的提示文字
Image类型只能在src中链接图片
多媒体标签
audio 音频标签
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
您的浏览器不支持播放此音频
</audio>
video 视频标签
<!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 -->
<video muted="muted" loop="loop" poster="media/pig.jpg" controls>
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.ogg" type="video/ogg" />
您的浏览器版本太低或不支持播放此视频
</video>
选择器
属性选择器
-> 1.直接写属性
-> 2.属性等于值
input[type="search"] {
color: pink;
}
-> 3. 以某个值开头的 属性值
div[class^="icon"] {
color: red;
}
-> 4. 以某个值结尾的
div[class$="icon"] {
color: green;
}
-> 5. 可以在任意位置的
div[class*="icon"] {
color: blue;
}
结构伪类选择器
-> 1. :nth-child(n) 第几个，不论类别 eg: div下的第几个标签
-> 2. :nth-of-type(n) 哪一类的第几个，有类别 eg: ul下的第几个li标签,或第几个p标签
-> n可以为公式
-> odd 奇数
-> even 偶数
伪元素选择器
-> 1. ::before 在...之前，
-> 2. ::after 在...之后，
伪元素选择器必须要写
-> 1. content=“”；
-> 2. display：block；
CSS3
CSS3是CSS（层叠样式表）技术的升级版本,控制网页的样式和布局
盒子模型
背景边框
多栏布局
列表模块
...等等模块
新增特效:
圆角
文字阴影与块阴影
RGBA实现透明效果
渐变效果
文字图像变形处理
多栏布局
媒体查询
...等等特效
优势:
减少开发维护成本
提高页面性能
变形转换 transform
2D转换
位移translate
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果
旋转rotate
transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
transform-origin:top left; 左上角 和 transform-origin：0 0;相同
transform-origin:50px 50px; 距离左上角 50px 50px 的位置
transform-origin：0; 只写一个值的时候 第二个值默认为 50%;
-> 1.可以跟方位名词 transform-origin: left bottom;
-> 2. 默认的是 50% 50% 等价于 center center
-> 3. 可以是px 像素
图片旋转例子：
img {
width: 150px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
-> 旋转中心点是什么要清楚 transform-origin
缩放scale
给元素添加转换属性 transform
转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)
括号内可以写小数点
3D转换
只是比2D转换多了个Z轴
视距 perspertive 远小近大
设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px
动态改变物体的 translateZ 即可观察效果
转换样式 transform-style
控制子元素是否开启3维立体环境
transform-style: flat;平面模式 - 不开启3维立体环境
transform-style: preserve-3d;3维立体环境
动画 animation
/* 需求: 我们想页面一打开，一个盒子就从左边走到右边 */
1. 声明动画
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
div {
width: 200px;
height: 200px;
/* 2. 调用动画 */
/* 2.1 动画名称 */
animation-name: move;
/* 2.2 持续时间 */
animation-duration: 2s;
动画名称要对应，
至少要有2个属性值，即，动画名称 持续时间 其他可省略按需求
animation: name duration timing-function delay iteration-count direction fill-mode;
【1. 动画名 2. 持续时间 3. 速度曲线 4.延迟时间 5.循环次数 6.循环方向 7.动画等待或结束的状态】
**其中第3个,速度曲线 可为steps 步数**
animation: move 2s linear 0s 1 alternate forwards;
-> 与上面属性值对应属性，
媒体查询
根据不同的媒体类型定制不同的样式规则
CSS3媒体类型
all 用于所有多媒体类型的设备
print 用于打印机
screen 用于电脑屏幕, 平板,智能手机
speech 用于屏幕阅读器
@media screen and (min-width: 480px) {
body {
}
}
-> 当屏幕小于480px时,背景颜色发生改变
CSS3 兼容处理
给浏览器添加私有前缀:
Chrome(谷歌浏览器): -webkit-
Safan(苹果浏览器): -webkit-
Firefox(火狐浏览器): -moz-
IE(IE浏览器): -ms-
Opera(欧朋浏览器): -o-