html 基础

标准 HTML5 页面骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 1. 字符编码：防止中文乱码 -->
  <meta charset="UTF-8">
  
  <!-- 2. 视口设置：移动端响应式适配必写 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 3. 网页标题：显示在浏览器标签页上的名字 -->
  <title>网页标题</title>
  
  <!-- 4. 引入外部 CSS 样式表 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 用户能在屏幕上看到的所有内容都写在这里 -->
  <h1>这是一个主标题</h1>
  <p>这是一个段落。</p>

  <!-- 5. 引入外部 JS 脚本（建议放在 body 底部） -->
  <script src="main.js"></script>
</body>
</html>

<head>（头部/目录/元数据）：是给浏览器、搜索引擎和系统看的配置信息。这里面的内容绝大部分不会直接渲染在网页画面里。
<body>（主体/正文内容）：是给用户看的实际内容。你在浏览器窗口里能用肉眼看到的所有文字、图片、按钮、视频，必须全部放在 <body> 里。
<script> 标签比较特殊，它既可以放 <head>，也可以放 <body>，但放的位置不同，执行时机也完全不同：
- 放 <head> 中：浏览器解析到 <head> 里的 <script> 时会暂停渲染页面，先去下载并执行完这个 JS 文件。如果非要放 <head>，需要加上 defer 或 async 属性，让它异步下载，不阻塞页面渲染：<script src="script.js" defer></script>
- 放 <body> 底部（最常用/传统写法）：能保证浏览器把页面上所有的 HTML 元素（DOM）都渲染完了

<title></title> 设置页面标题
<meta charset> 设置编码格式，如 <meta charset="UTF-8">
<meta name="viewport"> 移动端视口缩放设置
<link> 引入外部 CSS 样式表，如 <link rel="stylesheet" href="style.css">
<script></script> 引入外部或内联 JS 脚本，如 <script src="main.js"></script>

body 内部

结构与容器（打骨架 / 划区域）

<div></div> 万能块级容器（双标签，无语义，最通用的“盒子”）
<span></span> 万能行内容器（双标签，无语义，用来单独包裹/修饰一小段文字）
<header></header> 语义化头部区域（双标签，通常放 Logo、导航）
<nav></nav> 语义化导航栏（双标签）
<main></main> 语义化网页主体（双标签，一个页面建议只有一个）
<footer></footer> 语义化页脚区域（双标签，通常放版权、备案信息）

文本与排版（放文字）

<h1> ~ <h6> 1 到 6 级标题（双标签，h1 字体最大，一个页面通常只放一个）
<p> 段落（双标签，文字段落专用） <strong> 文字加粗（双标签，带强调语义） <br> 强制换行（单标签） <hr> 水平分割线（单标签）

列表与超链接（最常见的内容组合）

<ul> + <li> 无序列表（双标签，配合使用，新闻列表、菜单、卡片组主力）
<ol> + <li> 有序列表（双标签，自带 1, 2, 3 序号）
<a> 超链接（双标签，核心属性 href=“链接地址”，target=“_blank” 可新标签页打开）

表单与交互（收集用户输入 / 按钮）

<form> 表单容器（双标签，包裹需要提交给后端的所有输入框）
<input> 通用输入框（单标签，核心属性 type=“text/password/checkbox/radio”）
<button> 按钮（双标签，点击触发交互或提交）
<textarea> 多行文本输入框（双标签，如留言板、评论框）

媒体展示（图片与音视频）

<img> 图片（单标签，核心属性 src=“图片路径”，alt=“加载失败提示词”）
<video> 视频播放器（双标签，核心属性 src=“视频路径”，controls 显示控制条）
<audio> 音频播放器（双标签，核心属性 src=“音频路径”，controls 显示控制条）

标签设置类名和ID

class（类名）：同一个页面里多个标签可以有相同的 class，一个标签也可以拥有多个 class。
id（唯一标识）：全页面必须唯一。同一个 id 在一个 HTML 页面里只能出现一次。

<!-- 1. 单个 class -->
<button class="btn">普通按钮</button>

<!-- 2. 多个 class（用空格隔开，非常高频！） -->
<!-- 表示它既是一个按钮(.btn)，又是一个红色的主要按钮(.btn-danger) -->
<button class="btn btn-danger">危险操作</button>

<!-- 3. 单个 id -->
<div id="header">网页头部</div>

<!-- 4. class 和 id 混用 -->
<input type="text" id="userEmail" class="form-input active" placeholder="请输入邮箱">

注释

使用结尾。

<!-- 这是单行 HTML 注释 -->

<!-- 
  这是多行 HTML 注释
  中间可以跨越任意多行
  常用于暂时注释掉一整块 HTML 结构
-->

html 基础

https://fu01.github.io/posts/afe554b/

作者

Fu01

发布于

2026年9月23日

许可协议

css 基础上一篇

网络抓包-TCP 下一篇

html 基础

标准 HTML5 页面骨架

标签

head 内部

body 内部

标签设置类名和ID

注释