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="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
Ｅnth-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;
}

HTML5语义化元素、css3相关知识点

HTML5

HTML5的新变化

文档结构

语法变化（了解）

新特性（掌握）

废除了部分标签（了解）

HTML5语义化元素（熟练掌握）

header

footer

nav

article

aside

section

figure

mark

time

兼容

方法一

方法二（掌握）

新增的表单元素

新增的input类型

datalist标签——数据选项列表

新增的表单相关属性

时间日期选择器（input类型）

date

month

week

time

本地时间

音频

标签与属性

兼容

支持的音频格式

source

视频

标签与属性

兼容

支持的视频格式

source

CSS3

浏览器的私有前缀（熟记）

新增的选择器（常用-熟记）

属性选择器

旧：

新：

伪类选择器

旧：

新：

child

of-type

区别

元素状态伪类

伪元素选择器

边框属性（熟记）

CSS3文字属性

css3背景属性

background-size背景图像大小 （熟记）

background-clip背景裁剪

background-origin背景起始位置

多背景

猜你喜欢

background-size背景图像大小（熟记）