HTML 大揭秘

村雨遥原创大约 9 分钟Web 前端教程WebHTML前端

HTML 大揭秘

共勉

不要哀求，学会争取。若是如此，终有所获。

原文

什么是 HTML

HTML（Hyper Text Markup Language），中文译为超文本标记语言。其中，我们需要注意两个关键词。一个是 超文本，一个是标记。所谓超文本，就是将不同空间的文字信息通过超链接的方式组织在一起的网状文本，往简单了将就是我们说的链接。而标记的另一个名字也叫标签，就是网页源码中带尖括号（<>）的文本。

常用语法

1. 标签

<h1>
    程序猿村雨遥
</h1>

以上就是一个标签示例，其中 <h1> 叫做 开始标签，而 </h1> 叫做 结束标签。

通过观察，可以发现标签的主要特点，分别是：

标签成对出现，标签中间包裹内容。
标签由尖括号（<>）中加英文单词共同组成，而这个英文单词，就叫做标签名。
相比于开始标签，结束标签多了 /

此外，标签还有不同的分类，一类是单标签，而另一类则是双标签。

单标签指的是那些只有开始标签，没有结束标签的标签，而双标签则是那些成对出现的标签。

2. HTML 基本骨架

<html>
    <head>
        网页头部
    </head>
    <body>
        网页主题内容
    </body>
</html>

以上就是 HTML 的基本骨架，网页所有内容都包含在 html 标签中。网页中，主要由头部 head 和主体 body 共同组成。其中头部用于存放给浏览器使用的信息，比如 CSS 样式、JS 脚本。而网页主体则存放展示给用户的信息，如图片、文字、视频等。

3. 标签之间的关系

各标签之间，最主要的有两种关系，一种是 嵌套关系，一种是 并列关系，而它们存在的意义就是让我们明确标签的书写位置，让代码格式更加整齐，提高代码可读性。

以基本骨架中的代码来说，html 和 head 是嵌套关系，而 head 和 body 之间的关系则是并列关系。

嵌套关系

<html>
    <head></head>
</html>

并列关系

<head></head>
<body></body>

4. 注释

注释就是对代码的解释说明，存在的意义是让开发者能更加轻松地了解代码。一般是开发者在编码时为某些语句、程序段、函数等添加的提示，从而提高代码的可读性，方便其他开发者快速掌握，也方便后续代码修改。

<!-- 注释内容 -->

5. 标题

一般用在文章标题、网页区域名称、产品名称等，共分为 6 级标题，对应的标签分别是：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在日常使用时需要注意，一个网页中 h1 一般只能使用一次，而 h2~h6 则没有使用次数的限制。

6. 段落

一般用于文章段落、产品描述信息等。该标签会自动在其前后创建一些空白，浏览器将自动添加这些空间。

<p></p>

7. 换行 & 水平线

换行

<br>

水平线

<hr>

不同于其他双标签，这两个标签都属于单标签，用于实现文本换行和在文本中间添加水平线。

8. 文本格式化

可以给文本添加特殊格式，比如加粗、斜体、下划线、删除线等效果。

加粗

<b>村雨遥</b>
<strong>村雨遥</strong>

斜体

<i>村雨遥</i>
<em>村雨遥</em>

下划线

<u>村雨遥</u>
<ins>村雨遥</ins>

删除线

<s>村雨遥</s>
<del>村雨遥</del>

9. 图片

为了在网页中插入图片，可以使用图像标签，其使用语法如下：

<img src="图片地址">

其中，src 属性用于指定图片位置和名称，是 img 标签不可缺少的属性。

除开 src 属性之外， img 最常用的标签还有下表中的几个。

属性	作用	说明
`alt`	替换文本	图片无法显示时展示的文字
`title`	提示文本	鼠标悬停时显示的文字
`width`	设置图片宽度	值一般是数字
`height`	设置图片高度	值一般是数字

注意，标签中存在多个属性时，属性之间用空格隔开，且没有先后顺序之分。

10. 超链接

通过使用超链接，能够实现鼠标点击后跳转到其他页面的效果。

<a href="跳转页面地址"></a>

其中，href 是必需属性，用于指定跳转的页面地址，当 href 属性的值为 #，则表示该链接为空链接，点击后不会进行跳转。除此之外，a 标签还有 target 属性，用于指定是否在新窗口中打开跳转页面。当属性值为 _blank 时，表示在新窗口打开。默认情况下，表示在当前窗口打开。

11. 音频

使用该标签往网页中添加音频，使用语法如下。

<audio src="音频地址"></audio>

常见属性如下表：

属性	作用	说明
`src`	音频地址	必需属性，支持 `MP3`、`Wav`
`controls`	是否显示音频控制面板
`loop`	是否循环播放
`autoplay`	是否自动播放

12. 视频

<video src="视频地址"></video>

属性	作用	说明
`src`	视频地址	必需属性，支持 `MP4`、`WebM`
`controls`	是否显示视频控制面板
`loop`	是否循环播放
`muted`	是否静音播放
`autoplay`	是否自动播放	必须在开启静音播放的前提下才能生效

13. 列表

用于布局内容排列整齐的区域，主要分为：无序列表、有序列表、定义列表。

（1）无序列表

<ul>
    <li>JavaPark</li>
    <li>ebooks</li>
</ul>

用于布局排列整齐的无序规定顺序的区域，语法为 <ul> 标签嵌套 <li> 标签，其中 <ul> 标签表示无序列表，而 <li> 则代表无序列表中的条目。需要注意， <ul> 标签中只能包裹 <li> 标签。

（2）有序列表

<ol>
    <li>JavaPark</li>
    <li>ebooks</li>
</ol>

用于布局排列整齐的规定顺序的区域，语法为 <ol> 标签嵌套 <li> 标签，其中 <ol> 标签表示无序列表，而 <li> 则代表无序列表中的条目。而且需要注意， <ol> 标签中只能包裹 <li> 标签。

（3）定义列表

<dl>
    <dt>开源项目</dt>
    <dd>JavaPark</dd>
    <dd>ebooks</dd>
</dl>

语法为 <dl> 嵌套 <dt> 和 <dd> 标签，其中 <dl> 用于定义列表，<dt> 用于定义列表标题，<dd> 则用于定义列表的描述/详情。注意， <dl> 标签中只能包裹 dt> 和 <dd> 标签。

14. 表格

类似于日常使用中的 Excel，主要用于展示数据。注意，默认情况下，网页中的表格是没有边框线的，需要使用border 属性添加。

标签	说明
`table`	表格
`tr`	行
`th`	表头单元格
`td`	内容单元格

<table>
    <tr>
        <td>项目</td>
        <td>链接</td>
    </tr>
    <tr>
        <td>JavaPark</td>
        <td>https://github.com/cunyu1943/JavaPark</td>
    </tr>
</table>

为了让表格结构和语义更加清晰，通常还是用表格结构标签用来划分区域。下表是表格结构标签的说明。

标签	含义	说明
`thead`	表格头部	表格头部内容
`tbody`	表格主体	主要内容区域
`tfoot`	表格底部	汇总信息区域

合并单元格：将多个单元格合并为一个单元格，用于合并同类信息。又可以分为跨行合并和跨列合并，合并步骤如下：

保留最左最上的单元格，添加属性（值为数字，表示需要合并的单元格数量）
- 跨行合并：保留最上的单元格，添加属性 rowspan
- 跨列合并：保留最左的单元格，添加属性 colspan

15. 表单

（1）input

用于在网页中收集信息。

<input type="text">

根据标签中 type 属性的值不同，从而具备不同的功能。

type 属性值	说明
`text`	文本框，用于输入单行文本
`password`	密码框
`radio`	单元框
`checkbox`	多选框
`file`	上传文件

为了在输入时更加友好，可以在文本框和密码框中使用 placeholder 来进行提示。

针对单选框，常用属性如下表。

属性	作用	说明
`name`	控件名	控件分组，一组只能选一个
`checked`	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

文件上传时，默认上传表单控件只能上传一个文件，如果要实现文件多选功能，需要添加 multiple 属性。

<input type="file" multiple>

（2）下拉菜单

<select> 嵌套 <option>，其中 <select> 表示下拉菜单整体，而 <option> 则是下来菜单中的每一项，selected 属性表示默认选中项目。

<select>
    <option>JavaPark</option>
    <option>ebooks</option>
</select>

（3）文本域

用于输入多行文本的表单控件，默认可拖拽。

<textarea>请输入评论</textarea>

（4）label

网页中对于某个标签的说明文本。一般可以用 <label> 标签绑定文字和表单控件的关系，从而增大表单控件的点击范围。实现以上功能有两种方式：

方式一：<label> 只包裹内容，不包裹表单控件。设置 <label> 的 for 属性值和表单控件的 id 属性值一致。

<input type="radio" id="game">
<label for="game">游戏</label>

方式二：用 <label> 直接包裹文字和表单控件，此时无需设置额外属性。

<label><input type="radio">游戏</label>

（5）按钮

属性值	说明
`submit`	提交，点击后将数据提交到后台，默认功能
`reset`	重置，点击后将表单控件恢复默认值
`button`	普通按钮，默认无功能，需要配合 `JavaScript` 使用

<button type="reset">重置</button>

16. 布局

用于划分网页区域摆放内容，实现网页布局。

（1）div

独占一行，又叫大盒子。

（2）span

不单独另起一行，又叫小盒子。

17. 字符

用于在网页中显示预留字符。

显示	描述	实体名
	空格	` `
`>`	大于	`>`
`<`	小于	`<`

⏳ 联系

想解锁更多知识？不妨关注我的微信公众号：村雨遥（id：JavaPark）。

扫一扫，探索另一个全新的世界。

HTML 大揭秘

# HTML 大揭秘

# 什么是 HTML

# 常用语法

# 1. 标签

# 2. HTML 基本骨架

# 3. 标签之间的关系

# 4. 注释

# 5. 标题

# 6. 段落

# 7. 换行 & 水平线

# 8. 文本格式化

# 9. 图片

# 10. 超链接

# 11. 音频

# 12. 视频

# 13. 列表

# 14. 表格

# 15. 表单

# 16. 布局

# 17. 字符

# ⏳ 联系

HTML 大揭秘

什么是 HTML

常用语法

1. 标签

2. HTML 基本骨架

3. 标签之间的关系

4. 注释

5. 标题

6. 段落

7. 换行 & 水平线

8. 文本格式化

9. 图片

10. 超链接

11. 音频

12. 视频

13. 列表

14. 表格

15. 表单

16. 布局

17. 字符

⏳ 联系