HTML基础之基础标签

最新推荐文章于 2024-03-20 17:29:23 发布

筑凡

最新推荐文章于 2024-03-20 17:29:23 发布

阅读量3k

点赞数 4

分类专栏： HTML前端基础文章标签： HTML基础学习 HTML基础标签

本文链接：https://blog.csdn.net/qq_20179227/article/details/99630042

版权

HTML前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML的基础标签

HTML中有许多的标签，这一篇文章，就讲一下HTML的基础标签吧。
在做相关代码编写之前，我们要首先创建一个文件夹，该文件夹的符合正规的HTML页面开发的规格。

0815 //项目文件夹根目录
- css //项目页面所引用的css样式
- img //项目页面所引用的图片文件
- index.html //项目页面

这些文件是比较基本的文件，需要的话，之后还会在添加新的文件夹。
至于这些文件的具体含义，可以等之后的文章继续说明，现阶段我们能用到的就是项目根目录下的index.html文件，其他文件夹中都是空的。

创建好项目文件夹之后，我们打开VSCode，然后将我们创建的项目文件夹整个都拉进去。
VSCode加载项目文件夹
之后关掉欢迎页打开index.html文件后回事这样的情况
VSCode打开项目
一片空白，我们在其中写上html:5会弹出提示，按Tab键，编译器会自动生成如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中<title>Document</title>中的Document是网页的标题，更改之后，相应的网页标签标题也会更改。网页的标签标题就是这个

其中写文章-CSDN博客就是这个网页的标签标题。

接下来我们来介绍HTML的基础标签
首先要说的就是双标记的<h1>一级标题</h1>标签，我们在body中写下如下代码

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

在浏览器中打开便是这样的
标题标签展示
在使用方面，大家约定俗成是在一个页面中，h1只出现一次，h2-h3出现2-3次左右，h4-h6出现次数较少。一般情况下，此类标签中的文字是默认加粗的，且有上下外边距。

对于外边距，与之对应的还有内边距，这是页面标签的两个属性，大家在自己编写的网页上，使用F12，选中下方代码中的h1-h6标签之一，页面上就会出现框框，蓝色的就是标签内容所占区域，橘色为外边距区域。具体内容之后在做深入探究。

其次就是<p></p>p标签，也是一个双标记的标签。双标记就是该标签需要一个开始标签<p>和一个结束标签</p>构成，就像是c语言或java中的大括号，或者数学中的括号（）一样，要成对出现。
p标签也叫段落标签，主要是用来填写段落的，在其中是可以设置一些段落的属性，比如段落开头空几个字符或字节，行间距之类。

然后就是无序列表，其中序是序号的意思。其结构如下

    <ul>
        <li>这是第一个</li>
        <li>这是第二个</li>
        <li>这是第三个</li>
    </ul>

以ul标签作为标识，告诉系统，这之间的东西是无序列表，ul之间的li标签则是列表中的每一列。效果如下：
无序列表测试
无序列表默认带前面的黑色实心原点，在正常的使用中，我们会将它前面的实心原点样式去除，在li标签中嵌套一系列东西。下面这个就是一个例子。
基础ul的测试
这之中的蓝色区域就是一个ul的范围，每一列就是一个li，每一个li中都嵌套了一些东西。这之中涉及到浮动等之后的内容，等篇幅到后面的时候，就可以进行尝试了。

与无序列表相对应的还有有序列表，就是前边有序号的，这种标签，在正常页面里是基本上见不到的，有兴趣的同学可以试验一下，有序列表的格式为

    <ol>
        <li>这是第一个</li>
        <li>这是第二个</li>
        <li>这是第三个</li>
    </ol>

其中ol为有序列表的标记，li为有序列表中每一项的标记。

对于无序列表，我们可能会很常用来生成好些列，这个时候就有一个快捷方式。在VSCode中输入一下代码ul>li*6在弹出的提示中，按Tab键，自动生成含有六列的无序列表。如果你想在列表中加上一些东西，也可以试试ul>li*6>a[href="#"]之后在按Tab。

接着就是文字标签，也叫锚点。<a href="#">这是一个文字标签</a>
其中href后面的#为要跳转的位置，这个标签是自带下划线的，在页面上就是这样的
a标签测试
大家一看就知道，这个是什么了。一般用于页面跳转，a标签有一个属性是target，这个设置了此标签的跳转是在本网页进行，还是重新开启一个新的网页进行跳转。书写格式如下

    <a href="#" target="_blank">这是一个文字标签</a>    <!-- 在新的页面中打开 -->
    <a href="#" target="_self">这是一个文字标签</a>     <!-- 在本页打开 默认，可不写 -->

这里解释一下，在HTML中，为注释的意思。

正常情况下，如果将鼠标移到标签上，鼠标会改变图标，而如果想要同时将文字的颜色或者其他属性改变的话，要在样式中为a标签加上伪类hover，这个伪类表示鼠标悬停的时候触发。可以理解为一个函数，这个函数只有在鼠标悬停在本标签上的时候，才会触发。
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:hover{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="#" target="_blank">这是一个文字标签</a>    <!-- 在新的页面中打开 -->
    <a href="#" target="_self">这是一个文字标签</a>     <!-- 在本页打开 -->
</body>
</html>

因为样式较少，就在本项目页面中直接加样式，在HTML中加样式的方法是，在head标签汇总加上style标签。
hover中的内容表示要将a的哪些属性进行改变。我在这里将a标签的颜色进行改变，看一下效果
a标签
在hover样式中，也可以对标签文字的大小等属性进行更改，有兴趣的同学可以试一下。

接下来就是图片标签<img src="图片路径" />，这个标签是一个单标记的标签，一个标记就行了，其中src属性之后的东西就是你要引入的图片路径，这个路径有两种，一是相对路径，二是绝对路径。

相对路径：以本文件所在的文件夹为根目录，进行寻找。就比如我们建立的项目文件夹，如果在img文件夹里面有一个图片叫做1.jpg，我们想在index.html中使用img标签来引用它，我们只需要写上<img src="img/1.jpg" alt="风景画" />即可。相对路径的话，对于整个项目而言的可移植性较高。

绝对路径：以某一盘符或者HTTP协议为开始，本地的就用盘符，在网络上的就用HTTP协议开始。如果是在自己的电脑上，那么上面的路径就要这样写
C:/Users/wdx/Desktop/face/20190815-pm/img/1.jpg
其中20190815-pm就是我这次的项目文件夹名字，绝对路径的好处在于不管这个index.html文件在哪儿，都可以找到相关资源，但是不利于项目的整体移植。

在实际开发中，我们常用的是相对路径。

对于图片标签的其他属性，我再介绍如下几个
alt 表示如果标签所引用资源不存在，或者网络条件慢，或者其他因素导致资源为成功加载，这个时候会显示这个之中的文字。
比如我把项目文件img中的图片移除之后，就会这样
a标签测试02
width，heigh 用来设置图片的宽和高，在实际项目中我们一般都只设置其中一个值，这样浏览器会自动按照我们给定图片的尺寸自行缩放。

接下来跟大家介绍一个标签，这个标签是<div>这里是一大块内容</div>，这个标签一般用来把页面分块，比如你想把页面分为上下两块，那就用两个div来包裹。就比如

每一个div标签都是页面中的一块区域，比如
div标签02
这个图片中颜色变的区域，就是一个div块。在项目开发中我们会经常用到div标签，我们在一些网站中按F12也可以看到很多div标签。

筑凡

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML基础之基础标签

HTML的基础标签HTML中有许多的标签，这一篇文章，就讲一下HTML的基础标签吧。在做相关代码编写之前，我们要首先创建一个文件夹，该文件夹的符合正规的HTML页面开发的规格。0815 //项目文件夹根目录css //项目页面所引用的css样式img //项目页面所引用的图片文件index.html //项目页面这些文件是比较基本的文件，需要的话，之后还会在...
复制链接

扫一扫