MoonlitLog月光日志

HTML 基础语法 ​

HTML（HyperText Markup Language，超文本标记语言）是用于描述网页结构的标记语言。

HTML 本身并不是编程语言，它主要负责定义网页中的内容和结构，例如标题、段落、图片、链接、表格等。

1. HTML 基本结构 ​

一个最基本的 HTML 页面如下：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的网页</title>
  </head>

  <body>
    <h1>Hello HTML</h1>
    <p>这是我的第一个网页。</p>
  </body>
</html>

结构说明 ​

html
<!DOCTYPE html>

声明当前文档使用 HTML5。

html
<html>

HTML 文档的根元素，整个网页内容都包含在其中。

html
<head>

用于存放网页的配置信息，例如：

  • 字符编码
  • 页面标题
  • CSS 文件
  • JavaScript 文件
  • SEO 信息
html
<body>

网页中真正显示给用户看的内容通常都写在 <body> 中。

2. HTML 标签 ​

HTML 使用标签描述网页内容。

基本格式：

html
<标签名>内容</标签名>

例如：

html
<p>Hello World</p>

其中：

text
<p>

是开始标签。

text
</p>

是结束标签。

中间的：

text
Hello World

是标签中的内容。

3. 标签嵌套 ​

HTML 标签可以互相嵌套。

例如：

html
<div>
  <p>Hello HTML</p>
</div>

需要注意：

标签应该按照正确的顺序嵌套。

正确：

html
<div>
  <p>内容</p>
</div>

错误：

html
<div>
  <p>内容</div>
</p>

4. HTML 属性 ​

标签可以通过属性提供额外的信息。

基本格式：

html
<标签名 属性名="属性值">内容</标签名>

例如：

html
<a href="https://example.com">访问网站</a>

其中：

html
href="https://example.com"

就是 <a> 标签的属性。

一个标签可以拥有多个属性：

html
<img src="image.jpg" alt="图片" width="300" />

5. 标题标签 ​

HTML 提供六级标题：

html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题等级从：

text
h1 → h6

逐渐降低。

一般来说，一个页面中最重要的标题使用：

html
<h1>

例如：

html
<h1>HTML 学习笔记</h1>

<h2>HTML 基础语法</h2>

<h3>HTML 标签</h3>

6. 段落标签 ​

使用 <p> 定义段落。

html
<p>这是第一段文字。</p>

<p>这是第二段文字。</p>

浏览器通常会自动在段落之间添加一定的间距。

7. 换行 ​

使用 <br> 进行换行：

html
你好<br />
世界

显示效果类似：

text
你好
世界

<br> 属于没有内容的标签，因此不需要成对出现。

8. 水平线 ​

使用 <hr> 创建水平分隔线：

html
<p>第一部分</p>

<hr />

<p>第二部分</p>

通常用于分隔不同内容区域。

9. 文本格式 ​

粗体 ​

html
<strong>重要内容</strong>

例如：

html
<p>这是一个 <strong>重要内容</strong>。</p>

斜体或强调 ​

html
<em>强调内容</em>

删除线 ​

html
<del>删除内容</del>

上标 ​

html
x<sup>2</sup>

显示：

text
x²

下标 ​

html
H<sub>2</sub>O

显示：

text
H₂O

10. 超链接 ​

使用 <a> 创建超链接。

基本格式：

html
<a href="目标地址">链接文字</a>

例如：

html
<a href="https://example.com">访问 Example</a>

新标签页打开 ​

html
<a href="https://example.com" target="_blank">
  访问 Example
</a>

其中：

html
target="_blank"

表示在新的标签页中打开链接。

11. 图片 ​

使用 <img> 标签插入图片：

html
<img src="image.jpg" alt="图片描述" />

常见属性：

text
src

指定图片路径。

text
alt

图片无法显示时的替代文字，同时也有利于无障碍访问。

例如：

html
<img src="./images/avatar.png" alt="头像" />

也可以指定大小：

html
<img
  src="./images/avatar.png"
  alt="头像"
  width="200"
/>

12. 列表 ​

HTML 列表主要分为：

  • 无序列表
  • 有序列表

无序列表 ​

使用：

html
<ul>

配合：

html
<li>

例如：

html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

效果：

text
• HTML
• CSS
• JavaScript

有序列表 ​

使用：

html
<ol>

例如：

html
<ol>
  <li>学习 HTML</li>
  <li>学习 CSS</li>
  <li>学习 JavaScript</li>
</ol>

效果：

text
1. 学习 HTML
2. 学习 CSS
3. 学习 JavaScript

13. div 和 span ​

div ​

<div> 是一个非常常见的块级容器。

例如：

html
<div>
  <h2>个人信息</h2>
  <p>用户名：MoonlitBoy</p>
</div>

div 本身没有特殊含义，主要用于：

  • 页面布局
  • 内容分组
  • 配合 CSS 设置样式
  • 配合 JavaScript 操作页面

span ​

<span> 通常用于包裹一小段行内内容。

例如：

html
<p>
  Hello
  <span>HTML</span>
</p>

它经常配合 CSS 使用：

html
<p>
  Hello
  <span class="highlight">HTML</span>
</p>

14. class 和 id ​

HTML 中经常通过 class 和 id 标记元素。

class ​

html
<p class="text">Hello</p>

多个元素可以拥有相同的 class：

html
<p class="text">HTML</p>
<p class="text">CSS</p>
<p class="text">JavaScript</p>

通常用于批量设置 CSS 样式。

id ​

html
<h1 id="title">HTML 基础语法</h1>

在同一个页面中，一个 id 通常应该只对应一个元素。

可以简单理解为：

text
class → 可以重复

id → 通常唯一

15. 表格 ​

HTML 使用 <table> 创建表格。

例如：

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>

  <tr>
    <td>Tom</td>
    <td>18</td>
  </tr>

  <tr>
    <td>Jack</td>
    <td>20</td>
  </tr>
</table>

常见标签：

标签作用
<table>定义表格
<tr>定义一行
<th>定义表头单元格
<td>定义普通单元格

可以理解为：

text
table
 ├─ tr
 │   ├─ th
 │   └─ th
 │
 └─ tr
     ├─ td
     └─ td

16. 表单 ​

HTML 表单通常用于收集用户输入。

基本结构：

html
<form>
  <input type="text" />
</form>

文本输入框 ​

html
<input type="text" />

密码输入框 ​

html
<input type="password" />

单选框 ​

html
<input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女

相同 name 的单选按钮属于同一组。

复选框 ​

html
<input type="checkbox" /> HTML
<input type="checkbox" /> CSS

按钮 ​

html
<button>提交</button>

完整示例 ​

html
<form>
  <label>
    用户名：
    <input type="text" />
  </label>

  <br />

  <label>
    密码：
    <input type="password" />
  </label>

  <br />

  <button type="submit">登录</button>
</form>

17. 语义化标签 ​

HTML5 提供了许多具有明确含义的标签。

例如：

html
<header>网页顶部</header>

<nav>导航栏</nav>

<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容</p>
  </article>
</main>

<footer>网页底部</footer>

常见语义化标签：

标签作用
<header>页面或区域顶部
<nav>导航区域
<main>页面主要内容
<article>独立文章
<section>内容区域
<aside>侧边内容
<footer>页面或区域底部

相比全部使用 <div>，语义化标签更容易理解页面结构。

18. HTML 注释 ​

HTML 注释格式：

html
<!-- 这是一个注释 -->

例如：

html
<!-- 网站标题 -->
<h1>MoonlitLog</h1>

注释不会直接显示在网页中。

19. HTML 特殊字符 ​

某些字符在 HTML 中具有特殊含义，因此需要使用字符实体。

例如：

html
&lt;

表示：

text
<
html
&gt;

表示：

text
>
html
&amp;

表示：

text
&
html
&nbsp;

表示一个不换行空格。

例如：

html
<p>5 &lt; 10</p>

显示：

text
5 < 10

20. 块级元素与行内元素 ​

HTML 元素在页面中的显示方式通常可以简单分为两类。

块级元素 ​

通常会独占一行。

例如：

html
<div></div>
<p></p>
<h1></h1>
<ul></ul>

行内元素 ​

通常不会独占一行。

例如：

html
<span></span>
<a></a>
<strong></strong>
<em></em>

例如：

html
<p>
  学习
  <strong>HTML</strong>
  是前端开发的基础。
</p>

21. HTML、CSS、JavaScript 的关系 ​

前端开发中最基础的三个部分是：

text
HTML
CSS
JavaScript

可以简单理解为：

text
HTML       → 网页结构
CSS        → 网页样式
JavaScript → 网页行为

例如一个按钮：

HTML：

html
<button>点击我</button>

负责创建按钮。

CSS：

css
button {
  background: black;
  color: white;
}

负责按钮的外观。

JavaScript：

javascript
document.querySelector("button").addEventListener("click", () => {
  alert("Hello");
});

负责点击按钮之后发生什么事情。

22. 一个完整的小例子 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>MoonlitLog</title>
  </head>

  <body>
    <header>
      <h1>MoonlitLog</h1>
      <p>记录我的学习过程</p>
    </header>

    <main>
      <section>
        <h2>正在学习</h2>

        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>

      <section>
        <h2>我的网站</h2>

        <a href="https://example.com">
          点击访问
        </a>
      </section>
    </main>

    <footer>
      <p>MoonlitLog</p>
    </footer>
  </body>
</html>

这个页面已经包含了 HTML 中最基础的：

text
文档结构
标题
段落
列表
链接
语义化标签

23. 基础语法速查 ​

功能HTML
标题<h1>标题</h1>
段落<p>文字</p>
换行<br />
水平线<hr />
链接<a href="">链接</a>
图片<img src="" alt="" />
粗体<strong>文字</strong>
强调<em>文字</em>
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
容器<div></div>
行内容器<span></span>
表格<table></table>
表单<form></form>
输入框<input />
按钮<button></button>
注释<!-- 注释 -->

总结 ​

HTML 的核心其实并不复杂。

最重要的是理解三个概念：

text
标签
属性
嵌套关系

例如：

html
<a href="https://example.com">
  Example
</a>

其中：

text
a                    → 标签
href                 → 属性
https://example.com  → 属性值
Example              → 标签内容

学习 HTML 初期没有必要死记所有标签。

掌握最常用的：

text
h1~h6
p
a
img
div
span
ul / ol / li
table / tr / th / td
form / input / button

之后在实际编写网页的过程中逐渐熟悉即可。