fuchencong

The way I am

0%

HTML 基础

发表于 分类于

之前总是断断续续的学习一些前端知识，因为并没有真的实际使用过，所以学习的知识总是很快遗忘了。这次又重新跟着 B 站的 pink 老师 重新学习了一遍前端的 HTML 与 CSS 的基础知识，这篇文章是对 HTML 知识的总结。

HTML 简介

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们所看到的网页是以 .html 或 .htm 结尾的文件，因此网页也被称为 HTML 文件。

HTML（HyperText Markup Language）即超文本标记语言，是一种用来描述网页的语言。HTML 不是一种编程语言，而是一种标记语言（markup language）。这里的超文本有两层含义：

  • 可以包含的内容不仅限于文本，而是可以包含视频、音频、图片等内容
  • 可以通过超级链接，从一个 HTML 文件跳转到另一个文件

HTML 文件由一系列 HTML 标签描述，然后通过浏览器显示给用户。

常用浏览器及其内核

浏览器是网页显示、运行的平台，常用的浏览器有 IE、Firefox、Chrome、Safari 等。其中 IE 使用的浏览器内核是 Trident，Firefox 使用的是 Gecko，Chrome 和 Safari 使用的是 Webkit。

Web 标准

Web 标准是由 W3C（万维网联盟）组织及其他标准化组织制定的一系列标准的集合。由于市场上的浏览器是由不同厂商实现的，为了让同一份网页代码在不同的浏览器上能够具有统一的结构、表现、行为等，W3C 等国际标准化组织制定了一系列 Web 相关的标准。正是得益于这些标准，Web 在过去的十几年中得到快速发展和应用。

Web 标准主要由 3 个方面构成：

  • 结构：结构用于对网页元素进行整理和分类，HTML 属于结构标准
  • 表现：表现用于设置网页元素的版式、样式、大小等外观样式，CSS 属于表现标准
  • 行为：行为用于为网页带来交互、动态行为，JavaScript/Ecmascript 属于行为标准

HTML 基础

HTML 是一种标记语言，HTML 页面主要就是由一系列标签构成的。所以学习 HTML 的关键就是学习 HTML 的标签。

  • HTML 标签是由尖括号包围的关键词，例如 <html>
  • HTML 标签通常是成对出现的，例如 <html> 和 </html>，这也成为双标签。标签对中的第一个标签是 开始标签，第二个标签是 结束标签
  • 有些特殊标签是单标签，例如 <br />

标签之间是存在关系的：

  • 包含关系：例如下面的实例中，<html> 和 <head>、<html> 和 <body> 都是包含关系
  • 并列关系，例如下面实例中，<head> 和 <body> 是并列关系
1
2
3
4
5
6
<html>
    <head>
    </head>
    <body>
    </body>
</html>

HTML 基本结构标签

每个网页都会有一套基本的结构标签（也称为骨架标签），页面内容就是在这些基本结构标签中书写的：

  • <html></html>：html 标签，它是整个 HTML 页面中最大的标签，称为 根标签
  • <head></head>：head 标签，用于定义 HTML 文档的头部信息。在 head 标签中通常会继续包含 title 标签
  • <title></title>：title 标签，定义 HTML 页面的标题，它会在浏览器的标签栏上显示
  • <body></body>：body 标签，定义 HTML 文档的页面内容（也称为页面的主体内容）

如下是就是利用这些基本结构标签构成的一个 HTML 页面，该页面可以在浏览器中正确显示：

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>our first html</title>
    </head>
    <body>
        work hard and you will succeed!
    </body>
</html>

HTML 的开发

前端开发工具有很多，这里我们主要使用 Visutal Studio Code（简称 VS Code）进行开发。为了方便 HTML 的开发，我们还需要安装一些插件：

  • Chinese (Simplified)：实现 VS Code 的汉化
  • Auto Rename Tag：自动重命名标签对
  • open in browser：允许使用默认浏览器打开当前文件
  • Live Server：实时预览当前文件，但是有个注意事项，需要 VS Code 打开当前文件所在的目录，该插件才能正常工作
  • vscode-icons：提供好看的文件图标
  • Easy LESS：自动将 less 文件编译为 css 文件
  • 格式化代码：使用 VS Code 系统自带的格式化功能即可

接下来再介绍一些默认的快捷键（Mac）：

  • shift + option + 下箭头：快速复制一行
  • command + d：先双击选中单词，再通过 command + d跨行选中相同的单词
  • command + option + 下箭头：跨行添加多个光标
  • shift + option + 光标：选择区块
  • command + +：放大页面
  • command + -：缩小页面

当使用 VS Code 开发 HTML 页面时，输入 ! 并按 tab 键补全，就可以自动生成 HTML 页面的骨架结构：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

在这个骨架结构中，有几个元素需要注意一下：

  • <!DOCTYPE html>：文档类型声明，告诉浏览器使用哪种 HTML 版本来解析当前 HTML 页面，而这句代码的意思是使用 HTML5 版本来解析网页
    • <!DOCTYPE> 声明位于文档最前面的位置，处于 标签之前
    • <!DOCTYPE> 不是 HTML 标签，它是文档类型声明标签
  • <html> 标签中的 lang 属性用来指定当前文档的语言。en 表示英文，zh-CN 表示中文简体。但是需要注意，对于文档显示来说，定义成 en 也可以正常显示中文，定义成 zh-CN 也可以正常显示英文。该属性主要是对浏览器、搜索引擎有作用
  • <meta> 标签中的 charset 属性用来指定当前文档的字符编码，使用 UTF-8 可以处理世界上绝大多数语言的字符

HTML 常用标签

学习 HTML 标签最重要的就是记住每个标签的语义，即理解这个标签是用来做什么的。在合适的地方使用合适的标签，可以让 HTML 页面结构更加清晰。

标题标签

HTML 提供了 6 个等级的网页标题，即 <h1> 到 <h6>（h 是 head 的缩写），其重要性依次递减（大小、粗细是逐级递减的）。如下定义一个一级标题：

1
<h1>一级标题</h1>

标题标签中的内容总是独占一行显示。

段落和换行标签

为了让页面内容分段显示，我们需要用到段落标签 <p>（p 是 paragraph 的缩写）。如下定义了两个段落

1
2
<p> 段落1 </p>
<p> 段落2 </p>

一个段落中的文本会根据浏览器窗口的大小自动换行。段落与段落之间有明显的空隔。

如果希望对某个段落中的文本强制换行，需要使用换行标签 <br />（br 是 break 的缩写）：

  • <br /> 标签用于强制换行
  • <br /> 标签是一个单标签
  • <br /> 只是简单地开启新的一行，新行与上一行之间只是普通的行间距。这和段落不同，段落之间是会有明显的空隔。

文本格式化标签

有时候，段落中的某些文字要比其他文字更重要，需要突出某些文字的重要性，此时就会用到文本格式化标签，这些文本格式化标签可以让文字以特殊的方式显示：

  • 加粗：<strong></strong>（推荐） 或 <b></b>
  • 斜体：<em></em>（推荐） 或 <i></i>
  • 删除线：<del></del>（推荐） 或 <s></s>
  • 下划线：<ins></ins>（推荐） 或 <u></u>

<div> 和 <span> 标签

<div> 和 <span> 标签都是没有语义的，可以将它们理解为盒子，是用来装内容的。这两个标签都是用来对网页进行布局的：

  • <div></div>：div 是 division 的缩写，表示分割、分块。**<div> 标签总是独占一行**
  • <span></span>：span 表示跨度、跨距。**一行上可以有多个 <span> 标签

如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
    block1
<div>

<div>
    <span>part21</span>
    <span>part22</span>
</div>

<div>
    <span>part31</span>
    <span>part32</span>
    <span>part33</span>
</div>

显示效果如下：

图像标签

标签用来定义 HTML 页面中的图像：

1
<img src="图像URL" />

可以看到 <img> 标签也是一个单标签，它通过 src 属性来指定图像文件的路径。标签的属性可以理解为标签的特性，可以控制标签的某些行为：

  • 标签可以拥有多个属性，属性必须写在标签名的后面，属性之间不分先后顺序
  • 标签名与属性、属性与属性之间用空格分割
  • 属性采用键值对的格式，即 key="value" 的格式，注意 value 必须用双引号括起来

图像标签常用的属性有：

  • src：设置图片文件路径，src 可以是相对路径（图片文件相对于当前 HTML 文件的路径）或者绝对路径（虽然本地绝对路径存在兼容性问题，很少使用。但是 URL 形式的绝对路径还是存在使用场景）
  • alt：替换文本，当图片无法显示时，就会显示 alt 内容
  • title：提示文本。当鼠标悬浮在图片上时，就会显示 title 内容
  • width：设置图像宽度
  • height：设置图像高度
  • border：设置边框宽度

另外需要注意，只设置图片宽度或高度的情况下，浏览器显示图片时会自动进行等比例缩放。

超链接标签

<a> 标签用来定义超链接，用于从一个页面链接到另一个页面。它的语法格式为：

1
<a href="跳转目标" target="打开方式">文本或者图像</a>

a 为 anchor 的缩写。它的常用属性有：

  • href：用于定义链接目标的 URL
  • target：指定链接页面的打开方式，默认值为 _self 表示在当前窗口打开，_blank 表示在新窗口中打开链接

如下是一个简单的超链接：

1
<a href="https://www.baidu.com">百度一下</a>

超级链接可以分为以下种类：

  • 外部链接：链接目标 URL 是其他网站的页面
1
<a href="https://www.baidu.com">百度</a>
  • 内部链接：网站内部页面之间的相互链接，URL 直接书写内部页面的路径即可
1
<a href="index.html">首页</a>
  • 空链接：如果当前没有确定链接目标时，可以使用空链接，空链接的目标 URL 为 #
1
<a href="#">空链接</a>
  • 下载链接：如果 href 中的 URL 指向一个文件、压缩包，就会下载该文件
1
<a href="test.zip">下载该文件</a>
  • 锚点链接：点击锚点链接，可以快速定位到页面中的某个位置，建立锚点链接主要分为两步：
    • 在链接文本的 href 属性中，设置 URL 为 #目标元素的 id
    • 对于目标元素，在其标签中添加对应的 id 属性
1
2
<a href="#part2">跳转到第二部分</a>
<a id="part2">第二部分</a>

可以为网页中的各种元素，例如文本、图像、表格、音频、视频等超级链接。

注释标签与特殊字符

为了对 HTML 页面中的某些代码进行注释，方便开发人员阅读和理解代码，可以使用注释，注释内容并不会在在页面中显示。HTML 中的注释通过 注释标签 实现，其语法如下（快捷键为 cmd + /：

1
<!-- 注释内容 -->

在 HTML 代码中，书写多个连续的空格或者换行，浏览器会自动将其合并为一个空格进行显式。所以要在 HTML 页面中显示空格、换行等是需要特殊技巧的。之前已经说过，可以通过 <br /> 标签实现换行。接下来再介绍一些常用特殊的字符，以实现对应的显示效果：

  • 空格：&nbsp;
  • <：&lt;
  • >：&gt;
  • &：&amp;

表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常完整，可读性非常好。注意，表格不是用来布局页面的的，而是用来展示数据的。

表格的基本语法如下：

1
2
3
4
5
<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>
  • <table></table>：用于定义表格的标签
  • <tr></tr>：用于定义表格中的行，必须嵌套在 <table></table> 标签中
  • <td></td>：用于定义行中的单元格，必须嵌套在 <tr></tr> 标签中。单元格内可以放置任何元素，例如文本、图片、超链接等等

另外，通常表格中的第一行或者第一列会作为表格的表头，其比一般的单元格更加重要。为了突出其重要性，提供了一个专门的标签 <th></th> 来定义表头单元格：表头单元格里面的文本内容会加粗居中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Sex</th>
    </tr>
    <tr>
        <td>Mike</td>
        <td>20</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>25</td>
        <td>Male</td>
    </tr>
</table>

有时候表格会很长，为了更好地表示表格的语义，可以将表格分成 表格头部（注意和 表头单元格 的区分） 和 表格主体 两大部分：

  • <thead></thead>：用于定义表格头部，用于存放表格的头部。因此 <thead></thead> 内部必须拥有 <tr> 标签，一般就是表格的第一行
  • <tbody></tbody>：用于定义表格的主体，用于存放表格数据本体
  • <thead></thead> 和 <tbody></tbody> 必须嵌套在 <table></table> 中

表格也提供了部分属性，可以控制表格的显示效果。虽然实际开发中我们都是通过 CSS 来控制表格的显示效果，但是这里还是简要介绍一下这些属性。这些属性都是写在 <table></table> 标签中的：

  • align：设置表格在页面中的对齐方式，可以是 left、center、right
  • border：设置表格是否拥有边框，默认为 “”，即没有边框，如果设置为 “1”，则会显示边框
  • cellpadding：设置单元格内容与单元格边界的空白距离，单位为像素
  • cellspacing：设置单元格与单元格之间的空白距离，单位为像素
  • width：设置表格的宽度，单位为像素
  • height：设置表格的高度，单位为像素

有时候需要将多个单元格合并为一个单元格。合并单元格可以有两种方式：

  • 跨行合并：最上侧的单元格为目标单元格，在目标单元格写入 rowspan="合并单元格的个数" 合并代码
  • 跨列合并：最左侧的单元格为目标单元格，在目标单元格写入 colspan="合并单元格的个数" 合并代码

合并单元格可以分为 3 步：

  • 确定是跨行还是跨列合并
  • 找到目标单元格，写入对应的合并代码
  • 删除多余的单元格

如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="500" height="200" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
     </table>

列表标签

表格标签主要用来显示数据，而列表标签则主要用来布局。列表最大的特点是整齐、有序，使用它作为布局会更加自由和方便。根据使用情景不同，列表可以分为：无序列表、有序列表和自定义列表。

无序列表中的各个列表项没有顺序之分，是完全并列的。<ul> 标签表示无序列表，而 <li> 标签用于定义 列表项：

1
2
3
4
5
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
  • <ul></ul>：只能嵌套包含 <li></li> 标签，不能包含其他标签或者文字
  • <li></li>：相当于一个容器，可以容纳所有元素
  • 无序列表会带有自己的样式属性，但实际使用时，会使用 CSS 来设置

有序列表中的各个列表项是有顺序的。<ol> 标签表示有序列表，而 <li> 标签用于定义 列表项。

1
2
3
4
5
<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ol>
  • <ol></ol>：只能嵌套包含 <li></li> 标签，不能包含其他标签或者文字
  • <li></li>：相当于一个容器，可以容纳所有元素
  • 有序列表会带有自己的样式属性，但实际使用时，会使用 CSS 来设置

自定义列表常用于对术语或者名词进行解释和描述，自定义列表的列表项前没有任何符号。<dl> 标签表示自定义列表，而 <dt> 和 <dd> 分别用于定义 术语（Definition Term） 和 术语解释（Definition Description）列表项：

1
2
3
4
5
6
<dl>
    <dt>联系我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>视频号</dd>
</dl>
  • <dl></dl>：只能嵌套包含 <dt> 或 <dd> 标签
  • <dt> 或 <dd> 个数没有限制，但通常是一个 <dt> 对应多个 <dd>
  • <dt> 或 <dd> 中可以容纳任何标签

表单标签

表单的主要作用是收集用户信息。在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3 个部分构成。

表单域是一个包含表单元素的区域。通过 <form></form> 标签来定义表单域，以实现用户信息的收集和传递。**<form> 可以把它范围内的表单元素信息提交给服务器**：

1
2
3
<form action="url" method="提交方式" name="表单域名称">
    各种表单元素控间
</form>
  • action：用于指定接收并处理表单数据的服务器程序的 url 地址
  • method：设置表单数据的提交方式（HTTP 方法），常用为 get 或 post
  • name：用于指定表单的名称，以区分同一个页面中的多个表单域

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择内容的控件。而提示信息就是表单元素所对应的提示文本，可以对该表单元素的含义/作用进行说明。

input 表单元素

<input> 标签用于收集用户信息，它包含一个 type 属性，根据不同的 type 属性值，input 表单元素可以拥有很多形式（文本框、复选框、密码框、单选按钮、按钮等）。**<input> 标签是一个单标签**。

1
<input type="属性值" />

type 属性值可以是如下值：

  • button：普通按钮（不会提交数据，通常和 JavaScript 配合使用）
  • checkbox：复选框
  • file：文件选择按钮，供文件上传
  • hidden：定义隐藏的输入字段
  • image：定义图片形式的提交按钮
  • password：密码框，其中的文字会被掩码
  • radio：单选按钮
  • reset：重置按钮，可以清除表单中的所有数据
  • submit：提交按钮，用于将表单域中的表单数据发送给服务器
  • text：单行的文本框，可以输入文本。默认宽度为 20 个字符
1
2
3
4
5
6
7
8
9
10
11
<form>
    用户名 <input type="text" name="username" value="请输入用户名" maxlength="6"/> <br />
    密码 <input type="password" name="password"/> <br />
    性别 男<input type="radio" name="sex" value="male" checked="checked"/> 女<input type="radio" name="sex" value="female" /> <br />
    爱好：吃饭<input type="checkbox" name="hobby" value="eating" /> 睡觉<input type="checkbox" name="hobby" value="sleeping" checked="checked"/> <br />

    上传头像：<input type="file" value="浏览" /> <br />
    <input type="button" value="获取验证码" /> <br />
    <input type="submit" value="免费注册"/>
    <input type="reset" value="重新填写"/>
</form>

除了 type 属性，input 元素一些重要的属性：

  • name 属性：定义 input 元素的名称，同一组单选按钮/复选按钮需要拥有相同的 name 属性值
  • value 属性：定义 input 元素的值
  • checked 属性：主要针对单选框和复选框，用于默认选中某个表单元素
  • maxlength 属性：用于限制用户输入的字符个数

name、value 属性是每个表单元素都有的属性值。name、value 属性主要是用于和服务器通信时，让服务器程序知道表单所代表的数据名称、数据值。

在介绍下 <label> 标签，<label> 标签其实不属于表单元素，但是通常和表单元素一起配合使用。<label> 标签可以为 input 元素定义标注（标签）：<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器会自动将焦点转到和 <label> 标签相关联的表单元素上。

要实现 <label 标签与表单元素的绑定，核心是让 <label> 标签的 for 属性与所绑定的表单元素的 id 属性值相同：

1
2
3
4
5
6
7
<label for="username">用户名</label>
<input type="text" name="username" id="username" /> </br>

<label for="male">男</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female" value="female">

select 表单元素

在页面中，如果有多个选项可以让用户选择，并且想要节约页面空间，可以使用 <select> 标签定义下拉列表，其语法如下：

1
2
3
4
5
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

在 <option> 标签中设置 selected="selected" 属性可以将某个选项设置为默认选中选项。

textarea 表单元素

<textarea> 标签是用于定义多行文本输入的空间。使用多行文本表单元素，可以输入更多文字，该控件常用于留言板、评论等。

1
2
3
<textarea rows="3" cols="20">
    文本内容
</textarea>
  • <textarea></textarea> 标签里的内容会作为文本域的默认输入，直接显示在文本域中
  • 可以通过 cols 和 rows 属性来控制文本域的宽度和高度，实际开发中一般通过 CSS 来控制

查阅文档

前端学习经常查阅的网站有：

Reference