html常用文本标签

最新推荐文章于 2024-07-17 17:17:48 发布

「已注销」

最新推荐文章于 2024-07-17 17:17:48 发布

阅读量1.3k

点赞数 26

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/2301_79422212/article/details/136181010

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

欢迎关注我的博客：

微信公众号：今晚穿越zhibo

CSDN：今晚穿越直播

原文链接：html常用文本标签

=========================================================================

一、段落和换行标签

段落标签

默认情况下段落标签与上下文存在16px的外边距，可以通过css的margin:0重置外边距为0。

默认情况下段落标签居左对齐，可以设置标签的align属性或者设置css来修改对齐方式，建议使用css。

段落之间是隔行换行的。

换行标签

br是单标签，希望文字比较紧凑，不换行隔行时可以使用。

连续两个br标签将产生一个空行。


<!DOCTYPE html>
<html>
  <body>
    这是第一行文本，没有设置标签<br><!--这里使用一个换行，与下一行之间没有隔行-->
    这是第二行文本，也没有设置标签
    <p>这是第三行文本，设置为一个段落，与上下文存在外边距</p><!--段落默认与上下文存在一行边距-->
    这是第四行文本，也没有设置标签
    <p align="left">这是第五行文本，设置为一个段落，与上下文存在外边距</p><!--左对齐，默认不写也是左对齐-->
    <p align="center">这是第五行文本，设置为一个段落，与上下文存在外边距</p><!--中间对齐-->
    <p align="right">这是第五行文本，设置为一个段落，与上下文存在外边距</p><!--右对齐-->
  </body>
</html>

效果如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        margin: 0; /* 设置p标签的外边距为0 */
      }
</style>
  </head>
  <body>
    这是第一行文本，没有设置标签<br>
    这是第二行文本，也没有设置标签
    <p>这是第三行文本，设置为一个段落，与上下文存在外边距</p>
    这是第四行文本，也没有设置标签
  </body>
</html>

效果如下：

二、标题字标签

标题字标签<hn></hn>，n可为1-6

标题默认加粗并与上下文存在外边距，可用margin样式重置默认边距。

标题默认居左对齐，与段落一样可使用align属性或者css样式修改对齐方式，建议使用css。


<!DOCTYPE html>
<html>
  <head>
    <style>
      h3 {
        text-align:center; /* 设置三级标题的对齐方式*/
      }
</style>
  </head>
  <body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4 align="left">四级标题</h4><!--设置四级标题左对齐方式-->
    <h5 align="center">五级标题</h5><!--设置五级标题中间对齐方式-->
    <h6 align="right">六级标题</h6><!--设置六级标题右对齐方式-->
  </body>
</html>

效果如下：

设置标题外边距为0


<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        margin: 0; /*设置一级标题外边距为0*/
      }
      h2 {
        margin: 0; /*设置二级标题外边距为0*/
      }
</style>
  </head>
  <body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h1>一级标题</h1>
  </body>
</html>

效果如下：

三、strong标签

strong标签加重语气强调文本，显示加粗效果。


<!DOCTYPE html>
<html>
  <body>
    <p>这是一个正常的段落语句</p>
    <p><strong>这是一个显示加重语气的段落语句</strong></p>
  </body>
</html>

效果如下：

四、em标签

em标签加重语气强调文本，显示倾斜效果。语气上比strong标签轻。


<!DOCTYPE html>
<html>
  <body>
    <p>这是一个正常的段落语句</p>
    <p><em>这是一个显示倾斜效果加重语气的段落语句</em></p>
  </body>
</html>

效果如下：

五、span标签

span标签是装饰性标签，通常用于设置文本的视觉差异。


<!DOCTYPE html>
<html>
  <head>
    <style>
      span {
        color: red; /*这是用css设置span标签显示红色*/
      }
</style>
  </head>
  <body>
    <p>这是一个<span>这里使用红色显示</span>的段落语句</p>
  </body>
</html>

效果如下：

六、文本显示空格

通常在html中输入连续多个空格，在浏览器上只保留一个空格，其余空格会自动截掉。

在网页添加多个空格使用连续的【 】。

不同的浏览器中空格显示宽度不一样，最好用css来设置空格。


<!DOCTYPE html>
<html>
  <head>
    <style>
</style>
  </head>
  <body>
    <p>这是一个    正常的段落语句</p><!--这是手动输入四个空格大小，浏览器上显示为一个空格-->
    <p>这是一个&nbsp;&nbsp;&nbsp;&nbsp;正常的段落语句</p><!--这是用&nbsp;输入四个空格大小，浏览器上显示为四个空格-->
  </body>
</html>

效果如下：

使用css来设置段落头的缩进。


<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-indent: 2em; /*设置段落头缩进两字符*/
      }
</style>
  </head>
  <body>
    <p>这是一个    正常的段落语句</p><!--这是手动输入四个空格大小，浏览器上显示为一个空格-->
    <p>这是一个&nbsp;&nbsp;&nbsp;&nbsp;正常的段落语句</p><!--这是用&nbsp;输入四个空格大小，浏览器上显示为四个空格-->
  </body>
</html>

效果如下：

七、特殊字符输入

特殊字符语法：&实体名字;


<!DOCTYPE html>
<html>
  <body>
    这是一个特殊字符&quot;<br>
    这是一个特殊字符&amp;<br>
    这是一个特殊字符&lt;<br>
    这是一个特殊字符&gt;<br>
    这是一个特殊字符&middot;<br>
    这是一个特殊字符&times;<br>
    这是一个特殊字符&sect;<br>
    这是一个特殊字符&cent;<br>
    这是一个特殊字符&yen;<br>
    这是一个特殊字符&pound;<br>
    这是一个特殊字符&copy;<br>
    这是一个特殊字符&reg;<br>
    这是一个特殊字符&trade;<br>
  </body>
</html>

效果如下：

八、注释

注释语法：


<!DOCTYPE html>
<html>
  <body>
    <!-- 这是一个注释，在网页不显示 -->
  </body>
</html>

「已注销」

关注

26
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
html常用文本标签

默认情况下段落标签居左对齐，可以设置标签的align属性或者设置css来修改对齐方式，建议使用css。默认情况下段落标签与上下文存在16px的外边距，可以通过css的margin:0重置外边距为0。标题默认居左对齐，与段落一样可使用align属性或者css样式修改对齐方式，建议使用css。通常在html中输入连续多个空格，在浏览器上只保留一个空格，其余空格会自动截掉。br是单标签，希望文字比较紧凑，不换行隔行时可以使用。标题字标签<hn></hn>，n可为1-6。段落标签
复制链接

扫一扫