HTML 简介
- HTML：超文本标记语言，用来描述网页的结构。
- 浏览器解析 HTML 标签，渲染成页面内容。
HTML 基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
页面上显示的内容
</body>
</html>
| 标签 | 作用 |
|---|
<!DOCTYPE html> | 声明文档类型，让浏览器按标准模式解析 |
<html> | 根元素 |
<head> | 元数据区（标题、编码、引入 CSS 等） |
<meta charset="UTF-8"> | 设置字符编码，避免乱码 |
<title> | 浏览器标签栏显示的标题 |
<body> | 用户可见的内容区域 |
常用标签
块级元素（独占一行）
| 标签 | 含义 |
|---|
<h1> ~ <h6> | 标题，1 级最大，6 级最小 |
<p> | 段落 |
<div> | 通用容器，无样式，用于布局 |
<ul>、<ol> | 无序列表、有序列表 |
<li> | 列表项 |
<hr> | 水平分割线 |
行内元素（不换行）
| 标签 | 含义 |
|---|
<span> | 通用行内容器，无样式 |
<a> | 超链接 |
<img> | 图片 |
<strong> / <b> | 加粗（strong 语义更强） |
<em> / <i> | 斜体 |
示例
<h1>一级标题</h1>
<p>这是一个段落，里面可以放<a href="https://example.com">链接</a>。</p>
<div class="box">这是一个块容器</div>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<img src="photo.jpg" alt="描述文字">
标签属性
- 属性写在开始标签内，格式：
属性名="属性值"
- 常用通用属性
| 属性 | 作用 |
|---|
id | 唯一标识 |
class | 类名（用于 CSS 或 JS） |
style | 行内样式 |
title | 鼠标悬停提示文字 |
特殊属性举例
<a href="链接地址" target="_blank"> → target="_blank" 表示新标签页打开<img src="图片地址" alt="图片无法显示时的替代文字">
注释
<!-- 这里是注释，浏览器不会显示 -->
总结：HTML 核心就是
- 标签：告诉浏览器这是什么元素
- 属性：给标签附加额外信息
- 嵌套：标签正确包裹，形成树状结构
掌握以上内容，就能写出任意静态页面。复杂的布局靠 CSS 控制，行为靠 JS，HTML 只管 结构。