前言
本章节主要对HTML5的新语法和CSS3的内容进行学习总结。
HTML5 语法
DOCTYPE声明
DOCTYPE声明不区分大小写
元数据
在<head>元素中，可以包含各种元数据，例如页面标题、字符编码声明、CSS样式表链接、JavaScript脚本等。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8"> <!-- 字符编码声明 -->
<link rel="stylesheet" href="styles.css"> <!-- 外部CSS样式表链接 -->
<script src="script.js"></script> <!-- 外部JavaScript脚本链接 -->
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
可省略标记的元素
- 不允许写结束标记的元素：
br、col、embed、hr、img、link、meta - 可以省略结束标记的元素：
li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th - 可以省略全部标记的元素：
html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号，也可以使用单引号。
新增语义化标签
引入许多新的语义化元素，用于更好地描述页面内容。<header>,<nav>,<main>,<section>,<article>,<footer>等元素，它们使得网页结构更加清晰。
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<!-- 页面头部内容 -->
</header>
<nav>
<!-- 导航菜单 -->
</nav>
<main>
<section>
<!-- 主要内容区域分块 -->
<article>
<!-- 独立的文章内容 -->
</article>
</section>
</main>
<footer>
<!-- 页面底部内容 -->
</footer>
</body>
</html>
video和audio的应用
<video>和<audio>元素用于嵌入视频和音频内容到网页中。这使得在网页上播放视频和音频变得非常简单，而无需依赖插件或其他外部工具。
使用<video>元素嵌入视频：
<!DOCTYPE html>
<html>
<head>
<title>视频示例</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<!-- 提供多个<source>元素，以便在不同浏览器中选择合适的视频格式 -->
Your browser does not support the video tag.
</video>
</body>
</html>
解释：
<video>元素用于嵌入视频。width和height属性用于设置视频播放器的宽度和高度（以像素为单位）。controls属性用于显示视频播放器的控件，如播放按钮、音量控制等。<source>元素用于定义视频文件的URL和类型。在示例中，提供了两个视频文件：example.mp4和example.webm，分别对应不同的视频格式（MP4和WebM）。浏览器将选择支持的格式进行播放。- 如果浏览器不支持
<video>元素，将显示"Your browser does not support the video tag."消息。
使用<audio>元素嵌入音频：
<!DOCTYPE html>
<html>
<head>
<title>音频示例</title>
</head>
<body>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
<!-- 提供多个<source>元素，以便在不同浏览器中选择合适的音频格式 -->
Your browser does not support the audio tag.
</audio>
</body>
</html>
解释：
<audio>元素用于嵌入音频。controls属性用于显示音频播放器的控件，如播放按钮、音量控制等。<source>元素用于定义音频文件的URL和类型。在示例中，提供了两个音频文件：example.mp3和example.ogg，分别对应不同的音频格式（MP3和Ogg）。浏览器将选择支持的格式进行播放。- 如果浏览器不支持
<audio>元素，将显示"Your browser does not support the audio tag."消息。
注意：为了最大程度地兼容各种浏览器，通常建议提供多个格式的视频和音频文件。这样，浏览器可以选择支持的格式进行播放。
新增input表单、表单属性
新的<input>元素：
日期输入（Date Input）： 用于选择日期。
<input type="date" name="birthdate">
时间输入（Time Input）： 用于选择时间。
<input type="time" name="meetingTime">
日期时间输入（Datetime Input）： 用于选择日期和时间（已弃用，不推荐使用，请使用datetime-local代替）。
<input type="datetime" name="eventDateTime">
本地日期时间输入（Local Datetime Input）： 用于选择本地日期和时间。
<input type="datetime-local" name="eventDateTimeLocal">
周选择器（Week Picker）： 用于选择一年中的某一周。
<input type="week" name="selectedWeek">
月份选择器（Month Picker）： 用于选择一年中的某个月份。
<input type="month" name="selectedMonth">
颜色选择器（Color Picker）： 用于选择颜色值。
<input type="color" name="selectedColor">
新的<input>属性：
autocomplete： 用于指示浏览器是否应启用表单字段的自动完成功能。
<input type="text" name="username" autocomplete="on">
autofocus： 用于指示在加载页面时自动将焦点设置到表单字段。
<input type="text" name="search" autofocus>
multiple： 用于指示允许选择多个文件（仅适用于文件上传输入）。
<input type="file" name="photos" multiple>
form： 用于将输入字段与其所属的表单相关联。通过将<input>元素的form属性设置为所属表单的ID，可以将输入字段放在表单的任何位置。
<form id="myForm">
<!-- ... 其他表单元素 ... -->
</form>
<input type="text" name="username" form="myForm">
novalidate： 用于禁用表单的默认浏览器验证，可以自定义表单验证逻辑。
<form novalidate>
<!-- 表单内容 -->
</form>
CSS3选择器
渐进增强和优雅降级
渐进增强和优雅降级是两种不同的前端开发策略，旨在使网站或应用程序在不同浏览器和设备上获得最佳的用户体验。
- 渐进增强：
渐进增强是一种从基本功能开始，逐步增强网站或应用程序的方法。首先，开发者创建一个基本的核心功能，确保在所有现代浏览器中都能正常工作。然后，通过逐步添加更复杂的功能和样式来提升用户体验，但这些附加功能并不是网站的必需部分。
渐进增强的思想是尽量确保所有用户都能访问和使用核心功能，而不管他们使用的是老旧的浏览器、低版本的设备还是有残疾的用户。随着用户所用技术的升级，他们可以体验到更多的功能和改进的用户界面。
- 优雅降级：
优雅降级是一种从完整功能开始，逐渐适应旧的或不支持最新技术的浏览器和设备。开发者首先创建一个功能齐全、外观漂亮的网站或应用程序，充分利用现代浏览器和设备的功能。然后，通过逐渐降低功能和适配样式，使得网站在旧的浏览器或不支持最新技术的设备上仍能正常工作。
优雅降级的思想是尽量提供最佳的用户体验，但在面对旧的浏览器或设备时，降低一些功能，确保网站的核心功能仍然可用。
渐进增强更加注重从简单到复杂的逐步增强，而优雅降级更加注重从复杂到简单的逐步适应。
一、层级选择器
-
后代选择器： 选择指定元素的所有后代元素。它使用空格分隔两个选择器，表示第二个选择器是第一个选择器的后代。
/* 后代选择器 */ .box li { background:yellow; } -
子元素选择器： 选择指定元素的直接子元素。它使用
>符号分隔两个选择器，表示第二个选择器是第一个选择器的直接子元素。/* 子代选择器 */ .box > li { border: 1px solid red; } -
相邻兄弟选择器： 选择位于同一父元素下，并紧跟在指定元素后面的元素。它使用
+符号分隔两个选择器。/* 当前元素的后面第一个兄弟 */ .child + li{ background:yellow; } -
一般兄弟选择器： 选择位于同一父元素下，并在指定元素后面的所有元素。它使用
~符号分隔两个选择器。二、属性选择器/* ~ 当前元素的后面所有的亲兄弟 */ .child ~ li { background: yellow; }
二、属性选择器
- 属性存在选择器： 选择拥有指定属性的所有元素，无论属性的值是什么。
/* 选择所有带有 title 属性的元素 */
[title] {
/* 样式 */
}
- 属性值完全匹配选择器： 选择属性值与指定值完全匹配的所有元素。
/* 选择所有 class 属性值为 "important" 的元素 */
[class="important"] {
/* 样式 */
}
- 属性值以指定值开头选择器： 选择属性值以指定值开头的所有元素。
/* 选择所有 href 属性值以 "https://" 开头的链接元素 */
[href^="https://"] {
/* 样式 */
}
- 属性值以指定值结尾选择器： 选择属性值以指定值结尾的所有元素。
/* 选择所有 src 属性值以 ".jpg" 结尾的图片元素 */
[src$=".jpg"] {
/* 样式 */
}
- 属性值包含指定值选择器： 选择属性值包含指定值的所有元素。
/* 选择所有 title 属性值中包含 "info" 的元素 */
[title*="info"] {
/* 样式 */
}
- 属性值包含指定词选择器： 选择属性值包含指定词的所有元素，其中词是以空格分隔的单词。
/* 选择所有 class 属性值包含 "important" 的元素 */
[class~="important"] {
/* 样式 */
}
三、伪类选择器
- 结构性伪类选择器： 根据元素在DOM树中的位置进行选择。
/* 选择第一个 <p> 元素 */
p:first-child {
/* 样式 */
}
/* 选择最后一个 <p> 元素 */
p:last-child {
/* 样式 */
}
/* 选择 <p> 元素的第三个子元素 */
p:nth-child(3) {
/* 样式 */
}
/* 选择偶数位置的 <p> 元素 */
p:nth-child(even) {
/* 样式 */
}
- 目标伪类选择器： 用于选中当前文档中与URL中的锚点相对应的元素。
/* 选择当前页面的目标元素 */
:target {
/* 样式 */
}
- UI元素状态伪类选择器： 用于选择表单元素的不同状态。
/* 选择获得焦点的输入框 */
input:focus {
/* 样式 */
}
/* 选择已输入内容的输入框 */
input:valid {
/* 样式 */
}
/* 选择无效内容的输入框 */
input:invalid {
/* 样式 */
}
- 否定伪类选择器： 用于选择不满足特定条件的元素。
/* 选择所有不是 <p> 元素的其他元素 */
:not(p) {
/* 样式 */
}
- 动态伪类选择器： 用于根据元素的状态或用户行为选择元素。
/* 选择鼠标悬停的元素 */
p:hover {
/* 样式 */
}
/* 选择鼠标按下的元素 */
button:active {
/* 样式 */
}
/* 选择被访问过的链接 */
a:visited {
/* 样式 */
}
/* 选择处于焦点状态的元素 */
input:focus {
/* 样式 */
}
CSS3属性
阴影
阴影效果可以让元素在页面上呈现出立体感，使得元素看起来浮现在背景之上或突出显示。
- box-shadow：
box-shadow属性用于在元素周围添加一个或多个阴影。它可以设置阴影的水平偏移量、垂直偏移量、模糊半径、扩展半径和阴影颜色。
/* 创建一个水平偏移为2px，垂直偏移为2px，模糊半径为4px，颜色为黑色的阴影 */
box-shadow: 2px 2px 4px black;
- text-shadow：
text-shadow属性用于在文本周围添加一个或多个阴影。它可以设置阴影的水平偏移量、垂直偏移量、模糊半径和阴影颜色。
/* 创建一个水平偏移为1px，垂直偏移为1px，模糊半径为2px，颜色为红色的文本阴影 */
text-shadow: 1px 1px 2px red;
- inset：
inset关键字用于指定阴影在元素内部而不是外部。将inset添加到box-shadow属性中，可以创建内阴影效果。
/* 创建一个内阴影，水平偏移为-2px，垂直偏移为-2px，模糊半径为4px，颜色为蓝色 */
box-shadow: inset -2px -2px 4px blue;
注意：阴影效果可能对性能有一定的影响，特别是在添加多个阴影或使用大的模糊半径时。
圆角边框
border-radius属性可以设置一个或四个值，具体取决于你想要的效果。每个值代表一个角的圆角半径，顺序为：左上角、右上角、右下角、左下角。
border-radius: 50%; /* 圆形 */
border-radius: 30px; q /* 长方形 */
border-radius: 50px 50px 0 0; /* 半圆形 */
border-radius: 0 0 0 200px; /* 扇形 */
字体引入
@font-face 是CSS3提供的一项功能，它允许开发者在网页中使用自定义字体，而不仅仅局限于系统预装的字体。
使用 @font-face 的步骤如下：
-
准备字体文件：
首先，你需要准备字体文件，通常包括以下格式：.woff、.woff2、.ttf、.otf、.eot等。为了兼容不同的浏览器，建议提供多种格式的字体文件。 -
定义
@font-face规则：
在CSS样式表中，通过@font-face规则来引入自定义字体。你需要指定字体的名称，字体文件的URL和格式。
@font-face {
font-family: "CustomFont"; /* 自定义字体的名称 */
src: url("customfont.woff2") format("woff2"),
url("customfont.woff") format("woff");
}
- 应用自定义字体：
@font-face定义了自定义字体，现在你可以在网页中使用这个字体了。通过设置元素的font-family属性来应用自定义字体。
body {
font-family: "CustomFont", sans-serif;
}
在上面的例子中，如果浏览器支持 woff2 格式，它将首先尝试加载 customfont.woff2 文件。如果不支持 woff2，则会尝试加载 woff 格式的 customfont.woff 文件。
注意事项：
- 确保字体文件的路径是正确的，可以通过相对路径或绝对路径引用字体文件。
- 请遵循版权规定和使用授权合法的字体文件。
- 使用自定义字体可能会增加页面的加载时间，特别是如果字体文件较大。因此，建议将字体文件进行压缩和优化，以减少加载时间。
渐变
一、线性渐变
线性渐变是一种在一个方向上从一个颜色平滑地过渡到另一个颜色的效果。使元素呈现出从一种颜色到另一种颜色的过渡效果。在CSS中，我们可以使用 linear-gradient() 函数来创建线性渐变。
linear-gradient() 函数的语法如下：
linear-gradient([<angle> | to <side-or-corner>], <color-stop1>, <color-stop2>, ...);
其中：
<angle>：可选参数，表示渐变的方向角度值。默认值是从上到下的渐变（即to bottom）。可以使用角度值（如45deg、135deg等）或关键字（如to right、to left、to top、to bottom等）来设置渐变方向。to <side-or-corner>：可选参数，表示从一个方向到另一个方向的渐变。例如，to left表示从右到左的渐变，to top left表示从右下到左上的渐变。<color-stop1>,<color-stop2>, …：至少需要两个颜色标记（Color Stops），用于指定渐变的起始颜色和结束颜色。颜色标记可以是颜色值（如red、#ff0000等）或颜色值和位置（如red 50%，表示在50%位置的红色）。
- 从上到下的线性渐变，红色到蓝色：
/* 从上到下 */
div {
background: linear-gradient(red, blue);
}
/* 从左到右 */
div {
background: linear-gradient(to right, red, blue);
}
/* 从右下到左上 */
div {
background: linear-gradient(to top left, yellow, orange);
}
/* 自定义位置的线性渐变，红色到蓝色，中间位置为绿色 */
div {
background: linear-gradient(red, green 50%, blue);
}
二、径向渐变
径向渐变是一种从一个中心点向外辐射状地过渡到另一种颜色的效果。与线性渐变不同，径向渐变是以一个中心点为起始，向外辐射状地进行颜色过渡。在CSS中，我们可以使用 radial-gradient() 函数来创建径向渐变。
radial-gradient() 函数的语法如下：
radial-gradient([<shape> || <size> || at <position>], <color-stop1>, <color-stop2>, ...);
其中：
<shape>：可选参数，表示渐变的形状。默认值是ellipse，也可以设置为circle。<size>：可选参数，表示渐变的大小。默认值是farthest-corner，还可以设置为closest-corner、farthest-side或closest-side。at <position>：可选参数，表示渐变的中心点位置。例如，at 50% 50%表示在元素的中心点开始渐变。<color-stop1>,<color-stop2>, …：至少需要两个颜色标记（Color Stops），用于指定渐变的起始颜色和结束颜色。颜色标记可以是颜色值（如red、#ff0000等）或颜色值和位置（如red 50%，表示在50%位置的红色）。
/* 从中心向外辐射状的径向渐变，黄色到橙色 */
div {
background: radial-gradient(yellow, orange);
}
/* 以50% 50%为中心点，从中心向外辐射状的径向渐变，红色到蓝色 */
div {
background: radial-gradient(at 50% 50%, red, blue);
}
/* 圆形径向渐变，从中心向外辐射状的径向渐变，红色到蓝色 */
div {
background: radial-gradient(circle, red, blue);
}
/* 自定义位置和大小的径向渐变，红色到蓝色，中心点在20% 40%位置，大小为100px： */
div {
background: radial-gradient(at 20% 40%, ellipse 100px 100px, red, blue);
}
三、重复渐变
重复渐变是一种将渐变颜色无限次重复应用的效果。使得渐变效果在整个元素上无限重复。在CSS中，我们可以使用 repeating-linear-gradient() 或 repeating-radial-gradient() 函数来创建重复渐变。
重复渐变的语法和线性渐变、径向渐变类似，只是在前面加上了 repeating- 前缀。
- 重复线性渐变：
/* 从红色到蓝色的线性渐变，然后以50px为间隔重复应用这个渐变效果。 */
div {
background: repeating-linear-gradient(red, blue 50px);
}
在上面的示例中，
- 重复径向渐变：
/* 从黄色到橙色的径向渐变，然后以50px为间隔重复应用这个渐变效果。 */
div {
background: repeating-radial-gradient(yellow, orange 50px);
}
过渡
过渡允许在元素的某个属性发生改变时，平滑地过渡到新的状态，而不是突然改变。为元素的样式添加动画效果，使页面更加生动和吸引人。
transition: <property> <duration> <timing-function> <delay>;
具体属性值、运动时间s/ms、延迟时间s/ms、动画类型
button {
background-color: red;
transition: background-color 0.5s ease;
}
button:hover {
background-color: blue;
}
当背景颜色属性发生变化时，过渡的持续时间为0.5秒，过渡的时间函数为ease（即先加速后减速）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxNTt515-1690125938780)(F:\Learning Technique\HTML\Web note\HTML+CSS note\image-20220808165805042.png)]
2D属性
translate(), scale(), rotate(), skew()和transform-origin是CSS中用于2D变换的属性。
- translate()：
translate()函数用于平移元素，改变元素的位置。它可以接受两个参数，分别表示水平和垂直方向的平移距离。
/* 将元素向右平移50px，向下平移20px */
transform: translate(50px, 20px);
- scale()：
scale()函数用于缩放元素，改变元素的大小。它可以接受一个或两个参数，表示水平和垂直方向的缩放比例。
/* 将元素水平方向缩放为原来的2倍，垂直方向不变 */
transform: scale(2, 1);
- rotate()：
rotate()函数用于旋转元素。它可以接受一个角度值，表示元素以顺时针方向旋转的角度。
/* 将元素顺时针旋转45度 */
transform: rotate(45deg);
- skew()：
skew()函数用于斜切元素。它可以接受两个角度值，分别表示水平和垂直方向的斜切角度。
/* 将元素水平方向斜切45度，垂直方向不变 */
transform: skew(45deg, 0);
- transform-origin：
transform-origin属性用于设置元素变换的原点。默认情况下，变换围绕元素的中心点进行，但通过transform-origin属性，你可以自定义变换的原点。
/* 将元素变换的原点设置在左上角 */
transform-origin: top left;
关键帧动画
animation 是CSS中用于创建动画效果的属性。通过 animation 属性可以将关键帧动画应用到元素，并指定动画的名称、持续时间、时间函数、延迟时间、重复次数和方向等参数。
animation 属性的语法如下：
animation: name duration timing-function delay iteration-count direction;
其中：
name：指定要使用的关键帧动画的名称。这个名称是通过@keyframes规则定义的关键帧动画的名称（必须与@keyframes配合使用）。duration：指定动画的持续时间，以秒（s）或毫秒（ms）为单位。timing-function：指定动画的时间函数，它定义了动画的速度变化曲线。常见的取值包括ease（默认值，先加速后减速）、linear（匀速）、ease-in（先加速后匀速）、ease-out（先匀速后减速）等。delay：指定动画开始前的延迟时间，以秒（s）或毫秒（ms）为单位。iteration-count：指定动画的重复次数。可以使用一个数字（如2表示重复2次），或infinite表示无限重复。direction：指定动画的播放方向。常见的取值包括normal（默认值，正向播放）、reverse（反向播放）、alternate（交替反向播放）等。
下面是一个例子，展示了一个简单的动画效果，元素在2秒内从左侧滑入：
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation: slide-in 2s ease;
}
animation和transition的区别
相同点：都是随着时间改变元素的属性值。
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其CSS属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。
3D属性
景深
景深是一种摄影和视觉效果，用于描述图像中焦点以外区域的模糊程度。在摄影中，景深决定了图像中哪些部分是清晰的，哪些部分是模糊的，从而营造出一种空间深度感和焦点集中的效果。
在网页设计中，通过CSS的3D变换和景深效果，我们可以为元素创建一种类似于摄影中的景深效果，使得元素在Z轴上有不同的模糊程度，从而营造出3D空间感。
实现景深效果的关键是使用 perspective 属性和 transform 属性。perspective 属性用于设置观察者与元素之间的距离，影响了元素在Z轴上的大小表现，从而影响景深效果的程度。而 transform 属性中的3D变换函数，如 translate3d()、rotateX()、rotateY()等，用于控制元素在3D空间的位置和旋转角度。
.container {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: translateZ(50px);
transition: transform 1s;
}
.box:hover {
transform: translateZ(200px);
}
在上面的示例中，将 .container 元素设置了 perspective: 1000px;，表示观察者与元素之间的距离为1000像素。然后在 .box 元素上应用了 transform: translateZ(50px);，表示元素在Z轴上位移50像素，从而呈现出一定的景深效果。当鼠标悬停在 .box 上时，使用 transform: translateZ(200px); 改变元素的Z轴位移，实现景深的变化。通过在 transform 属性中调整 translateZ() 的值，可以控制景深效果的程度。
3D变换函数
- 3D位移：
通过translate3d()函数来实现3D位移。该函数接受三个参数，分别表示在X、Y和Z轴方向上的位移距离。
.box {
transform: translate3d(50px, 20px, 100px);
}
.box 将在X轴方向上位移50px，在Y轴方向上位移20px，在Z轴方向上位移100px。
- 3D旋转：
通过rotateX()、rotateY()和rotateZ()函数来实现3D旋转。这些函数分别表示绕X轴、Y轴和Z轴进行旋转。
.box {
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}
.box 将绕X轴旋转45度，在Y轴旋转30度，在Z轴旋转60度。
- 3D缩放：
通过scale3d()函数来实现3D缩放。该函数接受三个参数，分别表示在X、Y和Z轴方向上的缩放比例。
.box {
transform: scale3d(1.5, 2, 0.5);
}
.box 将在X轴方向上缩放为原来的1.5倍，在Y轴方向上缩放为原来的2倍，在Z轴方向上缩放为原来的0.5倍。
CSS属性书写顺序
在编写CSS样式时，良好的属性书写顺序可以使代码更易于维护、阅读和理解。以下是一种常见的属性书写顺序建议：
- 布局相关属性：
displaypositiontop,right,bottom,leftfloat,clearwidth,heightmargin,paddingbox-sizing
- 排版相关属性：
fontline-heighttext-alignvertical-align
- 颜色和背景相关属性：
colorbackground,background-color,background-image,background-size,background-position,background-repeat, etc.
- 边框相关属性：
border,border-width,border-style,border-colorborder-radiusoutline
- 盒模型相关属性：
box-shadowoverflowopacity
- CSS3变换和过渡属性：
transform,transform-origintransition,transition-property,transition-duration,transition-timing-function,transition-delay
- 其他属性：
cursorz-indexvisibility
.box{
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetiva Neue', Helvetica, san-serif;
color: #ccc;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
}
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
