HTML总结
一、HTML 是什么
HTML（HyperText Markup Language）：超文本标记语言
作用：定义网页结构（骨架）
特点：
- 不是编程语言
- 使用“标签（tag）”描述内容
二、HTML 基本结构
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网页标题</title></head><body>页面内容</body></html>关键点：
<!DOCTYPE html>：声明 HTML5<html>：根标签<head>：元信息（不显示）<body>：页面可见内容
三、常用标签
1. 标题和文本
<h1>标题</h1>~<h6><p>段落</p><br>换行<hr>分割线2. 文本格式
<b>加粗</b><strong>强调（更语义化）</strong><i>斜体</i><em>强调斜体</em><u>下划线</u><mark>高亮</mark>3. 列表
3.1 无序列表
<ul><li>项目</li></ul>3.2 有序列表
<ol><li>项目</li></ol>4. 超链接
<ahref="https://example.com">点击</a>常见属性：
href：跳转地址target="_blank"：新窗口打开
5. 图片
<imgsrc="image.jpg"alt="描述">属性：
src：路径alt：加载失败显示
6. 表格
<table><tr><th>表头</th><th>表头</th></tr><tr><td>数据</td><td>数据</td></tr></table>7. 表单
<formaction="提交地址"method="post"><inputtype="text"><inputtype="password"><inputtype="submit"></form>常见 input 类型：
- text
- password
- radio
- checkbox
- file
- submit
- button
四、HTML 属性
写在标签里面：
<tag属性="值">常见属性：
id：唯一标识class：样式类style：内联样式title：提示信息
五、块级元素 vs 行内元素
块级元素（block）
- 独占一行
- 可以设置宽高
例：
div, p, h1, ul, table行内元素（inline）
- 不换行
例：
span, a, img, strong六、语义化标签（HTML5 ）
比<div>更清晰：
<header><nav><main><section><article><footer>好处：
- 代码更清晰
- 更利于维护
七、多媒体标签
<audiocontrolssrc="a.mp3"></audio><videocontrolssrc="v.mp4"></video>八、HTML5 新特性
1. 新标签
canvasvideoaudiosection / article
2. 表单增强
<inputtype="email"><inputtype="date"><inputtype="range">九、常见易错点
1. button 默认提交
<button>提交</button>👉 在 form 里默认是submit
2. img 是单标签
<img>3. 路径问题
- 相对路径：
./ ../ - 绝对路径：
https://
4. 标签必须正确嵌套
❌
<p><div></div></p>