本人所使用的编辑器为

vscode

，默认浏览器为

chrome

。

头部标签与属性

上篇文章我有说过html主体部分的构成；主要是<head>&<body>部分。有不懂的可以参考阅读我的上一篇文章；

HTML——基本知识与P标签的简单显示

https://blog.csdn.net/qq_51869518/article/details/125430936?spm=1001.2014.3001.5501

头部标签与属性

简单介绍一下html头部标签和标签的属性：

<head>
    <!-- meta标签 charset属性设置字符集 -->
    <meta charset="UTF-8">
    <!-- http-equiv属性值X-UA-Compatible告诉IE8采用什么版本去渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- name属性设置浏览窗口的样式 由content的值来设置宽高、缩放比例等之类 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title标签设置网页标题 -->
    <title>Document</title>
    <!-- link标签可以链接外部css层叠样式表 -->
    <link rel="stylesheet" href="">
    <!-- 链接外部脚本文件 -->
    <script src=""></script>
    <!-- 设置页面链接或源文件的基准URL和链接的目标 -->
    <base href="">
</head>

以上代码部分就是我个人对于头部标签和属性的一些说明和解释，但只是部分标签的说明。样式标签<style>和脚本标签<script>标签也可以在头部去引用。但是用的不多且不建议这样使用，所以不在此处做过多的说明和介绍。

可能对于<base>标签可能会陌生，下面我就简单举个例子来实际体会一下这个标签的用法和作用。先上代码：

<!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>Document</title>
    <base href="http://localhost:52330/demo1/" target="_blank">
</head>
<body>
    <div align="center">
        <a href="demo1.html">古诗</a>
    </div>
    </body>
</html>

效果展示图：

刚开始显示的是一个带有链接的古诗的页面，当我单击后在新的标签页打开了<base src=””>路径下的网页。

<base>标签为页面上的所有链接规定默认地址或默认目标。浏览器会从src属性后的 URL 中提取相应的元素来填写相对 URL,构成完整的请求地址。<base>标签会更改 <a>、<img>、<form> 标签中的 URL。当然在日常使用的过程中很少会用到该标签。此部分内容了解即可。

标题标签

顾名思义，该标签就是用于在你设计的页面上显示标题。关于概念部分不做多余的赘述，如果需要了解更多可以参考以下这篇文章：

HTML系列之标题标签h

https://blog.csdn.net/weixin_62277266/article/details/120800181?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165605074716782248591535%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165605074716782248591535&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-120800181-null-null.142%5Ev21%5Epc_rank_34,157%5Ev15%5Enew_3&utm_term=%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE&spm=1018.2226.3001.4187

多话不说，我们先动手操作看效果：

<body>
    <h1>这是h1文字大小</h1>
    <h2>这是h2文字大小</h2>
    <h3>这是h3文字大小</h3>
    <h4>这是h4文字大小</h4>
    <h5>这是h5文字大小</h5>
    <h6>这是h6文字大小</h6>
    <p>这是p文字大小</p>
</body>

显示效果：

以上就是各级标签的写法和实际的展示效果，快动手尝试一下吧！

特殊字符与img标签

特殊字符

以下图为我在课程资料上获取的截图；

是常用特殊字符的源代码和显示结果。

img标签

img标签部分的知识可以参考以下的内容；

HTML基础——img标签

https://blog.csdn.net/Veronnit/article/details/118463090?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165604912916781683962544%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165604912916781683962544&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-118463090-null-null.142%5Ev21%5Epc_rank_34,157%5Ev15%5Enew_3&utm_term=img%E6%A0%87%E7%AD%BE&spm=1018.2226.3001.4187

代码实现

<!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>Document</title>
</head>
<body>
    &copy; &amp; &gt;&#8226;&lt;<br>
    <img src="./image/jk女孩.jpg" alt="jk女孩" width="600px" height="400px">
</body>
</html>

效果展示：

实际应用

根据以上内容在对昨天的诗词做进一步的修改；

<!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 align="center"><b><img src="../image/girl.png">登科后</b></h1>
    <!--使用h1标签 并用相对路径添加图片并设置居中显示-->

    <!-- 使用特殊字符在孟郊中间添加空格 -->
    <p align="center">孟&nbsp;郊<br/></p>

    <p align="center">
    昔日龌龊不足夸，今朝放荡思无涯。<br/>
    春风得意马蹄疾，一日看尽长安花。<br/>
    </p>

    <!--alt未能正常加载显示图片内容-->
    <p align="center"><img src="http://localhost:52330/image/%E6%83%8A%E6%B6%9B.jpg" width="500px" title="惊涛" alt="剑客"></p>
    
    <!-- 画横线单标签hr -->
    <hr/>

    <!-- p标签显示居中设置 -->
    <!-- 特殊字符添加图标 -->
    <p align="center">
    &copy;2022 地球村 &amp; 你喜欢吃桃吗？
    &lt;中国&#8226;武汉&gt;
    </p>
</body>
</html>

具体什么效果，大家可以粘贴代码运行看一下哦。

但是要记得更改<img>标签的src属性的URL。设置你希望放到网页上的图片。

有什么问题大家可以在评论区提问或指出哦！

原文链接：https://blog.csdn.net/qq_51869518/article/details/125442534

头部标签与属性

标题标签

特殊字符与img标签

特殊字符

img标签

代码实现

实际应用

你可能也喜欢