py系统学习笔记：第七阶段：网页编程基础：第一章：HTML5：9.标签之文本

• 目录

  常见的文本标签

  标签

  标签

  标签

  标签

  标签

  标签

  文本标签与段落标签的区别

  实际案例

  实例

  实例

  实例

  实例

  实例

  实例

  整体代码：

  相关的拓展：如何区分块元素与行内元素（内联元素）

  相关定义

  内联元素和块级元素的区别

  常见的内联元素和块级元素

  常见块级元素

  常见的内联元素

  实际案例：

  ---

• 常见的文本标签

  • <em>标签

    • 定义着重文字

  • <b>标签

    • 定义粗体文本

  • <i>标签

    • 定义斜体字

  • <strong>标签

    • 定义家中语气

  • <del>标签

    • 定义删除字

  • <span>标签

    • 元素没有特定含义（一般用作内联元素的设置中，详细看本文的拓展）

• 文本标签与段落标签的区别

  • 段落代表一个文本，而文本标签一般是指文本词汇。简而言之：文本标签常常出现在段落标签之内，用于定义个别字的样式

• 实际案例

  • <em>实例

    • 代码：

      • <em>你只管努力，</em>

  • <b>实例

    • 代码

      • <b>剩下的交给时间。</b>

  • <i>实例

    • 代码

      • <i>如今我努力奔跑，</i>

  • <strong>实例

    • 代码

      • <strong>不过是为了追上</strong>

  • <del>实例

    • 代码

      • <del>那个曾经被寄予厚望的</del>

  • <span>实例

    • 代码

      • <span>自己</span>

  • 整体代码：

    • <p><em>你只管努力，</em><b>剩下的交给时间。</b><i>如今我努力奔跑，</i><strong>不过是为了追上</strong><del>那个曾经被寄予厚望的</del><span>自己</span></p>

       
      • 效果展示：
        • 

• <span>相关的拓展：如何区分块元素与行内元素（内联元素）

  • 相关定义

    • HTML5出现之前，元素按照块级元素和内联元素来区分。而在HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区分。
    • 分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语 句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。
    • 元素不属于任何⼀个类别，被称为穿透的， 元素可能属于不止⼀个类别，称为混合的
    • 以上的定义对于初学者较为难懂，故可继续按照块元素和内联元素做区分。

  • 内联元素和块级元素的区别

    •  

  • 常见的内联元素和块级元素

    • 常见块级元素

      • div、form、h1~h6、hr、p、table、ul、等

    • 常见的内联元素

      • 因有可以设置大小有效的元素，故此需再细分为：行内元素与行内块级元素
        • 常见行内元素

          • a、b、em、i、span、strong等

        • 行内块级元素（特点：不换行、能够识别宽高）

          • button、img、input等

    • 实际案例：

      • 对比行内元素与块级元素
        • 代码：

          •     <h1>标题</h1>
                <p>段落</p>
                <ul>
                    <li>列表</li>
                    <li>列表</li>
                </ul>
            
                <a href="#">超链接</a>
                <span>内容</span>
                <em>注重语气</em>

        • 实际效果：
          • 
        • 相关解释：
          • 在以上的效果中可以看出，h1、p、ul这些块级元素独占一行，且可包含其他元素。（至于宽度与高度的特性可尝试设定table来进行验证）
          • a、span、em这些元素，不会独占一行，只会占据自身的一部分空间，且内部并无其他的块级元素
      • 对比行内元素与行内块级元素
        • 代码：

          •     <em>注重语气</em>
                <em width="50000">注重语气</em>
            
                <img width="300" src="dangqianmuluxia.jpg" alt="">
                <img src="dangqianmuluxia.jpg" alt="">

        • 效果：
          • 
        • 相关解释：
          • 由以上效果看出，行内元素的em中两个注意语气并不会因为width的设定而发生变化
          • 但后者的两个图片，因img行内块级元素的特性，则受到width的影响而出现了变化