【1分钟速通】 HTML快速入门
HTML（HyperText Markup Language，超文本标记语言） 是构建网页的基础语言。它通过 标签（Tag） 来描述网页的结构和内容，常与 CSS（负责样式 –
<style></style>）和 JavaScript（负责交互 –<script></script>）配合使用
一个标准 HTML 页面通常包含以下骨架结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>我的第一个网页</title>
</head>
<body><!-- 注释：不会被浏览器执行~ 各语言通用注释快捷键： ctrl+/ 注：通过查看网页源代码能查看到注释，所以发布前要仔细检查 （测试点！！！）--><h1>欢迎来到我的网页！</h1><p>这是一个段落。</p>
</body>
</html>
<!DOCTYPE html>：声明 HTML5 文档类型<html>：根元素<head>：包含页面的元信息（标题、编码等）<body>：网页的主要可见内容
常见的 HTML 编辑工具包括：VS Code（最常用，插件丰富）、Sublime Text、WebStorm，以及在线工具 CodePen、JSFiddle 等。推荐使用 VS Code + Live Server 插件，可实时预览网页效果。
文章目录
- 常用标签
- ⭐ 标题标签 `<h1>`~`<h6>`
- ⭐ 段落 `<p>`
- ⭐ 链接 `<a>`
- ⭐ 图片 `<img>`
- ⭐ 空格与换行
- ⭐ 列表 `<ul> / <ol> / <li>`
- ⭐ 表格 `<table>`
- ⭐ 表单 `<form>`
- ⭐ 区块 `<div> / <span>`
- 总结
常用标签
⭐ 标题标签 <h1>~<h6>
- 说明：表示不同层级的标题，h1 最大，h6 最小
- 语法：
<h1>标题</h1> - 属性：无常用属性
- 示例：
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
⭐ 段落 <p>
- 说明：用于表示段落，块级元素，自动换行
- 语法：
<p>内容</p> - 属性：无常用属性
- 示例：
<p>这是一个段落。</p>
⭐ 链接 <a>
- 说明：用于创建超链接，点击后跳转到指定页面
- 语法：
<a href="url" target="_blank">文字</a> - 属性：
- href：跳转网址或文件路径
- target：打开方式，常用 _blank（新窗口）
- 示例：
<a href="https://example.com" target="_blank">访问示例网站</a>
⭐ 图片 <img>
- 说明：用于在网页中插入图片
- 语法：
<img src="图片地址" alt="替代文本"/> - 属性：
- src：图片路径
- title: 标题 (测试点！！！ 必须有标题)
- alt：当图片无法显示时的替代文字
- width / height：设置图片大小
- 示例：
<img src="https://via.placeholder.com/150" title="我的标题"/>
⭐ 空格与换行
- 说明：用于在网页中插入空格，换行
- 语法：空格
 ； 换行<br /> - 属性：无常用属性
- 示例：
<p>这是<br />一   句话。</p>
⭐ 列表 <ul> / <ol> / <li>
-
说明：表示无序列表、有序列表及列表项
-
语法：
- 无序列表：
<ul><li>内容</li></ul> - 有序列表：
<ol><li>内容</li></ol>
- 无序列表：
-
属性：
<ol>可用 type 指定编号样式（1/A/a/I/i）
-
示例：
<ul><li>苹果</li><li>香蕉</li> </ul><ol type="A"><li>第一步</li><li>第二步</li> </ol>
⭐ 表格 <table>
- 说明：用于展示结构化数据
- 语法：
<table><tr><td></td></tr></table> - 属性：
- border：边框宽度
- 示例：
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>20</td></tr> </table>
⭐ 表单 <form>
- 说明：用于收集用户输入
- 语法：
<form><input/><button></button></form> - 属性：
- action：提交地址
- method：提交方式（GET/POST）
- 示例：
<form action="xxx.html" method="post"><input type="text" placeholder="请输入用户名" /><input type="password" placeholder="请输入密码" /><input type="radio" name="sex" /> 男<input type="radio" name="sex" /> 女<!--type = "text" : 文本框type = "password" : 密码框type = "radio" : 单选按钮 -- 设置相同组名 name 属性值才能为一组type = "checkbox" : 复选按钮 --><button type="submit" value="提交">提交</button><!--(测试点！！！ value 必须赋值) -> 不赋值 value 的话 不同浏览器可能显示的效果不同type = "button" : 普通按钮 -- 没有效果，需要配合 JS 实现type = "submit" : 提价按钮type = "reset" : 重置按钮 --> </form>
⭐ 区块 <div> / <span>
- 说明：
<div>：块级容器，用于布局 – 【大盒子 - 独占一行】<span>：行内容器，用于局部修饰 – 【小盒子 - 一行可以放多个】
- 语法：
<div>内容</div>,<span>内容</span> - 属性：无常用属性
- 示例：
<div><p>这是一个块级容器</p> </div><p>这是 <span style="color:red;">红色文字</span>。</p>
总结
- HTML 是网页的骨架
- 骨架标签（html/head/body）构成基本结构
- 常见标签包括标题、段落、链接、图片、列表、表格、表单和布局容器
- 配合 CSS 和 JS 才能实现完整的网页