Logo

菜单

发布于 2026-01-06 0 阅读
0

HTML速成课程

HTML速成课程

HTML 子指南

  • HTML
  • HTML框架
  • 标题
  • 段落
  • 锚
  • 媒体
  • 列表
  • 属性
  • 链接
  • 元
  • 语义学
  • 非语义学
  • 款式
  • 表格
  • iframes
  • 表格
  • 按钮
  • 选择
  • 数据列表
  • 模板
  • SVG
  • 评论

这门速成课程面向网页开发初学者，旨在帮助和指导那些希望深入了解 HTML 标签的人。对于高级开发人员来说，它也可以作为复习资料。

你可以在我的 GitHub html-guide 项目中找到代码和指南。这是本文的第二部分，主要讲解HTML 文本格式设置。祝你阅读愉快！

1. HTML

那么，什么是HTML？
HTML是超文本标记语言。它不是 一种编程语言它只是一种组织内容并将其呈现在网页上的方法。要使用这种标记语言，您需要使用 HTML开始标签 <>和结束标签 </>。
那么，您需要学习哪些 HTML 知识呢？您需要了解一些基础知识。

请注意，创建新文件时必须为其添加文件.html扩展名。例如，主页通常命名为.com index.html。

2. HTML框架

HTML框架会启动您将要工作的环境。在开始任何项目之前，您必须包含以下HTML框架：

<!-- `DOCTYPE html` refers to the declaration of the HTML version you are using which is basically HTML5. -->

<!DOCTYPE html>
<html>
  <head>
    <!-- We use <meta> tags to add data that characterises a webpage. -->

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- <title> tag allows you to add the website's name. -->
    <title>Webpage</title>

    <!-- <link> tag lets you add stylesheets where you can add styles to the webpage. -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Inside the <body> tag, we add all that has to do with the webpage content. -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. 标题

标题从<h1>最大的（）到<h2>最小的（）。

<h1>I am a title</h1>
<h2>I am a title</h2>
<h3>I am a title</h3>
<h4>I am a title</h4>
<h5>I am a title</h5>
<h6>I am a title</h6>
Enter fullscreen mode Exit fullscreen mode

4. 段落

我们使用<p>标签来声明段落。

<p>I am a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

5. 锚点

我们使用<a>标签创建超链接，将用户带到当前页面以外的其他页面，或在同一页面内进行导航。

<a href="http://www.google.com">Visit Google</a>
Enter fullscreen mode Exit fullscreen mode

6. 媒体

6.1 图片

我们使用<img>标签来添加图片。请注意，这些标签是自闭合标签，这意味着它们不需要闭合标签；它们会自动闭合。

<img src="apple.jpg" alt="apple" />
Enter fullscreen mode Exit fullscreen mode

src属性alt是必需的。src包含图像路径。alt包含关于该图像的简短描述，以便在网络中断的情况下，用户仍然可以知道图像的内容。

6.2 视频

我们使用<video>标签来插入视频。

<video controls>
  <source src="olaf.mp4" type="video/mp4" />
</video>

<!-- video tags can have multiple attributes to give the videos some functionalities like:

        1. 'controls' to make the video controllable by the user.
        2. 'muted' to make the video in silent mode.
        3. 'autoplay' as the attribute suggests to make the video play when a webpage first loads
        4. 'poster='thumbnail.jpg' to place a poster before the video kicks off.
-->
Enter fullscreen mode Exit fullscreen mode

6.3 音频

我们使用<audio>标签来插入音频。

<audio controls>
  <source src="olaf.mp3" type="audio/mpeg" />
</audio>

<!-- audio tags can have multiple attributes to give the audios some functionalities like:

        1. 'controls' to make the audio controllable by the user.
        2. 'muted' to make the audio in silent mode.
        3. 'autoplay' as the attribute suggests to make the audio play when a webpage first loads.
-->
Enter fullscreen mode Exit fullscreen mode

7. 列表

7.1 有序列表

有序列表是基于数字的列表，它们按时间顺序排列。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

7.2 无序列表

无序列表以项目符号列出，并非按时间顺序排列。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

7.3 定义列表

定义列表是基于描述的列表。它们包含描述以及附加到描述中的术语。

<dl>
  <dt>Item 1</dt>
  <dd>Item 1 is an amazing product which you can buy</dd>
  <dt>Item 2</dt>
  <dd>Item 2 is a fantastic product</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

8. 属性

8.1. ID

id当一个元素具有不常见的独特样式时，我们会使用属性。

<p id="unique">
<!-- Note that you can give any other name. It doesn't have to be 'unique', it can be a name of your choice such as 'text', 'danger' etc. -->

  I have an id attribute. You can only select me because I'm unique.
</p>
Enter fullscreen mode Exit fullscreen mode

8.2. 课程

当某些元素共享相同样式时，我们会使用class属性。我们也可以引用单个元素。

<p class="red-text">
  I have a class. That doesn't make me special. Other tags and I have a common class because we share common styles.
</p>

<p class="red-text">
  I'm another tag that shares the same style as my neighbour tag
</p>
Enter fullscreen mode Exit fullscreen mode

8.3 超引用

我们使用<a>标签来创建超链接。为了使其生效，我们需要将链接插入到 `<h1>` 属性中href，`<h2>` 代表超引用。

<a href="http://www.domain.com"
  >I have got a hyper-reference (href) on me so you can go to that link</a
>
Enter fullscreen mode Exit fullscreen mode

8.4. 来源 (src)

我们使用该src属性来添加图像路径。

<img src="cat.png" />
Enter fullscreen mode Exit fullscreen mode

8.5. 替代方案（alt）

alt当图片因网络连接问题无法显示时，它会起到替代作用。它会显示您在alt属性中包含的短语。

<img src="cat.png" alt="this is a cat" />
Enter fullscreen mode Exit fullscreen mode

8.6 风格

我们使用该属性style为元素添加一些样式。

<p style="color: red;">I'm a paragraph and my color is red</p>
Enter fullscreen mode Exit fullscreen mode

请注意，有三种方法可以为网页添加样式：

  • style内联样式。这是通过在标签元素内使用属性来实现的。
  • 样式标签。此标签位于<head>标签内部。
  • 单独的样式表。

8.7. 标题

该title属性用于简要描述鼠标悬停的元素。例如，当用户将鼠标悬停在徽标上时，会显示“首页”字样。

<a href="http://www.youtube.com" title="go to YouTube">YouTube</a>
Enter fullscreen mode Exit fullscreen mode

9. 链接

我们先达成一个共识。这link和用标签包裹的超链接不一样<a>。我们要把这个link标签添加到 `<div>` 标签内，head因为它包含样式表。

<link rel="stylesheet" href="style.css" />
Enter fullscreen mode Exit fullscreen mode

10. 元

<meta>标签包含有关网页的特殊数据。

<meta charset="UTF-8" />
Enter fullscreen mode Exit fullscreen mode

11. 语义学

11.1. 标题

<header>标签总是位于网页顶部，位于……之内。

标签。它就像一个开口，通常包含徽标、导航菜单、搜索栏等，具体取决于项目。 
<header>
  <p>Hello I am a paragraph inside a header.</p>
</header>
Enter fullscreen mode Exit fullscreen mode

11.2 主要

<main>标签出现在页眉和页脚之间。它们通常包含网页的核心内容或基本要素，例如章节、文章、图表等。

<main>
  <p>Hello I am a paragraph inside a main.</p>
</main>
Enter fullscreen mode Exit fullscreen mode

11.3. 页脚

<footer>标签出现在网页末尾，通常起到结束的作用。它们包含联系信息、导航链接和版权声明。

<footer>
  <p>Hello I am a paragraph inside a footer.</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

11.4 导航

<nav>标签是导航的简写形式。当我们想要添加导航栏时，就会使用它们。

<nav>
  <a href="index.html">home</a>
  <a href="about.html">about</a>
  <a href="contact.html">contact</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

11.5. 章节

<section>标签用于更好地组织我们的内容。一个网页可以包含多个部分；每个部分都针对特定的主题。

<section>
  <p>I'm inside a section</p>
</section>
Enter fullscreen mode Exit fullscreen mode

11.6. 条款

<article>标签用于包含独立内容的文本，例如博客文章等。

<article>
  <p>I'm inside an article tag</p>
</article>
Enter fullscreen mode Exit fullscreen mode

11.7. 附注

<aside>标签用于显示部分内容，它们通常以侧边栏的形式呈现。

<aside>
  <p>
    I'm inside an aside tag. You will find me on the right or left side of the
    webpage
  </p>
</aside>
Enter fullscreen mode Exit fullscreen mode

11.8. 图表

<figure>当我们想要插入带有标题的图片或文档时，标签就非常有用。

<figure>
  <img src="parrot.jpg" alt="this is a parrot picture" />
  <figcaption>Fig1. - Red Parrot.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

11.9. 引用块

<blockquote>标签用于包裹引用。

<blockquote cite="http://en.wikipedia.org/wiki/Main_Page">
  I'm a quote taken from a wikipedia page.
</blockquote>
Enter fullscreen mode Exit fullscreen mode

12. 非语义学

12.1.跨度

<span>标签是一种快速获取其内部内容并使用 CSS 赋予其独特样式或使用 JavaScript 赋予其功能的方法。

<span>I'm inside a span which makes me an inline element</span>
Enter fullscreen mode Exit fullscreen mode

12.2. 部门

<div>标签在我们需要控制儿童等方面非常重要。

<div>I'm inside a div (division) which makes me a block element</div>
Enter fullscreen mode Exit fullscreen mode

13. 款式

<style>标签是一种通过选择 HTML 元素并设置样式来为网页添加样式的方法。我们通常将此标签放在<head>标签内。

<style>
  p {
    color: red;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

14. 表格

<table>标签用于在网页上创建表格。

<table>
  <tr>
    <th>first name</th>
    <th>last name</th>
  </tr>
  <tr>
    <td>Brad</td>
    <td>Smith</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

15. iframe

<iframe>标签用于将另一个文档嵌入到当前的 HTML 文档中。

<iframe src="demo.html" title="this is an Iframe"></iframe>
Enter fullscreen mode Exit fullscreen mode

16. 表格

16.1. 表单标签

<form>标签用于声明表单。表单对于获取用户数据至关重要。表单有多种类型，例如登录表单、注册表单、联系表单等。

<form action="#" method="POST">
  <!-- Here where form elements have to be -->
</form>
Enter fullscreen mode Exit fullscreen mode

16.2. 表单元素

<form action="#" method="POST">
  <!-- A label tag acts like a title -->
  <label>First name:</label>

  <!-- Inputs -->
  <!-- Inputs act like a field where you can type some data. -->

  <!-- Inputs with a type of text are designed to have text in them. -->
  <input type="text" />

  <!-- Inputs with a type of password are designed to have passwords in them that are hidden. -->
  <input type="password" />

  <!-- Inputs with a type of radio display a radio button which allows you to select one of the multiple choices. -->
  <input type="radio" />

  <!-- Inputs with a type of checkbox display a checkbox button which allows you to select one zero or more than one choice. -->
  <input type="checkbox" />

  <!-- Inputs with a type of submit display a submit button that allows you to submit the form -- it technically comes at the end of the form. -->
  <input type="submit" />

  <!-- Inputs with a type of button display a clickable button that allows you to click. -->
  <input type="button" />
</form>
Enter fullscreen mode Exit fullscreen mode

16.3. 表单属性

action该属性旨在处理用户提交的数据。它是数据捕获的端点。用户填写数据并点击提交按钮后，您需要创建一个服务器路径，数据将发送到该路径并在服务器端进行处理。

<form action="#" method="POST">

</form>
Enter fullscreen mode Exit fullscreen mode

method该属性决定了在将数据发送到服务器之前要应用的 HTTP 方法。这些方法包括 POST、GET、DELETE 等。

17. 按钮

17.1. 按钮标签

<button>标签用于创建可点击的按钮。

<button type="button">click me</button>
Enter fullscreen mode Exit fullscreen mode

17.2. 按钮输入

<input>类型为 button 的标签也用于创建可点击的按钮。

<input type="button" value="click me" />
Enter fullscreen mode Exit fullscreen mode

18. 选择

<select>标签用于创建带有选项的下拉列表。用户必须从中选择一个选项。

<select>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
</select>
Enter fullscreen mode Exit fullscreen mode

19. 数据列表

<datalist>标签功能允许您创建带有选项的下拉列表，例如<select>标签；但是，不同之处在于，<datalist>标签允许用户在对推荐选项不满意时添加自己的选项。

<input list="colors" />
<datalist id="colors">
  <option value="red">
  <option value="blue">
  <option value="black">
</datalist>
Enter fullscreen mode Exit fullscreen mode

请注意，该<input>标签很重要。它为用户提供了一个字段，用户可以在其中输入自己的选项。

value该属性会为选项添加一个值。还有另一种方法，即不使用该value属性：

<input list="otherColors" />
<datalist id="otherColors">
  <option>yellow</option>
  <option>brown</option>
  <option>green</option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

20. 模板

<template>标签用于隐藏数据，并使用 JavaScript 对其进行操作以显示数据。

<template>
  <p>I'm hidden inside this template till a user click to display me</p>
</template>
Enter fullscreen mode Exit fullscreen mode

21. SVG

<svg>标签用于创建 SVG。

<svg>
  <rect height='100' width='100' style='fill: red;'>
</svg>
Enter fullscreen mode Exit fullscreen mode

22. 评论

<!-- This is a comment in HTML -->
<!-- Comments don't show up on a webpage -->
Enter fullscreen mode Exit fullscreen mode

感谢您的关注。希望这门课程能像您预期的那样为您提供有用的信息。HTML的内容远不止这些，但如果面面俱到地讲解，反而会分散您的注意力。我已经挑选了一些最重要的标签，您迟早都会用到它们。

更多内容，请在 Instagram 上关注我@cesarcode.init

文章来源：https://dev.to/cesar_code/html-crash-course-1djc
前 15 个开源 Advent 项目
在 SCSS DEV 的全球展示与...