【1分钟速通】 HTML快速入门

HTML（HyperText Markup Language，超文本标记语言） 是构建网页的基础语言。它通过 标签（Tag） 来描述网页的结构和内容，常与 CSS （负责样式 -- <style></style>）和 JavaScript （负责交互 -- <script></script>）配合使用

一个标准 HTML 页面通常包含以下骨架结构：

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>`](#⭐ 标题标签 <h1>~<h6>)
  - [⭐ 段落 `<p>`](#⭐ 段落 <p>)
  - [⭐ 链接 `<a>`](#⭐ 链接 <a>)
  - [⭐ 图片 `<img>`](#⭐ 图片 <img>)
  - [⭐ 空格与换行](#⭐ 空格与换行)
  - [⭐ 列表 `<ul> / <ol> / <li>`](#⭐ 列表 <ul> / <ol> / <li>)
  - [⭐ 表格 `<table>`](#⭐ 表格 <table>)
  - [⭐ 表单 `<form>`](#⭐ 表单 <form>)
  - [⭐ 区块 `<div> / <span>`](#⭐ 区块 <div> / <span>)
总结

常用标签

⭐ 标题标签 `<h1>`~`<h6>`

说明：表示不同层级的标题，h1 最大，h6 最小
语法：<h1>标题</h1>
属性：无常用属性

示例：

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

⭐ 段落 `<p>`

说明：用于表示段落，块级元素，自动换行
语法：<p>内容</p>
属性：无常用属性
示例：
html 复制代码
```
<p>这是一个段落。</p>
```

⭐ 链接 `<a>`

说明：用于创建超链接，点击后跳转到指定页面
语法：<a href="url" target="_blank">文字</a>
属性：
- href：跳转网址或文件路径
- target：打开方式，常用 _blank（新窗口）

示例：

html 复制代码

<a href="https://example.com" target="_blank">访问示例网站</a>

⭐ 图片 `<img>`

说明：用于在网页中插入图片
语法：<img src="图片地址" alt="替代文本"/>
属性：
- src：图片路径
- title: 标题 (测试点！！！必须有标题)
- alt：当图片无法显示时的替代文字
- width / height：设置图片大小

示例：

html 复制代码

<img src="https://via.placeholder.com/150" title="我的标题"/>

⭐ 空格与换行

说明：用于在网页中插入空格，换行
语法：空格 &nbsp；换行 <br />
属性：无常用属性
示例：
html 复制代码
```
<p>这是<br />一 &nbsp 句话。</p>
```

⭐ 列表 `<ul> / <ol> / <li>`

说明：表示无序列表、有序列表及列表项
语法：
- 无序列表：<ul><li>内容</li></ul>
- 有序列表：<ol><li>内容</li></ol>
属性：
- <ol> 可用 type 指定编号样式（1/A/a/I/i）

示例：

html 复制代码

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<ol type="A">
  <li>第一步</li>
  <li>第二步</li>
</ol>

⭐ 表格 `<table>`

说明：用于展示结构化数据
语法：<table><tr><td></td></tr></table>
属性：
- border：边框宽度

示例：

html 复制代码

<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）

示例：

html 复制代码

<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>
属性：无常用属性

示例：

html 复制代码

<div>
  <p>这是一个块级容器</p>
</div>

<p>这是 <span style="color:red;">红色文字</span>。</p>

总结

HTML 是网页的骨架
骨架标签（html/head/body）构成基本结构
常见标签包括标题、段落、链接、图片、列表、表格、表单和布局容器
配合 CSS 和 JS 才能实现完整的网页

【1分钟速通】 HTML快速入门

文章目录

常用标签

⭐ 标题标签 <h1>~<h6>

⭐ 段落 <p>

⭐ 链接 <a>

⭐ 图片 <img>

⭐ 空格与换行

⭐ 列表 <ul> / <ol> / <li>

⭐ 表格 <table>

⭐ 表单 <form>

⭐ 区块 <div> / <span>

总结

⭐ 标题标签 `<h1>`~`<h6>`

⭐ 段落 `<p>`

⭐ 链接 `<a>`

⭐ 图片 `<img>`

⭐ 列表 `<ul> / <ol> / <li>`

⭐ 表格 `<table>`

⭐ 表单 `<form>`

⭐ 区块 `<div> / <span>`