HTML常用标签｜青训营笔记_前端alt=metal movable type-优快云博客

本文链接：https://blog.youkuaiyun.com/ProgramNovice/article/details/125976392

HTML常用标签｜青训营笔记

一、标题与段落

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题， <h6> 定义最小的标题。

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下：


段落是通过 <p> 标签定义的。

注意：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

使用 <br> 标签，可以在不产生一个新段落的情况下进行换行（新行）。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <h1>这是一个标题。</h1>
        <h2>这是一个标题。</h2>
        <h3>这是一个标题。</h3>
        <p>这是一个段落。</p>
        <hr>
        <p>这是一个段落。</p>
        <hr>
        <p>这是一个段落。</p>
        <!-- 这是一个注释 -->
        <p>这个<br>段落<br>演示了分行的效果</p>
    </body>
</html>

运行结果：

在这里插入图片描述

二、列表

HTML 支持有序、无序和定义列表。

HTML 有序列表

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

列表项使用数字来标记。

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签。

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <h2>世界电影票房排行榜</h2>
        <ol>
          <li>阿凡达</li>
          <li>泰坦尼克号</li>
          <li>复仇者联盟</li>
        </ol>
        
        <h2>菜单</h2>
        <ul>
          <li>Coffee</li>
          <li>Milk</li>
          <li>Tea</li>
        </ul>
        
        <h2>霸王别姬</h2>
        <dl>
          <dt>导演：</dt>
          <dd>陈凯歌</dd>
          <dt>主演：</dt>
          <dd>张国荣</dd>
          <dd>张丰毅</dd>
          <dd>巩俐</dd>
          <dt>上映日期：</dt>
          <dd>1993-01-01</dd>
        </dl>
    </body>
</html>

运行结果：
在这里插入图片描述

三、链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法：<a href="url">链接文本</a>

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <a href="https://www.bytedance.com/">
            字节跳动官网
          </a>
          <!--使用 target 属性，你可以定义被链接的文档在何处显示。-->
          <!--下面的这行会在新窗口打开文档。-->
          <a href="https://www.bytedance.com/" target="_blank">
            字节跳动官网
          </a>
    </body>
</html>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ObpkDu3x-1658736511051)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ee667d335b64ba0976fc70f5f8b41d2~tplv-k3u1fbpfcp-watermark.image?)]

点击第一个链接，在本页面打开字节跳动官网；点击第二个链接，则在新页面打开字节跳动官网。

四、图像

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。URL 指存储图像的位置。

定义图像的语法是：
<img src="url" alt="some_text">

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素。

提示：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏 HTML 页面的整体布局。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <img
        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
        alt="Metal movable type"
        height="300"
        width="400"
        />
    </body>
</html>

运行结果：
在这里插入图片描述

五、音频与视频

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素。 <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

同时，HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素。 <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <audio 
        src="/assets/music.ogg"
        controls
      ></audio>
      
      <video
        src="/assets/video.mp4"
        controls
      ></video>
    </body>
</html>

运行结果：

在这里插入图片描述

六、输入

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章将部分介绍这些新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注意：并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <input placeholder="请输入用户名">
        <br>
        <input type="range">
        <br>
        <input type="number" min="1" max="10">
        <br>
        <input type="date" min="2018-02-10">
        <br>
        <textarea>Hey</textarea>
    </body>
</html>

运行结果：
在这里插入图片描述

七、<select> 标签

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

提示：<select> 元素是一种表单控件，可用于在表单中接受用户输入。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标签 ｜ 青训营笔记</title>
    </head>
    <body>
        <p>
            <select>
              <option>🥑</option>
              <option>🥩</option>
              <option>🥓</option>
            </select>
          </p>
    </body>
</html>