HTML网页基本架构,五大组件

上一节讲到HTML文档的基本结构,这一节我们将介绍一下用HTML生成的网页的基本架构,我们要设计网页,总得先了解一下网页的基本组成部分是什么吧——我们的教程学习HTML的方法就是先从总体了解一下HTML,才从细节逐一着手。个人感觉,这比较科学,就像写小说要有一个大纲一样。


HTML网页基本架构,五大组件

  • <h1></h1>,大标题
  • <p></p> 文字段落
  • <a></a> 链接
  • <img> 图像
  • <video></video> 视频

为什么说大标题、文字段落、链接、图像和视频是网页的基本架构的组成部分,网页不还是有什么导航栏啦,搜索框啦,按钮啦等等,难道这些不是网页该有的吗?

导航栏是由各个链接组成的,输入框、按钮、搜索框等在静态的网页,即不需要交互的网页当中并不是必须的,而且这些组件对搜索引擎蜘蛛的抓取并没有什么帮助,所以说,上面五大组件才是网页——适合搜索引擎蜘蛛的抓取的基本组成部分。下面我们将逐一进行简单的介绍,后面会详细介绍它们的属性等内容。


h1大标题

每一个网页都应该有一个h1大标题,明确告知搜索引擎的蜘蛛这个网页主要包含什么内容。

大家可以打开vscode,或其他自己熟悉的编辑器,输入如下代码:

示例

<h1>每个网页都应当包含一个h1标题,便于搜索引擎抓取</h1>
<h2>h2的标题的权重就比h1低</h2>

p文字段落

<p>标签,文字段落,其主要内容就是契合h1大标题的,要跟标题相关,而且当下的搜索引擎的算法主要还是计算分析文字的,所以,一个网页中,<p>标签内的文字就显得十分重要了。

示例

<p>文字段落,配合标题,让网页的主题更加明确,有价值</p>

a链接

除了单个网页的网站之外,其他的网站基本上都有一个导航栏,这里面就需要使用到<a>标签。

示例

 <a href='https://www.x1y1z1.com/' target='_blank'>打开一个可以学习python全栈的网站</a> 

img图像

除了一些特殊定位的文字类网站,比如各种计算机语言的文档网站,或者是教程网站等,现在大多数的网站都比较讲究图文并茂,这样的网站也比较受欢迎。

示例

<img src="test.jpg" width="100" height="100" />

src属性为图像的路径,大家可以保存一张图片到HTML文件所在的同级目录,也就是同一个文件夹里头去,然后命名为test.jpg,也可以是其他的命名,但要把上面代码中的test.jpg该成相应的名称。


video视频

如果只是个人网站,还是比较建议不要去做视频网站,因为带宽的成本比较高,但是至简计算网站为什么还是将<video>标签罗列为网页的基本架构呢?因为现在的短视频、直播等是互联网的主流方向之一。

示例

<video src="test.mp4" controls="controls"></video>

src同样是视频的来源路径,注意这是同级目录的路径。


HTML网页的基本架构的五大组件就简单介绍到这里,五大组成的详细资料我们将在后面注意介绍,下一节我们将介绍HTML的元素。


全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.