前言

作为一名小白，我最近继续深入学习html的知识啦！在这里在进行一点点的小分享吧~

补充HTML基础知识

在第一天的笔记html基础知识，我们已经初步了解了部分基础的html的标签。那今天我们就先来继续认识下html的基本标签吧。

1.文章格式化标签

结合上次学习过的基本格式化标签，进行更为完善的整理：

<h1>-<h6>:标题标签，之前笔记有梳理过，效果就不一一展示了；
：段落标签，段落和段落之间有空隙；
 ：强制换行标签，换行之间没有空隙
或实现加粗功能
或字体倾斜
<del></del>或<s></s> 字体删除线
<ins></ins>或字体下划线
<hr/>：在html页面中创建水平线
：下标标签
：上标标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
    <h1>我是一级标签（默认左对齐）</h1>
    <h2>我是二级标签（默认左对齐）</h2>
    <h3>我是三级标签（默认左对齐）</h3>
    <h4>我是四级标签（默认左对齐）</h4>
    <h5>我是五级标签（默认左对齐）</h5>
    <h6>我是六级标签（默认左对齐）</h6>
    <p>这是一段测试文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
    <p>这是第二段测试文字啦啦啦啦<br/>啦</p>
    <p>加粗一下<strong>文字吧</strong></p>
    <p><em>倾斜</em>  <del>删除线</del>    <u>下划线</u></p>
    <p>上标：x<sup>2</sup></p>
    <p>下标：x<sub>2</sub></p>
    <hr/>
</body>
</html>

效果如下所示

微信图片_20220820102903.png

2.表格标签

即table标签。table标签创建一个表格，每个表格均有若干个<tr>标签定义，每行被分割为若干个单元格，由<td>标签定义

属性

边框：border；
表头：th；表格标题：caption

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
    <table border="1">
        <caption>表格</caption>
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </table>
</body>
</html>

效果如下所示：

微信图片_20220820103754.png

3.列表标签

常见的列表有三种：有序列表、无序列表、自定义列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于<li>标签

/*无序列表使用*/
    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
    </ul>

效果如下所示：

咖啡
牛奶

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

/*有序列表使用*/
    <ol>\
        <li>咖啡</li>
        <li>牛奶</li>
    </ol>

效果如下所示

咖啡
牛奶

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

/*自定义列表的使用*/
    <dl>
        <dt>咖啡</dt>
            <dd>焦糖玛奇朵</dd>
        <dt>牛奶</dt>
            <dd>热牛奶</dd>
    </dl>

浏览器显示如下：

咖啡: 焦糖玛奇朵
牛奶: 热牛奶

小结

以上就是本小白html基础的第二部分笔记记录啦！有什么错误的地方欢迎大家指正哦~！接下来的笔记会陆续写出来的啦~

HTML基础（2） | 青训营笔记

前言