Published

- 9 min read

[学习笔记]从零开始的前端学习笔记（3）

笔记 前端
Thumbnail

前端学习笔记（3）：列表、表格与注释，以及 VS Code 的便捷操作

代码注释：提高代码可读性的秘诀

在开始学习新标签之前，我们先来了解一下注释。什么是注释呢？简单来说，注释就是代码中的一些说明性文字，它们不会被浏览器解析和显示，仅仅是为了方便开发者阅读和理解代码。

如何添加注释？

在 VS Code 中，我们可以通过以下步骤添加注释：

  1. 打开 VS Code，新建一个项目（例如 HTML3）。
  2. 在项目下新建一个 HTML 文件（例如 comment.html）。
  3. 输入 HTML 的基本结构：
<!DOCTYPE html>
<html>
<head>
  <title>注释</title>
</head>
<body>
  这里是正文
</body>
</html>
  1. 在 <body> 标签中添加注释：
<body>
  这里是正文
  <!-- 这是一段注释 -->
  这是注释后的文字
</body>
  • 注释以 <!-- 开始，以 --> 结束。
  • 可以使用快捷键 Ctrl + / （苹果系统为 Command + /）来快速添加或取消注释。

注释的作用：

  • 解释代码的功能和逻辑。
  • 暂时屏蔽掉不需要执行的代码。
  • 记录一些开发过程中的想法或待办事项。

Emmet 插件：加速 HTML 编码的利器

编写 HTML 代码时，重复输入标签是一件繁琐的事情。Emmet 插件可以帮助我们快速生成 HTML 代码片段，极大地提高开发效率。

VS Code 内置了 Emmet 插件。

Emmet 的基本用法

  1. 新建一个 HTML 文件（例如 notes.html）。
  2. 在 <body> 标签中，输入 h2，然后按下 Tab 键。

你会发现 h2 自动补全为 <h2></h2>，并且光标位于标签中间，方便你输入内容。

更多 Emmet 语法可以参考 Emmet 官网或查阅相关中文手册。

列表标签：有序、无序和自定义

列表在网页中非常常见，HTML 提供了三种类型的列表：

  • 无序列表 (Unordered List)： 使用 <ul> 和 <li> 标签。
  • 有序列表 (Ordered List)： 使用 <ol> 和 <li> 标签。
  • 自定义列表 (Definition List)： 使用 <dl>、<dt> 和 <dd> 标签。

无序列表

无序列表使用圆点或其他符号来标记列表项，适用于不强调顺序的列表。

示例：

<h3>网站开发步骤</h3>
<ul>
  <li>
    <h4>HTML</h4>
    构建网页结构
  </li>
  <li>
    <h4>CSS</h4>
    设计网页样式
  </li>
  <li>
    <h4>JavaScript</h4>
    实现网页交互
  </li>
</ul>

使用 Emmet 快速生成无序列表：

h3+ul>li*3

按下 Tab 键后，会自动生成：

<h3></h3>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

代码解释 >: 表示包含关系 +: 表示并列关系 *: 表示重复次数 (): 表示分组

<ul> 标签的 type 属性（已废弃）：

  • disc：实心圆点（默认值）。
  • circle：空心圆圈。
  • square：实心方块。

注意：type 属性在 HTML5 中已不再支持，应该使用 CSS 来代替。

有序列表

有序列表使用数字或字母来标记列表项，适用于强调顺序的列表。

示例：

<h3>网站开发步骤</h3>
<ol>
  <li>需求分析</li>
  <li>原型设计</li>
  <li>前端开发</li>
  <li>后端开发</li>
  <li>测试上线</li>
</ol>

使用 Emmet 快速生成有序列表：

h3+ol>li*5

按下 Tab 键后，会自动生成：

<h3></h3>
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

<ol> 标签的属性：

  • type：指定列表项的标记类型。
    • 1：阿拉伯数字（默认值）。
    • a：小写字母。
    • A：大写字母。
    • i：小写罗马数字。
    • I：大写罗马数字。
  • start：指定列表项的起始编号。

示例：

<ol type="A" start="4">
  <li>需求分析</li>
  <li>原型设计</li>
  <li>前端开发</li>
</ol>

这段代码将生成一个以大写字母标记的列表，并从字母 D 开始编号。

列表嵌套

有序列表和无序列表可以相互嵌套，形成多级列表。

示例：

<ol>
  <li>网站备案
    <ul>
        <li>准备材料</li>
        <li>提交申请</li>
        <li>等待审核</li>
    </ul>
  </li>
</ol>

自定义列表

自定义列表用于定义术语及其解释，通常用于名词解释或问答场景。

示例：

<h3>专业术语解释</h3>
<dl>
  <dt><b>网页</b></dt>
  <dd>一种文件格式，通常使用 HTML 语言编写。</dd>
  <dd>可以通过浏览器访问和阅读。</dd>
  <dt><b>HTML</b></dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
</dl>

代码解释：

  • <dl>：定义自定义列表。
  • <dt>：定义术语（标题）。
  • <dd>：定义术语的解释（内容）。

表格标签：构建课程表

表格是网页中常用的元素，用于展示结构化数据。

表格的基本结构

<!DOCTYPE html>
<html>
<head>
  <title>课程表</title>
</head>
<body>
  <table border="3">
    <caption>课程表</caption>
    <tr>
      <th></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
      <th>星期六</th>
    </tr>
    <tr>
      <td rowspan="4">上午</td>
      <td>-</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>物理</td>
      <td>化学</td>
      <td>生物</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
    <tr>
      <td colspan="7" align="center">午休</td>
    </tr>
    <tr>
      <td rowspan="3">下午</td>
      <td>-</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
  </table>
</body>
</html>

代码解释：

  • <table>：定义表格。
  • <tr>：定义表格行 (table row)。
  • <td>：定义单元格 (table data cell)。
  • <th>：定义表头单元格 (table header cell)，内容默认加粗居中。
  • <caption>：定义表格标题。

使用 Emmet 快速生成表格

table>tr*9>td*7

按下 Tab 键后，会自动生成一个 9 行 7 列的表格结构。

表格属性（部分已废弃）

  • border：设置表格边框的宽度。
  • cellspacing：设置单元格之间的间距。
  • cellpadding：设置单元格内容与边框之间的距离。
  • width：设置表格的宽度。
  • align：设置表格的对齐方式（left、center、right）。

注意：这些属性在 HTML5 中已不再推荐使用，应该使用 CSS 来代替。

合并单元格

  • colspan：跨列合并，用于 <td> 或 <th> 标签。
  • rowspan：跨行合并，用于 <td> 或 <th> 标签。

示例：

  • <td colspan="2">-</td>：将第一个单元格横向合并两列。
  • <td rowspan="4">上午</td>：将第一个单元格纵向合并四行。

添加图片到表格单元格

可以将图片放到 <td> 标签中。

<td>
  语文
  <img src="images/yuwen.png" />
  <br>
</td>

总结与作业

在本节学习笔记中，我们学习了：

  • 代码注释的用法和重要性。
  • VS Code 中 Emmet 插件的基本用法。
  • 三种类型的列表：无序列表、有序列表和自定义列表。
  • 表格的创建、属性设置以及单元格合并。
  • 使用icon front网站为课程表添加图标。

作业：

结合本节课所讲的知识点，独立完成一个列表和表格作品。可以是读书笔记、课程表，也可以是工作安排、报价单。

在下一节学习笔记中，我们将学习表单相关的概念和标签，并尝试构建一个更加复杂的网页。

感谢大家的阅读，我们下期再见！