BemoDB

Appearance

HTML 基础教程 ​

HTML 简介 ​

HTML (HyperText Markup Language) 是网页的基础语言，由欧洲核子研究中心的蒂姆·伯纳斯-李在 90 年代发明。它定义了网页的结构和内容，是现代网页技术的基石。

现代网页开发涉及三种核心技术：

  • HTML：定义网页的结构和内容
  • CSS：定义网页的样式
  • JavaScript：定义网页的交互行为

HTML 基本结构 ​

一个基本的 HTML 文档结构如下：

HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>网页标题</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

HTML 核心概念 ​

1. 标签（Tags） ​

HTML 使用标签来构建网页结构。标签通常成对出现：

  • 开始标签：<tag>
  • 结束标签：</tag>

一些特殊标签（如 <meta>、<img>）可以单独使用。

标签特点：

  • 大小写不敏感（但推荐使用小写）
  • 可以嵌套，但必须正确闭合
  • HTML 忽略多余的空格和换行

2. 元素（Elements） ​

元素是由标签及其内容组成的整体。元素可以分为两类：

块级元素：

  • 独占一行
  • 默认占据 100% 宽度
  • 例如：<div>、<p>

行内元素：

  • 与其他元素共处一行
  • 宽度由内容决定
  • 例如：<span>、<a>

3. 属性（Attributes） ​

属性为标签提供额外的信息：

html
<img src="demo.jpg" width="500" />

属性特点：

  • 在开始标签中定义
  • 通常是 名称="值" 的形式
  • 值推荐使用双引号包裹

基本标签详解 ​

1. <!DOCTYPE html> ​

声明文档类型，告诉浏览器这是一个 HTML5 文档。该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为<!doctype>本质上不是标签，更像一个处理指令。

<!DOCTYPE html>声明必须是 HTML 文档的第一行，位于<html>标签之前。在 HTML 4.01 中，<!DOCTYPE>声明引用 DTD，因为 HTML 4.01 基于 SGML。 DTD(文档类型定义，里面包含了文档的规则)规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5 则简化了这一点，只需要写<!DOCTYPE html>即可。

2. <html> ​

<html>是网页的顶层容器，即标签树结构的顶层节点|根元素，包含整个页面的内容。

该标签有一个 attribute:lang,用来表示网页内容默认的语言，例如:

html
<html lang="zh-CN"></html>

3. <head> ​

包含文档的元数据，一般有:

  • <meta>：设置网页的元数据。
  • <link>：连接外部样式表。
  • <title>：设置网页标题。
  • <style>：放置内嵌的样式表。
  • <script>：引入脚本。
  • <noscript>：浏览器不支持脚本时，所要显示的内容。
  • <base>：设置网页内部相对 URL 的计算基准。

4. <meta> ​

定义页面的元数据,具体介绍可见同栏文章头里面有什么 - meta标签

5. <title> ​

内部只能放置无格式的纯文本。定义页面标题，显示在浏览器标签栏;它对于网页在搜索引擎的排序，有很大的影响：

html
<title>BemoDB</title>

6. <body> ​

用于放置网页的主体内容。浏览器显示的页面内容。

空格和换行处理 ​

HTML 有特殊的空格处理规则：

  1. 标签内容首尾的空格会被忽略
  2. 多个连续空格会被合并为一个
  3. 换行符会被转换为空格 (浏览器会将文本里面的换行符（\n）和回车符（\r），替换成空格)
如果要在 HTML 中显示多个空格，有以下几种方法：

在 HTML 中，如果直接在文本中输入多个空格，浏览器默认只会显示一个空格。这是因为 HTML 不保留空格和换行符的格式。要在 HTML 中插入多个空格，有几种不同的方法可以实现。

使用 HTML 实体引用 ​

HTML 提供了特殊的实体引用来表示空格，这些实体引用可以连续使用来插入多个空格。常用的 HTML 空格实体引用包括： &nbsp;：表示一个不断行的空格，可以连续使用来插入多个空格。

&ensp;：表示一个半角的空格，也可以连续使用。

&emsp;：表示一个全角的空格，连续使用可以插入更多空格。

&thinsp;：表示一个比标准空格更窄的空格。

例如，要在段落中插入多个空格，可以使用以下代码：

html
<p>HTML&nbsp;&nbsp;&nbsp;基础教程</p>

使用 CSS 属性 ​

另一种方法是使用 CSS 的 white-space 属性，将其设置为 pre，这样浏览器会保留 HTML 源代码中的空格和换行。例如：

html
<p style="white-space: pre;">HTML      基础教程</p>

使用<pre>标签 ​

<pre>标签定义了预格式化的文本，它会按照 HTML 代码中的格式显示文本，包括空格和换行。使用<pre>标签时，文本中的多个空格会被保留。例如：

html
<pre>HTML空格 空格 基础教程</pre>

这些方法可以根据需要在 HTML 文本中插入所需数量的空格，以达到预期的布局和格式效果。

注释 ​

HTML 支持注释，浏览器会忽略注释内容：

html
<!-- 这是一个注释 -->
<!--
  多行注释
  这些内容不会显示
-->

最佳实践 ​

  1. 始终声明文档类型
  2. 使用正确的字符编码
  3. 提供有意义的页面标题
  4. 使用语义化标签
  5. 保持代码缩进整洁
  6. 适当添加注释
  7. 验证 HTML 代码的正确性

参考资料 ​