html 排版标签、文本格式化标签、图像标签、链接标签、注释标签、路径、锚点定位、base文本标签、pre标签、特殊字符

本文链接：https://blog.youkuaiyun.com/weixin_52690585/article/details/115845548

这篇博客详细介绍了HTML的基础样式标签，包括标题、换行、div与span、图像、链接、注释、路径、锚点定位、base标签、预格式化文本pre以及特殊字符的使用方法，帮助读者掌握HTML页面布局和文本格式化的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本样式标签

一、排版标签

标签名	定义	说明
`<hx> </hx>`	标题标签	作为标题是使用，并且根据重要性递减
`<p> </p>`	段落标签	把HTML文档分割为若干段落
`<hr>`	水平线标签
`<br />`	换行标签
`<div></div>`	div标签	布局，一行只能放一个div
`<span></span>`	span标签	布局，一行可以放好多span

标题标签:

<h1>  </h1>
...
<h6>  </h6>

换行标签：

英文缩写：break

<br/>

div 和 span 标签：

div标签会独占一行，span标签不会。

div是一个容器级别的标签，span是一个文本级别的标签

容器级别标签可以嵌套所有标签。

文本级别标签只可以嵌套文字/超链接/图片

水平线标签：

<hr> 水平线
<hr width="70%" height="10px" color="blue" align="center" /> 设置水平线样式

删除线

<strike> </strike>

二、文本格式化标签

标签	表示效果
`<b></b>` `<strong></strong>`	加粗
`<i></i>` 和`<em></em>`	倾斜
`<s></s>`和`<del></del>`	删除线
`<u></u>`和`<ins></ins>`	下划线

例
代码如下

 <body>
    <font size="5">    
    <p><b>静夜思</b></p>
    <strong><u>李白</u></strong>
    <br>
    <i>床前明月光</i>
    <br>
    <em>疑是地上霜</em>
    <br>
    <s>巨头</s>举头望明月
    <br>
    <u>低头思故乡</u>
    </font>
 </body>

三、图像标签img

img标记属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

<img src=" " alt="" >

四、链接标签

外部链接
<a href= "https://baidu.com" > 文本 </a>
内部链接
<a href="demo.html"> 文本 </a>

如果我们想在新窗口中打开链接，使用 target="_blank"

<a href="http://www.baidu.com" target="_blank" >百度一下</a>

属性	作用
href	用于指定链接目标的 ur l地址，(必须属性)当为标签应用 href 属性时，它就具有了超链接的功能
target	用于指定链接的打开方式，其具有self和blank两种，其中 _self 为默认值，_blank为在新窗口中的打开方式。

五、注释标签

<!-- 我是注释 -->

快捷键 ctrl+/ 或ctrl + shift + /

六、路径

1.相对路径

路径分类	符号	说明
同一级路径	" "	同一级路径，引用的时候直接写图片的名字可以，如`<img src="time.gif" />`
下一级路径	“/”	图像文件位于HTML文件同级文件夹下(例如文件夹名称为：images)如`<img src="imgs/baidu.gif" />`
上一级路径	“…/”	在文件名之前加入"…/"，如果是上两级，则需要使用"…/…/"，以此类推，如`<img src="../baidu.gif /">`

2.绝对路径

绝对路径以web站点根目录为参考基础的目录路径，之所以称之为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

“F:\奥特曼”，或完整的网络地址例如" https://img-home.csdnimg.cn/images/20201124032511.png"

绝对路径使用较少，简单理解下就可以

七、锚点定位

通过创建锚点链接，用户能够快速定位到目标内容
常用来制作目录和超链接

1. 使用相应的id名称标注跳转目标的位置。

	<h3 id="two">文本</a>

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）

八、base文本标签

base可以设置整体链接的打开状态
base写道 head 标签之间
把所有的链接都默认添加target="_blank"

如下所示

九、预格式化文本pre标签

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等

有了这个标签，里面的文字会按照我们书写的模式显示，不需要段落和换行标签了。

十、特殊字符：空格、大小于号、人民币…

如下表

特殊字符	描述	字符的代码
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`&plusmn`
✖	乘号	`times;`
➗	除号	`divide;`
²	平方(上标2)	`&sup2`
³	立方(上标3)	`&sup3`
	空格符	` `