文章目录

1 网页的基本构造

1 网页的基本构造

一个网页尽管再复杂，它还是离不开三要素：文本内容、对其他文件的引用、标记。其中文本内容就是所谓的纯文字；对其他文件的应用就是引用图像、音频、视频使之加载；标记就是对文本内容进行描述并确保引用正确地工作。

1.1 HTML思想

无需多言，编写HTML的过程实际上就是给网页的内容打上能够描述它们的标签。标签名称有些我们不需要自己创建，HTML已经完成了这一工作，它有一套预先定义好的元素。p元素用于段落，abbr元素用于缩略词，li元素用于列表项目。

HTML元素描述的是网页的内容，也就是你看到的文字；至于什么透明度啊、彩色啊，那都是CSS做的事，和HTML没关系。

1.2 开发工具

1.2.1 概述

对于编写前端网站来说，开发工具有很多种，垃圾到可以用记事本，快到可以用pycharm、Vscode、Webstorm、Sublime、Dreamweaver、Hbuilder。

在这份笔记中，我们采用的是VScode。为什么呢，因为实际开发中，我们注重开发的效率和便捷性，在VScode中，有很多插件能够帮我们快速地写好代码。其他的就不多说了，直接用就对了。

1.2.2 下载

如果需要下载Vscode，可以前往微软官方页面下载，也可以使用下面的链接。Visual Studio Code - Code Editing. Redefined

1.3 基本的HTML页面

下面演示一个基本的HTML页面，通过这个案例，我们可以了解一下本章和后面的内容。

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf_8"/>
	<title>Your page title</title>
</head>
<body>

</body>
</html>

在HTML中，我们一般用<>来包围HTML标签。

开始标签即为<head>，通常用于标记元素的开始

结束标签即为</head>，用于标记元素的结束。

在VScode中，如果想要一键生成这样的骨架的话，只需要按下!键然后回车即可生成。

1.2.1 网页的顶部和头部

前面提到，页面内容位于主体部分，那么刚刚上面按个案例的其他代码有啥用呢？

实际上，除了<body>开始标签，其他部分的内容基本都是为浏览器和搜索引擎准备的。如上面案例提到的<!DOCTYPE html>，这实际上是告诉浏览器这是一个HTML5页面。而且这一行声明应该始终位于页面的第一行。

接下来是html元素，它包含着页面的其余部分，即<html lang = "en">和</html>结束标签之间的内容。在这里可以为网页指定其他语言，这一内容后面会细讲。

1.2.2 小试牛刀

1.2.2.1 例子

接下来为我们最开始的添加一些新的内容。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Blue Flax (Linum lewisii)</title>
</head>
<body>
<article>
<h1>The Ephemeral Blue Flax</h1>
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.
➝ org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a> 
➝ that somehow took hold in my garden. They are awash in color every morning, yet not a single 
➝ flower remains by the afternoon. They are the very definition of ephemeral.</p>
</article>
</body>
</html>

实际网页页面效果如下：

前面提到过，使用浏览器查看网页时，不会显示包围文本内容的标记。但是这些标记可以表明内容的作用。比如<p>标记用于表示段落的开始。

1.2.2.2 HTML缩进问题

在代码中打缩进，和网页内容显示的缩进没有半毛钱关系。也就是说，网页的缩进不是由代码的缩进来控制的。但是也有例外，pre元素是一个例外。不过对嵌套在父元素中的代码进行缩进是一种惯例，这样我们在编写和阅读代码时会更容易看出元素之间的层级关系。

HTML提供了很多这样的元素。比如在上面的例子中：有标签a、article、em、h1、img和p。每个元素都有各自的含义，例如，h1是标题，a是链接，img是图像。

我们暂时不会对示例代码做过多的探讨。我们在会示例代码的基础上将一些关于文本标签的知识。

1.2.3 注释

这里不多说，既然学前端，就说明你有一定的编程知识，直接开始教怎么写注释。

注释格式：

如果是使用VScode，那么你只需要选中注释内容，然后ctrl+/。

1.2.4 标签

1.2.4.1 标签结构

有一些元素是空元素，既不包含文本也不包含其他元素，它们看起来像是开始标签和结束标签的结合。

在学习标签的种类前，我们先要知道几个比较常用的标签，后面方便使用。

标签	功能
`<br>`	用于换行
`<hr>`	生成水平分割线

1.2.4.2 标签关系

标签与标签之间的关系可分为两种，一种是父子（嵌套）关系，一种是兄弟（并列）关系。这个地方很好理解，这里离不过多阐述。在下面的小节中，我们会详细讲述标签的种类及其作用。

1.4 文本标签种类

1.4.1 排版标签

1.4.1.1 标题标签

写什么都会有标题，比如作文，新闻，笔记。那如果要在HTML中写出标题该怎么写呢？

写法如上所示，最多可写六级标题，只需把hn中的n改为6即可。标题的重要程度依次递减，在递减的过程中，标题的文字逐渐变小，但是文字皆有加粗，并且不需要<br>也可换行，它是独占一行的。

1.4.2.2 段落标签

有时候我们写的东西喜欢一段一段的写，即段落，如果是段落，我们可以采用以下格式来写。

段落之间存在间隙，其也为独占一行。

1.4.4.3 换行标签

这个前面我们说过了。

正常来说，文字在网页上的显示一般是文字到了网页的最右边后才会换行，而此标签可用于强制换行，其为单标签。强制换行后的文字依然处于相同段落，两句之间没有间隙。

1.4.4.4 水平线标签

这个前面也说过了。

此标签用于分割不同主题内容，其也是一个单标签，可以在网页中显示一条水平线。

1.4.2 文本格式化标签

如果用过Markdown语法编辑器的同学学这一部分应该比较熟悉，在此我也强烈推荐大家作为程序员一定要多使用这种编辑器去记录自己的心得和笔记，在这里有道云笔记和Typora都很不错，感兴趣的小伙伴可以去试试。

言归正传，所谓的文本格式化标签就是，可以给特定的文字施加各种效果，如加粗、下划线、倾斜、删除线等效果。各类标签如下表。

标签	说明
b	加粗
strong	加粗
u	下划线
ins	下划线
i	倾斜
em	倾斜
s	删除线
del	删除线

1.5 图片的使用

1.5.1 基本使用

img标签需要展示对应的效果，需要借助标签的属性来设置。

这里说到标签的熟悉，就不得不需要提到属性是什么了。

1.5.1.1 标签完整结构

实际上，标签中是可以指定内容的属性的，属性包含了元素的额外信息。在HTML5中，属性值两边的引号是可写可不写的，但是习惯上大家还是会写上，因此建议始终这样做。跟元素的名称意义，尽量使用小写字母编写属性的名称。

有的元素可以同时存在多个属性，属性之间以空格的方式隔开，标签名与属性之间也是，属性之间是无序的。

1.5.2 图片的标签

<img src="https://images.cnblogs.com/cnblogs_com/blogs/710924/galleries/2086847/o_220115052557_5af17f7f881b11ebb6edd017c2d2eca2.jpg" alt="图片加载失败" title="图片来源于尘鱼好美">

1.5.2.1 alt属性

如果对应我们前面所讲，src一般是用来引用其他文件的，而alt是用来替换文本的。

也就是说，当图片加载失败时，才会显示alt的文本；反之则不会显示。

1.5.2.2 title属性

这个属性的主要作用是用于提示文本，也就是说，当我们的鼠标悬停在图片上时，他会提示一些字眼。这里就不给出图片了，因为我截不了图（嘿嘿）。如果感兴趣可以自己去试试。

1.5.2.3 width和height属性

这个属性用于设置图片的宽度和高度。

如果只是设置宽度和高度中的任意一个，那么此时会以设置的那个为轴等比例放大或缩小，图片不会变形。

1.5.3 路径

如果看过我Linux笔记或操作系统笔记的这里就可以不用看了，如果没有的可以看一下。实际上这里要介绍的就是绝对路径和相对路径。

相对路径指的从当前文件出发找目标文件的过程。

绝对路径指的是不管工作目录在哪，我们都是从/，即根目录开始，唯一不重复。实际上这里我们也可以使用网络上的完整的网址也是可以的。

在开发中，我们使用相对路径是最好的选择，除非你使用的是网址那你就可以使用绝对路径。

在相对路径中，如果需要使用与当前目录相同的文件的话，只需直接敲出文件名即可，如果使用的是该目录下的目录中的文件的话，那你只需要敲出目录名/文件名；如果使用的是该目录的上级目录的其他文件的话，那你可以使用../目录名/文件名。在这里..是上级目录的意思，可以多次使用。

1.6 音频标签

如果想要在页面中插入音频，可以使用下面的HTML语言。

关于音频也有几个常用属性：

属性名	功能
src	音频路径
controls	显示播放控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

其中要注意的是：这个音频标签目前只支持三种格式：MP3、Wav、Ogg。

1.7 视频标签

视频的标签只需要把音频的audio改为video即可，它们的常用属性也是一样的，这里不过多累述。

同样需要注意的是：这个视频标签目前只支持三种格式：MP4、WebM、Ogg。

1.8 超链接

1.8.1 概述

超链接有多个名字，比如a标签、超链接、锚链接。它可以应用于一个页面跳转到另外一个页面的场景，格式如下：

实际上，它是由a标签组成的，里面的href属性可以设置超链接的引用，类似于src，所以说，如果需要a标签点击之后去指定页面，需要设置a标签的href属性。

1.8.2 target属性

利用target属性可以决定打开网页的方式。该属性取值如下：

取值	效果
_self	默认值，在当前窗口中跳转
_blank	在新窗口中跳转（保留原网页）

1.9 案例实现

学习了这么多知识之后，我们可以用所学知识做出自己想要的效果了。

下面给出案例和源代码，有兴趣的可以动手试一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心得体会——尘鱼</title>
</head>
<body>
    <h1>浮世三千</h1>
    <hr>
    <h2>文章内容</h2>
    <p>无非两种人：一种是做了，没成功，所以焦虑；一种是没做，要迎接失败了，所以焦虑。人常常会把自己的所得经验告诫未得之人，就如同许久之前高中的恩师一般念叨；人常常会抱怨世间的不公，想要改变眼前的一切；而人在经历了大起大落后回望，他们总是能发现：自己的付出不像童话里的那般美好，总能得到意外的对待。很少有些许的沉思，或者来自内心深处的拷问：自己至此，该干什么，身边的人说了那么多，自己该不该反思什么。致命的慵懒总是带来成堆的接口，漫天的抱怨似乎幽怨的黑洞，似乎解决的方法就像是时光隧道中那一丝薄弱的亮光微不可及；避开自己心里的拷问，避开一切的一切，似乎拖着拖着生活的美好就能如期而至。</p>
    <img src="https://images.cnblogs.com/cnblogs_com/blogs/710924/galleries/2086847/o_220115052557_5af17f7f881b11ebb6edd017c2d2eca2.jpg" alt="图片加载失败" title="该图片来源于尘鱼好美" weight="480" height="360">
    <p>“日常所得焦虑，无非是三天打鱼两天晒网，时而努力时而颓废所致。”</p>
    <p>约莫些许人同此言，却又忘却其 “人生的悲欢并不相同，他们只觉得你吵闹。
        <br>
        弃浮沉往事，探前方长路坎坷；弃勿须情感，奔自己心中所想。
        <br>
        繁琐的慥词现已无人愿细细品味，只愿将心中所得能与伯乐共享，足矣。</p>
        如果喜欢该案例可以关注我的网站
        <br>
        <a href="https://www.cnblogs.com/ChengYuHaoMei/">点此前往</a>
    <audio src="https://audio04.dmhmusic.com/71_53_T10051752137_128_4_4_0_sdk-cpm/cn/0103/M00/10/B5/ChR45F8hdhCAJ_unAAdXW5beNxE239.mp3?xcode=e20e7d6d765a63dc97d12357a8578f3cc746bc4" controls autoplay loop>  
</body>
</html>