[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4%BA%8C%E7%89%88-HTML.jpg)]

一篇文章让你从HTML零基础入门前端开发

前言：

此文为玄子，复习ACCP-S1课程后，整理的文章，文中对知识点的解释仅为个人理解，源码均可直接复制运行

配套PPT，站点源码，等学习资料请加文章封面联系方式

一、了解 HTML5

1.1 HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析

1.2 HTML 发展史

1.2.1 HTML1.0

超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

1.2.2 HTML 2.0

1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

1.2.3 HTML 3.2

1997年1月14日，W3C推荐标准

1.2.4 HTML 4.0

1997年12月18日，W3C推荐标准

1.2.5 HTML 5.0

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

1.3 HTML5 的优势

  • 解决了跨浏览器问题

  • 化繁为简

    • 简化的DOCTYPE

    • 强大的HTML5 API

    • 以浏览器原生能力替代复杂的JavaScript代码

  • 跨平台

    • 支持多种类型设备的跨平台适用性，减少了开发人员的工作量

  • 功能强大，新增特性

    • 支持本地存储、离线缓存、地理位置等

    • 新增实用标签

    • 支持绘制图形

    • 支持播放视频和音频

1.4 W3C 标准

  • W3C

    • World Wide Web Consortium（万维网联盟）

    • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

    • W3C官网

    • W3C中文官网

  • W3C标准包括

    • 结构化标准语言（XHTML 、XML）

    • 表现标准语言（CSS）

    • 行为标准（DOM、ECMAScript ）

1.5 常见 HTML 编辑器

  • 记事本
  • Dreamweaver
  • WebStorm
    • WebStorm 是 Jetbrains (捷克)公司旗下一款 JavaScript 开发工具。被广大中国 JS 开发者誉为“Web前端开发神器”
  • VSCode

1.6 安装 WebStorm

WebStorm 是最专业的的前端开发工具，但是由于版权原因这里不过多介绍

WebStorm 官网

详细安装教程请加文章封面联系方式

二、HTML 基础

2.1 网页基本标签

<!DOCTYPE html>
<!--告诉浏览器使用规范-->
<html lang="en">
<head><!--    网页头部--><meta charset="UTF-8"><!--    描述性标签一般用来做seo--><title>网页基本标签</title><!--    网页标题-->
</head>
<body>
<!--网页主体-->
Change The Word!
</body>
</html>

2.1.1 基本标签语义

标签 语义 说明
<!DOCTYPE html> 文档类型声明 告诉浏览器使用规范为HTMl
<html></html> 网页标签 标签位于HTML文档的最前面，用于标识HTML文档的开始和结尾
<head></head> 头部标签 用于定义HTML文档的头部，描述文档属性，包含一些辅助标签例如<title>、<link>、<script>
<title></title> 网页标题 用来定义网页的标题名称
<meta> 描述性标签 一般用来做SEO
<body></body> 主体标题 用于定义HTML文档的主体内容

2.1.2 标签关系

  1. 包含关系
<head><title></title>
</head>
  1. 并列关系
<head>
</head>
<body> 
</body>

HTML文档中的标签通常是成对出现，以<>开始，</>结束，也有部分标签不是成对出现，如<br>、<img>等等

2.2 基础标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--标题标签-->
<hr>
<!--换行标签-->
<p>山园小梅·其一[ 宋 ] 林逋众芳摇落独暄妍，占尽风情向小园。疏影横斜水清浅，暗香浮动月黄昏。霜禽欲下先偷眼，粉蝶如知合断魂。幸有微吟可相狎，不须檀板共金尊。</p>
<!--段落标签-->
<hr>
<p>山园小梅·其一 <br>[ 宋 ] 林逋<br>众芳摇落独暄妍，占尽风情向小园。<br>疏影横斜水清浅，暗香浮动月黄昏。<br>霜禽欲下先偷眼，粉蝶如知合断魂。<br>幸有微吟可相狎，不须檀板共金尊。</p>
<!--换行标签-->
<hr>
<p>山园小梅·其一</p>
<p> [ 宋 ] 林逋</p>
<p> 众芳摇落独暄妍，占尽风情向小园。</p><p> 疏影横斜水清浅，暗香浮动月黄昏。</p><p> 霜禽欲下先偷眼，粉蝶如知合断魂。</p><p> 幸有微吟可相狎，不须檀板共金尊。</p>
<hr>
<strong>粗体</strong>
<!--粗体标签-->
<br>
<em>斜体</em>
<!--斜体标签-->
<br>
<strong><em>加粗斜体</em></strong>
<!--样式标签可以嵌套使用-->
<hr>
<p>空 格</p>
<p>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
<!--特殊符号：空格要熟记-->
<p>大于号：> &gt;</p>
<p>小于号：< &lt;</p>
<p>分号："" &quot;&quot;</p>
<p>版权符号：&copy;</p>
<!--特殊符号不需要死记，用到百度即可-->
</body>
</html>

2.2.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

单词 head 的缩写，意为：头部、标题

一个标签独占一行

标签语义：作为标题使用，并且依据重要性递减

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

2.2.2 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

单词 paragraph 的缩写，意为：段落

文本在一个段落中会根据浏览器窗口的大小自动换行

段落和段落之间保有空隙

标签语义：可以把 HTML 文档分割为若干段落

2.2.3 换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br>

<br>

单词 break 的缩写，意为：打断、换行

<br>是个单标签

<br>标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

标签语义：强制换行

2.2.4 分割线标签

<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->

2.2.5 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示

<strong>粗体</strong>
<!--粗体标签-->
<br>
<em>斜体</em>
<!--斜体标签-->
<br>
<strong><em>加粗斜体</em></strong>
<!--样式标签可以嵌套使用-->

标签语义：突出重要性，比普通文字更重要

标签 语义 说明
<strong> </strong> 加粗
<em> </em> 倾斜
<del> </del> 删除线
<ins> </ins> 下划线

2.2.6 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签

HTML 中的注释以：<!-- 开头，以 --> 结尾

<!-- 注释语句 -->

注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的

2.2.7 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
© 版权符号 &copy;
² 上标 <sup></sup>
₂ 下标 <sub></sub>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W6uiKoKb-1672214813899)(./assets/2.2.7.png)]

2.3 图像标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<img alt="替换文本" height="500px" src="../../resources/image/玄子头像.png" title="标题" width="500px">
<img alt="替换文本" height="500" src="../resources/玄子头像.png" title="标题" width="500">
<!--src：图像索引路径，可以写相对路径或绝对路径../：表示回退到上级目录，回退上两级目录就写两遍，然后指定路径下的文件alt：图片无法显示时的替换文字title：鼠标悬浮到图像时显示文字width：图像宽度默认像素pxheight：图像高度默认像素px
-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fOhB6SHL-1672214813900)(./assets/2.3.png)]

2.3.1 图像标签属性

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像

<img alt="替换文本" height="图像尺寸" src="图像URL" title="标题" width="500px">

单词 image 的缩写，意为图像

属性名 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图片无法显示时的替换文字
title 文本 提示文本，鼠标悬浮到图像时显示文字
width 尺寸 设置图像的宽度
height 尺寸 设置图像的高度
border 尺寸 设置图像的边框粗细
  • 图像标签可以同时拥有多个属性（其它标签同理）
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签同理）
  • 属性均采取键值对的格式，即：key="value" 格式，属性="属性值"
  • 设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
  • 设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

2.3.2 相对路径

以引用文件所在位置为参考基础，而建立出目录路径

相对路径分类 符号 说明
同一级路径 . <img src="logo.png" />
下一级路径 / <img src="img/logo.png" />
上一级路径 ../ <img src="../img/logo.png" />

2.3.3 绝对路径

指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径

Windows 系统的绝对路径：F:\html\img\logo.png

网络地址：https://www.qijishow.com/

  • 相对路径为 /（正斜杆），绝对路径为 \（反斜杆）
  • 实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

2.4 超链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签</title>
</head>
<body>
<a href="" name="xz">顶部</a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题">点击在新窗口打开03</a>
<br>
<a href="03_图像标签.html" target="_self" title="标题">点击在本窗口打开03</a>
<!--href：跳转页面索引target：跳转方式_blank：新页面打开链接_self：此页面打开链接title：鼠标悬浮到图像时显示文字
-->
<hr>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<!--图像超链接直接在a标签中包含一个图像标签即可
-->
<br>
<hr>
<a href="#xz">点击跳转到顶部</a>
<!--锚链接：需要一个标记点和跳转点标记点声明：name 属性并赋值跳转点：href 属性 跳转 name 声明的标记点，name 值前面要加上 #-->
<br>
<a href="mailto:y766706944@163.com">点击邮箱联系</a>
<!--功能链接-->
</body>
</html>

2.4.1 超链接标签属性

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面

<a href="跳转目标" target="新窗口跳转方式">内容</a>

单词 anchor 的缩写，意为：锚

属性 作用
href 用于指定链接目标的 URL 地址（必须属性）
当标签应用 href 属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式
_blank：新页面打开链接
_self：此页面打开链接（默认值）

2.4.2 链接分类

  • **外部链接：**例如：<a href="https://www.qijishow.com/">奇迹秀</a>
  • **内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="index.html">首页</a>
  • **空链接：**如果当时没有确定链接目标时写， <a href="#">首页</a>"，当用户点击链接时，网页不会任何效果
  • **下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
  • **网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
  • **锚点链接：**点击链接，可以快速定位到某页面中的某个位置
    1. 需要一个标记点和跳转点
    2. 标记点声明：name 属性并赋值 <a href="" name="xz">顶部</a>
    3. 跳转点：href 属性 跳转 name 声明的标记点，name 值前面要加上 # <a href="#xz">点击跳转到顶部</a>
  • **功能链接：**可以调用一些功能性的操作 <a href="mailto:3336392096@qq.com">点击邮箱联系</a>直接打开本地默认邮箱软件

2.5 行内元素&块元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>行内元素&块元素</title>
</head>
<body>
<!--行内元素-->
<a href="#">a标签</a>
<a href="#">a标签</a>
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px"><hr>
<!--块元素-->
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>p标签</p>
<p>p标签</p>
</body>
</html>

  • 块元素

    • 无论内容多少，该元素独占一行<p>、<h1>-<h6>…

  • 行内元素

    • 内容撑开宽度，左右都是行内元素的可以排在一行<a>、<strong>、<em>…

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

2.6 列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head>
<body>
<!--有序列表-->
<!--应用范围：试卷，排序-->
<ol><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ol>
<hr>
<!--无序列表-->
<!--应用范围：导航，侧边栏-->
<ul><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ul>
<hr>
<!--定义列表-->
<!--应用范围：网站底部导航栏-->
<dl><dt>开发</dt><dd>JAVA</dd><dd>HTML</dd><dd>CSS</dd><dd>SQL</dd>
</dl>
</body>
</html>

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局

2.6.1 使用场景

标签名 定义 使用场景
<ul> </ul> 无序标签 常用于显示网站导航、树形菜单、侧边栏新闻列表等内容
<ol> </ol> 有序标签 常用于显示带有顺序编号的内容
<dl> </dl> 自定义标签 常用于显示带有标题和标题解释性的内容

2.6.2 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义（开发中经常使用）

<ul><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ul>
  • 无序列表的各个列表项之间没有顺序级别之分，是并列的
  • <ul> </ul> 中只能嵌套 <li> </li>，直接在 <ul> </ul> 标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在 li 中
  • <li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
  • 无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置

附：去除 li 前符号的方法：style="list-style: none;"

2.6.3 有序列表

有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义（开发中不太常用）

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

<ol><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ol>
  • <ol> </ol> 中只能嵌套 <li> </li>，直接在 <ol> </ol> 标签中输入其他标签或者文字的做法是不被允许的
  • <li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
  • 有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置

附：去除 li 前符号的方法：style="list-style: none;"

2.6.4 自定义列表

自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用

<dl><dt>开发</dt><dd>JAVA</dd><dd>HTML</dd><dd>CSS</dd><dd>SQL</dd>
</dl>
  • <dl> </dl> 里面只包含 <dt>、<dd>
  • <dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

2.7 表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body>
<table border="1px"><!--    border：边框尺寸--><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--table:表格标签tr：行标签td：列标签
-->
<hr>
<table border="1px"><tr><td colspan="3">学生成绩</td><!--        跨列--></tr><tr><td rowspan="2">玄子</td><!--        跨行--><td>JAVA</td><td>100</td></tr><tr><td>HTML</td><td>99</td></tr><tr><td rowspan="2">玉玉诏</td><!--        跨行--><td>JAVA</td><td>90</td></tr><tr><td>HTML</td><td>80</td></tr>
</table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wVaZP037-1672214813901)(./assets/image-20220121161018164.png)]

2.7.1 表格的主要作用

  • 为什么使用表格

    • 简单通用

    • 结构稳定

  • 基本结构

    • 行

    • 列

    • 单元格

表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”

2.7.2 表格的基本语法

<table><tr><td>单元格</td></tr>
</table>
  • <table> </table> 是用于定义表格的标签
  • <tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
  • <td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
  • 字母 td 指表格数据table data
  • 即数据单元格的内容
  • 单元格 td 里面可以放任何的元素

2.7.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示

<th> 标签表示 HTML 表格的表头部分table head的缩写

<table><tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</table>

2.7.4 表格属性

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
</table>
属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式默认left
border 1 或 "" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值 或 百分比 规定表格的宽度
height 像素值 或 百分比 规定表格的高度

2.7.5 表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部和表格主体两大部分

在表格标签中，分别用：<thead> 标签表示表格的头部区域，<tbody> 标签表示表格的主体区域，这样可以更好的分清表格结构

  • <thead> </thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行，且一般 <tr> 标签中推荐放置 <th> 标签
  • <tbody> </tbody>：用于定义表格的主体，主要用于放数据本体
  • 以上标签都是放在 <table> </table> 标签中
<table>
<!-- 头部区域 -->
<thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</thead>
<!-- 主体区域 -->
<tbody><tr><td>玄子</td><td>男</td><td>16</td></tr>
</tbody>
</table>

2.7.6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。

合并单元格的方式：

  • 跨行合并（上下合并）：rowspan="合并单元格的个数"
  • 跨列合并（左右合并）：colspan="合并单元格的个数"

合并单元格三步曲：

  • 先确定是跨行还是跨列合并
  • 找到目标单元格，写上 合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
  • 删除多余单元格
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>合并单元格</title>
</head><body><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXrpNN2O-1672214813901)(./assets/2.7.6.png)]

2.7.7 综合案例

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>综合案例</title>
</head><body><table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5"><thead><tr><th>one</th><th>two</th><th>three</th><th>four</th></tr></thead><tbody><tr><td rowspan="3">1</td><td colspan="3">234</td></tr><tr><td>2</td><td>3</td><td>4</td></tr><tr><td>2</td><td>3</td><td>4</td></tr></tbody></table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTfZfILh-1672214813901)(./assets/2.7.7.png)]

2.8 音视频标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音视频标签</title>
</head>
<body>
<!--视频标签-->
<video autoplay controls src="../../resources/video/G.E.M.邓紫棋-GLORIA.mp4"></video>
<!--音频标签-->
<audio autoplay controls src="../../resources/audio/G.E.M.邓紫棋-天空没有极限.flac"></audio>
<!--autoplay:自动播放controls：音视频控件
-->
</body>
</html>

2.8.1 视频标签

<video src="视频路径" controls="controls"></video>
属性名 属性值 描述
width 像素 设置视频播放器的宽度
height 像素 设置视频播放器的高度
src URL 要播放的视频的 URL
controls controls 显示控件：播放/暂停、进度条、时间、音量以及全屏等常用控件
autoplay autoplay 视频就绪后马上播放
loop loop 循环播放 
<video src="video/video.mp4" controls="controls" >你的浏览器不支持video标签
</video>

浏览器不支持<video>标签时，将会显示标签中间的文字

2.8.2 音频标签

<audio src="音频路径" controls="controls"></audio>
属性名 属性值 描述
src URL 要播放的音频的 URL
controls controls 显示控件：播放/暂停、音量等常用控件
autoplay autoplay 音频就绪后马上播放
loop loop 循环播放 
<audio src="music/music.mp3" controls>你的浏览器不支持audio标签</audio>

浏览器不支持<audio>标签时，将会显示标签中间的文字

2.8.3 引入多条媒体源

<soruce>标签用于引入多个不同格式的媒体

<audio controls loop><source src="music/music.mp3"type="audio/mpeg"/><source src="music/music.ogg" type="audio/ogg"/>你的浏览器不支持audio标签
</audio>

2.9 网页结构分类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页结构分类</title>
</head>
<body>
<header><h1>网页头部</h1>
</header>
<section><h1>网页主体</h1>
</section>
<footer><h1>网页底部</h1>
</footer>
<!--header：标题头部区域的内容（用于页面或页面中的一块区域）footer：标记脚部区域的内容（用于整个页面或页面的一块区域）section：Web页面中的一块独立区域article：独立的文章内容aside：相关内容或应用（常用于侧边栏）nav：导航类辅助内容
-->
</body>
</html>
标签名 说明
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

2.10 内联框架标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联标签</title>
</head>
<body>
<iframe frameborder="1" height="500px" name="xz" src="01_网页基本标签.html" width="500px"></iframe>
<!--frame border：内联框架边框尺寸name：标记名称
-->
<br>
<a href="02_基础标签.html" target="xz">点击跳转02</a>
<!--可以配合 a 标签的 target 属性改变内联框架跳转网页-->
<br>
<a href="03_图像标签.html" target="xz">点击跳转03</a>
</body>
</html>

<iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

2.10.1 iframe 语法

<iframe src="页面地址" width="宽度" height="高度" name="名称"></iframe>
属性名 属性值
src 嵌入页面的url地址
width 嵌入页面的宽度
height 嵌入页面的高度
name 嵌入页面的名称

2.10.2 隐藏 iframe 滚动条

<div style="width: 400px; overflow: hidden"><iframe height="480" src="https://www.qijishow.com/" width="415">您的浏览器不支持</iframe>
</div>

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

2.11 表单标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body>
<form action="11_表单标签.html" method="get"><!--action：数据提交位置method：数据提交方式get：提交数据url栏可见post：提交数据url栏不可见--><p>用户名：<input name="admin" type="text"></p><!--    text：文本框 想要传递值需要设置 name 属性--><p>密&nbsp;&nbsp;码：<input name="pwd" type="password"></p><!--  password：密码框--><p>按钮：<input type="button" value="按钮"><!--  可通过设置value属性改变提示文字--><input height="40px" name="img" src="../../resources/image/玄子头像.png" type="image" width="40px"><input type="submit"><input type="reset"><!--input type="button"   普通按钮input type="image"    图像按钮input type="submit"   提交按钮input type="reset"    重置按钮--></p><p>性别：<input checked id="1" name="sex" type="radio" value="boy">男<!--        checked：默认选中--><!--        name值要保持一致才能单选--><label for="0"><input id="0" name="sex" type="radio" value="girl">女</label><!--label：标签提高鼠标交互性--></p><p>爱好：<input name="hobby" type="checkbox" value="Java">Java<input checked name="hobby" type="checkbox" value="HTMl">HTMl<!--        checked：默认选中--><input name="hobby" type="checkbox" value="CSS">CSS<input name="hobby" type="checkbox" value="SQL">SQL<!--        name值要保持一致--></p><p>提交文件：<input name="fill" type="file"></p><p>邮箱：<input name="email" type="email"></p><p>URL：<input name="url" type="url"></p><p>数字：<input max="100" min="0" name="num" step="5" type="number" value="0"></p><p>滑块：<input max="100" min="0" name="range" step="10" type="range" value="50"></p><!--max：允许最大值min：允许最小值step：步进长度value：默认初始值
--><p>搜索：<input name="search" type="search"></p><p>地区：<select name="select"><option value="hn">河南</option><option value="hb">河北</option><option selected value="hn">湖南</option><!--           selected：默认选中 --><option value="hb">湖北</option></select></p><p>反馈：<textarea cols="20" name="txt" rows="4"></textarea><!--cols：单宽rows：行高单位字符--></p><hr><p>表单应用</p><p>只读：<input name="readonly" readonly type="text" value="你好！"><!--        只能看，不能修改内容--></p><p>禁用：<input disabled name="disabled" type="reset" value="按钮"><!--        禁用此标签，不可使用--></p><p>隐藏：<input hidden name="hidden" type="text" value="你好！"><!--        隐藏标签但是可以设置默认值提交，用户看不到--></p><hr><p>表单初级验证</p><p>必填：<input name="required" required type="text"><!--        文本必填，否则无法提交--></p><p>提示：<input name="placeholder" placeholder="请输入账号！" type="text"><!--        文本框内的浅色提示文字，提醒用户输入内容--></p><p>正则：<input name="pattern" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" type="text"><!--       pattern：正则表达式，用到百度 --></p>
</form></body>
</html>

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

2.11.1 为什么需要表单

使用表单的目的是收集用户信息。在网页中，需要跟用户进行交互，收集用户资料，此时就需要表单

2.11.2 使用场景

  • 注册

  • 登录

  • 调查问卷

  • 填写订单

  • 搜索框

  • ……

2.11.3 表单域

表单域是一个包含表单元素的区域。在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递<form> 会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称"><!-- 各种表单元素控件 -->
</form>
属性名 属性值 作用
action url 地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get / post 用于设置表单数据的提交方式，其取值为 get 或 post
get：提交数据 url 栏可见
post：提交数据 url 栏不可见
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

post 方式

  • 不会改变浏览器地址栏状态

    • 表单数据不会被显示在地址栏中

  • 安全性高

  • 常用于保存、修改、删除数据

get 方式

  • 会改变浏览器地址栏状态

    • 表单提交的数据会显示在地址栏中

  • 安全性低

  • 常用于查询数据

2.11.4 表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

<input  type="text"  name="fname" value="text"/>

2.11.5 Input 标签常用属性

属性名 描述
type 指定元素的类型
size 元素的初始宽度
maxlength type 为 text 或 password 时，输入的最大字符数
checked type 为 radio 或 checkbox 时，指定按钮是否是被中
name 定义 input 元素的名称
value 规定 input 元素的值，也就是提交到服务器的值

2.11.6 Type 常用属性

属性值 说明
text 定义单行的输入框，默认宽度为20个字符
password 定义密码框，该字段中的字符被掩码
radio 定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name
checkbox 定义复选框，在一组多选中，要求它们必须拥有相同的 name
button 定义可点击按钮
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
reset 定义重置按钮，重置按钮会清除表单中的所有数据
file 定义支持文件上传的“浏览”按钮
email 定义输入邮箱地址的文本框
url 定义输入URL地址的文本框
number 定义用于输入数字类型内容的文本框
range 定义用于输入包含一定范围内的数字值的文本框
search 定义用于输入搜索关键字的文本框
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮

2.11.7 普通文本框

用于定义接收单行文本信息的输入框，如账号、证件号码等

属性名 说明
size 设置文本框长度
maxlength 指定输入的数据长度
value 属性指定默认值 
<form><p>名字：<input maxlength="20" name="firstName" size="30" type="text"></p><p>姓氏：<input name="lastName" type="text" value="王"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H7NQXwle-1672214813902)(./assets/2.11.7-1671887485070-8.png)]

2.11.8 密码框

用于定义接收隐秘信息的输入文本框，如登录密码

<form><p>名字：<input maxlength="20" name="firstName" size="30" type="text"></p><p>姓氏：<input name="lastName" type="text" value="玄子"></p><p>密码：<input type="password"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sh6H2Qu2-1672214813902)(./assets/2.11.8.png)]

2.11.9 单选按钮

用于定义只能选中一个选项的选择性内容，如性别、单选题

<form>性别：<input checked name="sex" type="radio" value="男"/> 男<!--name的值相同            设置默认选中 --><input name="sex" type="radio" value="女"/> 女
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QtXVe6sb-1672214813902)(./assets/2.11.9.png)]

2.11.10 复选框

用于定义可选择多个选项的选择性内容，如爱好、掌握的技能

<form>请选择你会的语言：<p><input checked name="language" type="checkbox" value="Chinese">中文</p><!--设置默认选中--><p><input checked name="language" type="checkbox" value="English">英文</p><p><input name="language" type="checkbox" value="Japanese">日文</p><p><input name="language" type="checkbox" value="Espana">西班牙语</p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X57Mou3r-1672214813903)(./assets/2.11.10.png)]

2.11.11 按钮

HTML5中提供了三种按钮，用于处理不同场景下的点击事件

  • 普通按钮：与点击事件配合使用，触发绑定的方法

  • 提交按钮：用于提交表单信息

  • 重置按钮：用于清除表单中已填的信息

<form><input type="button" value="普通按钮"><!--指定按钮类型  按钮上显示的文字 --><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><input src="image/玄子头像.png" title="图片按钮" type="image" width="5%">
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cN8OBvt-1672214813903)(./assets/2.11.7.png)]

2.11.12 文件域

用于实现文件上传功能

<form><p><input type="file"></p><p><input type="submit" value="上传"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eTQMFi9h-1672214813903)(./assets/2.11.12.png)]

2.11.13 邮箱

专门用于输入邮箱地址的文本框，提交时自动验证邮箱格式是否正确

<form><p>邮箱：<input type="email"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HndvIWsH-1672214813904)(./assets/2.11.13.png)]

2.11.14 网址

专门用于输入URL地址的文本框，提交时自动验证URL是否有效

<form><p>网址：<input type="url"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bfkCarJ-1672214813904)(./assets/2.11.14.png)]

2.11.15 数字

专门用于输入数字的文本框，无法输入非数字内容

属性 属性值 描述
max number 规定允许的最大值
min number 规定允许的最小值
value number 规定的默认值
step number 规定输入字段的合法数字间隔 
<form><p>数字：<input max="100" min="10" step="2" type="number"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kk2xeRWV-1672214813904)(./assets/2.11.15.png)]

2.11.16 滑块

用于定义滑动条样式的数字输入控件，实现与“数字”输入框相同效果的功能

属性 属性值 描述
max number 规定允许的最大值
min number 规定允许的最小值
value number 规定的默认值
step number 规定输入字段的合法数字间隔 
<form><p>滑块：<input max="100" min="10" step="10" type="range"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmoT37Nc-1672214813904)(./assets/2.11.16.png)]

2.11.17 搜索框

专门用于输入搜索关键词，输入搜索的关键词后，搜索框后面会出现一个“×”按钮，单击“×”按钮可以清除输入的内容

<form><p>搜索框：<input type="search"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eTFIOfCO-1672214813905)(./assets/2.11.17.png)]

2.11.18 列表框

用于定义一组可选择的数据项

<form>请选择你想去的城市：<select name="city"><!--定义列表框--><option selected="selected" value="北京">北京</option><!--定义列表项   默认选中--><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option></select>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NYYoSqpy-1672214813905)(./assets/2.11.18.png)]

2.11.19 多行文本域

用于定义可以输入多行内容的文本域，如个人简介、发表的评论

<form><h3>山园小梅·其一</h3><!--定义文本域  显示的列宽            显示的行数--><textarea cols="50" name="textarea" rows="5">山园小梅·其一[ 宋 ] 林逋众芳摇落独暄妍，占尽风情向小园。疏影横斜水清浅，暗香浮动月黄昏。霜禽欲下先偷眼，粉蝶如知合断魂。幸有微吟可相狎，不须檀板共金尊。</textarea>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OqPNkOCw-1672214813905)(./assets/2.11.19.png)]

cols属性指定的是文本域的宽度，而不是列数，rows属性指定的则是行数

如果要禁止拉伸文本框大小，则设置：style="resize: none"

2.11.20 表单的高级应用

隐藏域

  • 表单中存在却不显示的内容

只读

  • 只可查看，不可修改的文本框内容

禁用

  • 设置按钮不可点击

2.11.21 隐藏域

用于定义一些实际存在，但无需向用户显示的页面内容

<form method="get"><p>账号：<input name="user" type="text"></p><p>密码：<input name="pass" type="password"></p><p><input name="userID" type="hidden" value="123"></p><!--隐藏属性--><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPHfxBcF-1672214813905)(./assets/2.11.21.1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OGXf8l2O-1672214813906)(./assets/2.11.21.2.png)]

在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器

2.11.22 只读与禁用

用于定义不允许用户修改的内容和符合一定条件后才可以点击的按钮

<form><p>账号：<input name="user" readonly type="text" value="XuanZi"></p><!--不可修改--><p>密码：<input name="pass" type="password"></p><p><input disabled type="submit" value="提交"></p><!--不可点击-->
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lz2KF9zP-1672214813906)(./assets/2.11.22.png)]

在W3CHTML5标准中，规定对于布尔类型的属性，属性值可以省略。例如，列表框的默认选中，可以写为selected。同理，复选框的默认选中，可以写为checked，只读可以写为readonly，禁用可以写为disabled

2.11.23 标注

为表单元素添加标注后，单击标注的文本内容，浏览器会自动将焦点转移到与该标注相关的表单元素上

<form>性别：<label for="boy">男</label><input id="boy" name="sex" type="radio"><label for="girl">女</label><input id="girl" name="sex" type="radio">
</form>

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28-编程知识网

<label> 标签的 for 属性应当与相关元素的 id 属性相同

2.11.24 表单验证属性

placeholder

  • 定义提示信息

required

  • 不可为空

pattern

  • 使用正则表达式验证表单

2.11.25 placeholder 属性

用于为 input 类型的文本框提供提示，如内容示例、数据类型等，适用的type类型：text、search、url、email 和 password

<form>账号：<input placeholder="例如：张三、Marry" type="text"><!--键入内容过后提示信息消失-->
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vAyvnBa-1672214813906)(./assets/2.11.25.1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tumk6Qqw-1672214813906)(./assets/2.11.25.2.png)]

2.11.26 required 属性

用于规定输入框填写的内容不能为空，适用的 type 类型：text、password、email、search、url、number、checkbox、radio 和 file 等类型

<form><p>账号：<input required type="text"></p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5o6S4EuJ-1672214813907)(./assets/2.11.26.png)]

2.11.27 pattern 属性

用于验证用户输入的内容是否与所定义的正则表达式相匹配，适用的 type类型：text、password、email、search 和 url 等类型

<form><p>请输入您的账号：<input name="user" pattern="^[a-zA-Z0-9_-]{4,16}$" type="text"/>4~16位（字母、数字、_、-）</p><p><input type="submit" value="提交"></p>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8vlIugT-1672214813907)(./assets/2.11.27.png)]

2.12 HTML 总结

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML总结</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_62283694?type=blog">点击跳转CSDN博客</a>
</body>
</html>

三、CSS3 基础

3.1 CSS 简介

CSS 的主要使用场景就是布局网页，美化页面的

概念

  • Cascading Style Sheet：级联样式表

  • 表现 HTML 或 XML 等文档样式的计算机语言

作用

  • 提供了字体、文本、超链接、列表以及背景等网页元素的样式

  • 网页内容排版

3.2CSS发展史

3.2.1 CSS1.0

包含了字体、颜色、背景、文本等相关属性

3.2.2 CSS2.0

基于 CSS1.0，融入了 DIV+CSS 的概念，提出了 HTML 结构与 CSS 样式表的分离

3.2.3 CSS2.1

融入了更多高级的用法，如浮动，定位等

3.2.4 CSS3.0

它包括了 CSS2.1 下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持

3.3 CSS 语法结构

CSS 语言样式规则由选择器和声明两部分组成

选择器 { 属性1:属性值1;  属性2:属性值2; }
<!--选择器   声明1     声明2 -->

选择器用于指定被 CSS 样式处理的 HTML 对象

大括号中的内容是 CSS 样式声明，由属性和属性值组成

声明可以是一组或多组，属性和属性值之间用英文:连接，每组声明语句之间用英文;结尾

3.4 引入 CSS 的三种方式

h2 {color: green;/*样式名称*/ /*值*/
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title><style>h1 {color: red;}
</style>
<!--    style：内部样式，只对当前页面生效--><link rel="stylesheet" href="../css/01_Style.css">
<!--    link：链接式外部导入CSS样式-->
</head>
<body>
<!--样式的生效顺序：就近原则-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3 style="color:yellow;">三级标签</h3>
<!--直接写在标签内：只对当前标签生效-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tYKi7kN5-1672214813907)(./assets/3.4.png)]

3.4.1 行内样式

通过标签的 style 属性设置元素的 CSS 样式，也称为内联样式

<h3 style="color:yellow;">三级标签</h3>
<!--直接写在标签内：只对当前标签生效-->

这种方式不能起到内容与表现相分离，本质上没有体现出 CSS 的优势，因此不推荐使用

3.4.2 内部样式表

将 CSS 代码集中写在页面的<head>标签的<style>子标签中

优点

  • 同一页面中，一处定义，多处使用

  • 代码简洁，便于修改

缺点

  • HTML 代码与 CSS 代码处于同一文档中，内容混乱

  • 不利于多页面之间的代码共享

  • 不利于代码维护

<head><style>h1{color: blue;}</style><!--    style：内部样式，只对当前页面生效-->
</head>
<body><h1>一级标题</h1>
</body>

3.4.3 外部样式表

将 CSS 代码保存在扩展名为.css的样式表中，CSS 代码与 HTML 文档分离

HTML 文件引用外部样式表的两种方式

  • 链接式
<head><link  rel="stylesheet"  href="css文件路径" type="text/css"><!-- rel：使用外部样式表  href：css文件路径   type：文件类型-->
</head>
<body><h2>二级标题</h2>
</body>

在HTML文件中使用<link/>标签引入style.css样式表文件

  • 导入式
<head><style>@import url("style.css");/*css文件路径*/</style>
</head>
<body><h2>二级标题</h2>
</body>

在HTML文件中使用@import关键字引入style.css样式表文件

3.4.5 链接式与导入式的区别

区别 链接式 导入式
关键语法 <link/> @import
提供者 HTML语言提供 CSS语言提供
兼容问题 不存在浏览器兼容问题 IE 5以上的浏览器中才能识别
加载顺序 与页面同时加载 页面加载完成后再加载
样式权重 高 低

3.5 基础选择器

/*标签选择器*/
/*语法：直接写想要生效的标签名称就会对页面中所有的对应标签生效
*/
h1 {color: red;
}
/*类选择器*/
/*语法：以英文字符 .  点开头后面写名称可以自定义
*/
.xz{
color:green;
}
/*ID选择器*/
/*语法：以  #  符号开头，后面写名称可以自定义
*/
#yz{
color:yellow;
}
/*---------------------------------------------*/
h3{color:pink;
}
#zz{color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础选择器</title><link rel="stylesheet" href="../css/02_Style.css">
</head>
<body>
<h1>一级标签</h1>
<h1>一级标签</h1>
<!--标签选择器：只要是对应的标签就会生效
-->
<h2 id="yz">二级标签</h2>
<!--ID选择器:只要使用了ID选择器就会生效ID选择器一个页面只能使用一次
-->
<h2 class="xz">二级标签</h2>
<!--类选择器：只要使用了类选择器就会生效类选择器一个页面可以无限使用
-->
<h2>二级标签</h2>
<hr>
<h3>三级标签</h3>
<h3 class="xz">三级标签</h3>
<h3 id="zz" class="xz">三级标签</h3>
<!--优先级：ID选择器 > 类选择器 > 标签选择器-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSV7ciSL-1672214813908)(./assets/3.5.png)]

3.5.1 标签选择器

标签名 { 属性1:属性值1; 属性2:属性值2; }

<head><style>h1 {color: red;/*只有h1标签才生效*/}</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h1>一级标题</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rUEqGxr-1672214813908)(./assets/3.5.1.png)]

3.5.2 类选择器

.类名 { 属性1:属性值1; 属性2:属性值2; }

<head><style>h1 {color: red;/*只有h1标签才生效*/}.er {color: blue;}</style>
</head>
<body>
<h1>一级标题</h1>
<h2 class="er">二级标题</h2>
<!--在标签中使用 class 引入样式-->
<h1>一级标题</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dq8IZC7z-1672214813908)(./assets/3.5.2.png)]

3.5.3 ID 选择器

#id名 { 属性1:属性值1; 属性2:属性值2; }

<head><style>h1 {color: red;/*只有h1标签才生效*/}.er {color: blue;}#id {color: green;}</style>
</head>
<body>
<h1>一级标题</h1>
<h2 class="er">二级标题</h2>
<!--在标签中使用 class 引入样式-->
<h1>一级标题</h1>
<h2 id="id">二级标题</h2>
<!--在标签中使用 id 引入样式-->
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mRuddK5-1672214813908)(./assets/3.5.3.png)]

id 选择器具有唯一性，一个页面只可使用一次

3.5.4 通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素

* {属性1: 属性值1;}

通配符选择器不需要调用，自动就给所有的元素使用样式

3.5.5 基础选择器对照表

选择器 语法 描述
标签选择器 标签名{} 以标签名称开头，页面中所有对应标签均会生效
类选择器 .class{} 以.开头跟自定义名称，在标签中使用class引用
ID选择器 #id{} 以#开头跟自定义名称，在标签中使用id引用
通配符 *{} 以*命名，选取页面中的所有元素

3.5.6 基础选择器优先级

<head><style>h3 {color: red;}.xz {color: blue;}#zz {color: green;}</style>
</head>
<body>
<h3>三级标签</h3>
<h3 class="xz">三级标签</h3>
<h3 class="xz" id="zz">三级标签</h3>
<!--优先级：ID选择器 > 类选择器 > 标签选择器-->
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZJ3bHyj6-1672214813909)(./assets/3.5.6.png)]

3.6 层次选择器

/*后代选择器*/
/*当前选中元素后面的所有对应标签*/
body p {background-color: red;
}/*子选择器*/
/*当前选中元素后的一代对应标签*/
body > p {background-color: aqua;
}/*相邻兄弟选择器*/
/*当前选中元素同辈的一个相邻的对应标签（向下）*/
.yy + p {background-color: yellow;
}/*通用兄弟选择器*/
/*当前选中元素同辈的所有对应标签*/
.yy ~ p {background-color: pink;
}.yy {color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>层次选择器</title><link rel="stylesheet" href="../css/03_Style.css"><!--祖爷爷  爷爷  爸爸  你-->
</head>
<body>
<p>p1</p>
<p class="yy">p2</p>
<p>p3</p>
<p>p4</p>
<ul><li><p>p5</p></li><li><p>p5</p></li><li><p>p5</p></li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Tx7S78C-1672214813909)(./assets/3.6.png)]

类型 语法 功能描述
后代选择器 E F 使用空格链接，匹配E元素内的F元素
子选择器 E > F 使用“>”标识符链接，匹配F元素内的第一代E元素，即直接子元素
相邻兄弟选择器 E + F 使用“+”标识符链接，匹配紧位于E元素后的F元素
通用兄弟选择器 E ~ F 使用“~”标识符链接，匹配E元素后的所有F元素

3.6.1 后代选择器

<head><style>/*后代选择器*//*当前选中元素后面的所有对应标签*/body p {background-color: red;}</style>
</head>
<body>
<h1>一级标题</h1>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u9UtoSqn-1672214813909)(./assets/3.6.1.png)]

3.6.2 子选择器

<head><style>/*子选择器*//*当前选中元素后的一代对应标签*/body > p {background-color: aqua;}</style>
</head>
<body>
<h1>一级标题</h1>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol><li><p>p标签</p></li><li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-41oRD93B-1672214813909)(./assets/3.6.2.png)]

3.6.3 相邻同胞选择器

<head><style>/*相邻兄弟选择器*//*当前选中元素同辈的一个相邻的对应标签（向下）*/.yy + p {background-color: yellow;}</style>
</head>
<body>
<h1>一级标题</h1>
<p class="yy">p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol><li><p>p标签</p></li><li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESB66hOg-1672214813910)(./assets/3.6.3.png)]

3.6.4 通用兄弟选择器

<head><style>/*通用兄弟选择器*//*当前选中元素同辈的所有对应标签*/.yy ~ p {background-color: pink;}</style>
</head>
<body>
<h1>一级标题</h1>
<p class="yy">p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol><li><p>p标签</p></li><li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ow5YgG63-1672214813910)(./assets/3.6.4.png)]

3.7 结构伪类选择器

li:first-child {background-color: #005eff;
}/*父级元素下的第一个标签，且这个标签为li*/ul li:last-child {background-color: red;
}/*ul下的最后一个标签，且这个标签为li*/p:nth-child(1) {background-color: #00fff7;
}/*父级元素下的第n个标签，且这个标签为p*//*重点在于是否指定了父级标签*/li p:first-of-type {background-color: #5eff00;
}/*父级元素li下的第一个p标签*/
p:last-of-type {background-color: #c800ff;
}/*父级元素下的最后一个p标签*/
p:nth-of-type(2) {background-color: #ffea00;
}/*父级元素下的第n个p标签*/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>结构伪类选择器</title><link rel="stylesheet" href="../css/04_Style.css"><!--祖爷爷  爷爷  爸爸  你-->
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul><li>1<p>232</p></li><li>2<p>232</p></li><li>3<p>232</p></li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CGNKdQdZ-1672214813910)(./assets/3.7.png)]

选择器类型 功能描述
:first-child选择器 父级元素的第一个子元素
:last-child选择器 父级元素的最后一个子元素
:nth-child(n)选择器 父级元素的第n个子元素
:first-of-type选择器 父级元素的第一个相同类型子元素
:first-of-type选择器 父级元素的最后一个相同类型子元素
:nth-of-type(n)选择器 父级元素的第n个相同类型子元素

3.7.1 child

<head><style>li:first-child {background-color: #005eff;}body > p:first-child {background-color: #ffd200;}</style>
</head>
<body>
<p>p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol><li><p>p标签</p></li><li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brsapT4D-1672214813911)(./assets/3.7.1.png)]

3.7.2 type

<head><style>body > p:last-of-type {background-color: #c800ff;}/*父级元素下的最后一个p标签*/p:nth-of-type(1) {background-color: #ffea00;}/*父级元素下的第n个p标签*/</style>
</head>
<body>
<p>p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol><li><p>p标签</p></li><li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WoWDBOry-1672214813911)(./assets/3.7.2.png)]

3.8 属性选择器

/*= 值直等于*= 值包含^= 值以开头$= 值以结尾*/h3[id] {background-color: #f80000;
}ol h3[id] {background-color: #00fff7;
}/*可以与其他选择器混用*/li[class="coffee"] {background-color: pink;
}li[title$="Coffee"] {background-color: #ffd200;
}li[id*="f"] {background-color: #c0ff00;
}li[id^="l"] {background-color: #005eff;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><link rel="stylesheet" href="../css/05_Style.css">
</head>
<body>
<h3 id="1">星巴克饮品</h3>
<ol><h3 id="2">饮品</h3><li class="coffee">抹茶拿铁</li><li class="coffee">焦糖玛奇朵</li><li class="coffee">摩卡</li><li id="four">卡布奇诺</li><li id="five">美式咖啡</li><li title="natieCoffee">红茶拿铁</li><li title="natie">香草风味拿铁</li><li>冷萃冰咖啡</li><li class="mocha">抹茶星冰乐</li><li id="last">榛果风味摩卡星冰乐</li>
</ol></body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SQw5G4yz-1672214813911)(./assets/3.8.png)]

选择器类型 功能描述
E[attr] 匹配具有属性attr的E元素
E[attr=val] 匹配具有属性attr的E元素，且属性值为val，val区分大小写
E[attr^=val] 匹配具有属性attr的E元素，且属性值是以val开头的任意字符串
E[attr$=val] 匹配具有属性attr的E元素，且属性值是以val结尾的任意字符串
E[attr*=val] 匹配具有属性attr的E元素，且属性值包含了“val”

3.9 字体样式

span {font-family: "楷体";/*字体名称*/font-size: 20px;/*字体尺寸*/font-style: italic;/*字体样式*/font-weight: bold;/*字体粗细*/
}h1 {font-family: "华文新魏";font-size: 30px;
}p {font: italic bold 10px "微软雅黑";/*    连续声明*//*    风格   粗细   大小 类型*/
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式</title><link rel="stylesheet" href="../css/06_Style.css">
</head>
<body>
<h1>木兰花慢·彭城怀古</h1>
<span>萨都剌 〔元代〕</span>
<p>古徐州形胜，消磨尽，几英雄。想铁甲重瞳，乌骓汗血，玉帐连空。</p>
<p> 楚歌八千兵散，料梦魂，应不到江东。空有黄河如带，乱山回合云龙。</p>
<p> 汉家陵阙起秋风，禾黍满关中。更戏马台荒，画眉人远，燕子楼空。</p>
<p>人生百年如寄，且开怀，一饮尽千钟。回首荒城斜日，倚栏目送飞鸿。</p>
</body>
</html>

3.10 文本样式

h1 {/*color: red;*//*英文单词*//*color:#0000FF;*//*16进制颜色代码 #开头 */color: rgb(0, 47, 167); /*克莱因蓝*//*rgb 0~255*//*color: rgba(16, 39, 156, 0.5);*//*rgba Alpha值代表颜色的透明度/不透明度*/text-shadow: 5px 5px 5px rgb(255, 0, 0);/*      水平位置  垂直位置  模糊半径  颜色 */
}span, img {vertical-align: middle;
}p {text-align: left;text-indent: 2em;line-height: 25px;}a[class="a1"] {}a[class="a2"] {text-decoration: line-through;
}a[class="a3"] {text-decoration: underline;
}a[class="a4"] {text-decoration: overline;
}a[class="a5"] {text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式</title><link rel="stylesheet" href="../css/07_Style.css">
</head>
<body>
<h1>恋绣衾·柳丝空有千万条</h1>
<span>赵汝茪 〔宋代〕</span>
<img src="../../../resources/image/玄子头像.png" alt="" width="50px" height="50px">
<p>柳丝空有千万条。系不住、溪头画桡。想今宵、也对新月，过轻寒、何处小桥。<br>玉箫台榭春多少，溜啼红、脸霞未消。怪别来、胭脂慵傅，被东风、偷在杏梢。</p>
<a href="#" class="a1">a1</a>
<a href="#" class="a2">a2</a>
<a href="#" class="a3">a3</a>
<a href="#" class="a4">a4</a>
<a href="#" class="a5">a5</a></body>
</html>

3.11 超链接伪类

/* 未访问前 */
a:link {color: red;text-decoration: none;
}/* 鼠标悬停时 */
a:hover {color: #0077ff;text-decoration: underline;
}/*鼠标未释放*/
a:active {color: #5eff00;
}/*访问后*/
a:visited {color: #ffd200;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接伪类</title><link rel="stylesheet" href="../css/08_Style.css">
</head>
<body>
<a href="#">公司首页</a>
<a href="#">产品介绍</a>
<a href="#">售后保障</a>
<a href="#">联系我们</a>
</body></html>

3.12 列表样式

#a {/*list-style-type: none;*//*list-style-type: disc;*/list-style-type: circle;/*list-style-type: square;*//*list-style-type: decimal;*/line-height: 32px;
}#b {/*list-style-type: decimal-leading-zero;*//*list-style-type: lower-alpha;*/list-style-type: upper-alpha;/*list-style-type: lower-roman;*//*list-style-type: upper-roman;*/line-height: 32px;
}#c {list-style-image: url("../../../resources/image/多语言.png");line-height: 32px;}#d {list-style-position: inside;line-height: 32px;
}#e {list-style-position: outside;line-height: 32px;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/09_Style.css">
</head>
<body>
<h2>搜索热点</h2>
<ul id="a"><li>天问一号火星车</li><li>玉兔二号月球车</li><li>天宫空间站</li><li>长征5号运载火箭</li><li>FAST望远镜</li></ul>
<h2>搜索热点</h2>
<ol id="b"><li>天问一号火星车</li><li>玉兔二号月球车</li><li>天宫空间站</li><li>长征5号运载火箭</li><li>FAST望远镜</li></ol>
<h2>搜索热点</h2>
<ol id="c"><li>天问一号火星车</li><li>玉兔二号月球车</li><li>天宫空间站</li><li>长征5号运载火箭</li><li>FAST望远镜</li>
</ol>
<h2>搜索热点</h2>
<ol id="d"><li>天问一号火星车</li><li>玉兔二号月球车</li><li>天宫空间站</li><li>长征5号运载火箭</li><li>FAST望远镜</li>
</ol>
<h2>搜索热点</h2>
<ol id="e"><li>天问一号火星车</li><li>玉兔二号月球车</li><li>天宫空间站</li><li>长征5号运载火箭</li><li>FAST望远镜</li>
</ol>
</body>
</html>

3.13 背景样式

#a {width: 200px;height: 200px;border: 1px solid #FF0000;text-align: center;line-height: 200px;
}#b {width: 200px;height: 200px;border: 1px solid #FF0000;background-color: #00fff7;background-image: url("../../../resources/image/多语言.png");/*background-repeat:  repeat-x;*//*background-repeat:  repeat-y;*/background-repeat: no-repeat;background-position: 100px 100px;background-size: 50px 60px;/*background-size: cover;*//*background-size: contain;*/}#d {width: 200px;height: 200px;border: 1px solid #FF0000;background: red url("../../../resources/image/多语言.png") 100px 100px no-repeat;
}#e {width: 200px;height: 200px;border: 1px solid #FF0000;background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 10%, #80D0C7 90%);
}#f {width: 200px;height: 200px;border: 1px solid #FF0000;background-color: #0093E9;background-image: linear-gradient(to bottom left, #023c0d, #5bb226, #98d0c1, #de512b, #0c0c6d);}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景样式</title><link rel="stylesheet" href="../css/10_Style.css">
</head>
<body>
<div id="a">31231
</div>
<div id="b">
</div>
<div id="d">
</div>
<div id="e">
</div>
<div id="f">
</div>
</body>
</html>

3.14 盒子模型

div:nth-of-type(1) {background-color: #00fff7;/*border: 5px dashed #FF0000;*/width: 100px;height: 100px;border-color: #FF0000;border-width: 3px 5px 4px 3px;border-style: solid dotted dashed double;/*solid: 定义实线边框*//*dashed: 定义虚线边框*//*dotted: 定义点线边框*//*double: 定义两个边框*/
}div:nth-of-type(2) {width: 100px;height: 100px;background-color: #0077ff;border: 4px dashed #FF0000;/*margin:10px;*/margin: 0 auto;/*margin-top: 设置元素的上外边距*//*margin-right: 设置元素的右外边距*//*margin-bottom: 设置元素的下外边距*//*margin-left: 设置元素的左外边距*//*margin: 复合属性，在一个声明中设置所有外边距属性*/padding: 10px;/*padding-top: 设置元素的上内边距*//*padding-right: 设置元素的右内边距*//*padding-bottom: 设置元素的下内边距*//*padding-left: 设置元素的左内边距*//*padding: 复合属性，在一个声明种设置所有内边距属性*/}div:nth-of-type(3) {box-sizing: border-box;width: 200px;height: 200px;padding: 10px;margin: 10px;border: 1px solid #000;
}div:nth-of-type(4) {box-sizing: content-box;width: 200px;height: 200px;padding: 10px;margin: 10px;border: 1px solid #000;
}img {margin-left: 10px;
}/* 四个角都是圆角，值均为40px */
img:nth-of-type(1) {border-radius: 40px;
}/* 左上角右下角是20px，右上角左下角是40px */
img:nth-of-type(2) {border-radius: 20px 40px;
}/* 左上角是30px，右上角左下角是10px, 右下角是50px */
img:nth-of-type(3) {border-radius: 30px 10px 50px;
}/* 左上角是20px，右上角是10px，左下角是50px, 右下角是30px */
img:nth-of-type(4) {border-radius: 20px 10px 50px 30px;
}img:nth-of-type(5) {/* 设置圆角的半径为50% */border-radius: 50%;/* 设置圆角的半径为元素宽度的一半 *//* border-radius: 100px; */
}img:nth-of-type(6) {border-radius: 50%;box-shadow: 10px 10px 10px 2px #ffd200;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><link rel="stylesheet" href="../css/11_Style.css">
</head>
<body>
<div>
</div>
<div>323321
</div>
<div>
</div>
<div>
</div>
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
<img src="../../../resources/image/玄子头像.png" alt="" width="100px" height="100px">
</body>
</html>

3.15 浮动

h1, h3 {border: 1px solid #ffd200;/*display: inline;*//*display: none;*/display: inline-block;/*display: block;*/
}img, a {border: 1px solid #ffd200;display: block;
}#bigBox {border: 2px dotted #ffd200;/*width: 300px;*//*height: 200px;*/background-color: #00fff7;
}#box01, #box02, #box03 {border: 1px solid #ff0000;float: left;
}p {/*clear: left;*/float: left;
}/*none：左右两侧均允许有浮动元素，默认值*/
/*both：左右两侧均不允许有浮动元素*/
/*left：左侧不允许有浮动元素*/
/*right：右侧不允许有浮动元素*/
/*-------------------------*/
/*清除浮动的其他方法*/
/*使用空标签清除浮动*/
/*设置父元素的高度*/
/*使用overflow属性清除浮动*/
/*使用伪类after清除浮动*/
#box04 {clear: both;
}#bigBox:after {content: ""; /* 在bigBox父元素后面添加内容为空 */display: block; /* 把添加的内容转化为块级元素 */clear: both; /* 清除这个元素两边的浮动 */
}body > div:nth-of-type(2) {width: 200px;height: 100px;background-color: #ffd200;border: 1px solid #ff0000;/*overflow: visible;*//*overflow: hidden;*//*overflow: scroll;*/overflow: auto;/*visible：超出盒子自身的内容呈现在元素框之外，默认值*//*hidden：超出盒子自身的内容会被修剪，并且内容是不可见的*//*scroll：超出盒子自身的内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*//*auto：如果超出盒子自身的内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><link rel="stylesheet" href="../css/12_Style.css">
</head>
<body>
<h1>一级标签</h1>
<h3>三级标签</h3>
<img src="../../../resources/image/玄子头像.png" alt="" width="100px " height="100px">
<a href="#">链接</a>
<hr>
<div id="bigBox"><div id="box01">box01</div><div id="box02">box02</div><div id="box03">box03</div><p>这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本这是段落文本，这是段落文本</p><!--    <div id="box04"></div>&lt;!&ndash;在浮动元素后添加空标签div &ndash;&gt;-->
</div>
<div>在CSS中，当盒子内的元素超出盒子在CSS中，当盒子内的元素超出盒子在CSS中，当盒子内的元素超出盒子在CSS中，当盒子内的元素超出盒子在CSS中，当盒子内的元素超出盒子</div></body>
</html>

3.16 定位

/*定位类型：position属性*//*position属性常用属性值*/
/*static：默认值，没有定位*/
/*relative：相对定位*/
/*absolute：绝对定位*/
/*fixed：固定定位*//*偏移位置*/
/*top：顶端偏移量*/
/*right：右侧偏移量*/
/*bottom ：底端偏移量*/
/*left ：左侧偏移量*/.box {width: 300px;height: 300px;background: #ccc;border: 1px solid #000;padding: 10px;position: relative;}.box01, .box02, .box03 {position: static;width: 200px;height: 50px;background: #F00;border: 1px dashed #000;margin: 10px 0px;line-height: 50px;text-align: center;
}.box01 {position: relative;left: 30px;top: 20px;
}.box02 {position: absolute;right: 50px;bottom: 120px;
}#back {width: 200px;height: 50px;background: #F00;border: 1px dashed #000;position: fixed;bottom: 50px;right: 50px;
}#box {width: 200px;height: 200px;background: red;position: absolute;left: 600px;top: 200px;z-index: 0;opacity: 0.7;/*    透明度*/
}p {background: #0077ff;position: absolute;left: 670px;top: 200px;z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位</title><link rel="stylesheet" href="../css/13_Style.css">
</head>
<body>
<div class="box"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div>
</div><div id='back'>返回顶部</div>
<p>z-index 属性设置元素的堆叠顺序</p>
<div id="box">4</div></body></html>

3.17 位移

div:nth-of-type(2):hover {/*transform: translate(100px, 30px);*//*transform: translate(100px, 50px) rotate(45deg);*//*transform: translate(100px, 50px) scale(1.5);*/transform: translate(100px, 50px) skew(20deg, 10deg);}div {width: 200px;height: 200px;background: #F00;border: 1px dashed #000;transition: width 3s ease-in-out 2s;/*linear：规定元素从初始状态过渡到终止状态时速度为匀速*//*ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）*//*ease-in：规定以慢速开始的过渡效果*//*ease-out：规定以慢速结束的过渡效果*//*ease-in-out：规定以慢速开始和结束的过渡效果*/}div:nth-of-type(1):hover {width: 600px;
}div:nth-of-type(3) {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 500px;height: 500px;background-color: #0b0c0e;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><link rel="stylesheet" href="../css/14_Style.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<div class="desc"><a href="#">这是个链接</a>
</div>
</body>
</html>

3.18 悬浮动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.desc {width: 300px;height: 500px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background-image: linear-gradient(160deg, #0093E9 10%, #80D0C7 90%);border-radius: 8px;transition: all 0.4s ease-in-out;}.desc > a {color: #999999;font-size: 80px;text-decoration: none;display: block;margin-top: 50px;padding: 0;text-align: center;transition: all 0.4s ease-in-out;}.desc:hover {font-size: 16px;box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);transform: translate(0, -4px);}.desc > a:hover {font-size: 85px;color: black;text-shadow: 2px 4px 10px rgba(255, 255, 255, 0.5);transform: translate(0, -4px);}</style>
</head>
<body>
<div class="desc"><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</div>
</body>
</html>

暂停更新 玄子2022年12月28日