HTML HTML 标题 (stage1-13)

r囧r小猫 2022-06-02 01:45 187阅读 0赞

# 基础篇-HTML 标题 #

#### 1.标题 ####

标题（Heading）是通过 `<h1> - <h6>` 标签进行定义的.  
`<h1>` 定义最大的标题。 `<h6>` 定义最小的标题。

**实例：**

<h1>这是一个标题。</h1>
    <h2>这是一个标题。</h2>
    <h3>这是一个标题。</h3>

注释: 浏览器会自动地在标题的前后添加空行

#### 2.标题很重要 ####

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。  
搜索引擎使用标题为您的网页的结构和内容编制索引。  
因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的。  
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

#### 3.HTML 水平线 ####

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

实例：

<p>这是一个段落。</p>
    <hr>
    <p>这是一个段落。</p>
    <hr>
    <p>这是一个段落。</p>

#### 4.HTML 注释 ####

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。  
注释写法如下:  
**实例**

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。。

#### 5.HTML 提示 - 如何查看源代码 ####

你是否看过一些网页然后惊叹它是如何实现的的。  
如果想找到其中的奥秘，只需要单击右键，然后选择”查看源文件”（IE）或”查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

#### 6.HTML 标签参考手册 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;html&gt;</code></td> 
   <td align="center">定义 HTML 文档</td> 
  </tr> 
  <tr> 
   <td><code>&lt;body&gt;</code></td> 
   <td align="center">定义文档的主体</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h1&gt; - &lt;h6&gt;</code></td> 
   <td align="center">定义 HTML 标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;hr&gt;</code></td> 
   <td align="center">定义水平线</td> 
  </tr> 
  <tr> 
   <td><code>&lt;!--...--&gt;</code></td> 
   <td align="center">定义注释</td> 
  </tr> 
 </tbody> 
</table>

**标题大小与字体大小的关系**  
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<h1>这是1号标题</h1>
    <font size="6">这是6号字体文本</font>
    
    <h2>这是2号标题</h2>
    <font size="5">这是5号字体文本</font>
    
    <h3>这是3号标题</h3>
    <font size="4">这是4号字体文本</font>
    
    <h4>这是4号标题</h4>
    <font size="3">这是3号字体文本</font>
    
    <h5>这是5号标题</h5>
    <font size="2">这是2号字体文本</font>
    
    <h6>这是6号标题</h6>
    <font size="1">这是1号字体文本</font>

运行结果：  
![这里写图片描述][SouthEast]

今天到这里哦～～

[SouthEast]: /images/20220602/57b577807a704ccfa3cf72b44d705389.png