HTML

约 856 字大约 3 分钟

2025-10-03

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。

基本结构

<!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>欢迎来到我的网站</h1>
        <p>这是一个段落。</p>
    </body>
</html>

DOCTYPE声明

DOCTYPE是 document type 的缩写。 <!DOCTYPE html>是 HTML5 的声明，位于文档的最前面，处于标签之前。

这是网页必备的组成部分，避免了浏览器的怪异模式。

html

定义 HTML 文档，所有其他的HTML元素都要包裹在 html 标签中

<!DOCTYPE html>
<html lang="zh-CN">
    ...
</html>

lang用于声明网页的主要语言，帮助浏览器、搜索引擎等正确处理页面内容。

en 代表英语
zh-CN 代表中文

head

head标签用于定义文档的头部，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会作为内容展示。

<!DOCTYPE html>
<html>
    <head>...</head>
</html>

head标签中包含的标签有：

title 标签
<title> 是 <head> 标签中唯一必要的元素，它定义文档的标题，显示在浏览器窗口的标题栏或状态栏上。
```
<!DOCTYPE html>
<html>
    <head>
        <title>这是标题</title>
    </head>
</html>
```

meta 标签

meta标签用来描述一个HTML网页文档的属性、关键词等，例如：charset="utf-8"，一些常用的meta设置如下：

<!DOCTYPE html>
<html>
  <head>
    <!-- 字符编码声明 -->
    <meta charset="UTF-8">

    <!-- 视口设置，响应式设计必备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 网页兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 网页描述 -->
    <meta name="description" content="这是一个关于HTML head标签详解的示例页面">
      
    <!-- 网页关键词 -->
    <meta name="keywords" content="HTML, head标签, 元数据, SEO, 网页开发">
    
    <!-- 作者信息 -->
    <meta name="author" content="网页开发者">
    
    <!-- 版权信息 -->
    <meta name="copyright" content="版权所有">
  </head>
</html>

body

body 元素定义文档的主体。

body元素包含文档的所有内容，比如文本、超链接、图像、表格和列表等

它会直接在页面中显示出来，也就是用户可以直观看到的内容。

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>

    <body>
        ...
    <body>
</html>

块级元素和内联元素（行内元素）

块级元素

块级元素在页面中以块的形式展现，通常会独占一行，宽度默认填满父容器，可以设置宽度、高度、内外边距等属性。

主要特性

默认宽度为100%（占满父容器）
总是从新行开始
可以包含其他块级元素和行内元素
可以设置宽度、高度、上下内外边距

常见块级元素

<div>，<h1>~<h6>，<p>，<ul>，<ol>，<li>，<table>，<form>，<header>，<footer>，<section>，<article>，<aside>，<nav>，<hr>，<blockquote>

内联元素（行内元素）

内联元素不会独占一行，只占据内容所需的宽度，多个行内元素可以在同一行内显示。

主要特性

宽度由内容决定
不会强制换行
只能包含文本和其他行内元素
设置宽度、高度无效
上下外边距无效

常见内联元素

<span>，<a>，<strong>，<em>，<img>，<input>，<button>，<label>，<code>，<sup>, <sub>，<br>

CSS可以通过display来将块级元素改为内联元素