个人GitHub托管网站项目：DrAwesome4333.github.io概述

李大锤同学

902人浏览 · 2024-10-13 10:29:54

李大锤同学 · 2024-10-13 10:29:54 发布

简介：本项目展示了如何利用GitHub Pages托管个人网站。源代码存放在GitHub仓库“DrAwesome4333.github.io”，通过自动部署功能提供网站访问。项目的核心技术是HTML，用于构建网页的结构和内容。网站可能包含多个HTML、CSS、JavaScript文件和其他资源，以实现网页的设计、样式和功能。文件包括index.html主页、CSS和JS文件夹等。通过深入学习HTML的结构、元素、文本格式化、列表、图像、表格、链接和响应式设计，可以构建功能丰富的静态网站，并通过CSS和JavaScript进一步增强用户体验。 DrAwesome4333.github.io

1. GitHub Pages概述

1.1 GitHub Pages简介

GitHub Pages是GitHub提供的一个静态网站托管服务，允许开发者免费托管个人、组织或项目的静态网站。它可以直接从GitHub仓库中推送更新，并通过简单的配置实现网页的自动部署。

1.2 GitHub Pages的特点

免费托管 ：GitHub Pages提供免费的托管服务，对于开源项目尤其有吸引力。
简化发布流程 ：集成Git版本控制，使得发布流程更加简便。
自定义域名 ：用户可以为自己的网站设置自定义域名，提升品牌形象。

1.3 GitHub Pages的使用场景

个人博客 ：作为技术开发者展示个人作品、技术文章的平台。
项目文档 ：为开源项目提供官方文档，方便用户和开发者了解项目详情。
教程和示例 ：提供编程教程、代码示例等，方便学习和实践。

了解了GitHub Pages的基础知识后，接下来我们将深入探讨如何创建和部署一个GitHub Pages站点。在本章的后续部分，我们将学习HTML基础结构，这是构建网页内容的基础。

2. HTML基础结构学习

2.1 HTML文档的基本结构

HTML（HyperText Markup Language）是构建网页的基础，它定义了网页内容的结构和布局。一个标准的HTML文档由一系列的标签组成，这些标签为网页内容提供了必要的结构。

2.1.1 DOCTYPE声明

DOCTYPE声明是HTML文档的第一行，它告诉浏览器应该使用哪种HTML或XHTML版本来渲染页面。例如，HTML5的DOCTYPE声明如下：

<!DOCTYPE html>

这个声明非常简单，它告诉浏览器当前页面是基于HTML5标准的。虽然这个声明本身不包含任何HTML代码，但它对于确保页面能够按照预期的方式显示至关重要。

2.1.2 HTML标签和文档类型

HTML文档的根元素是 <html> ，它包含了整个页面的内容。一个基本的HTML页面结构如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

在这个例子中， <head> 元素包含了文档的元数据，如文档标题。 <body> 元素包含了可见的页面内容，例如标题( <h1> )和段落( <p> )。

2.2 HTML元素的分类

HTML元素可以分为两大类：块级元素和内联元素。这些元素的分类决定了它们在页面上的表现形式和布局方式。

2.2.1 块级元素与内联元素

块级元素（Block-level elements）是那些独占一行的元素，例如 <div> 、 <h1> 到 <h6> 、 <p> 等。这些元素默认显示为块状，占据全部可用的宽度，通常用于定义页面的主要结构。

内联元素（Inline elements）则不会独占一行，而是占据它们需要的空间。例如 <span> 、 <a> 、 <img> 等。内联元素通常用于文本或图片的布局，不影响页面的整体布局。

2.2.2 标题、段落和链接元素

标题元素（Heading elements） <h1> 到 <h6> 用于定义页面的标题和子标题。标题是页面内容的入口点，对于搜索引擎优化（SEO）和辅助技术非常重要。

段落元素( <p> )用于定义文本段落。段落是文本的基本组织单位，通常由一个或多个句子组成。

链接元素( <a> )用于创建超链接，它允许用户点击某个文本或图像跳转到另一个页面或页面内的某个部分。链接的 href 属性定义了链接的目标URL。

2.3 HTML文档的元数据

元数据（Metadata）提供了关于HTML文档的信息，但不会直接显示在页面上。元数据通常包含关于作者、关键词、字符集声明等信息。

2.3.1 meta标签的使用

<meta> 标签位于 <head> 部分，用于定义文档的元数据。例如，字符集声明可以使用以下 <meta> 标签：

<meta charset="UTF-8">

这个标签告诉浏览器使用UTF-8字符集来解析页面，这是一种广泛使用的字符编码，可以显示多种语言的字符。

2.3.2 字符集的声明与视口设置

字符集声明之外， <meta> 标签还可以用来设置视口（viewport），这对于响应式设计非常重要。视口元标签告诉浏览器如何控制页面的尺寸和缩放级别。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签设置视口宽度等于设备宽度，并将初始缩放级别设置为1.0，这对于移动设备上的页面显示非常有用。

在本章节中，我们介绍了HTML文档的基本结构，包括DOCTYPE声明、HTML标签、元素的分类（块级元素与内联元素）、标题、段落和链接元素的使用，以及元数据的概念和应用。这些基础知识对于构建任何HTML页面都是必不可少的。在接下来的章节中，我们将深入探讨HTML元素的类型和用法，以及如何进行文本格式化，创建列表和表格，插入图像，创建链接，以及如何实践响应式设计。

3. HTML元素和属性

3.1 HTML元素的类型和用法

3.1.1 常用HTML元素介绍

在本章节中，我们将深入探讨HTML元素的类型和用法，这是构建网页的基础。HTML元素通常由开始标签、内容和结束标签组成。例如， <p> 是一个段落元素，它包含文本内容和相应的结束标签 </p> 。这些元素可以嵌套使用，以创建复杂的文档结构。

<p>这是一个段落。</p>

上述代码展示了如何使用段落元素 <p> 来包裹文本内容。HTML中还有许多其他类型的元素，如标题 <h1> 到 <h6> 、链接 <a> 、图片 <img> 等。每个元素都有其特定的用途和语义含义，这有助于搜索引擎优化（SEO）和辅助技术，如屏幕阅读器，更好地理解网页内容。

3.1.2 HTML5新增元素的特性

随着HTML5的推出，许多新的元素被引入，以增强网页的表现力和语义化。例如， <article> 、 <section> 、 <nav> 、 <aside> 和 <header> 等。这些元素不仅有助于定义文档的结构，还能够提高内容的可访问性和可维护性。

<article>
  <h1>标题</h1>
  <p>内容...</p>
</article>

在上述代码中， <article> 元素被用来标记页面上的独立内容块。这种结构化的方式使得内容更容易被机器理解，同时也为开发者提供了一种清晰的布局方式。在本章节中，我们将详细介绍这些元素，并探讨它们在现代网页设计中的应用。

3.2 HTML元素的属性

3.2.1 常用属性及其功能

HTML元素的属性提供了额外的信息和控制，可以增强元素的功能。例如， id 属性用于标识一个元素， class 属性用于应用样式或脚本，而 title 属性可以提供额外的信息。

<div id="main-content" class="container" title="主要内容区域">
  <!-- 内容 -->
</div>

上述代码展示了如何使用 id 和 class 属性来标识和样式化一个 div 元素。 id 属性应保证在页面中唯一，而 class 可以在多个元素上重复使用。 title 属性则提供了鼠标悬停时显示的额外信息，这对于提供辅助功能非常有用。

3.2.2 HTML5新属性的应用

HTML5引入了许多新属性，以支持更丰富的网页功能。例如， placeholder 属性用于输入字段，可以在用户输入之前显示提示文本； required 属性用于强制表单提交前填写某些字段。

<input type="text" name="username" placeholder="请输入用户名" required>

在上述代码中， placeholder 属性为文本输入字段提供了提示信息，而 required 属性确保在提交表单之前必须填写该字段。这些属性的使用不仅提高了用户体验，还增强了表单的可访问性。

3.3 HTML元素的嵌套和组织

3.3.1 合理嵌套元素的重要性

在HTML文档中，元素的嵌套是关键，它定义了文档的结构和层次。正确的嵌套可以确保文档的语义正确，使得内容易于被浏览器和辅助技术解析。

<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <section>
    <p>段落内容...</p>
  </section>
  <footer>
    <p>版权所有 &copy; 2023</p>
  </footer>
</article>

上述代码展示了如何使用嵌套元素来构建一个文章结构。 <header> 、 <section> 和 <footer> 元素分别用于表示文章的头部、主要内容区域和底部。这种结构化的布局方式有助于提高内容的可读性和可维护性。

3.3.2 页面布局元素的嵌套规则

在进行页面布局时，元素的嵌套同样至关重要。使用如 <div> 、 <span> 等元素可以帮助我们创建复杂的布局结构。 <div> 通常用于大块区域的布局，而 <span> 则用于行内元素的样式化或脚本操作。

<div id="header">
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <!-- 更多菜单项 -->
    </ul>
  </nav>
</div>

在上述代码中， <div> 元素被用来创建一个包含网站标题和导航菜单的头部区域。 <nav> 元素用来标记导航链接，这对于SEO和无障碍访问都非常重要。

通过本章节的介绍，我们可以看到HTML元素和属性是构成网页的基石。正确地使用这些元素和属性，不仅可以提高网页的语义化，还可以增强用户体验和可访问性。在接下来的章节中，我们将继续探讨如何使用HTML进行文本格式化和列表的使用方法。

4. 文本格式化技巧

文本格式化是网页设计中的一个重要方面，它能够提升内容的可读性和吸引力。在本章节中，我们将深入探讨如何使用HTML对文本进行有效的格式化。

4.1 文本的排版和样式

4.1.1 字体样式、大小和颜色

字体样式、大小和颜色是文本格式化的基础。HTML通过 <font> 标签来设置文本的字体、大小和颜色。以下是一个示例代码块，展示如何使用这些属性：

<!DOCTYPE html>
<html>
<head>
<style>
  .font-size-large {
    font-size: 24px; /* 设置字体大小 */
    color: blue; /* 设置字体颜色 */
  }
</style>
</head>
<body>

<p class="font-size-large">这是一个段落，字体大小为24px，颜色为蓝色。</p>

</body>
</html>

在这个例子中，我们定义了一个CSS类 .font-size-large ，它将文本的字体大小设置为24px，并将其颜色设置为蓝色。然后我们在 <p> 元素上应用了这个类。

4.1.2 加粗、斜体和下划线的使用

加粗、斜体和下划线是文本格式化的常用样式，它们可以通过 <strong> 、 <em> 和 <u> 标签来实现。以下是如何使用这些标签的示例：

<!DOCTYPE html>
<html>
<body>

<p><strong>加粗文本</strong>：用于强调重要信息。</p>
<p><em>斜体文本</em>：用于表示语气。</p>
<p><u>下划线文本</u>：用于显示链接。</p>

</body>
</html>

在这个例子中， <strong> 标签用于强调重要信息， <em> 标签用于表示语气，而 <u> 标签通常用于显示链接。

4.2 文本的结构化

4.2.1 标题、引用和代码元素

HTML提供了一系列的元素来结构化文本，包括标题、引用和代码。以下是如何使用这些元素的示例：

<!DOCTYPE html>
<html>
<body>

<h1>这是一个标题</h1>
<h2>这是一个副标题</h2>

<p>这是一个段落。</p>

<blockquote>
  <p>这是一个引用段落。</p>
</blockquote>

<pre>
<code>
这是一个代码块。
</code>
</pre>

</body>
</html>

在这个例子中， <h1> 和 <h2> 标签用于创建标题和副标题， <blockquote> 标签用于引用文本，而 <pre> 和 <code> 标签用于显示代码块。

4.2.2 强调文本和重要信息的标记

为了强调文本或标记重要信息，HTML提供了 <mark> 、 <small> 、 <ins> 和 <del> 标签。以下是如何使用这些标签的示例：

<!DOCTYPE html>
<html>
<body>

<p>这是<mark>强调文本</mark>。</p>
<p>这是<small>更小的文本</small>。</p>
<p>这是<ins>插入文本</ins>。</p>
<p>这是<del>删除文本</del>。</p>

</body>
</html>

在这个例子中， <mark> 标签用于强调文本， <small> 标签用于显示更小的文本， <ins> 标签用于显示插入文本，而 <del> 标签用于显示删除文本。

4.3 列表和文本的组合使用

4.3.1 有序列表和无序列表的创建

有序列表（ <ol> ）和无序列表（ <ul> ）是组织文本内容的常用方式。以下是如何创建这两种列表的示例：

<!DOCTYPE html>
<html>
<body>

<h2>有序列表</h2>
<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ol>

<h2>无序列表</h2>
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

</body>
</html>

在这个例子中， <ol> 标签用于创建有序列表，而 <ul> 标签用于创建无序列表。每个列表项使用 <li> 标签来定义。

4.3.2 定义列表的应用场景

定义列表（ <dl> 、 <dt> 和 <dd> ）通常用于术语和定义的场景。以下是如何使用定义列表的示例：

<!DOCTYPE html>
<html>
<body>

<h2>定义列表示例</h2>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

</body>
</html>

在这个例子中， <dl> 标签用于创建定义列表， <dt> 标签用于定义术语，而 <dd> 标签用于提供术语的定义。

通过本章节的介绍，我们了解了如何使用HTML对文本进行有效的格式化，包括排版和样式、结构化以及列表的使用。这些技巧对于创建清晰、有组织且美观的网页内容至关重要。

5. 列表使用方法

列表是HTML中用于组织信息的基本结构之一，无论是简单的任务列表还是复杂的导航菜单，列表都能提供清晰的视觉层次和易于管理的内容组织。在本章节中，我们将深入探讨列表的基本类型和结构，并展示其高级应用，包括如何创建自定义列表以及将列表与表格、表单结合使用的技巧。

5.1 列表的基本类型和结构

5.1.1 有序列表和无序列表的区别

HTML提供了两种基本的列表类型：有序列表（ <ol> ）和无序列表（ <ul> ）。有序列表通常用于展示按照一定顺序排列的项目，如步骤说明、排名等，而无序列表则用于项目顺序不重要的情况，如购物清单、菜单项等。

代码示例

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

在上述代码中，有序列表使用了数字来标记列表项，而无序列表则使用了默认的圆点标记。浏览器会自动为有序列表添加数字序列。

5.1.2 列表项的嵌套和自定义样式

列表项不仅可以包含文本，还可以嵌套其他HTML元素，包括其他列表。这使得创建复杂的嵌套列表成为可能，如目录、索引等。此外，还可以通过CSS来自定义列表的样式，包括改变列表标记的形状、颜色以及列表的布局。

代码示例

<ul>
  <li>项目一
    <ul>
      <li>子项目1</li>
      <li>子项目2</li>
    </ul>
  </li>
  <li>项目二</li>
</ul>

CSS代码示例

ul {
  list-style-type: square; /* 更改列表标记为方形 */
}

ol {
  list-style-type: lower-alpha; /* 更改有序列表标记为小写字母 */
}

在上述CSS代码中，我们改变了无序列表的标记为方形，以及将有序列表的标记改为小写字母。这些自定义样式可以帮助用户更好地理解和视觉上区分不同类型的列表。

5.2 列表的高级应用

5.2.1 自定义列表的创建

自定义列表（ <dl> ）是一种特殊类型的列表，通常用于显示术语和定义。 <dl> 元素包含一组 <dt> （定义术语）和 <dd> （定义描述）元素。这种列表类型常用于创建字典、词汇表或任何需要术语和描述的内容结构。

代码示例

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页。</dd>

  <dt>CSS</dt>
  <dd>层叠样式表，用于描述网页的外观和格式。</dd>
</dl>

5.2.2 列表与表格、表单的结合使用

列表还可以与表格（ <table> ）和表单（ <form> ）元素结合使用，以实现更复杂的用户界面设计。例如，一个菜单项列表可以嵌套在一个表格中，以显示每个项目的详细信息，或者一个表单中的选择列表（ <select> ）可以用来从一个有序列表中选择一个选项。

表格与列表结合示例

<table>
  <tr>
    <th>项目</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>
    </td>
    <td>网页技术</td>
  </tr>
  <tr>
    <td>
      <ul>
        <li>JavaScript</li>
        <li>React</li>
      </ul>
    </td>
    <td>前端框架</td>
  </tr>
</table>

表单与列表结合示例

<form>
  <label for="options">选择一个项目:</label>
  <select id="options" name="options">
    <optgroup label="网页技术">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
    </optgroup>
    <optgroup label="前端框架">
      <option value="javascript">JavaScript</option>
      <option value="react">React</option>
    </optgroup>
  </select>
</form>

在这个示例中，我们创建了一个表单，其中包含一个下拉列表，用户可以选择不同的技术栈。 <optgroup> 元素用于对选项进行分组，虽然它不是列表类型，但它展示了如何在表单中组织和结构化选项。

在本章节中，我们介绍了列表的基本类型和结构，并通过代码示例展示了如何使用CSS自定义列表样式。此外，我们还探讨了列表的高级应用，包括自定义列表的创建以及列表与表格、表单结合使用的场景。通过理解这些概念和方法，您可以更加灵活地使用列表来组织和展示信息，从而增强网页的可用性和用户体验。

6. 图像插入和属性

6.1 图像的基本标签和属性

6.1.1 图像标签的使用

在HTML中，图像通常是通过 <img> 标签来插入的。这个标签是一个自闭合标签，意味着它不需要结束标签。使用 <img> 标签时，你需要指定两个重要的属性： src 和 alt 。

src 属性用于指定图像的路径。这个路径可以是相对于当前HTML文件的路径，也可以是完整的URL。
alt 属性用于提供图像的替代文本。当图像无法显示时（例如，如果图像路径错误或者用户使用的是屏幕阅读器），替代文本将被显示。

<img src="example.jpg" alt="示例图像">

在这个例子中， example.jpg 是图像文件的名称，它应该位于与HTML文件相同的目录中。如果图像位于子目录中，则需要指定相对路径，如 images/example.jpg 。 alt 属性中的文本描述了图像的内容，这对于搜索引擎优化和辅助技术非常重要。

6.1.2 图像尺寸、边框和替代文字

除了基本的 src 和 alt 属性外， <img> 标签还支持其他一些属性，如 width 和 height 属性，用于控制图像的尺寸； border 属性，用于添加边框；以及 title 属性，用于提供额外的信息，通常在鼠标悬停时显示。

<img src="example.jpg" alt="示例图像" width="200" height="100" border="1" title="悬停显示的标题">

在这个例子中，图像的宽度被设置为200像素，高度为100像素，边框宽度为1像素，鼠标悬停时会显示标题信息。

6.1.3 图像的CSS样式

虽然 <img> 标签本身不提供用于设置样式（如背景颜色、边框样式等）的属性，但我们可以通过CSS来实现。你可以将图像作为CSS的背景，或者将图像元素包装在其他HTML元素（如 <div> ）中，并对该元素应用样式。

<style>
    .img-container {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        background-image: url('example.jpg');
        background-size: cover;
    }
</style>
<div class="img-container"></div>

在这个例子中， <div> 元素被用作图像的容器，并应用了CSS样式。 background-image 属性用于设置背景图像， background-size 属性用于控制图像的尺寸。

6.2 图像的高级功能

6.2.1 图像映射和热区

图像映射允许在单个图像中定义多个可点击区域，这些区域称为“热区”。这是通过使用 <map> 和 <area> 标签来实现的。 <map> 标签定义了一个图像映射，而 <area> 标签定义了热区。

<img src="example.jpg" usemap="#image-map">
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="#" alt="区域1">
    <area shape="circle" coords="129,161,60" href="#" alt="区域2">
    <area shape="poly" coords="210,235,228,287,297,265,253,244" href="#" alt="区域3">
</map>

在这个例子中， <img> 标签的 usemap 属性引用了一个名为 image-map 的图像映射。 <map> 标签定义了图像映射，并为每个 <area> 标签指定了形状、坐标、链接和替代文本。

6.2.2 CSS与HTML结合实现图像效果

使用CSS，我们可以为图像添加各种视觉效果，如阴影、边框圆角、变换等。这些效果可以通过直接在HTML标签中应用内联样式或者通过外部或内部CSS样式表来实现。

<style>
    .shadow {
        box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    }
    .rounded {
        border-radius: 50%;
    }
</style>
<img src="example.jpg" alt="带阴影的图像" class="shadow">
<img src="example.jpg" alt="圆形图像" class="rounded">

在这个例子中，第一个图像应用了阴影效果，第二个图像应用了圆形边框效果。这些效果通过CSS类来应用，可以轻松地对多个图像应用相同的样式。

graph LR
A[HTML img标签] --> B[CSS样式]
A --> C[图像映射和热区]
B --> D[图像阴影]
B --> E[图像边框圆角]
C --> F[区域1]
C --> G[区域2]
C --> H[区域3]

通过本章节的介绍，我们了解了如何使用HTML的基本标签和属性插入图像，如何控制图像的尺寸和样式，以及如何实现图像映射和热区。我们还探讨了CSS与HTML结合实现图像的高级效果。这些知识对于创建丰富的视觉内容至关重要，无论是在网页设计还是在响应式设计实践中，图像都是不可或缺的元素。

7. 表格构建

在网页设计中，表格是一种非常重要的元素，用于展示数据、布局页面等多种用途。本章节将深入探讨如何构建和优化HTML表格，以确保它们既具有良好的功能性，也具有良好的视觉效果。

7.1 表格的基本结构

7.1.1 表格标签

的使用

表格的基本结构由三个主要标签组成： <table> 定义表格本身， <tr> 定义表格中的一行，而 <td> 则定义一个单元格。每个 <td> 单元格都在一个 <tr> 行中。

<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

7.1.2 表头和表格边框的设置

表头通常使用 <th> 标签，而不是 <td> ，这将使文本加粗并居中显示，通常为黑色背景。表格边框可以通过CSS来设置。

<table>
  <caption>Sample Table</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>

7.2 表格的高级特性

7.2.1 跨行和跨列的实现

跨行和跨列的实现分别使用 rowspan 和 colspan 属性。 rowspan 用于一个单元格占据多行，而 colspan 用于一个单元格占据多列。

<table>
  <tr>
    <td rowspan="2">Header 1</td>
    <td colspan="2">Header 2</td>
  </tr>
  <tr>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

7.2.2 表格的样式和布局优化

CSS为表格提供了丰富的样式选项，包括边框、背景颜色、文本对齐等。通过CSS，可以改善表格的可读性和视觉吸引力。

table {
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

通过上述示例代码，我们展示了如何使用HTML标签和CSS样式来创建和优化表格。这些基本和高级技巧对于构建功能强大且视觉上吸引人的网页表格至关重要。

本文还有配套的精品资源，点击获取