【HTML笔记（一）】HTML基础笔记

HTML基础

超文本标记语言（英语：HyperText Markup Language，简称：HTML），一种编辑web网页结构和内容的标记语言。

什么是HTML

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

HTML元素

通常情况下，HTML元素包含开始标签、结束标签和内容，这三个条件同时满足时才被认为是一个完整的元素。有的元素可能还包含有属性，属性用于对元素的分类，便于之后的修改操作。

标题标签

<h1>标题文本</h1>(数字越大，字体越小)

效果如下所示：（标签为：h1至h5）

---

文本标签

<p>文本<br>内容</p>（不同P标签之间会自动换行，表示不同段落；br标签用于换行，且没有配对标签）

效果如下：

文本
内容

---

格式化内容

<b>文字内容</b>（文字加粗）
<i>文字内容</i>（文字斜体）
<u>文字内容</u>（文字加下划线）

效果如下所示：
文字内容（文字加粗）
文字内容（文字斜体）
文字内容（文字加下划线）

---

图片信息

<img src="图片路径" width="图像宽度" height="图像高度" alt="描述文本">

---

链接

<a href="网页链接" target="链接打开方式">文本信息</a>(标签之间加文本显示文本，什么都没有直接显示原始网页链接)

效果如下：
哔哩哔哩

---

容器

<div>
    <p>文本内容</p>
    <a href="网页链接">文本信息</a>
</div>

<span>
    <p>文本内容</p>
    <a href="网页链接">文本信息</a>
</span>

效果如下：

–div

文本内容

文本信息

–span

文本内容

文本信息

–

容器的作用：方便对多个子元素进行批量化处理
区别：dev为块级元素，一行只能有一个dev元素，span为内联元素，同一行允许有多个span元素；

---

列表标签

<ol>
    <li>文本内容</li>
    <li>文本内容</li>
    <li>文本内容</li>
</ol>

效果如下：

1. 文本内容
2. 文本内容
3. 文本内容

ol为有序列表，列表元素会自动分配数字；li为列表元素

<ul>
    <li>文本内容</li>
    <li>文本内容</li>
    <li>文本内容</li>
</ul>

效果如下：

• 文本内容
• 文本内容
• 文本内容

ul为无序列表，无序列表的元素不会分配数字，而是点或者小横杠

---

表格标签

<table border="边框数字">
    <thead>
        <tr>
           <td>表头1</td>
           <td>表头2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>元素a11</td>
           <td>元素a12</td>
        </tr>
        <tr>
           <td>元素a21</td>
           <td>元素a22</td>
        </tr>
    </tbody>
</table>

效果如下：

表头1	表头2
元素a11	元素a12
元素a21	元素a22

其中，thead定义表头标签，tbody定义表格元素，tr定义表格行，td为表格元素

---

class属性

<p class="content(类名称)">明月几时有</p>
<p class="content(类名称)">把酒问青天</p>
<p class="review(类名称)">hello world！</p>

class属性可以用于所有的文本信息上，有助于我们分类区别文本消息的类型，比如评论和文章分别用review和content区别

---

嵌套元素

<p>我的猫是<strong>非常</strong> 可爱的。</p>

效果如下：

我的猫是非常 可爱的。

嵌套元素必须注意开始标签和结束标签的顺序，本例首先使用 <p> 标签，然后是 <strong> 标签，
因此要先结束 <strong> 标签，最后再结束 <p> 标签。这里将格式化中的文本加粗嵌套在文本标签中的效果，同理可以用于其他你想要的场景中。

---

空元素

不包含任何内容的元素称为空元素。比如：

<img src="图片路径" width="图像宽度" height="图像高度" alt="描述文本">

本元素包含两个属性，但是并没有 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。