HTML文本格式化_列表_表格_标签：

HTML文本格式化标签：

下标：sub

上标：sup

删除线：del

下划线：ins

倾斜：em

示例：

H<sub>12</sub>O这是水 CO<sub>2</sub>这是二氧化碳
<hr>
O<sub>2</sub>这是氧气
<hr>
S<sup>2-</sup>这是负二价的硫离子 H<sup>+</sup>这是氢离子
<hr>
N<sup>3-</sup>这是负三价的氮离子
<hr>
<del>这是我删除的东西</del>
<ins>这是我重新添加的东西</ins>

效果 :

H₁₂O这是水 CO₂这是二氧化碳

---

O ₂这是氧气

---

S ^2-这是负二价的硫离子 H ⁺这是氢离子

---

N ^3-这是负三价的氮离子

---

这是我删除的东西 这是我重新添加的东西

图片标签：

注意点：

如果只设置width或height中的一个,另一个没设置，那么图片就会自动等比例缩放(此时图片不会变形)
如果同时设置了width和height两个，若设置不当此时图片可能会变形

<img src="../存放图片/1.png" alt="如果图片加载不出来就显示我" title="当鼠标悬停在图片上的时候会显示我">
<hr>
<img src="../存放图片/国旗.jpg" width="400" height="300">

路径：

上一级：…/ 这里是两个点

下一级：/

当前：./

音频标签：

src:音频的路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放

注意点：

音频标签目前支持三种格式: MP3、Wav、 Ogg

第一行<hr>
<audio src="../音频和视频素材/1.mp3"></audio>
<hr>第二行
<audio src="../音频和视频素材/1.mp3" controls></audio>
<hr>第三行
<audio src="../音频和视频素材/1.mp3" controls autoplay></audio>
<hr>第四行
<audio src="../音频和视频素材/1.mp3" controls autoplay loop></audio>

视频标签：

src:音频的路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放

注意点：

视频标签目前支持三种格式: *MP4、WebM、 Ogg

第一行<hr>
<video src="../音频和视频素材/yundonghui.mp4"></video>
<hr>第二行
<video src="../音频和视频素材/yundonghui.mp4" controls></video>
<hr>第三行
<video src="../音频和视频素材/yundonghui.mp4" controls autoplay></video>
<hr>第四行
<video src="../音频和视频素材/yundonghui.mp4" controls autoplay loop></video>

超链接：

href：跳转地址

target:

_self:默认值，在当前窗口中跳转(覆盖原网页)
_blank:在新窗口中跳转(保留原网页)

<a href="./1.html">进入1链接</a>
<br>
<a href="https://www.baidu.com">进入2链接</a>
<br>
<a href="#">进入空链接</a>
<br>
<a href="./1.html" target="_blank">进入1链接_blank</a>
<br>
<a href="./1.html" target="_self">进入1链接_self</a>

列表标签：

显示特点:
列表的每一项前默认显示圆点标识 ●
注意点:
ul,ol标签中只允许包含li标签
li标签可以包含任意内容

无序列表：ul
有序列表：ol

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

效果：

• 1
• 2
• 3

1. 1
2. 2
3. 3

自定义标签：

dl：表示自定义列表的整体,用于包裹dt/dd标签
dt：表示自定义列表的主题
dd：表示自定义列表的针对主题的每一项内容，前面默认会缩进

注意点:

1. dI标签中只允许包含dt/dd标签
2. dt/dd标签可以包含任意内容

示例：

<dl>
    <dt>我是你哥</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>

效果：

我是你哥

1

2

3

4

表格：

table:表格整体，可用于包裹多个tr

tr:表格每行，可用于包裹th,td

td:表格单元格，可用于包裹内容

注意点:
实际开发时针对于样式效果推荐用CSS设置

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行， 默认内部文字加粗并居中显示

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

示例：

<table border="1" width="400" height="600">
    <Caption><strong>学生调查</strong></Caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>小龙</td>
        <td>男</td>
        <td>20</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>女</td>
        <td>18</td>
    </tr>
</table>

效果：

学生调查

姓名	性别	年龄
小龙	男	20
小红	女	18

结构标签:

场景:让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰

注意点:

• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

<table border="1" width="400" height="600">
    <Caption><strong>学生调查</strong></Caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小龙</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td>可以</td>
            <td>可以</td>
        </tr>
    </tfoot>
</table>

合并单元格：

合并单元格步骤:

1. 明确合并哪几个单元格

   • 通过左上原则，确定保留谁删除谁

   • 上下合并→只保留最上的，删除其他

   • 左右合并-→只保留最左的，删除其他

2. 给保留的单元格设置:跨行合并(rowspan) 或者跨列合并(colspan)

   属性名	属性值	说明
   rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
   colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

   注意点:
   只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨: thead，tbody，tfoot)

示例1:

<table border="1" width="400" height="600">
    <Caption><strong>学生调查</strong></Caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小龙</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td>可以</td>
            <td>可以</td>
        </tr>
    </tfoot>
</table>

效果1：

学生调查

姓名	性别	年龄
小龙	男	20
小红	女	18
总结	可以	可以

示例2：

html
   <table border="1" width="400" height="600">
       <Caption><strong>学生调查</strong></Caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>性别</th>
               <th>年龄</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>小龙</td>
               <td rowspan="2">男</td>
               <td>20</td>
           </tr>
           <tr>
               <td>小红</td>
               <td>18</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>总结</td>
               <td colspan="2">可以</td>
           </tr>
       </tfoot>
   </table>

效果2：

学生调查

姓名	性别	年龄
小龙	男	20
小红		18
总结	可以