一、HTML5 基本结构
1. 最简 9 行代码结构
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>页面标题</title>
</head>
<body>页面内容
</body>
</html>
2. 核心 5 对标记关系
-
html：根标签，包含整个页面
-
head：页面头部，存放元信息、样式、脚本引用
title：页面标题meta：字符编码、视口等元数据
-
body：页面主体，存放可见内容
-
二、文件规范
1. 目录结构
plaintext
项目根目录/
├─ index.html # 主页面
├─ css/ # 样式文件夹
│ └─ style.css # 样式文件
├─ js/ # 脚本文件夹
│ └─ script.js # 脚本文件
└─ images/ # 图片资源文件夹
2. 命名规范
-
文件名：
小写英文、数字、短横线
，避免中文和特殊字符
- 示例：
index.html、common-style.css、main.js
- 示例：
-
语义化命名：见名知意，如
login.html、product-detail.css
三、CSS 样式引入方式
1. 外部样式（推荐）
-
代码：
html
预览
<link rel="stylesheet" type="text/css" href="css/style.css"> -
优点：样式与结构分离，便于复用和维护
2. 内部样式
-
代码：
html
预览
<style type="text/css">/* 样式代码 */ </style> -
适用：单页面样式、临时调试
3. 行内样式
-
代码：
html
预览
<h1 style="color: green;">我是标题</h1> -
适用：仅针对单个元素的紧急样式修改
4. 样式冲突优先级
- 权重：行内样式 > 内部样式 > 外部样式
- 原则：就近原则，离元素越近的样式优先级越高