【前端基础篇】HTML5 + CSS3 入门知识

HTML5概述

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation）

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。

从2010年开始，HTML5和CSS3就一直是互联网技术中最受关注的两个话题。2010年，MIX10大会上微软的工程师在介绍ie9时，从前端技术的角度把互联网的发展分为三个阶段：

第一阶段是以web 1.0为主的网络阶段，前端主流技术是HTML 和CSS。
第二阶段是web 2.0 的ajax应用阶段，热门技术是javascript/DOM/异步数据请求。
第三阶段是html5 + css3 阶段，这两者相辅相成，使互联网又进入一个崭新的时代。

小贴士：
HTML5是W3C与WHATWG合作的结果,WHATWG指Web Hypertext Application Technology [tek’nɒlədʒɪ] Working Group。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。它以HTML4为基础，对HTML4进行了大量的修改。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
 个人博客地址

HTML5新增特性概况介绍

HTML5 中新增一些有趣的特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新增了一些语义化标签，比如 article(文章，例如一篇博客)、footer、header、nav、section(区域划分)
新的表单控件，比如date、time、email、url、search等等
新的表单属性，比如placeholder requared等等
新增布尔值属性(简写)，如：reversed autofocus multiple属性值可以省略

1.1 HTML新特性

HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：

它是一个新的 HTML 语言版本包含了新的元素，属性和行为
同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术
- 语义：能够让你更恰当地描述你的内容是什么。
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
- 样式设计: 让作者们来创作更加复杂的主题吧！

HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。
我们之前学习的是HTML4.01（XHTML1.0）。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

HTML5语法规则（更加人性化）

DOCTYPE及字符编码
大小写都可以
布尔值 checked reversed
省略引号 align=center
可以进行省略的标签
- 不允许写结束符的标签(即单标签)：
  hr、img、input、link、meta、area、basebr col command embed kegen param source track wbr
- 可以省略结束符的标签：
  li dt dd p rt optgroup option colgroup thead tbody tr td th
- 可以完全省略的标签：
  html head body colgroup tbody

HTML5 <!DOCTYPE>及基本结构

<!DOCTYPE html>
	<html lang="zh-CH">
	<html>
		<head>
			<meta charset="utf-8">
			<title>文档标题</title>
		</head>
			 
		<body>
			文档内容......
		</body>
</html>

小贴士：
1. <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
2. 对于中文网页需要使用声明编码，否则会出现乱码。
3. 给文档指定语言

新增结构化语义

语义就是有意义的标签(结构标签（块状元素）— 可以理解为有意义的div)：主要负责web上下文结构的定义，确保html文档的完整性
<header> 定义一个页面或者一个区域的头部
<nav> 定义导航链接部分
<section> 定义文档中的节（section、区段）
<footer> 定义一个页面或者一个区域的底部
<article> 定义页面独立的内容区域

可能的 article 实例：论坛帖子、报纸文章、博客条目、用户评论

非结构化语义标签

主要完成web页面区域的划分，确保内容的有效分隔
<aside> 定义页面的侧边栏内容
<hgroup> 用于对网页或区段（section）的标题进行组合
<figure> 规定独立的流内容（图像、图表、照片、代码等等）
<figcaption> 定义

元素的标题

行内语义性标签

主要完成web页面具体内容的引用和表述，是丰富内容展示的基础

progress 用于表示进度条，可以用来显示下载的进度，属性有max(定义需要完成的值)和value(定义进程的当前值)。举例：<progress max="100" value="50">调整</progress>
audio 定义音频，比如音乐或其他音频流
video 定义视频，比如电影片段或其他视频流(考虑浏览器兼容性)

注意：当前video元素支持三种视频格式：
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(.mp4) --> type = video/mp4
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件(.mkv) --> type = video/webm
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件(.ogg) --> type = video/ogg

新增表单相关内容(input元素)

email
tel
search
number <input type = "number" min = "" max = "" step = "" />
range <input type = "range" min= "" max = ""/>
date
month
time
datetime-local
color
url：定义用于输入 URL 的字段格式：http:// 或 https://

新增的input属性

autofocus属性：自动获取焦点
placeholder属性：文本提示信息
required属性：必需添写

其它新增h5标签元素(以下涉及到JS知识，这里作为拓展，不做过多讲解)

新增绘图：canvas
HTML5元素用于图形的绘制，由于此标签仅仅是图形容器，所以必须通过脚本 (通常是JavaScript)来完成图形的绘制

<body>
	//1. 创建画布容器
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<body>
<script>
	//2. 取到canvas 元素:
	var c=document.getElementById("myCanvas");
	//3. 创建 context 对象，取得上下文；getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	var ctx=c.getContext("2d");
	//4. fillStyle属性设置填充的样式:可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
	//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
	//5. 下面的两行代码绘制一个红色的矩形：
	ctx.fillStyle="#FF0000";
	ctx.fillRect(0,0,150,75);
</script>

新增本地存储（离线存储、web存储、localstorage、sessionstroge）
新增拖拽功能API
支持实现响应式布局

CSS3选择器

基本选择器

* 通配(全局)选择器
E 元素(标签)选择器
#id ID选择器
class 类选择器
selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并

层次(关系)选择器

E F 后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

动态伪类选择器

E:link 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:hover 用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:active 用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

UI 元素状态伪类选择器（跟form表单相关的伪类）

E:checked 选中状态伪类选择器匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器匹配所有禁用的表单元素(配合disabled使用)

结构伪类选择器

E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

否定伪类(了解)

E:not(F) 匹配所有除元素F外的E元素
例子:匹配所有除p标签外的所有标签
```
h1:not(p) {
	color: #ff0000;
}
```

属性(attribute)选择器

E[att]{att:value;} 匹配含有att属性的E元素
E[att=value] 匹配属性att值为value的E元素
E[att~=value] 匹配属性att值包含value的E元素
E[att|=value] 匹配属性att值以value开头的E元素
E[att^=value] 匹配属性att值以value开头的E元素
E[att$=value] 匹配属性att值以value结尾的E元素

伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的

:first-line – 为某个元素的第一行文字使用样式
:first-letter – 为某个元素中的文字的首字母或第一个字使用样式
:before – 在某个元素之前插入一些内容
:after – 在某个元素之后插入一些内容

CSS3边框、背景、渐变、文字特效

边框属性

border-color:设置边框的颜色
border-radius:设置边框圆角

阴影

box-shadow:向框添加一个或多个阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

小贴士：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、

背景属性

background-size:规定背景图片的尺寸
- 属性值:像素值:设置背景图像的高度和宽度;第一个值设置宽度，第二个值设置高度;如果只设置一个值，则第二个值会被设置为 “auto”
- 百分比:以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度，第二个值设置高度,如果只设置一个值，则第二个值会被设置为 “auto”
- cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
- contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
Multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里;
多个图片url之间使用逗号隔开即可；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。CSS3中在容器的多层背景，各子属性与逗号来分隔值

渐变(Gradients)属性(IE9及之前的版本不支持渐变)

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡；以前，你必须使用图像来实现这些效果。但是，通过使用CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变(Linear Gradients）
想要创建一个线性渐变，你必须至少定义两种颜色结点(即你想要呈现平稳过渡的颜色)。同时，你也可以设置一个起点和一个方向(或一个角度)
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

小贴士：direction的值的写法为 to bottom、to top、to right、to left、to bottom right等等

径向渐变（Radial Gradients）- 由它们的中心定义
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：background: radial-gradient(center, shape size, start-color, ..., last-color);

举例（-webkit等兼容性属性此处省略）：

颜色结点均匀分布（默认情况下） background: radial-gradient(red, green, blue);
颜色结点不均匀分布 background: radial-gradient(red 5%, green 15%, blue 60%);
设置形状(默认椭圆Ellipse) background: radial-gradient(red, yellow, green);
设置圆形(circle) background: radial-gradient(circle, red, yellow, green);

文字阴影

text-shadow 规定添加到文本的阴影效果
说明：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
语法：text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

颜色属性(透明度)

opacity [ə(ʊ)'pæsɪtɪ]属性：规定元素的不透明级别;属性值value规定不透明度,从 0.0 （完全透明）到 1.0（完全不透明）
rgba：设置颜色的透明度
RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，
RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。
举例：background-color: rgba(0,0,0,0.5); == 设置alpha(透明度)值为0.5的黑色背景