HTML总结 - 技术栈

一、HTML 是什么

HTML（HyperText Markup Language）：超文本标记语言
作用：定义网页结构（骨架）
特点：
- 不是编程语言
- 使用"标签（tag）"描述内容

二、HTML 基本结构

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    页面内容
</body>
</html>

关键点：

<!DOCTYPE html>：声明 HTML5
<html>：根标签
<head>：元信息（不显示）
<body>：页面可见内容

三、常用标签

1. 标题和文本

html 复制代码

<h1>标题</h1> ~ <h6>
<p>段落</p>
<br> 换行
<hr> 分割线

2. 文本格式

html 复制代码

<b>加粗</b>
<strong>强调（更语义化）</strong>
<i>斜体</i>
<em>强调斜体</em>
<u>下划线</u>
<mark>高亮</mark>

3. 列表

3.1 无序列表

html 复制代码

<ul>
  <li>项目</li>
</ul>

3.2 有序列表

html 复制代码

<ol>
  <li>项目</li>
</ol>

4. 超链接

html 复制代码

<a href="https://example.com">点击</a>

常见属性：

href：跳转地址
target="_blank"：新窗口打开

5. 图片

html 复制代码

<img src="image.jpg" alt="描述">

属性：

src：路径
alt：加载失败显示

6. 表格

html 复制代码

<table>
  <tr>
    <th>表头</th>
    <th>表头</th>
  </tr>
  <tr>
    <td>数据</td>
    <td>数据</td>
  </tr>
</table>

7. 表单

html 复制代码

<form action="提交地址" method="post">
  <input type="text">
  <input type="password">
  <input type="submit">
</form>

常见 input 类型：

text
password
radio
checkbox
file
submit
button

四、HTML 属性

写在标签里面：

html 复制代码

<tag 属性="值">

常见属性：

id：唯一标识
class：样式类
style：内联样式
title：提示信息

五、块级元素 vs 行内元素

块级元素（block）

独占一行
可以设置宽高

例：

复制代码

div, p, h1, ul, table

行内元素（inline）

不换行

例：

复制代码

span, a, img, strong

六、语义化标签（HTML5 ）

比 <div> 更清晰：

html 复制代码

<header>
<nav>
<main>
<section>
<article>
<footer>

好处：

代码更清晰
更利于维护

七、多媒体标签

html 复制代码

<audio controls src="a.mp3"></audio>
<video controls src="v.mp4"></video>

八、HTML5 新特性

1. 新标签

canvas
video
audio
section / article

2. 表单增强

html 复制代码

<input type="email">
<input type="date">
<input type="range">

九、常见易错点

1. button 默认提交

html 复制代码

<button>提交</button>

👉 在 form 里默认是 submit

2. img 是单标签

html 复制代码

<img>

3. 路径问题

相对路径：./ ../
绝对路径：https://

4. 标签必须正确嵌套

❌

html 复制代码

<p><div></div></p>