cup11's blog

Appearance

A15. HTML结构 基础语法 ​

5.1 HTML文档具有基本结构 ​

如果你打开另一个网页编写网站：https://jsbin.com/，你会发现默认的HTML文档已经有了基本结构：

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
</body>
</html>

在https://bi.cool中，我们其实只写了<head>和<body>内部的内容。

  1. <!DOCTYPE html>：文档类型声明，表明此文件遵循HTML5规范。
  2. <html>：元素，表示整个HTML文档。具有lang属性标识界面语言，简体中文为zh-CN。
  3. <head>：头部元素，包含文档的。
  4. <body>：主体元素，包含文档的显示内容，也是HTML文档的核心部分。

认识完了整体结构，我们再认识一下<head>中的元素：

首先，<title>（非空元素）定义文章的标题，它会显示在浏览器的标题栏。

<meta>（空元素）则复杂一些：

html
<meta charset="UTF-8"> <!-- 定义文档的字符编码，因为对解析至关重要，故直接使用charset属性，一般为UTF-8 -->

<!-- 其余含有name和content属性 -->
<meta name="viewport" content="width=device-width"> <!-- 定义视口，使页面在不同设备上显示时，宽度自适应 -->
<meta name="description" content="This is a sample page"> <!-- 定义页面的描述信息，通常显示在搜索引擎结果中 -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 定义页面的关键字，通常显示在搜索引擎结果中 -->
<meta name="author" content="John Doe"> <!-- 定义页面的作者 -->

这些对界面显示没有很大影响，但对于搜索引擎有着重要的作用。

此外，我们还可以给网站添加：

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

5.1 代码阅读：HTML文档具有基本结构 ​

Github Homepage: https://github.com/

html
<head>
  <meta charset="utf-8">

  <title>GitHub</title>

  <meta name="viewport" content="width=device-width">
  <meta name="description" content="GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.">

  <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg">
  <meta name="theme-color" content="#1e2327">
</head>

Bilibili AV2 Homepage: https://www.bilibili.com/video/av2

html
<meta name="keywords" content="字幕君交流场所,,音乐,音乐综合,哔哩哔哩,bilibili,B站,弹幕">
<meta name="author" content="碧诗">

5.2 六种标题元素标识文章层级 ​

在网页界面，尤其是文章排版中，我们会用到标题、二级标题、三级标题等等，HTML提供了六种标题元素来标识文章层级：

html
<h1>1 一级标题</h1>
<h2>1.1 二级标题</h2>
<h3>1.1.1 三级标题</h3>
<h4>1.1.1.1 四级标题</h4>
<h5>1.1.1.1.1 五级标题</h5>
<h6>1.1.1.1.1.1 六级标题</h6>

即：<h1>~<h6>，分别表示一到六级标题，均为非空元素。

但是注意，标题下的内容不能嵌套在标题元素之下，而应另起一个元素。

例如：

html
<h1>我的作品集</h1>
<div>
    <h2>作品一</h2>
    <p>作品一的描述</p>
</div>

5.3 语义化HTML元素利于搜索引擎优化 ​

HTML5引入语义化元素，防止<div>等无语义元素对搜索引擎的分类和索引造成影响。

元素说明
<header>页眉，通常包含导航、logo、搜索框等
<nav>网页导航，通常在<header>中使用
<main>主要内容，文章内容的主体
<article>文章
<section>章节，可以包裹标题和内容
<aside>侧边栏
<footer>页脚，通常包含版权信息、备案信息、联系方式等

5.3 代码阅读：语义化HTML元素利于搜索引擎优化 ​

作为一个网页开发者，当然希望自己的网页能被搜索引擎索引，当搜索时被排在前列，这就体现的重要性。

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

尝试使用开发者工具查看上述网站的HTML代码，可以看到语义化元素的使用。

5.4 HTML注释提供不显示在界面上的备注信息 ​

在HTML代码中，如果我们想为某些代码添加解释或分割作用，而不想被用户看到，可以使用注释。

其语法为：<!-- 注释内容 -->，其中注释内容可以换行，可以是任何内容。

例如：

html
<!-- This is a comment -->
<!-- This is a
 comment with
 multiple lines -->

5.5 HTML将连续的换行符和空格等效为一个空格 ​

在HTML代码中，我们会发现，只要出现了一个空格之后，无论多少个连续的换行和空格，渲染的效果都不变。

html
Three   continuous   spaces   doesn't   matter.

这是因为HTML将连续的换行符和空格等效为一个空格，因此使我们可以为了源代码的美观自由地添加缩进和换行。

但也可以使用标签，它会保留换行符和空格，并在渲染时保留原样。

例如：

html
<pre>
___________________________
I'm an expert in my field.
---------------------------
        \   ^__^
        \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
</pre>

5.6 HTML实体引用实现语言的完备性 ​

但是，如果我们真的想要在界面上显示连续多个空格，怎么办呢？

又或者，如果我们要在界面上显示<p>文本本身，而不是一个段落，又该怎么办呢？

HTML提供了，可以实现这些功能。

实体全称说明
&nbsp;显示一个空格，换行一定不会在此处发生
&lt;显示小于号 <，防止与标签混淆
&gt;显示大于号 >，防止与标签混淆
&amp;显示与符号 &，防止与实体引用语法本身混淆

5.6 代码阅读：HTML实体引用实现语言的完备性 ​

例如，我们可以用HTML记录HTML笔记：

html
<h1>A1. HTML入门</h1>
<h2>5. HTML结构 基础语法</h2>
<h3>5.6 HTML实体引用实现语言的完备性</h3>
<p>HTML提供了字符实体引用，可以实现连续多个空格、显示&lt;p&gt;文本本身、防止与标签混淆等功能。</p>
<p>例如这段代码：<code>&lt;p&gt;This is a &amp;lt;p&amp;gt; text&lt;/p&gt;</code>会被渲染成：This is a &lt;p&gt; text。</p>
<p>使用&amp;nbsp;可以显示连续多个空格，例如这段代码：<code>Continuos &amp;nbsp;&amp;nbsp;&amp;nbsp; spaces</code>会被渲染成：Continuos&nbsp;&nbsp;&nbsp;spaces。</p>

效果：

HTML提供了字符实体引用，可以实现连续多个空格、显示<p>文本本身、防止与标签混淆等功能。

例如这段代码：<p>This is a &lt;p&gt; text</p>会被渲染成：This is a <p> text。

使用&nbsp;可以显示连续多个空格，例如这段代码：Continuos &nbsp;&nbsp;&nbsp; spaces会被渲染成：Continuos   spaces。

实体引用 ​

实体引用在其他语言中又称为转义字符，它是一种特殊的字符，它告诉解析器用一定的规则解释它。

例如在Python中：

python
print("Hello, \"world\"!")

\"是转义字符，它告诉Python解释器，"只是字符串的一部分，而不是结束符。

除了前面所述的四种HTML实体引用，还有很多其他的实体引用，这里不多赘述，可参见：https://developer.mozilla.org/zh-CN/docs/Glossary/Entity。

除此之外，也可以使用Unicode字符编码来表示特殊字符，例如：

html
&#32;

其中32是Unicode编码，表示一个空格。

知识回顾 ​

  1. HTML文档具有特定的结构，开头<!DOCTYPE html>声明文档类型，<html>元素是根元素，<head>元素包含文档的元数据，<body>元素包含文档的显示内容。
  2. <head>元素中，<title>元素定义文章的标题，<meta>元素定义文档的元数据：
    • <meta charset="UTF-8">定义文档的字符编码，唯一直接使用的属性，一般为UTF-8。
    • 其余的<meta>元素<meta name="..." content="...">用于定义页面的描述信息（description）、关键字（keywords）、作者（author）、视口（viewport）等。
  3. 六种标题元素标识文章层级，<h1>~<h6>，分别表示一到六级标题，均为非空元素。
  4. HTML注释提供不显示在界面上的备注信息，<!-- 注释内容 -->，可换行。
  5. HTML将连续的换行符和空格等效为一个空格。
  6. HTML提供了字符实体引用，可以实现连续多个空格、显示标签本身以防止与标签混淆等功能。
    • &nbsp;显示一个空格。
    • &lt;、&gt;、&amp;分别显示小于号、大于号、与符号。

课堂练习 ​

  1. HTML文档的标准结构中，<!DOCTYPE html>是什么？根元素是什么元素？
  2. HTML注释的语法是什么？
  3. 为作品集完善<head>元素，添加作者、关键字、描述、图标（可选）等信息。
  4. 使用语义化元素完善作品集的HTML结构。
  5. 尝试使用HTML注释添加注释信息。
  6. 如果要添加连续三个空格，应该怎么做？
  7. 尝试复现HTML实体引用的效果。

Built by Vitepress | Apache 2.0 Licensed

Copyright © 2025 cup11