HTML||标题，段落，文本格式化

亦凉 2021-11-04 12:12 477阅读 0赞

# 一、HTML 标题 #

## 标题 ##

HTML的标题是通过<h1>~<h6>来定义的，<h1>是HTML里边最大的标题，<h6>为最小的标题，在浏览器显示时，他们是默认加黑的，通过属性配置可以改变用户需求。

<h1>蔡徐坤</h1>
    <h2>唱跳rap篮球</h2>
    <h3>只因你太美</h3>
    <h4>背带裤</h4>
    <h5>律师函</h5>
    <h6>哔哩哔哩</h6>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70][]

注意：标题标签仅仅只是用于标题，不要出于加粗字体或者放大字体而使用标题标签！！！

## HTML里的水平线 ##

<hr> 标签在 HTML 页面中创建水平线。  
hr 元素可用于分隔内容。

<h1>蔡徐坤</h1>
    		<hr />
    		<h2>唱跳rap篮球</h2>
    		<hr />
    		<h3>只因你太美</h3>
    		<hr />
    		<h4>背带裤</h4>
    		<hr />
    		<h5>律师函</h5>
    		<hr />
    		<h6>哔哩哔哩</h6>
    		<hr />

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1][]

## HTML 注释 ##

注释的格式为：

### 小结 ###

[<html>][html]定义 HTML 文档

[<body>][body]定义文档的主体

[<h1> - <h6>][h1_ - _h6]定义 HTML 标题

[<hr>][hr]定义水平线

[][--...--]定义注释

# 二、HTML 段落 #

## HTML 段落 ##

段落是通过 <p> 标签定义的

<h1>蔡徐坤</h1>
    <p>蔡徐坤被黑原因：部分网友认为蔡徐坤的妆容太浓了，对他的穿衣风格不能接受。</p>
    <p>蔡徐坤被黑原因：每个人都有各自的看法，虽然蔡徐坤遭到了质疑声，但有很多人还是非常支持他的。</p>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2][]

## 段落换行 ##

在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

<h1>蔡徐坤</h1>
    <p>蔡徐坤被黑原因：<br>部分网友认为蔡徐坤的妆容太浓了，<br>对他的穿衣风格不能接受，<br>认为他是流量明星，没有特殊的才艺，<br>每个人都有各自的看法，<br>虽然蔡徐坤遭到了质疑声，但有很多人还是非常支持他的。</p>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3][]

### 小结： ###

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-p.html" rel="nofollow">&lt;p&gt;</a></td> 
   <td>定义一个段落</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-br.html" rel="nofollow">&lt;br&gt;</a></td> 
   <td>插入单个折行（换行）</td> 
  </tr> 
 </tbody> 
</table>

# 三、HTML 文本格式化 #

## HTML 格式化标签 ##

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：**粗体** or *斜体，* 这些HTML标签被称为格式化标签

注：通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-b.html" rel="nofollow">&lt;b&gt;</a></td> 
   <td>定义粗体文本</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-em.html" rel="nofollow">&lt;em&gt;</a></td> 
   <td>定义着重文字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-i.html" rel="nofollow">&lt;i&gt;</a></td> 
   <td>定义斜体字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-small.html" rel="nofollow">&lt;small&gt;</a></td> 
   <td>定义小号字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-strong.html" rel="nofollow">&lt;strong&gt;</a></td> 
   <td>定义加重语气</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-sub.html" rel="nofollow">&lt;sub&gt;</a></td> 
   <td>定义下标字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/html/m/tags/tag-sup.html" rel="nofollow">&lt;sup&gt;</a></td> 
   <td>定义上标字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-ins.html" rel="nofollow">&lt;ins&gt;</a></td> 
   <td>定义插入字</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-del.html" rel="nofollow">&lt;del&gt;</a></td> 
   <td>定义删除字</td> 
  </tr> 
 </tbody> 
</table>

<b>这个文本是加粗的</b>
    
    <br />
    
    <strong>这个文本是加粗的</strong>
    
    <br />
    
    <big>这个文本字体放大</big>
    
    <br />
    
    <em>这个文本是斜体的</em>
    
    <br />
    
    <i>这个文本是斜体的</i>
    
    <br />
    
    <small>这个文本是缩小的</small>
    
    <br />
    
    这个文本包含
    <sub>下标</sub>
    
    <br />
    
    这个文本包含
    <sup>上标</sup>

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4][] ##

## 文本格式标签 ##

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-abbr.html" rel="nofollow">&lt;abbr&gt;</a></td> 
   <td>定义缩写</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-address.html" rel="nofollow">&lt;address&gt;</a></td> 
   <td>定义地址</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-bdo.html" rel="nofollow">&lt;bdo&gt;</a></td> 
   <td>定义文字方向</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-blockquote.html" rel="nofollow">&lt;blockquote&gt;</a></td> 
   <td>定义长的引用</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-q.html" rel="nofollow">&lt;q&gt;</a></td> 
   <td>定义短的引用语</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-cite.html" rel="nofollow">&lt;cite&gt;</a></td> 
   <td>定义引用、引证</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-dfn.html" rel="nofollow">&lt;dfn&gt;</a></td> 
   <td>定义一个定义项目。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70]: /images/20211104/f8032fd888d34d10afccf8767dc774b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1]: /images/20211104/04b5b34d6ab541cfaf5ceb140c307956.png
[html]: https://www.runoob.com/tags/tag-html.html
[body]: https://www.runoob.com/tags/tag-body.html
[h1_ - _h6]: https://www.runoob.com/tags/tag-hn.html
[hr]: https://www.runoob.com/tags/tag-hr.html
[--...--]: https://www.runoob.com/tags/tag-comment.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2]: /images/20211104/cf2bbbda9456482091066564ec01a11b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3]: /images/20211104/72edbff00c824244874688cd13e0aedc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4]: /images/20211104/d6bff690bd1d4713af87617164c42f9b.png