html+css+javascript -

概念

提交表单：提交表单是指将用户在网页表单中输入的数据发送到服务器进行处理的过程。表单通常用于收集用户信息，例如注册、登录、搜索、反馈等。

模态对话框：模态对话框（Modal Dialog）是一种用户界面元素，通常用于在应用程序或网页中显示重要信息或要求用户进行某种操作。模态对话框会在用户与其交互时阻止对其他界面的访问，直到用户关闭对话框或完成所需操作。

自闭合标签：不需要重复出现的标签称为自闭合标签

html

介绍

HTML

HTML(Hypertext Markup Language) 称为超文本标识语言，目前最新版本为 HTML5.0，使用最为广泛的为 HTML4.1 版本

不过HTML因为会把结构和表现混淆在一起，为以后的维护和管理埋下隐患，所以并不适合用以构建标准化网页。常见的解决方式为通过 CSS 与 HTML5语义化元素结合，以解决结构与表现混淆的问题

XHTML

XHTML(The Extensible Hypertext Markup Language)称为可扩展表示语言，其实际为 HTML 的升级版本，相比于HTML，XHTML具有以下特点：

XHTML是HTML的严格版本，遵循 XML 的语法规则，例如所有标签必须正确闭合，属性值必须用引号括起来，标签名必须使用小写字母
允许用于自定义标签
若XHTML文档存在语法错误，浏览器会停止解析并显示错误信息，用户无法看到页面内容；而浏览器在解析HTML时会尽可能容忍错误，自动修复一些常见的语法错误
HTML，尤其是HTML，广泛应用于各种浏览器和设备；而XHTML由于其严格性，在一些老旧浏览器上可能存在兼容性问题

随着HTML5的普及，XHTML的使用将逐渐减少，HTML5成为了主流的网页开发标准

结构

HTML文档实际上为一个文本文件，它由标签与信息混合而成，其中<html>``<head>和<body>这三个标签组成了HTML文档的基本结构

<html>是 HTML 文档的根元素，所有其他 HTML 元素都必须嵌套在这个标签内，<html> 标识了文档的开始与结束
<html>标签内定以的样式（如 CSS）和脚本（如 JavaScript）通常适用于整个文档。这使得开发者能够更方便地管理和应用样式和行为
<head>部分包含了网页的元数据，这些内容不直接显示于网页内容中，例如：
- <title>：定义网页的标题，显示在浏览器标签上
- <meta>：提供关于网页的描述、关键词、字符集等信息
- <link>：用于链接外部资源，如 CSS样式表
- <style>：用于嵌入内部 CSS样式表
- <script>：用于引入或嵌入 JavaScript代码
body 部分包含了网页的主要内容，这些内容是用户在浏览器实际看到的部分

在 HTML 文档中，绝大多数元素都有起始标签与结束标签，这两个标签之间所包含的内容便是元素主体，同时元素的名称以及可选属性必须在起始标签中，结束标签需以反斜杠开始，然后附上元素名称，例如在代码：

html

<body>
  新年快乐
</body>

中，"新年快乐"便是元素主体

<meta> 标签用于定义文档的元数据，通常放置在 <head> 部分，这些内容不直接显示于网页内容中。其基本语法如下：

html

<meta name="description" content="这是网页的描述内容。">

例如：

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个示例网页，用于展示HTML中的meta标签。">
    <meta name="keywords" content="HTML, meta, 示例, 教程">
    <meta name="author" content="你的名字">
    <title>Meta标签示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是网页的主要内容。</p>
</body>
</html>

常用标签

文本格式标签

<title>: 用以标识网页标题。每个网页的标题应当是唯一的，否则会在用户体验、搜索引擎优化、网站的可访问性等地方造成问题
<h1> $\dots$ <h6>: 用于标识网页的标题和子标题。使用时应避免跳级，同时每个页面通常应当只有一个 <h1>
<p>: 用以标识一个段落，以组织和分隔文本内容，让其更易于阅读和理解，同时：
- <p> 不能嵌套其他的段落标签，如需要在段落中插入其他块级元素，应考虑使用其他的结构
- 如果标签中没有内容，浏览器通常不会显示该段落，所以应确保每个 <p> 中都有文本或其他内容
- 浏览器会为段落添加默认的上下边距，可通过 CSS 来修改段落的样式
<pre>: 用以标识预格式化文本。其与 <p>，类似，但 <pre> 会保留空格与换行符，而 <p> 会自动合并多余的空格使文本成现单一段落
<blockquote>: 用以标识一个长文本的引用，是一个块级元素，通常会在引用文本的前后添加默认的缩进，以和其他文本区分开来。
- <blockquote>的 cite 属性可用于指定引用的来源链接（通常是指向原始文档的 URL）
<q>：用以表示短的内联引用，通常会自动添加引号
<footer>: 用以标识一个页面或部分的底部内容，主要用于提供附加信息或总结性的内容，以提高语义性与可读性
<del>: 用以标识删除的内容，通常带有删除线
<ins>：用以标识插入的内容，通常带有下划线
<br>：用以插入换行符，为自闭合标签
<bdo>：用以控制文本的书写方向，例如：

html

<bdo dir="ltr">这是从左到右显示的文本。</bdo>
<bdo dir="rtl">هذا نص من اليمين لليسار.</bdo>

字符格式标签

<b>：使文本以加粗效果显示
<strong>：用以强调文本，表示该部分文本具有重要性，默认以粗体显示
<em>：用以强调文本的语气或语义，默认以斜体显示
<i>：标识引用文本，以斜体效果显示
<blink>：标识闪烁文本，以闪烁效果显示，但现在多数浏览器已不支持此标签
<big>：标识放大文本，以放大效果显示
<small>：标识缩小文本，以缩小效果显示
<sup>：标识上标文本，以上标效果显示
<sub>：标识下标文本，以下标效显示
<cite>：标识引用文本，用以标识作品的标题或名称，通常以斜体显示。<cite>不应用于普通的引用和引述
<abbr>：用以表示缩写或首字母缩写的标签，可设置完整释义。浏览器会在缩写上显示一个提示框，当用户将鼠标悬停在缩写上时，可以看到完整释义，例如：

html

<p>HTML 是 <abbr title="HyperText Markup Language">HTML</abbr> 的缩写。</p>

<address>：用于标记与网页内容相关的联系信息，通常包括作者、组织、公司或其他联系信息
<dfn>：用以标识一个术语的定义，通常只在第一次出现时使用，一般以斜体展现
<kbd>：用以表示用户输入的内容，通常是键盘输入
<samp>：用以表示程序执行后产生的输出文本，默认以等宽字体显示
<var>：用以表示一个变量或数学表达式的值，默认以斜体显示
<tt>：用以将文本显示为等宽字体
<code>：用于表示代码或程序中的代码片段，默认以等宽字体显示

列表标签

<ul>...<ul> 和 <ol>...<ol> 分别用以标识无序列表与有序列表，在这些列表中再用 <li> 表示每个项目

例如可通过

html

<body>
    <h1>我的日常任务</h1>
    <ol>
        <li>起床</li>
        <li>吃早餐</li>
        <li>上班</li>
        <li>锻炼</li>
    </ol>
</body>
</html>

来创建有序列表

<dl>用以描述列表，列表厚葬每个术语由 <dt>（定义术语）标签表示，而每个术语的描述则有 <dd>（定义描述）标签表示，例如：

html

<body>
    <h1>编程语言</h1>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，用于创建网页的结构。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，用于设置网页的样式和布局。</dd>
        <dt>JavaScript</dt>
        <dd>一种编程语言，用于实现网页的交互功能。</dd>
    </dl>
</body>
</html>

链接标签

<a> 标签是 HTML 中用于创建超链接的元素，其具有以下属性：

href：用以指定链接目标的 URL 地址，可以是绝对路径或相对路径
target：定义链接打开的方式
1. _self：在当前窗口打开（默认值）
2. _blank：在新窗口或新标签页中打开
3. _parent：在父框架中打开
4. _top：在整个窗口中打开
rel：定义当前文档与被链接文档之间的关系，常见的关系包括：
- noopener：防止新页面访问原页面的 window 对象，增强安全性。
- noreferrer：防止浏览器发送 HTTP 引荐来源信息。
title：提供关于链接的额外信息，通常在鼠标悬停时显示。
download：指示浏览器下载链接的目标，而不是导航到它。
keyboard：用以设置访问的快捷键，并且根据操作系统的不同，往往还需要在前面加上特定的前缀：
- 在 Windows 中，快捷键通常为 Alt +
- 在 Mac OS 中，快捷键通常为 Ctrl + Option +
- 在 Linux 中，快捷键通常为 Alt +

例如，通过：

python

<a href=".." accesskey="b" target="_blank"></a>

可以实现返回上一级页面的快捷键

通过 <a> 标签，可以跳转至其他页面的特定位置，例如：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接到目标网页的特定位置</title>
</head>
<body>
    <h1>点击下面的链接跳转到目标网页的特定位置</h1>

    <!-- 使用 <a> 标签链接到目标网页的锚点 -->
    <a href="target.html#section2">跳转到目标网页的第二节</a>
</body>
</html>

这里文件 target.html 中的内容为：

html

<!-- 假设这是目标网页的内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标网页</title>
</head>
<body>
    <h1>欢迎访问目标网页</h1>

    <p>这里是普通内容。</p>

    <!-- 锚点位置 -->
    <div id="section2">
        <h2>这是第二节</h2>
        <p>这是第二节的内容。</p>
    </div>

    <p>更多的内容...</p>
</body>
</html>

<link> 标签是一个主要用于定义文档与外部资源之间关系的标签，它可将外部的样式表（CSS）、网站图标（favicon）、RSS feed 等与网页关联起来，通常放于 <head> 部分中，其具有以下常见属性：

rel：用以指定当前文档与链接资源之间的关系：
- stylesheet：表示链接的文件是一个 CSS 样式表
- icon：指定链接的图标，通常用于指定网站的 favicon。
- alternate：指定替代版本的资源，比如页面的 RSS feed。
- preload：指示浏览器提前加载某些资源以优化性能。
- naxt：指定文档中下一个可以访问的资源，常用于分页。
href：定义外部资源的 URL。
type：用以指定链接资源的 MIME 类型，通常用于标识资源的格式。
sizes：用以指定图标的大小，通常与 rel="icon" 一起使用。
media：用以指定样式表的适用媒体类型。例如：

html

<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

多媒体标签

<img>：用以嵌入图像，其语法为：

html

<img src="image.jpg" width="300" height="200">

同时其还具有以下的可选属性

alt：用以提供图片的替换文本，当图片无法加载时显示
title：用以提供图像的提示文本，通常在鼠标悬停于图像上时显示。
loading：控制图像加载的方式。

<embed> 和 <object> 与 <iframe> 标签功能类似，以下是关于他们的介绍：

特性	`<embed>`	`<object>`	`<iframe>`
功能	嵌入外部资源，如音频、视频、Flash 动画等	嵌入外部资源、网页或应用程序	嵌入另一个独立的 HTML 页面，通常用于展示外部网站
自闭合标签	是	否	否
嵌入内容的类型	多用于嵌入多媒体内容（如音频、视频、Flash）	可以嵌入多种类型的内容，如 Flash、PDF、HTML 页面等	主要用于嵌入独立的 HTML 页面或外部网页
主要属性	`src`、`width`、`height`、`type`	`data`、`type`、`width`、`height`、`name`、`classid`	`src`、`width`、`height`、`name`、`sandbox`
替代内容支持	不支持	支持（可以在 `<object>` 标签内部提供替代内容）	不支持替代内容（但可以通过嵌入页面本身的 HTML 内容来替代）
页面上下文	在当前页面的上下文中嵌入外部资源	可以嵌入不同类型的外部资源，且支持更多的配置	嵌入的内容被封装在一个独立的框架（iframe）中，与主页面相互隔离
常见使用场景	嵌入多媒体资源，如视频、音频或 Flash 动画	嵌入 HTML 页面、PDF 文件、Flash 或其他应用程序	嵌入外部网页、加载动态内容或在网页内展示第三方内容
兼容性	支持主流浏览器，但功能简单，缺乏灵活性	支持主流浏览器，功能较为丰富，适用于多种资源类型	支持主流浏览器，用于显示外部网页，具备安全沙箱属性（`sandbox`）
安全性	比较简单，主要取决于资源本身的安全性	可以控制嵌入资源的来源，支持更强的安全策略	提供沙箱属性（`sandbox`）来控制 iframe 中内容的行为

表格标签

table：用于定义表格。所有表格相关的标签都应该在 <table> 标签内进行定义。
tr：定义一个表格行。每个 <tr> 标签包含多个单元格 <td> 或 <th>。
th：定义一个表头单元格，默认文本是加粗且居中的。它通常用于表格的头部行。
td：定义一个数据单元格，用于显示实际的数据。
thead：用来定义表格的头部部分，包含表头行（<th>），通常放在表格的最上面。
tbody：定义表格的主体部分，包含数据行（<tr> 和 <td>）。
tfoot：用来定义表格的脚部部分，通常包含总结性的数据，位于表格的底部。
col：用以定义

例如：

html

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>广州</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表格结束</td>
    </tr>
  </tfoot>
</table>

表单标签

form标签用以定义一个表单，它是一个容器元素，用来收集用户的输入并将数据提交到服务器

常见属性：

action：用以指定表单数据提交的 URL 地址。当表单提交时，浏览器会将数据发送到这个 URL。可以是绝对路径或相对路径。
method：指定提交数据的方式。常用的提交方式有两种：
- 通过 URL 提交数据（不适合提交大量或敏感数据）。
- 通过 HTTP 请求提交数据，数据不会显示在 URL 中，适用于较大的数据或敏感信息的提交。
name：为表单指定一个名称，可以通过 JavaScript 访问该表单。
target：指定在何处显示提交的响应。
enctype：指定表单数据的编码类型，通常与 method="post" 一起使用，常见的值有：
- application/x-www-form-urlencoded（默认）: 表单数据以 URL 编码方式发送。
- multipart/form-data：用于发送文件数据。
- text/plain：以纯文本格式发送数据。

<form> 标签内通常包含不同的输入元素，用于收集用户的数据。常见的表单元素有：

<input>：用以接受用户的输入，其基本语法为：<input type="text" name="username" id="username">，以下是一些常见的 type 值：

text：用于单行文本输入框
password：用于输入密码，显示的内容会被掩盖成圆点（或其他符号）
email：用于输入电子邮件地址，浏览器会验证输入是否符合电子邮件格式。
number：用于输入数字，可以指定最小值、最大值、步长等限制，例如：<input type="number" name="age" min="18" max="100" step="1">
checkbox：用于选择框，允许用户勾选（可以是多个选择）
ratio：用于单选按钮，允许用户从多个选项中选择一个
data：用于选择日期，浏览器会展示日期选择器。
file：用于选择文件，允许用户从文件系统中选择一个或多个文件。
range：用于选择范围值，通常以滑块的形式显示。
submit：用于提交表单，通常会呈现一个按钮。
button：用于自定义按钮，通常结合 JavaScript 使用。
tel：用于输入电话号码，浏览器会提供针对电话输入的虚拟键盘（在移动设备上）。
url：用于输入网址，浏览器会验证输入是否符合网址格式。
time：用于选择时间，展示时间选择器。

<input> 的一些常见属性值：

name：用于定义该输入字段的名称，表单提交时作为参数的键名。
value：用于定义输入框的初始值，或是按钮的显示文本（如提交按钮）。
id：定义元素的唯一标识符，通常用于与 label 标签结合使用。
placeholder：用于设置输入框的占位符文本，给用户提示可以输入什么内容。
required：定义该字段为必填项，表单提交时若该字段为空，浏览器会给出提示。
readonly：定义输入框为只读，用户无法修改其内容。
disabled：定义输入框为禁用状态，用户无法与其交互。
min/max：用于设置数字、日期等输入控件的最小值和最大值。
maxlength：用于限制文本框中可输入的最大字符数。
autocomplete：用于启用或禁用浏览器的自动填充功能，其有着以下几种取值：
- on：启用自动填充（默认值）
- off：禁用自动填充
- name：填充姓名
- email：填充电子邮件地址。
- tel：填充电话号码
tabindex：用以控制元素的可聚焦性和聚焦顺序，其存在以下三种的取值：
- 正整数值：浏览器会根据 tabindex 的大小，从小到大决定焦点顺序。
- 零值：根据在文档中的自然顺序决定聚焦顺序
- -1：无法通过 Tab 来聚焦

赋以属性值之后，可通过 Tab 依据聚焦顺序依次访问

textarea：类似于 <input>，但是用以多行文本的输入，增加了 rows和 cols 的属性值用以控制行数与每行显示的字符数 select：用于创建下拉菜单的元素。它允许用户从一组选项中选择一个或多个值，其基本结构为：

html

<select name="car" id="car">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

并且还拥有可选属性：

multiple：允许用户选择多个选项
size：定义显示选项的行数（不显示滚动条时的行数）
disabled、required等

button：用于创建可点击的按钮。它可以包含文本、图像或者其他 HTML 元素，用于触发某些行为，如提交表单、执行 JavaScript 脚本等。其具有以下属性：

type：定义按钮的类型，常见的有：
- button：默认值，用于触发自定义的 JavaScript 事件。
- submit：用于提交表单数据。
- reset：用于重置表单中的所有字段为默认值。
form：指定按钮所在的表单，按钮可以在页面上独立存在，仍然与指定的表单进行交互。
name、value、disabled、autofocus等

label：用以为表单控件（如 <input>、<select>、<textarea> 等）定义一个可点击的标签。当用户点击标签时，浏览器会将焦点转移到与标签关联的控件上。例如：

html

<label for="male">男</label>
<input type="radio" id="male" name="gender" value="male">

<label for="female">女</label>
<input type="radio" id="female" name="gender" value="female">

当单击标签"男"时，左边的按钮便会被选中；单击标签"女"时，右边的按钮便会被选中

fieldset：用以将表单元素分组。它可以帮助在视觉上和结构上将相关的表单控件组织在一起，使表单更加清晰且易于理解。<fieldset> 标签通常与 <legend> 标签一起使用，后者为分组提供一个标题。例如：

html

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <fieldset>
    <legend>密码设置</legend>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    
    <label for="confirm-password">确认密码:</label>
    <input type="password" id="confirm-password" name="confirm-password">
  </fieldset>

  <button type="submit">提交</button>
</form>

结构性标签

<iframe> 标签用以在当前页面中嵌入另一个 HTML 页面的元素，即在一个网页中显示另一个网页的内容

其基本语法为：

html

<iframe src="嵌入页面的URL" width="宽度" height="高度" frameborder="边框" allowfullscreen></iframe>

常用属性包括：

src：指定要嵌入的页面的 URL 地址。
name：设置嵌入页面的名称，可以通过该名称在其他地方打开该 <iframe> 中的链接。
width：控制 <iframe> 的宽度，可使用像素（px）或百分比（%）等单位。
height：控制 <iframe> 的高度，可使用像素（px）或百分比（%）等单位。
frameborder：设置边框的显示。值为 0 表示无边框，值为 1 表示有边框（HTML5 中已不推荐使用，建议使用 CSS）。
loading：控制 <iframe> 的加载方式，值可为 laze 或 eager，分别为延时加载与立即加载
allowfullscreen：允许嵌入的内容全屏显示。
sandbox：当 sandbox 属性被添加至 <iframe> 中时，嵌入内容会受到以下限制：
- 禁用脚本：嵌入的文档无法执行 JavaScript
- 禁用表单提交：嵌入的文档无法提交表单
- 禁用弹出窗口：嵌入的文档无法打开新的窗口或标签。
- 禁用同源策略：嵌入的文档不能与其父文档进行交互。
但可以通过在 sandbox 属性中添加特定的值来允许某些功能：
- allow-forms：允许嵌入的文档提交表单。
- allow-same-origin：允许嵌入的文档被视为同源，从而可以访问其父文档的内容。
- allow-scripts：允许嵌入的文档执行 JavaScript。
- allow-popups：允许嵌入的文档打开新的窗口或标签。
- allow-modals：允许嵌入的文档使用模态对话框。
title：为 <iframe> 提供描述性标题，有助于可访问性

例如：

html

<body>

    <h1>嵌入外部网站的示例</h1>

    <iframe src="https://www.example.com" 
            width="800" 
            height="600" 
            title="Example Website" 
            frameborder="0" 
            allowfullscreen>
    </iframe>

</body>

html

<body>

    <h1>使用 iframe 的 name 属性示例</h1>

    <!-- 这个 iframe 有一个 name 属性，目标网页将加载到这个 iframe 中 -->
    <iframe src="https://www.example.com" 
            name="myIframe" 
            width="800" 
            height="600" 
            frameborder="0">
    </iframe>

    <p>点击链接将打开新页面并加载到 iframe 中：</p>
    <!-- 使用 target 属性来指定链接将在名为 myIframe 的 iframe 中打开 -->
    <a href="https://atri-ginka.erololi.tech/" target="myIframe">打开 Wikipedia</a>

</body>

<div>：是一个常用的块级元素，用以将内容分组或容器化。它本身没有任何语义意义，主要用于与 CSS 和 JavaScript 配合，方便进行布局、样式和组织页面内容

<span>：类似于 <div>，二者区别在于：

特性	`<div>`	`<span>`
类型	块级元素 (block-level element)	内联元素 (inline element)
显示行为	独占一行，宽度自动填充父元素	不换行，保持在同一行
用途	用于布局、结构化内容	用于标记文本或小范围内容
可以包含	块级元素、内联元素	只能包含内联元素
布局	可以设置高度、宽度、边距等	默认没有布局特性

<section>：语义化标签，用以表示页面或文档中的一个区域或分节，通常包括标题和一组相关内容。 <article>：语义化标签，用以表示一个独立的、可以单独发布的内容块，如博客文章、新闻报道或评论。 <header>：用以表示文档的头部区域 <footer>：用以表示文档的尾部区域

HTML5标签

<figure>是 HTML5 中引入的一个元素，主要用以标识独立的内容块，通常包含图像、图表、视频或其他媒体内容。通常与 <figcaption> 配合使用，以提供图像或其他媒体内容的标题或说明文本，例如：

python

<figure>
  <img src="image.jpg" alt="描述文本">
  <figcaption>这是图像的说明文字</figcaption>
</figure>

CSS

优先级

CSS中某些样式属性在元素之间存在传递特性，即子元素可以继承父元素的一些CSS样式。这使得开发人员能够减少重复代码，提高代码的可维护性和一致性，例如：

color：文本颜色
font-family：字体系列
font-size：字体大小
line-height：行高
font-style：字体样式
font-weight：字体粗细
letter-spacing：字间距
text-align：文本对齐
text-indent：文本缩进
text-transform：文本转换
visibility：可见性
direction：文本方向（如从左到右、从右到左）
cursor：鼠标光标样式
white-space：空白处理

但也有部分样式不存在传递特性：

margin：外边距
padding：内边距
border：边框
width：宽度
height：高度
position：定位
display：显示类型
float：浮动
box-sizing：盒模型设置
background：背景样式
box-shadow：盒子阴影
opacity：透明度
transform：变换
animation：动画

CSS的层叠性依据一定的优先级，一般而言：

内联样式 > ID选择器 > 类选择器、属性选择器、伪类 > 标签选择器、伪元素
!important 优先级高于所有非 !important 的规则
同一来源的规则会按照定义的顺序叠加，后定义的规则会覆盖先定义的规则。

基本结构

CSS 的语法单元是样式，每个样式包含两部分内容：选择器和声明，其中：

选择器：用以限定样式所作用的对象，这些对象可以为某个标签、指定的 class 或 ID 值，乃至所有的网页对象
声明：用以指定如何渲染选择器所限定的对象，声明由两部分组成——属性和属性值，多个声明之间用分号间隔，并且所有声明均被放置在一个大括号内，整体紧跟在选择器的后面

CSS 样式必须放于特定的文件、标签和属性中，否则无效。一般来说，CSS 代码可以放于以下三个位置：

直接放于标签的 style 属性中：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="background-color: #FF00FF; font-size: 20px;">这是一段染色内容</p>
</body>
</html>

将样式代码放于 <style> 标签内：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        p{background-color: #FF00FF; font-size:20px}
    </style>
    <title>Document</title>
</head>
<body>
    <p>这是一段染色内容</p>
</body>
</html>

将样式放置于单独的文件中，随后使用 <link> 标签导入：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="logo.png" type="image/png">
    <title>Document</title>
</head>

<body>
    样式测试
</body>
</html>

css

body{
    font-size: 20px;
    background-color: #d17fd1;
}

选择器

基本选择器包括标签选择器、类选择器、ID选择器三种：

标签选择器可将 CSS 效果生效于网页中的此标签内容，使用时直接引用 HTML 标签名称即可，例如： p{font-size:12px;}
类选择器是将 CSS 效果生效于网页中的自定义类，此类通过 HTML 标签中的 class 属性来定义，使用时需以.+自定义类名以进行声明，例如 .font18px{font-size:18px;}
- 并且这里的类名只能由字母、数字、下划线、连字符组成，首字符必须为字母，区分大小写
ID选择器是将 CSS 效果生效于网页中的单一对象，此对象通过 HTML 标签中的 id 属性来决定，使用时需以#+ID名以进行声明，例如 #box{padding:100px;}

如果要为 HTML 中所有的元素定义相同的样式，可以使用通配选择器，它通过星号进行表示：

css

*{
  margin:0;
  padding:0;
}

除基本选择器以外，CSS 中还有高级选择器以供使用，例如 子选择器、相邻兄弟选择器、后代选择器、通用兄弟选择器等：

子选择器是用以选择某个元素的直接子元素的选择器。它通过 > 符号来表示父子关系，选择的是紧接着父元素的子元素，而不会选择嵌套更深的子元素。
后代选择器类似于子选择器，不过是适用于某个元素内部的所有子元素，并且用space表示父子关系
相邻兄弟选择器是用以选择紧随某个元素之后的同级元素的选择器。它通过 + 符号来表示相邻关系，并且只会选中紧接着目标元素的下一个兄弟元素
通用兄弟选择器类似于相邻兄弟选择器，不过是适用于某个元素同级的所有兄弟元素，并且用~表示相邻关系

属性选择器是用以选择具有特定属性或属性值的 HTML 元素的选择器，其基本语法为：element[attribute]，这里 element 为 HTML 标签名，attribute 为元素所必须具有的属性同时，属性选择器还有多种变体，可以根据属性的不同匹配条件来进行选择。常见的属性选择器有以下几种：

等于匹配 =：该选择器匹配属性值等于指定值的元素。
包含匹配 *=：该选择器选择属性值包含某个子字符串的元素。
开头匹配 ^=：该选择器选择属性值以某个特定值开头的元素。
结尾匹配 $=：该选择器选择属性值以某个特定值结尾的元素。
包含空格匹配 ~=：该选择器选择属性值中包含某个用空格分隔的词的元素，此选择器常用于 class 属性值的匹配。
包含连字符匹配 |=：该选择器选择属性值中包含某个用连字符分隔的词的元素，此选择器常用于 class 属性值的匹配。

伪类选择器：伪类选择器用于选择那些在普通选择器中无法直接访问的元素的特殊状态或特定条件下的元素。例如，用户鼠标悬停时的状态、输入框获得焦点时的状态、链接被访问后的状态等。伪类选择器通常以 : 开头。常见的伪类选择器包括：

:hover：用以选择当用户将鼠标悬停在元素上时应用的样式。
:focus：当元素获得焦点时应用的样式，常用于表单元素（如 <input>、textarea）以及链接。
:target：用以选定当前活动的目标元素，即通过URL的哈希值(#id)来指定的元素。
:active: 用以选择元素在被点击（鼠标按下并保持）时的样式。
:link：用以选择尚未访问过的链接；:visited：用以选择已访问过的链接
:first-child：用以选择父元素中的第一个子元素，:last-child 用以选择最后一个子元素。
:nth-child()：用以选择父元素中根据数字模式定位的子元素，可用 n 表示某个模式，例如 nth-child(2n) 表示选择所有偶数位置的元素，nth-child(3n+1) 表示选择位置为 1, 4, 7… 的元素。
:nth-last-child()：类似于 nth-child()，只不过是从最后一个元素开始计算。
:not()：用以排除某些元素，使其不受某些样式的影响。例如，选择所有的元素，除了具有某个特定类的元素。
:empty：用以选择没有子元素（包括文本节点）的元素。

伪元素选择器：用以选择元素的某个特定部分或者通过 CSS 创建的虚拟元素。伪元素通常以 :: 开头，与伪类（如 :hover）区分开。常见的伪元素选择器包括：

::before：用以在元素的内容前插入内容，通常与 content 属性结合使用。
::after：用以在元素的内容之后插入内容。
::first-letter：用以选择元素的第一个字母，通常用于文章或段落中的首字母样式。
::first-line：用以选择元素的第一行文字，常用于文章的首行样式。
::selection：用以选择用户选中的文本，并可以为其应用样式。它常用于定义文本被选中时的样式，例如更改背景色或文字颜色。

单位

相对单位是与某个参照物（如父元素、视口等）相关的单位。它们具有灵活性，可以根据不同的环境或容器尺寸动态调整：

em：相对于当前元素字体大小的单位
rem：相对于根元素（通常是 <html>）的字体大小来计算的单位
vw：相对于视口宽度的百分比单位；vh：相对于视口高度的百分比单位
vmin、vmax：相对于视口宽度和高度中的最小值和最大值的百分比单位。

绝对单位指的是不依赖于任何上下文或容器的尺寸，它们通常是固定的，适用于不需要响应式调整的布局：

px：是屏幕上的一个物理像素单位。
pt：是印刷行业常用的单位，通常 1pt = 1/72 英寸（约为 0.3528mm）。
cm、mm、in：分别是厘米、毫米和英寸的单位，通常用于打印样式。
pc：是印刷行业的一个单位，1pc = 12pt

字体与文本

font-face是 CSS 中用以定义和应用自定义字体的规则，可以让网页能够使用任何字体，而不必依赖用户设备中预先安装的字体，其基本语法为：

css

@font-face {
  font-family: "FontName";  /* 字体名称 */
  src: url("font-file-url") format("font-format");  /* 字体文件路径和格式 */
  font-weight: normal | bold | 100-900;  /* 字体粗细 */
  font-style: normal | italic | oblique;  /* 字体样式 */
}

对于字体，CSS提供了以下属性：

font-size：用以控制字体大小
color：用以控制字体颜色
font-weight：用以控制字体粗细
font-style：normal|italic|oblique：用以控制字体样式效果
text-decoration: none|underline|blink|overline|line-through：用以控制下划线效果
font-variant:normal|small-caps|inherit: 用以控制字体变体的效果

对于文本，CSS提供了以下属性：

text-align：left|right|center|justify：用以定义文本的水平对齐方式
vertical-align:align|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length：用以控制文本的垂直对齐效果
text-transform: none|capitalize|uppercase|lowercase：用以控制字体大小写效果
letter-sapacing：定义字距；word-spacing：定义词距
line-height：定义行高
text-indent：定义缩进
text-shadow：设置阴影，其语法结构为 text-shadow: h-shadow v-shadow blur-radius color;

概念 ​

html ​

介绍 ​

HTML ​

XHTML ​

结构 ​

常用标签 ​

文本格式标签 ​

字符格式标签 ​

列表标签 ​

链接标签 ​

多媒体标签 ​

表格标签 ​

表单标签 ​

结构性标签 ​

HTML5标签 ​

CSS ​

优先级 ​

基本结构 ​

选择器 ​

单位 ​

字体与文本 ​

概念

html

介绍

HTML

XHTML

结构

常用标签

文本格式标签

字符格式标签

列表标签

链接标签

多媒体标签

表格标签

表单标签

结构性标签

HTML5标签

CSS

优先级

基本结构

选择器

单位

字体与文本