HTML标签-EW帮帮网

标签是在尖括号内包裹的，我们自定义的内容位于开始标签和结束标签之间。结束的标签前面有一个 / ，HTML使用标签来控制内容的位置，以及基本的显示。
双标签是会成对出现的标签，例如: <strong>加粗</strong>
单标签是只有开始标签，例如：<hr>, 可以插入一个水平线。
如果为了兼容XML，可以将单标签写为 <hr />, 这样可以兼容 XML

HTML 的骨架

一个基本的HTML骨架如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<html>：定义整个HTML文档的根元素。
<head>：包含文档的元数据，如链接、脚本、样式等。
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
<body>：包含网页的可见内容。

标签之间的关系

嵌套关系

嵌套关系，例如，在<div>标签中嵌套<p>标签，<p>标签是<div>标签的子标签，<div>标签是<p>标签的父标签。

<div>
    <p>这是一个段落</p>
</div>

并列关系

例如，<p>标签和<a>标签是并列关系，它们是并列出现的，它们之间没有层级关系。

<p>这是一个段落</p>
<a href="#">这是一个链接</a>

注释

HTML中的注释用于解释代码，以便于阅读和理解。注释的格式是：

<!-- 这是一个注释 -->
    <p>这是一个段落</p>
    <a href="#">这是一个链接</a>
    <!-- 这是一个注释 -->

标题标签

HTML中的标题标签用于创建标题，它们是<h1>到<h6>，其中<h1>是最大的标题，<h6>是最小的标题。

标题会独占一行，并且会根据其级别不同而改变大小，并且标题会进行加粗。

一般情况下，h1标签在一个页面中只出现一次，作为页面内容的标题或者logo。

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

段落标签

段落标签是<p>，它用于将文本内容分组，并使其具有段落样式，每个段落之间拥有空白间隙。段落默认会进行自动换行。例如：

<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
<p>另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落另一个段落</p>

换行标签(单标签)

换行标签是<br>，它用于在文本中插入一个换行符，不会创建新的段落。例如：

<p>这是一个段落<br>这是另外一个段落</p>

水平线标签(单标签)

水平线标签是<hr>，它用于在文本中插入一个水平线，不会创建新的段落。例如：

<p>这是一个段落</p>
<hr>
<p>这是另外一个段落</p>

加粗标签

加粗标签是<strong>，它用于将文本内容加粗，不会创建新的段落。例如：

<p>这是一个段落</p>
<strong>这是加粗的文本</strong>
<p>这是另外一个段落</p>

斜体标签

斜体标签是<em>，它用于将文本内容设置为斜体，不会创建新的段落。例如：

<p>这是一个段落</p>
<em>这是斜体的文本</em>
<p>这是另外一个段落</p>

删除线标签

删除线标签是<del>，它用于将文本内容设置为删除线，不会创建新的段落。例如：

<p>这是一个段落</p>
<del>这是删除线的文本</del>
<p>这是另外一个段落</p>

图像标签(单标签)

图像标签是<img>，它用于在文本中插入一个图像，不会创建新的段落。例如：

<p>这是一个段落</p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度">
<p>这是另外一个段落</p>

src 属性用于指定图像的 URL，alt 属性用于指定图像的替代文本。当图像无法加载时，alt 属性将显示在图像的位置。

除此之外，img 标签还有 width 和 height 属性，用于指定图像的宽度和高度。例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" width="200" height="200">

不过通常不使用 width 和 height 属性来设置图像的尺寸，而是使用 CSS 来设置图像的尺寸。

图片还有一个 title 属性，用于指定图像的标题。例如：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" width="200" height="200" title="百度logo">

标签中的属性之间是用空格分隔的。
属性名不区分大小写，属性值区分大小写。
属性值需要用引号引起来
属性的顺序不重要，但通常建议按照字母顺序排列。

超链接标签

链接标签是<a>，它用于在文本中插入一个链接，例如：

<a href="https://www.baidu.com">百度</a>

href 属性用于指定链接的 URL，a 标签的默认样式是蓝色，并且带有下划线。当鼠标悬停在链接上时，链接会带有下划线。当点击链接时，浏览器会打开指定的 URL。

在 href 属性中，可以使用相对路径或绝对路径。相对路径是指相对于当前页面的路径，例如：<a href="./index.html">首页</a>，表示当前页面的子目录下的 index.html 文件。绝对路径是指完整的 URL，例如：<a href="https://www.baidu.com">百度</a>，表示一个完整的 URL。

a 标签还有 target 属性，用于指定链接打开的方式，例如：<a href="https://www.baidu.com" target="_blank">百度</a>，表示在新窗口中打开链接。target 属性值可以是：_self（默认值，在当前窗口中打开链接），_blank（在新窗口中打开链接），_parent（在父窗口中打开链接），_top（在顶级窗口中打开链接）。

在开发初期，不知道 href 属性值的时候，可以使用#作为占位符，表示当前页面的 URL，例如：<a href="#">百度</a>，表示当前页面的 URL。

音频标签

音频标签是<audio>，它用于在文本中插入一个音频文件，例如：

<audio src="https://www.baidu.com/audio/audio.mp3" controls></audio>

src 属性用于指定音频文件的 URL，controls 属性用于显示音频控制条，默认情况下，音频文件不会自动播放，需要用户手动点击播放按钮。
在音频标签中，可以使用<source>标签来指定多个音频文件，例如：

<audio controls>
    <source src="https://www.baidu.com/audio/audio.mp3" type="audio/mpeg">
    <source src="https://www.baidu.com/audio/audio.ogg" type="audio/ogg">
</audio>

视频标签

视频标签是<video>，它用于在文本中插入一个视频文件，例如：

<video src="https://www.baidu.com/video/video.mp4" controls></video>

src 属性用于指定视频文件的 URL，controls 属性用于显示视频控制条，默认情况下，视频文件不会自动播放，需要用户手动点击播放按钮；但是也可以通过设置属性autoplay来自动播放视频，浏览器为了用户的隐私，不允许在有声音的情况下自动播放视频，因此还需要设置属性muted，表示静音播放。

<video src="https://www.baidu.com/video/video.mp4" controls autoplay muted></video>

HTML标签

标签