HTML5
HTML标准的最新升级版本
HTML5的新变化
文档结构
-
简化了字符集
<!DOCTYPE html>
-
简化了文档声明
<meta charset="UTF-8">
语法变化(了解)
-
可以完全省略某些标签
- html,head,body
- thead tfoot tbody
-
可以省略某些标签的结束标签
- li,p…
-
可以省略布尔值属性的属性值
新特性(掌握)
- 新增了语义化标签
- 新增了全局属性
- 新增了表单元素和表单相关属性
- 新增了API(应用程序接口)
- canvas绘图
- 本地存储
- 离线存储
- 地理信息
- 拖拽
- 音频、视频
废除了部分标签(了解)
以下的 HTML 4.01 标签在HTML5中已经被删除:
● <acronym> 定义只取首字母缩写
● <applet> 规定 Java applet 的文件名
● <basefont> 定义文档中所有文本的默认颜色、大小和字体
● <big> 呈现大号字体效果
● <center> 标签控制文本的居中显示
● <dir> <dir> 标签定义目录列表
● <font> 标签规定文本的字体、字体尺寸、字体颜色
● <frame> 标签定义 frameset 中的一个特定的窗口(框架)
● <frameset> frameset 元素可定义一个框架集
● <noframes> noframes标签向浏览器显示无法处理框架的提示文本
● <strike> strike 标签可定义加删除线文本定义。
由于H5是向前兼容的,所以在H5中使用这些标签也不会报错或出现异常,但这些元素在H5中已不被W3C标准推荐,建议尽量不要使用。
HTML5语义化元素(熟练掌握)
header
<header>整个页面或某个区块的头部——(页面的头部,一般带有logo,搜索框)</header>
footer
<footer>整个页面或某个区块的底部——(页面的底部,一般带有版权、友情链接)</footer>
nav
<nav>表示页面中重要的链接组(整个页面的主导航、页内导航、分页)</nav>
article
<article>表示页面中独立完整的内容块(一篇文章、博文、一条完整的评论、回复、插件)</article>
aside
<aside>侧边栏(包含与主体内容相关的附属信息)——(如相关推荐等)</aside>
section
<section>小节、区块,通常包含一个标题(章节)</section>
figure
<figure>
表示被主体内容所引用的相对独立完整的内容(图片、图表、代码块)
<figcaption>figure的标题</figcaption>
</figure>
mark
<mark>标记文本</mark>
time
<time>包含日期、时间</time>
<time datetime="2020-05-01">五一劳动节</time>
注:ie8及以下不支持
兼容
方法一
通过js中的createElement方法创建元素,然后将成块的元素display:block
<script>
//1. 创建元素,默认是行内
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
document.createElement("aside");
</script>
<style>
header,footer,nav,article,aside,section{
/* 2.将元素显示为块 */
display: block;
height:100px;
margin:10px;
background-color: pink;
}
</style>
方法二(掌握)
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
https://www.paulirish.com/2011/the-history-of-the-html5-shiv/
新增的表单元素
新增的input类型
-
url输入域
移动端配合.com键盘的变化
-
email输入域
移动端配合@键盘的变化
以上两个提交时会进行格式验证,输入不合法,弹出提示无法提交
-
tel电话号码输入域
移动端配合数字键盘的变化
-
search搜索域
-
number数值输入域
- value=“”初始值
- min="" 最小值
- max="" 最大值
- step="" 合法的输入间隔(步长)
-
range 一定范围内的数值输入域(滑块)
-
属性同上
-
color颜色输入域
<input type="search"> <input type="tel"> <form action=""> <!-- <input type="url" value="url" name="myurl"> --> <input type="email" value="email"> <input type="submit" value="提交"> </form> <input type="number" value="2" min="2" max="6" step="2"> <input type="range" value="4" min="0" max="10" step="2"> <input type="color">
datalist标签——数据选项列表
通过list属性="它的id名"与输入类型的表单绑定
为输入类型的表单,在获取焦点时提供一个选项列表
<input type="text" list="kc">
<datalist id="kc">
<option value="html">超文本标记语言</option>
<option value="css">层叠样式表</option>
<option value="js">脚本语言</option>
</datalist>
新增的表单相关属性
-
min,max,step
适用于number, range类型
<input type="number" value="2" min="2" max="6" step="2">
-
list
list="datalist的id"为元素提供选项列表
-
placeholder=“输入提示” 输入提示占位符
<input type="text" placeholder="请输入手机号码">
-
required 不能为空
提交时验证,输入不能为空,否则无法提交,弹出提示
form action="">
<input type="text" name="usname" required>
<input type="submit" value="提交">
</form>
-
multiple允许多值
适用于file文件域,email域
- file文件域,默认只能选择一个文件,通过它实现多选
- email域默认只能输入一个邮箱,通过它可以填写多个
<form action=""> <!-- <input type="file" name="usname" multiple> --> <input type="email" name="myemail" multiple> <input type="submit" value="提交"> </form>
-
pattern=”“ 模式验证
提交时进行模式验证,输入不合法弹出提示无法提交
例:[0-9]只能输入0–9的数字 / [a-z]
<form action="">
<input type="text" name="mytext" pattern="[0-9]">
<input type="submit" value="提交">
</form>
-
autofocus 自动获取焦点
指定元素在页面加载完成后,处于获取焦点状态
<input type="text" name="mytext"> <input type="text" name="mytext2" autofocus>
-
autocomplete="on"自动完成
根据提交过的值,为用户提供选项列表,实现通过选择自动填充输入框。
- on 开启自动完成
- off 关闭自动完成
-
form = “form标签的id” 规定表单元素所从属的form(表单区域)
<form action="" id="form1"> <input type="text" name="myname"> </form> <input type="reset" value="重置" form="form1">
时间日期选择器(input类型)
date
选择年、月、日
<input type="date" value="2019-11-17">
month
选择年、月
<input type="month" value="2019-08">
week
选择年、周
<input type="week" value="2019-W03">
time
选择小时、分钟
<input type="time" value="09:00">
本地时间
选择本地,年、月、日、小时、分钟
<input type="datetime-local" value="2019-12-30T12:30">
音频
标签与属性
<audio src="" controls></audio>
- src="" 音频资源地址
- controls 显示播放控件
- muted 静音
- loop 循环播放
- autoplay 自动播放
兼容
ie9以下不支持
允许在开始和结束标签之间插入内容,用于低版本浏览器显示
支持的音频格式
- MP3 audio/mpeg 支持的浏览器: Chrome、Firefox、 Opera 25+、IE9+、Safari5+
- Ogg audio/ogg 支持的浏览器: Chrome、Firefox、Opera10+
- Wav audio/wav 支持的浏览器: chrome、Firefox、Opera10+、Safari5+
source
- 空元素
- src=""资源地址 type=“文件的MIME类型”
- 允许通过它指定多个资源地址,浏览器会播放第一个可识别的格式
<audio controls>
<source src="audio/biubiubiu.ogg" type="audio/ogg"/>
<source src="audio/hanmai.mp3" type="audio/mpeg"/>
</audio>
视频
标签与属性
<video src="video/movie.mp4" controls></video>
- src=“资源地址”
- controls 显示播放控件
- loop循环播放
- muted 静音
- autoplay 自动播放
- width=”100“宽度
- height=”“ 高度
- poster=“图片地址” 封面
<video src="video/movie.mp4" controls poster="video/pic.png"></video>
兼容
ie9以下不支持
允许在开始和结束标签之间插入内容,用于低版本浏览器显示
支持的视频格式
Ogg:
支持的浏览器:Firefox、Chrome、Opera10.6+
MP4:
支持的浏览器: Safari、Chrome、IE9+、Firefox
WebM:
支持的浏览器:Firefox、Chrome、Opera10.6+
source
- 空元素
- src=""资源地址 type=“文件的MIME类型”
- 允许通过它指定多个资源地址,浏览器会播放第一个可识别的格式
<video controls>
<source src="video/butterfly.ogg" type="video/ogg">
<source src="video/movie.mp4" type="video/mp4">
</video>
CSS3
CSS3是CSS(层叠样式表)技术的升级版本,最新的 CSS 标准
CSS3按模块化进行了全新设计,主要的【 CSS3 模块】:
包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
浏览器的私有前缀(熟记)
CSS3的浏览器私有属性前缀是一些浏览器生产商经常使用的一种方式,用于对新属性的提前支持,
暗示该CSS属性或规则尚未成为W3C标准的一部分。
当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候我们可以去掉前缀。
内核 私有前缀 浏览器
Gecko内核 -moz- 火狐浏览器
WebKit内核 -webkit- Chrome、Safari
Presto内核 -o- Opera(欧朋)
Trident内核 -ms- IE
新增的选择器(常用-熟记)
属性选择器
旧:
- [属性名称] 选择拥有指定属性名称的所有元素
- [属性名称=”属性值val“] 选择拥有指定属性名称且属性值【等于value]的所有元素
新:
- [属性名称^=”属性值val“] 选择拥有指定属性名称且属性值【以value开头】的所有元素
- [属性名称*=”属性值val“] 选择拥有指定属性名称且属性值【包含value】的所有元素
- [属性名称$=”属性值val“] 选择拥有指定属性名称且属性值【以value结束l】的所有元素
注:特殊情况[属性名称=”属性值val“] 也会被选中
ie7+支持
伪类选择器
旧:
-
:link,:hover,:visited,:active
-
:focus
-
E:first-child{ }选择父元素中【正数第一个】【子元素】E
ie7及以上
新:
child
- E:last-child{ }选择父元素中【倒数第1个】子元素E
- Enth-child(n){ }选择父元素中 【正数第n个】子元素E
- 数字 第几个
- 关键字 even偶数 odd 奇数
- 基础表达式:2n \ 3n \ 2n+2 \ 3n-1 等
- E:nth-last-child(n){ }选择父元素中【倒数第n个】子元素E
- 注:IE8及以下不支持
of-type
-
E:first-of-type{} 选择父元素中 【类型】为E的【正数第1个】子元素
-
E:last-of-type{} 选择父元素中 【类型】为E的【倒数第1个】子元素
-
E:nth-of-type(n){} 选择父元素中 【类型】为E的【正数第n个】子元素
- 数字 第几个
- 关键字 even偶数 odd 奇数
- 基础表达式:2n \ 3n \ 2n+2 \ 3n-1 等
-
E:nth-last-of-type(n){} 选择父元素中 【类型】为E的【倒数第n个】子元素
注:IE8及以下不支持
区别
- child这一组先【强调结构】关系(先确定是不是父元素中第几个子元素)
- of-type这一组,【先强调类型】(在类型中查找某一个)
元素状态伪类
- E:checked{} 选择处于【选中状态】的E元素
- 适用于checkbox,radio
- E:disabled{} 选择处于【禁用状态】的E元素
- E:enabled{} 选择处于【可用状态】的E元素
- 适用于表单元素
伪元素选择器
-
E::before{ } 在元素内部的最开始位置生成内容 【开始标签之后】
-
E::after{ } 在元素内部的最后位置生成内容【结束标签之前】
-
默认以【行内】形式存在
-
注:
- 单冒号 【ie8及以上】
- 双冒号 (伪元素使用双冒号,伪类使用单冒号) 【 ie8及以下不支持】
【了解】
伪元素(假的元素,不是元素的元素)——在源码html结构里,没有具体标签结构,但可以作为元素使用或定义样式
伪类(假的类,不是类的类) — 不是通过class定义的,但是可以借助元素状态、结构关系等达到规定样式的目的
- E:placeholder 定义输入提示占位符的样式(基础的字体样式)
input::placeholder{
color:red;
}
边框属性(熟记)
box-shadow盒子阴影
- 外阴影
- 内阴影
- 增强值
- 多重阴影【逗号】——书写顺序越靠前,显示越靠上
border-radius 圆角边框
- 简写
- 1-4 空格
- 1-4/1-4 水平/垂直半径
- 规律
- 单个方向定义
- 取值
- px
- 百分比
CSS3文字属性
text-shadow文字阴影
- 水平位置 垂直位置 阴影的模糊值 阴影的颜色 【空格】隔开
- 位置(正值 向右向下,负值 向左向上)
- 多重阴影【逗号】隔开——书写顺序越靠前,显示越靠上
.box:nth-child(3){
color:pink;
text-shadow:-10px -10px red;
}
.box:nth-child(4){
color:pink;
text-shadow:10px 10px red,20px 20px blue;
}
css3背景属性
background-size背景图像大小 (熟记)
-
两个值 —— 宽度 高度
-
1个值 —— 另一个值auto(按照原比例等比缩放)
-
取值
- px
- 百分比(默认相对于padding+内容区域的大小计算)
- auto 自动
- 关键字:
- cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
- contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
background-clip背景裁剪
可以用来控制背景绘制区域
- padding-box 绘制至padding盒区域
- border-box 绘制至边框盒区域 (默认值)
- content-box 绘制至内容盒区域
background-origin背景起始位置
控制背景图像的定位参考原点
- padding-box 背景的起始位置在【内边距盒】左上角 【默认值 】
- border-box 背景的起始位置在【边框盒】左上角
- content-box 背景的起始位置在【内容盒】左上角
多背景
- 多个背景图像【逗号】隔开
- 书写顺序越靠前,显示越靠上
.box:nth-child(1){
/* background:url("pic/3.jpg") no-repeat,url("pic/4.jpg") no-repeat right bottom; */
background-image: url("pic/3.jpg"),url("pic/4.jpg");
background-repeat:no-repeat,repeat;
background-position:left top,right bottom;
}