Published
- 11 min read
[学习笔记]从零开始的前端学习笔记（2）
前端学习笔记（2）：文本标签
上节课的回顾与问题
在上一次的学习中，我们制作了一个简单的古诗网页。但是，可能大家会发现一些问题：
- 标题和正文都在同一行，没有换行。
- 标题和正文的字体样式相同，标题不够醒目。
- 文字没有办法缩进或居中显示。
别担心，这些问题我们将在本次学习中逐一解决。
新建项目和 HTML 文件
首先，让我们在 HBuilder X 中创建一个新的项目：
- 打开 HBuilder X，选择“文件” -> “新建” -> “项目”。
- 选择一个文件夹来保存项目，例如 “HTML1”。
- 选择“空项目”，点击“创建”。
- 在项目文件夹下，新建一个 HTML 文件，例如 “gushi.html”。
HBuilder X 会自动生成 HTML 文件的基本结构，我们只需要在 <body> 标签中填写内容即可。
完善古诗网页：解决排版问题
我们将使用纳兰性德的《长相思》作为例子，演示如何解决上节课遇到的问题。
<!DOCTYPE html><html><head> <title>长相思</title></head><body> 长相思 纳兰性德 山一程，水一程，身向榆关那畔行，夜深千帐灯。 风一更，雪一更，聒碎乡心梦不成，故园无此声。</body></html>换行：<br> 标签
你会发现，尽管我们在代码中换行了，但在浏览器中，所有文字仍然显示在同一行。这是因为浏览器会忽略代码中的换行符。要实现换行，我们需要使用 <br> 标签。
<br> 是一个单标签，表示换行（break）。我们在需要换行的地方添加 <br> 标签：
<body> 长相思<br> 纳兰性德<br> 山一程，水一程，身向榆关那畔行，夜深千帐灯。<br> 风一更，雪一更，聒碎乡心梦不成，故园无此声。<br></body>保存并在浏览器中预览，你会发现文字已经按照我们的意愿换行了。
结论：浏览器遇到 <br> 标签就会渲染为换行的效果。
标题：<h1> 到 <h6> 标签
为了让标题更醒目，我们可以使用标题标签 <h1> 到 <h6>。<h1> 表示一级标题，<h2> 表示二级标题，以此类推，直到 <h6>。
我们将“长相思”设置为一级标题：
<body> <h1>长相思</h1><br> <h2>纳兰性德</h2><br> 山一程，水一程，身向榆关那畔行，夜深千帐灯。<br> 风一更，雪一更，聒碎乡心梦不成，故园无此声。<br></body>保存并预览，你会发现：
- 标题“长相思”自动换行，并显示为粗体大字号。
- 标题前后有较大的行间距。
<h1>到<h6>的字号依次减小。
结论：标题标签会渲染显示为不同的标题效果，并具有不同的权重。
居中：align 属性
要让标题居中显示，我们可以使用 align 属性。align 属性可以用于 <h1> 到 <h6> 以及 <p> 等标签，用于设置内容的对齐方式。
align="left"：左对齐（默认值）。align="center"：居中对齐。align="right"：右对齐。
我们给 <h1> 标签添加 align="center" 属性：
<h1 align="center"> 长相思</h1><br>保存并预览，标题现在居中显示了。
段落：<p> 标签
<p> 标签表示段落（paragraph）。与 <br> 标签不同，<p> 标签会在段落前后添加一些额外的空白，用于区分不同的段落。
我们用 <p> 标签包裹作者信息：
<h1 align="center">长相思</h1><br><p align="center">纳兰性德</p><br><p>山一程，水一程，身向榆关那畔行，夜深千帐灯。<br>风一更，雪一更，聒碎乡心梦不成，故园无此声。</p><br>保存并预览，你会发现：
<p>标签包裹的文字会自动换行。- 段落前后有较大的行间距。
<p>标签内部可以嵌套其他标签，例如<br>。- 我们可以通过
align="center"让段落内容居中。
预格式化文本：<pre> 标签
<pre> 标签用于预定义格式化文本（preformatted text）。被 <pre> 标签包裹的文本会保留原始的空格和换行符，并且通常会使用等宽字体显示。
<pre> 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。</pre>与 <p> 标签相比：
- 相同点：都有行间距，默认前后换行。
- 不同点：
<p>不保留空格和换行，字体不变；<pre>保留空格和换行，字体变为等宽字体。 <pre>标签也可以使用align="center"进行居中。
文本样式：<b>、<i>、<u> 标签
我们可以使用以下标签来改变文本的样式：
<b>：加粗（bold）<i>：斜体（italic）<u>：下划线（underline）
这些标签可以单独使用，也可以嵌套使用，以实现多种样式效果。
<p>这是<b>粗体</b>文本。</p><p>这是<i>斜体</i>文本。</p><p>这是<u>下划线</u>文本。</p><p>这是<b><i><u>又粗又斜还有下划线</u></i></b>的文本。</p>上标和下标：<sup> 和 <sub> 标签
<sup>：上标（superscript）<sub>：下标（subscript）
<p>X<sub>1</sub> + Y<sup>2</sup> = 100</p>特殊字符：字符实体
在 HTML 中，一些字符具有特殊的含义，例如 < 和 > 用于表示标签。如果我们想在网页中显示这些字符，我们需要使用字符实体。
：空格<：小于号 (<)>：大于号 (>)©：版权符号 ©&：和号 (&)
例如，要在网页中显示版权信息：
<p align="center">© 2023 版权所有 <中国> & 成都</p>更多特殊字符可以参考 HTML 特殊字符表。
水平分割线：<hr> 标签
<hr> 标签用于创建一条水平分割线（horizontal rule）。
<hr>图片的更多细节
控制图片大小：width 属性
我们可以使用 width 属性来控制图片的宽度。
- 百分比：
width="40%"表示图片宽度为浏览器宽度的 40%。 - 像素值：
width="500px"表示图片宽度为 500 像素。
<img src="images/1.jpg" width="500px">图片居中
我们可以将 <img> 标签放在 <p> 标签中，并设置 align="center" 来让图片居中。
<p align="center"><img src="images/1.jpg" width="50%"></p>图片悬停提示：title 属性
title 属性用于设置鼠标悬停在图片上时显示的提示文字。
<img src="images/1.jpg" title="两相思">图片加载失败提示：alt 属性
alt 属性用于设置图片加载失败时显示的替代文本。
<img src="images/error.jpg" alt="图片加载失败">相对路径和绝对路径
相对路径
相对路径是相对于当前 HTML 文件的路径。
images/1.jpg：表示当前 HTML 文件所在目录下的images文件夹中的1.jpg文件。./images/1.jpg：与上面相同，./表示当前目录。../images/1.jpg：../表示上一级目录。
绝对路径
绝对路径是指完整的 URL 地址，例如：
<img src="https://www.example.com/images/1.jpg">在实际开发中，我们通常使用相对路径。
获取图片资源
CC0 协议
CC0 协议是一种公共领域许可协议，允许用户免费使用、修改和分发作品，甚至用于商业目的。
免费图片网站
推荐一些提供 CC0 图片资源的网站，可以在这些网站上搜索并下载免费图片。
图标资源
iconfont 网站提供了丰富的矢量图标资源，可以下载 SVG、PNG 等格式的图标。
设置网站图标：<link> 标签
我们可以使用 <link> 标签来设置网站的图标，也就是浏览器标签页上显示的小图标。
- 使用在线工具将 PNG 图片转换为 ICO 格式的图标文件，例如
favicon.ico。 - 将
favicon.ico文件放在网站的根目录下。 - 在
<head>标签中添加以下代码：
<link rel="icon" type="image/x-icon" href="favicon.ico">总结
本次学习笔记，我们学习了以下内容：
- 文本排版相关的标签：
<br>、<p>、<h1>-<h6>、<pre>、<b>、<i>、<u>、<sup>、<sub>、<hr>。 - 特殊字符的使用：字符实体。
- 图片的更多细节：
width、title、alt属性，以及相对路径和绝对路径。 - 获取图片资源：CC0 协议和免费图片网站。
- 设置网站图标：
<link>标签。
作业
参考本节课的知识点，为你的网站添加一些图片，并尝试使用不同的标签来美化你的网页。
下期预告
在下期学习笔记中，我们将学习列表标签、表格标签，并尝试构建一个更加复杂的网页。