前端三件套

HTML超文本标记语言

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言。它使用标签（tag）来定义网页中的各种元素，如标题、段落、链接、图像等。HTML文件由一系列标签和文本内容组成，浏览器根据这些标签解析并显示网页的结构和内容。

HTML相当于我们文章的文本，内部存在一些标签，来对这些文本修饰和美化，相当于我们的大纲，通过与CSS结合使用，可以通过样式规则控制文本的外观和呈现方式。下面我们来介绍一些基础的标签。

基础框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：根元素，表示整个HTML文档的开始和结束。
<head>：头部元素，用于定义文档的元数据和引入外部资源，如CSS和JavaScript文件等。
<meta charset="UTF-8">：指定文档的字符编码为UTF-8，确保网页中的文本可以正确地显示。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：定义浏览器的兼容性模式，确保在Internet Explorer浏览器中以最新的渲染模式显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口的宽度和初始缩放级别，使网页在移动设备上能够适应屏幕大小。
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
<body>：主体元素，包含了网页的可见内容，如文本、图像、链接等。

基础标签

在介绍完基础框架后，我们来学习一下基本构建网站的标签。它们通常都是书写在我们的body标签处

h标签

h标签是文章的标题，一共有6个级别，h1…h6。每一个级别代表着一个标签头。我们书写一个这样的案例，按照6个级别分别输出我们的标题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 试试打开全部的标签 -->
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>


</body>

</html>

p标签

p标签是文章的段落，被p标签修饰的字段，会有执行文章段落的规则，浏览器通常会在段落前后添加一些默认的空间和换行，以显示段落的分隔效果。

块级元素：<p>标签是一个块级元素，它会占据一行或多行的空间。相邻的<p>标签会在页面上垂直排列，每个<p>标签之间会有一定的间距。

块级元素：块级元素（Block-level elements）是HTML中的一个概念，用于描述元素在文档流中的布局和行为方式。以下是块级元素的特点：

独占一行：块级元素通常会在页面上独占一行，即使它的内容没有填满整行。相邻的块级元素会在页面上垂直排列。

宽度默认为100%：块级元素的默认宽度会填满其父元素的可用宽度，除非通过CSS显式设置其宽度。

可以设置宽度、高度、内边距和外边距：块级元素可以通过CSS属性设置其宽度、高度、内边距和外边距，以调整布局和样式。

可以包含内联元素和其他块级元素：块级元素可以包含其他块级元素和内联元素。这使得可以构建复杂的布局结构，并且在其中放置各种内容。

默认情况下会产生一些垂直间距：块级元素通常会在其上下产生一些默认的垂直间距，例如段落之间的间距。

一些常见的块级元素包括<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<table>、<form>等。这些元素在默认情况下都是块级元素，但也可以通过CSS进行样式上的修改。

相对于块级元素，还有另一类元素称为内联元素（Inline elements），它们通常不会独占一行，而是在同一行内水平排列。内联元素的特点包括不能设置宽度和高度，不能独占一行，只能容纳其他内联元素或者文本内容。常见的内联元素包括<span>、<a>、<strong>、<em>等。

文本包裹：<p>标签用于包裹一段文本，该文本可以是普通的纯文本，也可以包含其他内联元素或标记。例如，你可以在<p>标签内使用<strong>或<em>标签来加粗或斜体显示文本。

默认样式：浏览器会对<p>标签应用一些默认样式，例如设定一定的行间距、字体样式和段落缩进。这些样式可以通过CSS进行自定义调整。

以下是一些常见的CSS属性，可以用来修饰段落：

color：设置文本的颜色。

font-size：设置文本的字体大小。

font-family：设置文本的字体系列。

font-weight：设置文本的粗细程度，例如使用值bold加粗文本。

text-align：设置文本的对齐方式，例如使用值center使文本居中对齐。

line-height：设置行高，控制行与行之间的垂直间距。

padding：设置段落的内边距，即段落内容与边框之间的空间。

margin：设置段落的外边距，即段落与相邻元素之间的空间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css样式 - 建议封装在外部 -->
    <style>
        p {
            color: rgb(165, 42, 128);
            /* 字体大小 */
            font-size: 16px;
            /* css样式居中 */
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>试试段落的特点</h1>
    <!-- 这个段落是一个块 -->
    <p>这是一个段落，它有什么特点</p>
    <!-- 尝试用css来修饰这个段落 -->

</body>

</html>

a标签

a标签是HTML中用于创建超链接的标签，它具有以下特点：

超链接功能：<a>标签用于创建链接到其他网页、文档或特定位置的超链接。通过设置href属性来指定链接目标的URL或文档片段标识符。
文本或图像链接：<a>标签可以包裹文本或图像，使其成为可点击的链接。例如，可以使用<a>标签将文本或图像转换为链接，使用户能够点击并导航到链接目标。
打开新窗口：使用target属性可以控制链接在新窗口或当前窗口中打开。例如，设置target="_blank"可以在新的浏览器窗口或选项卡中打开链接。
可以包含其他元素：<a>标签可以包含其他内联元素或块级元素，例如文本、图像、按钮等。这样可以在链接中添加更丰富的内容和样式。
可以添加标题：使用title属性可以为链接添加鼠标悬停时显示的标题文本，提供额外的描述或信息。
可以与JavaScript交互：<a>标签可以与JavaScript代码结合使用，例如通过添加事件处理程序来实现自定义行为或交互效果。

通过添加事件处理程序，你可以为<a>标签或其它元素添加自定义的行为或交互效果。事件处理程序是一段JavaScript代码，用于响应用户与页面元素的交互，例如点击、鼠标移入、键盘按下等事件。

在HTML中，你可以通过在元素上添加事件属性来指定事件处理程序。常见的事件属性包括onclick（点击事件）、onmouseover（鼠标悬停事件）、onkeydown（键盘按下事件）等。

就是一些按钮啊，点击啊之类的(＾▽＾)

需要注意的是，<a>标签本身并没有默认的样式，它可以通过CSS进行样式上的修改，如更改颜色、添加下划线等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>超链接实验</h1>
    <!-- 1.创建连接指向我们的hexo -->
    <a href="https://hexo.io/zh-cn/index.html">hexo</a> <br>
    <!-- 2.控制链接跳转，生成新的网页 -->
    <a href="https://hexo.io/zh-cn/index.html" target="_blank">hexo_open</a>
    <!-- 3.包括其他块级元素 -->
    <a href="https://hexo.io/zh-cn/index.html" target="_blank">
        <p>你说我这个算不算链接啊</p>
        <p>试一下第二行有没有用</p>
    </a>
    <!-- 4.添加标题 -->
    <a href="https://hexo.io/zh-cn/index.html" title="这是通向hexo的链接">?????</a>
    <!-- 5.图片链接 -->
    <br>
    <a href="https://hexo.io/zh-cn/index.html">
        <img src="img\Different from the usual of you.jpg" width="300" height="300" alt="">
    </a>
</body>

</html>

img标签

img标签是HTML中用于插入图像的标签，它具有以下特点：

插入图像：<img>标签用于在网页中插入图像。通过设置src属性来指定要插入的图像的路径或URL。
自闭合标签：<img>标签是一个自闭合标签，不需要闭合标签。例如：<img src="/2023/04/30/2023-Web/undefined" alt="图像">
显示图像：<img>标签会在网页中显示指定的图像。网页加载时，图像会根据src属性指定的路径下载并显示在指定位置。
替代文本：通过alt属性可以提供替代文本（alternative text），当图像无法加载时，或用于辅助技术（如屏幕阅读器）读取图像时，会显示替代文本。
调整尺寸：通过width和height属性可以设置图像的宽度和高度。可以使用具体像素值或百分比来调整图像的大小。
添加标题：使用title属性可以为图像添加鼠标悬停时显示的标题文本，提供额外的描述或信息。
响应式设计：通过CSS或使用width属性设置百分比值，可以使图像在不同屏幕尺寸下自动调整大小，实现响应式设计。

响应式设计（Responsive Design）是一种设计方法和技术，旨在使网页或应用程序能够根据不同设备（如桌面电脑、平板电脑、手机等）和屏幕尺寸的变化而自动调整其布局和外观。

传统的网页设计通常是为特定的屏幕尺寸和设备进行优化，这导致在不同设备上访问同一网页时可能会出现布局错乱、内容溢出等问题。而响应式设计的目标是提供一种灵活的布局和界面，使网页能够适应不同的屏幕尺寸，从而提供更好的用户体验。

在响应式设计中，通过使用CSS媒体查询（Media Queries）和流式布局（Fluid Layouts），可以根据屏幕宽度、高度、像素密度等特性，动态地调整网页元素的大小、位置和样式。这样，网页的内容和布局会根据设备的大小和方向进行自适应，以适应不同的屏幕。

就是，可以随着用户的放大和缩小图片的大小，或者设定图片的格式固定啥的。
(￣▽￣)ノ

支持多种图像格式：<img>标签可以加载多种图像格式，如JPEG、PNG、GIF等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 默认样式 */
        .responsive-img {
            width: 100%;
            /* 图片宽度填满父容器 */
            height: auto;
            /* 根据宽度等比例调整高度 */
        }

        /* 在屏幕宽度小于等于600px时调整图片大小 */
        @media (max-width: 600px) {
            .responsive-img {
                width: 50%;
                /* 图片宽度为父容器宽度的50% */
            }
        }
    </style>
</head>

<body>
    <h1>插入图片试试</h1>
    <!-- 1.简单插入图片 由于尺寸太大了 限制一下-->
    <img src="img\照片素材\800 (1).jpg" alt="报错了QAQ" width="300" height="300">
    <br>
    <!-- 2.alt用法 -->
    <img src="im\照片素材\800 (1).jpg" alt="我是故意的">
    <br>
    <!-- 3.加个标题 -->
    <img src="img\照片素材\市.jpg" alt="" title="你好" width="300" height="300">
    <!-- 4.响应式设计 -->
    <img class="responsive-img" src="img\照片素材\雪山.png" alt="响应式图片">
</body>

</html>

列表标签

ul和li

<ul>（无序列表）和 <li>（列表项）是 HTML 中用于创建列表的标签，它们具有以下特点：

<ul> 标签的特点：

无序列表：<ul> 表示无序列表，其中的列表项 <li> 不会按照特定的顺序排列，而是作为一个项目列表显示。
项目符号：无序列表使用项目符号来表示每个列表项，默认情况下是一个实心圆点（•）。
嵌套列表：<ul> 元素可以嵌套在另一个 <ul> 或有序列表 <ol> 中，以创建多层级的列表。

ul理解为容器，是装li的罐子

<li> 标签的特点：

列表项：<li> 表示列表中的每个项目或条目。每个 <li> 标签通常包裹在 <ul> 或 <ol> 标签中。
顺序无关：<li> 列表项的排列顺序与其在代码中的位置无关，它们将按照显示时的顺序呈现。
嵌套列表项：<li> 列表项可以包含嵌套的列表，创建层级结构的子列表。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.构造一个简单无序列表 -->
    <ul>
        <li>123</li>
        <li>321</li>
        <li>123</li>
        <li>321</li>
    </ul>
    
</body>

</html>

ol和li

在HTML中，<ol>和<li>标签通常一起使用来创建有序列表。

<ol>标签表示有序列表，具有以下特点：

有序列表中的项目通常按照顺序进行编号，可以是数字、字母或罗马数字。
<ol>标签创建一个包含多个列表项的块级元素。
有序列表项的默认样式是按照顺序编号显示。

<li>标签用于定义列表项，它的特点包括：

<li>标签包裹在<ol>或<ul>标签内部，表示一个列表项。
列表项可以包含文本、图像、链接或其他HTML元素。
列表项默认以项目符号或顺序编号显示，但可以通过CSS样式进行自定义。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.构造一个简单无序列表 -->
    <ul>
        <li>123</li>
        <li>321</li>
        <li>123</li>
        <li>321</li>
    </ul>
    <!-- 2.构造一个简单有序列表 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

</body>

</html>

div标签

标签是HTML中用于定义一个文档的区域或容器的元素。它具有以下特点：

区域划分：div标签可以用来将HTML文档划分为不同的区域或块。通过使用
标签，可以将页面的不同部分进行逻辑上的分组，从而方便样式和布局的控制。
块级元素：div标签是一个块级元素，它在页面中独占一行。这意味着它会自动换行，并且可以设置宽度、高度、内边距和外边距等属性。
无语义性：div标签本身没有特定的语义含义，它只是一个通用的容器。它不会给其中的内容赋予特定的含义，而是依赖于CSS样式和嵌套的内容来定义其作用和意义。
可嵌套性：div标签可以嵌套在其他HTML元素中，也可以包含其他HTML元素，包括文本、图像、链接等。这使得它成为构建复杂页面结构和布局的重要工具。
样式控制：通过为
标签添加CSS类或ID，可以对其应用样式规则。这使得开发者可以通过定义相应的CSS样式，实现对
元素及其内容的外观和布局的定制。
要修改<div>元素的大小，可以使用CSS样式来控制其宽度和高度。有几种常见的方法可以实现这一点：
1. 使用CSS的width和height属性：通过设置width属性来定义<div>元素的宽度，使用height属性来定义其高度。可以使用像素（px）、百分比（%）或其他支持的单位来指定具体的数值。
  
  1
  2
  3
  4
  5
  6
  7
  8
  cssCopy code<style>
  .my-div {
  width: 300px;
  height: 200px;
  }
  </style>
  
  <div class="my-div">这是一个<div>元素</div></div>
2. 使用CSS的max-width和max-height属性：这些属性允许指定元素的最大宽度和最大高度，如果内容不足以填满指定的尺寸，则元素的大小会自动调整。
  
  1
  2
  3
  4
  5
  6
  7
  8
  cssCopy code<style>
  .my-div {
  max-width: 500px;
  max-height: 300px;
  }
  </style>
  
  <div class="my-div">这是一个<div>元素</div></div>
3. 使用CSS的min-width和min-height属性：这些属性允许指定元素的最小宽度和最小高度，确保元素不会小于指定的尺寸。
  
  1
  2
  3
  4
  5
  6
  7
  8
  cssCopy code<style>
  .my-div {
  min-width: 200px;
  min-height: 150px;
  }
  </style>
  
  <div class="my-div">这是一个<div>元素</div></div>
怎么修改都不会小于40px

这些是常见的方法，可以根据具体的需求和情况选择适合的方式来修改<div>元素的大小。

注：可以在浏览器中，按f12进入调试，这样就可以调整数据来看盒子大小了。

总之，div标签是HTML中的一个通用容器元素，用于划分页面区域和组织内容，它的特点包括块级元素、无语义性、可嵌套性和样式控制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css样式 -->
    <style>
        .my_div {
            /* 设置我们盒子的高度 */
            height: 200px;
            width: 300px;
        }

        /* 修改第二个样式 */
        .my_div2 {
            /* 自动变形的盒子 */
            max-width: 300px;
            max-height: 400px;
        }

        .my_div3 {
            min-width: 30px;
            min-height: 40px;
        }
    </style>
</head>

<body>

    <h2>div盒子样式1</h2>
    <!-- 类选择器 -->
    <div class="my_div">
        <!-- 1.可以装其他标签 -->
        <p>这个结构是什么1</p>
    </div>
    <br>

    <h2>div盒子样式2</h2>
    <div class="my_div2">
        <p>这个结构是什么2</p>
    </div>
    <br>

    <h2>div盒子演示3</h2>
    <div class="my_div3">
        <p>这个结构是什么3</p>
    </div>
    <br>

</body>

</html>

容器标签

span标签

<span>标签是HTML中的一个内联元素，它用于对文本进行分组或标记，而不会对文本添加额外的语义或影响文档的结构。下面是<span>标签的几个特点：

内联元素：<span>是内联元素，与其他内联元素（如<a>、<strong>等）类似。它不会在文档中创建新的块级盒子，而是将其内容作为行内元素嵌入到文本中。
内联元素（Inline Element）是HTML中的一种元素类型，它用于表示文档中的内联内容，这些内容通常嵌套在块级元素内部或直接位于文本流中。与块级元素不同，内联元素不会创建独立的块，并且它们在文档中水平排列，不会强制换行。

以下是内联元素的特点：
1. 水平排列：内联元素默认以水平方向排列，相邻的内联元素会在同一行上显示。
2. 不独占一行：内联元素不会强制换行，除非遇到换行符或父元素的宽度不足以容纳内联内容。
3. 无法设置宽度和高度：内联元素的宽度和高度通常由其内容决定，无法直接通过CSS属性设置固定的宽度和高度。
4. 可以与其他内联元素共享水平空间：内联元素会根据其内容的大小动态分配水平空间，并且可以与其他内联元素共享同一行的空间。
5. 支持部分CSS属性：内联元素支持一部分CSS属性，如颜色、字体大小、字体样式等，可以通过CSS样式对其进行样式调整。
一些常见的内联元素包括<span>、<a>、<strong>、<em>、<i>等。需要注意的是，并非所有元素都是内联元素，还有块级元素和行内块元素等不同类型的元素，它们具有不同的布局和行为特点。

使用内联元素可以方便地对文本或行内内容进行标记、样式化和操作，从而实现更灵活的页面设计和排版效果。

可以理解为，内联标签是一个括号，可以将文本的一段括号起来，以便我们单独对这个括号执行修饰。^-^
无语义：<span>标签本身没有特定的语义含义。它主要用于通过CSS样式或JavaScript脚本来对文本进行分组、标记或添加样式。
文本容器：<span>可以包裹文本内容，使得可以对其中的文本进行样式或操作。它通常用于设置特定文本的样式，如颜色、字体大小、字体样式等。

嵌套使用：<span>标签可以嵌套在其他元素内部，以便于对特定部分进行样式控制。通过嵌套使用<span>，可以对文档进行更精细的标记和样式调整。

<span>标签是HTML中的一个内联元素，它没有特定的语义含义，主要用于对文本或行内内容进行分组、标记或样式化。下面是<span>标签的几个常见的用途：

文本标记：<span>标签可以用来标记文本的特定部分，以便后续通过CSS或JavaScript对其进行样式或操作。例如，可以给某个词语、短语或字符添加特定的样式或行为。
1
2
htmlCopy code
<p>这是一段包含<span class="highlight">高亮</span>文本的示例。</p>
样式控制：<span>标签可以用来包裹需要进行样式控制的文本或行内内容。通过为<span>标签添加CSS类或内联样式，可以对其内部的内容应用特定的样式属性，如颜色、字体大小、字体样式等。
1
2
htmlCopy code
<p>这是一段包含<span style="color: red; font-weight: bold;">红色粗体</span>文本的示例。</p>
JavaScript操作：<span>标签可以用作JavaScript操作的目标元素。通过为<span>标签添加标识符或事件处理程序，可以对其进行动态操作或交互效果。
1
2
htmlCopy code
<p>点击这个<span id="clickable-text" onclick="alert('你点击了文本！')">文本</span>可以触发一个弹窗。</p>
文本分组：<span>标签可以用于将文本或行内内容进行逻辑上的分组。通过使用<span>标签，可以在文本中划分多个区块，从而方便对这些区块进行整体样式或操作。
1
2
htmlCopy code
<p>这是一段包含<span class="group1">第一组</span>和<span class="group2">第二组</span>的文本。</p>
需要注意的是，<span>标签本身不会对文档结构产生显著影响，它主要用于样式和操作层面的处理。使用<span>标签需要结合CSS或JavaScript来实现相应的效果和功能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }

        .group1 {
            color: blue;
        }

        .group2 {
            color: yellow;
        }
    </style>
    
    <script>
        function myFunction() {
            //警告提示行
            alert("Hello, World!");
        }
    </script>


</head>

<body>

    <h1>span标签的用法</h1>
    <br>
    
    <p>这是一段<span class="highlight">突出显示</span>的文本。</p>
    <br>
    
    <span onclick="myFunction()">点击这里</span>
    <br>
    
    <p>这是一段包含<span class="highlight">高亮</span>文本的示例。</p>
    <p>这是一段包含<span style="color: red; font-weight: bold;">红色粗体</span>文本的示例。</p>
    <p>点击这个<span id="clickable-text" onclick="alert('你点击了文本！')">文本</span>可以触发一个弹窗。</p>
    <p>这是一段包含<span class="group1">第一组</span>和<span class="group2">第二组</span>的文本。</p>
</body>

</html>

下面是一个示例，展示了如何使用<span>标签为文本添加样式：

1 2	htmlCopy code <p>这是一段包含<span style="color: red;">红色文本</span>和<span style="font-weight: bold;">粗体文本</span>的示例。</p>

在上述示例中，<span>标签用于分别标记红色文本和粗体文本，并通过内联样式来指定它们的样式属性。

总结而言，<span>标签是一个非常通用的标签，用于对文本进行包装和样式控制。它在HTML文档中提供了灵活的文本处理能力，可用于各种定制和设计需求。

table标签*

<table>标签是HTML中用于创建表格的元素。下面是<table>标签的一些特点：

表格结构：<table>标签用于创建表格结构，它可以包含一个或多个行（<tr>标签），每行可以包含一个或多个单元格（<td>标签或<th>标签）。通过使用<table>标签及其相关标签，可以实现复杂的表格布局。

可以将table分为三个部分，第一个部分是表头thead，另一个部分是表体tbody.最后一个是这个表的名称caption
在thead中，行修饰标tr是不变的，但是在内部我们要编写行的标题，也就是首行。内部标签变为th

在tbody中，行修饰标tr是不变的，内部标签变为td

在table中可以加入caption作为表的标题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 用css样式设置边框 -->
    <style>
        .table_1 {
            /* 边框合并 - 相邻有相同的元素就会合并在一起 */
            border-collapse: collapse;
        }

        /* 可以用table父类引用子类别 */
        .table_1 th,
        .table_1 td {
            /* 设置边框样式 */
            border: 1px solid black
        }
    </style>
</head>

<body>

    <h2>表修饰1</h2>
    <table class="table_1">
        <!-- 表标题 -->
        <caption>学生成绩表</caption>
        <thead>
            <tr>
                <!-- 首列标题 -->
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <!-- 第一行 -->
            <tr>
                <td>张三</td>
                <td>90</td>
                <td>85</td>
                <td>92</td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>李四</td>
                <td>88</td>
                <td>92</td>
                <td>87</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

行和列：表格由行和列组成。每个行使用<tr>标签表示，而每个单元格使用<td>标签表示。在表头部分，可以使用<th>标签表示表头单元格，用于标识列的标题或表格的相关信息。
单元格合并：通过使用colspan和rowspan属性，可以将单元格进行合并，从而跨越多个行或多个列。这使得可以创建具有复杂布局的表格。
表格标题和描述：可以使用<caption>标签为表格添加标题，用于描述表格的内容或目的。同时，可以使用<thead>、<tbody>和<tfoot>标签对表格内容进行分组，以提高可读性和语义性。
表格样式和格式：通过CSS可以对表格进行样式和格式化，如设置边框、背景色、字体样式等。使用CSS，还可以实现表格的响应式布局，以适应不同的屏幕尺寸和设备。
无障碍性支持：表格元素提供了一些属性和技术，以支持无障碍访问。例如，可以使用scope属性来指定表格单元格的作用范围，或者使用headers属性来建立单元格与表头之间的关联。

需要注意的是，使用表格时应谨慎考虑其语义和结构，以确保表格的正确使用和可访问性。对于非表格数据或纯粹的布局需求，应该使用CSS布局技术而不是滥用表格元素。

总结而言，<table>标签是用于创建表格的HTML元素，它提供了创建、布局和样式化表格的功能。表格可以具有复杂的结构和样式，适用于展示和组织数据。

from标签

表单（form）标签是HTML中用于创建用户交互表单的元素。下面是表单标签的一些特点：

用户输入收集：表单标签用于创建包含用户输入字段的交互式表单，如文本输入框、复选框、单选按钮、下拉列表等。用户可以在表单中填写信息或选择选项。
数据提交：通过表单，用户可以将填写的数据提交到服务器或指定的处理程序进行处理。表单可以使用<form>标签指定提交方法（GET或POST）和目标URL。
表单字段：表单标签提供了一系列用于收集用户数据的字段标签，如<input>、<textarea>、<select>等。这些标签可以设置不同类型的输入控件，以满足不同的数据输入需求。
表单控件组织：表单标签可以包含多个表单字段，通过在<form>标签内嵌套其他表单字段标签，可以组织和布局表单内容。
提交按钮：通过添加<input type="submit">或<button type="submit">标签，可以在表单中添加提交按钮，以便用户点击提交表单数据。
表单验证：HTML5提供了表单验证功能，可以通过设置表单字段的属性来进行客户端验证，如必填字段、最小长度、数据类型等。还可以使用JavaScript进行自定义的表单验证。
表单样式和布局：通过使用CSS，可以对表单进行样式化和布局控制，如设置字段的尺寸、背景色、边框样式等。使用CSS框架和技术，可以实现响应式表单布局。
安全性考虑：在处理敏感信息的表单时，应考虑使用安全传输协议（如HTTPS）以保护数据的安全性。

需要注意的是，表单只是提供了前端的数据收集和提交机制，实际的数据处理和验证通常需要与后端服务器端编程语言（如PHP、Java、Python等）结合使用。

总结而言，表单标签用于创建用户交互表单，收集用户数据并提交到服务器进行处理。它提供了丰富的表单字段选项和验证功能，可通过CSS进行样式和布局控制。使用表单可以实现各种用户输入场景，如注册表单、登录表单、调查问卷等。

小标签

br标签

<br>标签是HTML中用于创建换行的元素，它具有以下特点：

换行功能：<br>标签用于在文本或行内内容中创建一个显式的换行。当浏览器遇到<br>标签时，会将文本或行内内容的换行位置断开，并在该位置插入一个换行符。
单标签：<br>标签是一个单标签，不需要闭合标签。它没有内容，只是一个用于表示换行的标记。
内联元素：<br>标签是内联元素（inline element），在默认情况下不会产生块级元素的换行效果。它可以在行内元素或块级元素内使用，用于插入换行符而不会创建新的块。
可嵌套性：<br>标签通常不会嵌套在其他标签内部，它在文本内容中直接使用，用于插入换行。
语义简单：<br>标签的语义非常简单明确，只表示一个显式的换行符，不会添加其他语义含义。

需要注意的是，HTML中的换行通常由浏览器根据文本和元素的自然流进行处理。通常情况下，使用合适的HTML和CSS来实现布局和分隔效果，而不是过度依赖<br>标签进行换行。

使用<br>标签时应注意适度使用，避免滥用，以保持代码的可读性和语义化。在大多数情况下，最好使用合适的HTML元素和CSS样式来实现更灵活和语义化的布局效果。

hr标签

<hr>标签是HTML中用于创建水平分隔线的元素，它具有以下特点：

分隔线功能：<hr>标签用于在文档中创建一条水平的分隔线，可以用于将内容分隔为不同的段落或节。
单标签：<hr>标签是一个单标签，不需要闭合标签。它表示一个完整的水平分隔线，不包含任何内容。
默认样式：<hr>标签具有默认的样式属性，通常表现为一条水平线，具体的样式可以通过CSS进行自定义。
块级元素：<hr>标签在默认情况下是一个块级元素，会独占一行。它会创建一个与其他块级元素（如段落、标题等）相邻的分隔线。
可调整性：<hr>标签可以通过CSS进行样式调整，如设置颜色、宽度、边距等。通过调整样式属性，可以改变分隔线的外观和布局。
语义简单：<hr>标签的语义非常简单明确，只表示一个水平分隔线，不会添加其他语义含义。

需要注意的是，<hr>标签在现代Web开发中的使用逐渐减少，因为分隔线的样式和布局通常可以通过CSS来实现，从而提供更大的灵活性和控制。因此，在实际应用中，最好使用合适的HTML元素和CSS样式来实现分隔线的效果，而不是依赖于<hr>标签。

使用<hr>标签时应注意适度使用，避免滥用，以保持代码的可读性和语义化。在大多数情况下，最好使用CSS样式来创建定制化的分隔线，以满足具体的设计和布局需求。

CSS层叠样式表

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页（HTML 或 XML 等文档）外观和样式的标记语言。它与 HTML 一起使用，通过为 HTML 元素应用样式规则，控制网页的布局、字体、颜色、大小和其他视觉方面的属性。

CSS 提供了一种将样式与内容分离的方法，使得开发人员可以单独管理网页的样式而无需修改 HTML 结构。通过使用 CSS，可以在不改变网页内容的情况下改变其外观和布局，从而实现更好的灵活性和可维护性。

CSS 使用选择器来选择要应用样式的 HTML 元素，然后使用属性和值来定义元素的样式。可以通过内联样式表、嵌入式样式表或外部样式表的方式将 CSS 应用到 HTML 文档中。

CSS 是 Web 开发中的重要技术之一，它使得网页设计变得更加灵活和美观，并提供了更好的用户体验。

可以创建一个新的css样式文件，并将css和html链接。
1
<link rel="stylesheet" href="链接文件">

相应的，我们要记住css常见的功能

CSS具有许多功能和特性，用于控制和样式化网页的外观和布局。以下是CSS中常用的一些功能：

选择器：CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括类选择器（.class）、ID选择器（#id）、元素选择器（element）等，还有更高级的选择器如属性选择器、伪类选择器和伪元素选择器等。

盒子模型：CSS盒子模型描述了HTML元素的布局结构，包括内容区域、内边距、边框和外边距。通过控制盒子模型的属性（如width、height、padding、border、margin），可以实现元素的尺寸和间距的调整。

字体和文本样式：CSS提供了丰富的字体和文本样式属性，包括字体族（font-family）、字体大小（font-size）、字体粗细（font-weight）、行高（line-height）、文字颜色（color）等，可以用于设置元素的文本样式。

背景和边框：CSS提供了一系列的背景属性（如background-color、background-image、background-size）和边框属性（如border-color、border-style、border-width），用于设置元素的背景和边框样式。

定位和布局：CSS提供了多种定位和布局属性，如position（用于设置元素的定位方式）、display（用于设置元素的显示方式）、float（用于实现元素的浮动布局）、flexbox（用于弹性盒子布局）和grid（用于网格布局）等，可以实现灵活的页面布局。

动画和过渡：CSS动画和过渡属性（如animation、transition）允许在元素上创建平滑的过渡效果和动画效果，使页面更具交互性和生动性。

响应式设计：通过使用CSS媒体查询和响应式布局技术，可以根据设备的不同屏幕尺寸和特性，自适应地调整网页的布局和样式，以提供更好的用户体验。

这只是CSS的一小部分功能，还有许多其他功能和属性可用于创建丰富的网页样式和布局。CSS的灵活性使得开发人员能够自定义和控制网页的外观和行为。

选择器

CSS选择器用于选择网页中的特定元素，从而将样式应用于这些元素。它们允许您根据元素的标签名、类名、ID、属性等特征来选择元素。

使用CSS选择器，您可以针对不同的元素应用不同的样式，或者根据需要对一组元素进行样式化。通过选择器，您可以精确地控制网页中的元素，并根据需要调整其外观和布局。

在选择器中，有一些常见的属性是我们要记住的。

color：用于设置文本颜色，可以使用颜色名称、十六进制值或RGB值。

background-color：用于设置元素的背景颜色，同样可以使用颜色名称、十六进制值或RGB值。

font-size：用于设置字体大小，可以使用像素、百分比、em等单位。

font-family：用于设置字体家族，可以指定多个字体备选项。

font-weight：用于设置字体粗细，可以使用关键词如normal、bold，或使用数值如400、700。

text-align：用于设置文本对齐方式，可以是left、right、center、justify等。

width、height：用于设置元素的宽度和高度，可以使用像素、百分比、em等单位。

margin、padding：用于设置元素的外边距和内边距，可以使用像素、百分比、em等单位。

border：用于设置元素的边框样式，可以指定边框宽度、边框颜色和边框样式。

display：用于设置元素的显示方式，如block、inline、inline-block等。

class选择器

类选择器是CSS中一种常用的选择器，用于选择具有相同类名的元素并应用相应的样式。以下是类选择器的一些特点：

选择多个元素：类选择器可以选择HTML文档中具有相同类名的多个元素，并为它们应用相同的样式。
重复使用：可以在同一个HTML文档中多次使用相同的类名，从而在不同位置和元素上应用相同的样式。
独立于元素类型：类选择器与元素类型无关，可以应用于任意HTML元素，如 <div>、<p>、<span> 等等。
可组合：可以将类选择器与其他选择器组合使用，以更精确地选择和样式化元素。例如，结合标签选择器和类选择器可以选择特定类型的元素中具有特定类名的元素。
优先级较低：类选择器的优先级相对较低，如果与其他选择器具有相同的特定性（specificity），其他选择器的样式可能会覆盖类选择器的样式。

可重复使用性和可维护性：通过使用类选择器，可以在多个元素上应用相同的样式，并且可以在整个网站上重复使用相同的类名，从而实现样式的重用和维护性。

类选择器的使用十分简单，在标签内部加入类名称，就可以对这个标签进行操作了。如果想要使用css，就在style样式中，用.操作符操作对应标签的类名就行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css_1.css">


</head>

<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <!-- 设置了类选择器 -->
    <div class="container">
        <h1 class="heading">Hello, World!</h1>
        <p class="paragraph">This is a paragraph.</p>
    </div>
</body>

</html>

/* 标签样式 */
p {
    color: blue;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

.container {
    /* 容器的样式 */
    color: #000;
}

.heading {
    /* 标题的样式 */
    color: aqua;
}

.paragraph {
    /* 段落的样式 */
    color: wheat;
}

id选择器

ID选择器在Web开发中具有以下特点：

唯一性：每个HTML文档中的ID应该是唯一的。一个元素只能有一个ID，不能重复使用。这使得ID选择器非常适合选择具有特定标识符的单个元素。
如果在HTML文档中违反了ID选择器的唯一性原则，即多个元素具有相同的ID，可能会导致以下问题：
1. 不可预测的行为：当多个元素具有相同的ID时，根据HTML规范，浏览器只会选择第一个具有该ID的元素作为目标元素。其他具有相同ID的元素将被忽略。这可能导致无法预测的行为，例如样式应用于错误的元素或JavaScript操作作用于错误的元素。
2. 样式冲突：如果多个元素具有相同的ID并且应用了不同的样式规则，那么由于ID选择器的高优先级，只有第一个具有该ID的元素将应用正确的样式规则。其他具有相同ID的元素将无法正确显示所期望的样式。
3. JavaScript操作错误：如果在JavaScript中使用了重复的ID，并且依赖于通过ID选择器获取元素或处理元素的特定行为，将会出现问题。JavaScript操作可能应用于错误的元素或无法正常工作。
总之，违反ID选择器的唯一性原则会引发不可预测的行为、样式冲突和JavaScript操作错误。为了避免这些问题，应确保在HTML文档中每个ID都是唯一的，并合理使用其他选择器来选择多个元素。
高优先级：ID选择器的优先级非常高，比其他选择器（如类选择器、元素选择器）更具特权。当使用ID选择器选择一个元素时，它的权重比其他选择器更高，这意味着它的样式规则将覆盖其他选择器的样式规则。
快速查找：由于ID在文档中应该是唯一的，浏览器可以通过ID快速准确定位到对应的元素。因此，使用ID选择器可以提高选择元素的效率和性能。
用途广泛：ID选择器常用于为特定的元素应用唯一的样式规则或添加特定的JavaScript交互行为。通过给元素添加ID，可以方便地针对该元素进行样式设置或JavaScript操作。
不易复用：由于ID选择器的唯一性，通常不建议将ID选择器用于多个元素。如果多个元素具有相同的样式或行为，应该使用类选择器或其他更适合的选择器。

需要注意的是，在编写CSS样式时，应合理使用ID选择器，并避免过度依赖ID选择器的高优先级。合理选择合适的选择器可以使代码更具灵活性、可维护性和可复用性。

使用方法和类选择器是一样的（基本上所有的都是一样的），只是在css中，不再使用.而是改为#
1
<p id="hlf">djaslkhflkas</p>
1
2
3
#hlf {
    color: #000;
}

背景

CSS中有多个用于设置元素背景的属性，包括以下常用属性：

background-color：设置元素的背景颜色。可以使用颜色名称、十六进制值、RGB值或RGBA值来指定颜色。例如：background-color: blue;
background-image：设置元素的背景图像。可以指定图像的URL路径或使用url()函数。例如：background-image: url('image.jpg');

background-repeat：指定背景图像的重复方式。常见的取值有：repeat（默认，图像在水平和垂直方向上平铺）、repeat-x（只在水平方向上平铺）、repeat-y（只在垂直方向上平铺）、no-repeat（不重复）等。
background-position：指定背景图像的位置。可以使用关键字（如left、center、right、top、bottom）或百分比值、像素值来定位。例如：background-position: center top;
background-size：设置背景图像的大小。可以使用关键字（如auto、cover、contain）或像素值、百分比值来指定大小。例如：background-size: cover;
background-attachment：指定背景图像的滚动行为。常见的取值有：scroll（默认，背景图像会随着元素内容的滚动而滚动）、fixed（背景图像固定在视口中，不随滚动而移动）等。
background-origin：指定背景图像的定位起点。常见的取值有：padding-box（背景图像相对于内边距框定位）、border-box（背景图像相对于边框框定位）、content-box（背景图像相对于内容框定位）等。
background-clip：指定背景图像的裁剪区域。常见的取值有：border-box（默认，背景图像延伸到边框外沿）、padding-box（背景图像延伸到内边距外沿）、content-box（背景图像裁剪为内容框内部）等。

这些属性可以单独使用或组合使用，通过设置不同的值来创建各种背景效果。

边框

在CSS中，可以使用边框属性来定义元素的边框样式、宽度和颜色。以下是常用的边框属性：

border-width：设置边框的宽度。可以使用像素值、百分比值或预定义的关键字（如thin、medium、thick）来指定。例如：border-width: 2px;
border-style：设置边框的样式。常见的取值有：none（无边框）、solid（实线边框）、dotted（点状边框）、dashed（虚线边框）等。例如：border-style: solid;
border-color：设置边框的颜色。可以使用颜色名称、十六进制值、RGB值或RGBA值来指定颜色。例如：border-color: red;
border：可以同时设置边框的宽度、样式和颜色。属性值的顺序可以是宽度、样式和颜色，也可以是样式、宽度和颜色。例如：border: 2px solid red;
border-radius：设置边框的圆角半径，使边框呈现圆角效果。可以指定一个值来应用相同的圆角半径，或使用四个值分别指定每个角的圆角半径。例如：border-radius: 5px; 或 border-radius: 5px 10px 15px 20px;

这些边框属性可以在单独的样式规则中使用，也可以组合在一起来创建自定义的边框样式。同时，还可以使用border-top、border-right、border-bottom和border-left属性分别设置上、右、下和左边框的样式、宽度和颜色。

盒子

在CSS中，盒子（Box）是用于布局和定位元素的基本单位。每个元素都被看作一个矩形盒子，具有四个边框、内边距和内容区域。以下是与CSS盒子相关的常见属性：

width：设置盒子的宽度。可以使用像素值、百分比值或其他长度单位来指定。例如：width: 200px;
height：设置盒子的高度。与width属性类似，可以使用不同的单位来指定高度。
padding：设置盒子的内边距。内边距是指元素内容与边框之间的空间。可以使用像素值或百分比值来指定内边距。例如：padding: 10px; 或 padding: 10px 20px;（分别表示上下内边距为10像素，左右内边距为20像素）。
border：设置盒子的边框样式、宽度和颜色。可以使用border-width、border-style和border-color属性分别指定边框的宽度、样式和颜色。例如：border: 1px solid black;
margin：设置盒子的外边距。外边距是指元素与相邻元素之间的间隔。可以使用像素值或百分比值来指定外边距。例如：margin: 10px; 或 margin: 10px 20px;（分别表示上下外边距为10像素，左右外边距为20像素）。
box-sizing：定义元素的盒模型计算方式。常见的取值有：content-box（默认，宽度和高度只包括内容区域）、border-box（宽度和高度包括内容区域、内边距和边框）等。

这些属性用于控制盒子的尺寸、内外边距和边框样式。通过合理地使用这些属性，可以实现灵活的布局和设计效果。