跳到主要内容

02 HTML语法

我会这样介绍 HTML：

什么是 HTML？​

HTML（HyperText Markup Language，超文本标记语言）是构建网页的 骨架。它并不是一种编程语言，而是一种 标记语言，通过各种“标签”来告诉浏览器如何展示内容。

htmlfist-page.html
<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>

  <body>
    <h1>你好</h1>
    <p>欢迎访问我的网页!</p>
  </body>
</html>

HTML 文档使用 .html 后缀保存。它本质上是一个文本文件，可以使用任何文本编辑器打开。

使用浏览器打开 .html文件时，浏览器会解析 HTML 代码并渲染出对应的画面。

我的第一个网页
我的第一个网页

在浏览器中按 F12 就能查看页面源码

HTML 的核心要素​

  • 标签（Tags）：HTML 使用尖括号包围的关键词（如 <h1>、<p>）来标识网页元素。
  • 结构化：它定义了页面的逻辑层级，例如哪里是标题，哪里是段落。
  • 超链接：HTML 的“超文本”属性允许页面之间通过链接互相跳转。

在文档中给文本打上特定的标签，它就被标记为特定的含义。

元素<h1>⏟开始标签秋天的雨⏟内容</h1>⏟结束标签⏞\begin{matrix} \text{元素}\\ \overbrace{ \begin{matrix} \underbrace{\color{green} <{\color{brown}h1}> } \\ \text{开始标签} \end{matrix} \begin{matrix} \underbrace{\color{gray} \text{秋天的雨} } \\ \text{内容} \end{matrix} \begin{matrix} \underbrace{\color{green} </{\color{brown}h1}> } \\ \text{结束标签} \end{matrix} } \end{matrix}

下面左边是一个结构完整的 HTML 文件，右边是浏览器后的样子。

Loading Editor...

HTML 标签​

大概有 50 个 HTML 需要了解。后面的章节会演示如何使用。

这些是构成任何 HTML 页面基础的骨架标签。

标签描述
<!DOCTYPE html>文档类型声明。必须是 HTML 文档的第一行，告诉浏览器这是一个 HTML5 文档。
<html>根元素。包裹整个 HTML 页面。
<head>头部容器。包含页面的元信息，如标题、字符集、链接的 CSS 文件等，这些内容不会直接显示在页面上。
<title>页面标题。定义浏览器标签页上显示的标题，也是搜索引擎结果中的重要信息。
<meta>元信息。定义页面的字符集、视口设置、描述、关键词等。例如 <meta charset="UTF-8">。
<link>外部资源链接。最常用于链接外部 CSS 样式表。例如 <link rel="stylesheet" href="style.css">。
<script>脚本。用于嵌入或链接 JavaScript 代码。
<body>主体容器。包含网页所有可见内容，如文本、图片、链接、表格等。

HTML 属性​

每一种元素都支持多个属性，属性以 name="value" 形式写在开始标签中。属性极大增强了标签的表达能力。

<h1    class="article"⏟属性    >秋天的雨</h1>% < 绿色 {\color{green}\text{<}} % h1 棕色 {\color{brown}\text{h1}} \;\; % matrix 描述 { % 标题 \begin{matrix} \\ \underbrace{ % class 红色 {\color{red}\text{class}} % = 默认颜色 {\text{=}} % "article" 蓝色 {\color{blue}\text{"article"}} } \\ \text{属性} \end{matrix} } % 空格 \;\; % > 绿色 {\color{green}\text{>}} % % 秋天的雨 灰色 {\color{gray}\text{秋天的雨}} % % </ 绿色 {\color{green}\text{</}} % h1 {\color{brown}\text{h1}} % > {\color{green}\text{>}}
Loading Editor...

HTML 文档流​

浏览器总是按照从上到下，从左到右的顺序把 HTML 代码渲染为页面。

Loading Editor...

CSS 语法可总结为：

h1⏟选择器{    color:⏟属性    green⏟值;  }\underbrace{ {\color{brown}\text{h1}} }_{\text{选择器}} {\color{blue}\{} \;\; \underbrace{ {\color{red}\text{color:}} }_{\text{属性}} \;\; \underbrace{ {\color{#0652A5} \text{green}} }_{\text{值}} {\color{black}\text{;}} \; {\color{blue}\}}

CSS 对样式的标记能力远强于 HTML，CSS 文件以 .css 为后缀。现在 HTML 只需要把网页的结构和内容标记好即可。

Loading Editor...

HTML 元素支持几十个属性。没必要学习每一种属性，就像大多数人也不会练习用手走路。只需要稍加理解，在需要的时候查询。

⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠ You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Drawing​

compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MQHNsYfpwBGAOlT0AtmIBeNCtlQbs6RmPry6uA4wC0KDDgLFLUTJ2lH8MTDHQ0YNMWHRJMRZFAEYADkUAZjIkT1UYRjAaBABtAF1ydCgoAGUAsD5QSXw8XOwNPkZOTExyHRgiACF0VABrEq5GXABhekx6fAQQAGIAMwnJkABfaaA==

%%