HTML进阶——常用标签及其属性

just小千2025-11-19 18:08

不查不知道，html拥有好多标签，其实很多我在实际业务场景中都没有使用过，有些是历史遗留产物，有些是在特殊场景下使用频率才会比较高，这些都不在今天的探索范围内，有需要的朋友可以继续深入学习。

（如果有哪些你们觉得常用但我没讲到的，请告诉我，我补充一下）

通用属性

之前说过，属性包含了元素的额外信息，所有属性不在元素里显式声明都代表着设置的是默认值。在html里有很多全局通用的属性，它们可以在几乎所有的元素中使用；还有一些专有属性，也就是某些元素或者某个元素特有的。这里先列举常用的通用属性，专有属性等涉及到对应元素再说。

属性中有一种特殊的类型，叫布尔属性，它是表示 true 或 false 值的属性，如果标签里包含了它，不管它后面带什么值，都意味着属性是true，标签里不包含这个属性表示false

常用的通用属性包含这些（属性的用途看不明白没关系，先记住，等学到相关知识自然就懂了）：

id
  • 作用 ：给元素一个全页面唯一的标识。相当于给这个元素添加一个独一无二的身份证号，后续不管做什么操作，都可以通过id找到这个元素。不同元素的id不能相同（如果有两个拥有一样身份证号的人，那就乱套了）
  • 用途 ：
    • CSS用于精确定位样式：#header { ... }
    • JavaScript用于获取DOM元素：document.getElementById('myButton')
    • 作为页面内锚点链接：<a href="#section1">跳到第一节</a>
  • 示例 ：
    html <div id="app-container">这里是应用容器</div>
2. class
  • 作用：给元素指定一个或多个类名，用于分组。多个元素拥有同一个类名，说明他们某一个层面上属于同一种类型，可以对他们做统一的处理，比如对所有带'text-red'类名的元素的文本颜色改成红色（使用css可以很简单实现）
  • 用途 ：
    • CSS样式化的核心 ：.btn { ... }
    • JavaScript批量选择元素：document.querySelectorAll('.item')
  • 示例 ：
    html <p class="text-red bold large">这是一个红色、加粗、大号的段落。</p> <button class="btn btn-primary">主要按钮</button>
3. style
  • 作用 ：直接在元素上写CSS样式（注意：优先级最高，慎用，css的优先级在css的时候再细说）。
  • 用途：快速调试、动态修改样式（通过JS）。
  • 示例 ：
    html <h1 style="color: blue; margin-top: 20px;">一个蓝色的标题</h1>
4. title
  • 作用：当鼠标悬停在元素上时，显示一段提示文字。
  • 用途：提供额外说明、解释缩写词等。
  • 示例 ：
    html <abbr title="超文本标记语言">HTML</abbr>
5. data-*
  • 作用：存储自定义的私有数据，不会影响页面布局。这个属性在js中发挥着意想不到的作用，现在先记下来，到时候再细说。
  • 用途：在JavaScript中存储与元素相关的额外信息，便于交互。
  • 示例 ：
    html <li data-user-id="12345" data-role="admin">张三</li>
    在JS中获取：element.dataset.userId // 输出 "12345"
6. hidden
  • 作用：布尔属性，表示元素尚未或不再相关，应被隐藏。
  • 示例 ：
    html <p hidden>这个段落会被隐藏，不显示在页面上。</p>

核心标签

包括<html>，<head>，<body>，<style>, <script>

这些标签在上一篇中基本都有涉猎，这里就进行一个简单的说明和补充。

1. html

定义HTML文档的根，在HTML文档的最外层使用，一个HTML文档中只会出现一个html元素，所有的内容都被包裹在这个元素里面（除了<!DOCTYPE html>的声明和注释）

html是根目录，属性会影响到全局，除了通用属性外，常用的属性还包括：

  1. lang：声明整个网页内容的主要语言，中文一般是lang="zh-CN"。设置它可以帮助无障碍访问，有利于SEO（搜索引擎优化），还可以帮助翻译工具识别当前语言。
  2. translate: 网页是否允许翻译，浏览器或者插件会有一些翻译工具，比如google翻译，它会根据用户定义的语言翻译整个网站，如果设置了translate="no"，就代表不允许那些插件翻译网页，保留网页原本的语言。React有一个bug会导致使用google翻译时整个页面都崩溃，就需要设置这个。
  3. dir：指定文本的方向，像阿拉伯语、希伯来语这种从右向左书写的语言，就可以设置dir="rtl"
2. head

定义HTML文档的头部，这部分内容不会显示在浏览器的页面中，它相当于是HTML的大脑，告诉浏览器要怎么才能正确的渲染HTML文档。它本身没有什么属性，更多的是保存页面的元数据，也就是运行这个页面需要的一些数据。大型网站的head通常会十分大，承载了许多数据，但本质上，主要包括以下元素：

  1. <title>：文档的标题，这个标题在页面里看不见，主要是用来展示在浏览器tab标签，收藏的书签，还有就是给搜索引擎用，展示在搜索结果页。总之，就是需要展示这个网页信息的地方，网页标题都是title元素的内容。一个网页只有一个title

  2. <meta>：描述数据的数据，包括网页的描述，网页的作者，penGraph的数据等等，只要记住，它是用来承载这个网页一些数据的元素，一个网页可以有多个不同类型的meta

  3. <link>：用于定义当前文档与外部资源的关系。需要注意的是，它是在<head>元素中的子元素，所以它定义的这些外部资源是不会直接显示在页面中，但它会为页面服务。主要包含以下几种类型，还有一些不常见或者特定场景下才会有的可以自行去查看

html 复制代码 
 <!-- 1. 核心：链接主样式表 -->
    <link rel="stylesheet" href="styles/main.css" />
    <!-- 2. 标准Favicon -->
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <!-- 3. 预加载：高优先级加载关键资源 -->
    <link
      rel="preload"
      href="fonts/critical-font.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <!-- 4. 预连接：提前与第三方源建立连接 -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- 5. 预获取：低优先级获取后续页面资源 -->
    <link rel="prefetch" href="about.html" as="document" />
    <!-- 6. 预渲染：在后台提前渲染整个页面 -->
    <link rel="prerender" href="https://example.com/next-page" />
    <!-- 7. 规范URL：避免重复内容，指定首选URL -->
    <link rel="canonical" href="https://example.com/current-page" />
3. body

用来承载页面上显示的所有内容，包括我们后面部分所有讲到的标签，一个页面只有一个body元素。通常在body里我们会添加class或者style属性，用来定义页面内容中所有通用的样式。

4. style

看上去是不是有点眼熟，之前说过有一个属性叫style，用来写行内样式，如果我想将样式统一写在某个地方，然后通过class或者id来引用怎么办，这时候有两个方法，一是上面提过，通过<link>元素引入css文件；第二个就是直接在html的<style>元素内写样式。通常它会被写在<head>里

（这一部分的内容会在css的模块详细讲，现在只需要记得它用来写样式，在head里就好）

5. script

它是存放页面JavaScript的元素。js分为三种，一个是自己在html文件里写的js，一个是在自己项目里专门写的一个js文档，还有一个是引用别人写好的js（其实css也是这三类）。这三种形式的js会有不一样的写法，这是因为js加载，执行的不同时机和行为，会直接影响网站的性能和稳定性。可以简单理解成，如果加载不好，网站会很卡，或者有些功能会使用不了。

  1. html中的js

    这通常用于调试或者自己写简单的demo，产品化还是建议将js抽取成单独的文件引入

html 复制代码 
<script>
    // 这会在页面加载到此处时立即执行
    alert("Hello World! 页面加载到这里了！");
</script>

  1. 引用自己写的js

    js是项目的重中之重，控制着整个项目的交互，通常可以根据不同的功能将js分成不同的文件（.js后缀就是一个js文件了），引用的时候通过src属性写入相对地址就好。同时，需要加入defer标签，它指示浏览器异步 下载脚本，但会延迟 到 HTML 文档完全解析完成 （在 DOMContentLoaded 事件触发前）再按顺序执行

    <script defer src="./test.js"></script>就像这样。要注意的是，虽然script元素内容是空的，但它不是一个空元素，结束标签千万别忘记了

  2. 引用别人写好的js

    js经过那么多年的发展，前人已经写了很多很优秀很实用的方法，很多时候并不需要从头到尾自己写，引用别人写好的就好，引用的时候同样通过src属性写入第三方将本的地址，这时候需要分以下两种情况：

html 复制代码 
    <!-- 第三方分析脚本：使用 async，不阻塞且执行顺序不重要 -->
    <script async src="https://analytics.example.com/tracker.js"></script>

    <!-- 从CDN加载重要库：添加完整性校验和跨域设置 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-...（哈希值）..."
      crossorigin="anonymous"
      defer
    ></script>

文本标签

文本是网页很重要的组成部分。写doc文档时可以发现，文档中的文本通常包含标题和正文。标题还有大标题，小标题之分。有标题有内容一个文档可读性会变强。网页里也是一样的，结构化的文本标签会让读者，更多的是让浏览器阅读更加顺畅。

常用的文本标签包括<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<p>,<strong>,<em>,<a>，

h1-h6

<h1>表示的主标题，<h2>到<h6>分别是二级子标题，三级子标题，依此类推。这6个标题标签的使用有以下原则：

在一个页面中，最好有且只有一个<h1>（这不是硬性规定，原则上可以多个也可以没有，但会影响SEO），这也好理解，比如一篇论文，也基本没有两个标题。

标题之间不要嵌套标题。这个也很好理解，你没见过一个大标题里面夹杂着二级标题的吧。

请按照顺序来使用标题，标题的层次结构按照1-6来使用，不要把<h4>作为二级标题，然后把<h2>作为三级标题。语法上不会报错，但是何必呢？

现有的六种标题层次中，除非实在有必要，否则尽可能每页使用不超过三种标题。这是因为标题种类过多通常意味着内容结构复杂，用户可能要花很长时间去阅读，可以考虑将它分成几个页面

还有几个需要注意的细节：

<h1>和<title>：这两个都是页面唯一的标题，title是给浏览器和搜索引擎看的'文档名'，h1则是给用户看的'标题'。如果不好理解的话可以把网页想象成一本杂志，title是这个杂志名，比如《读者》，这个杂志名是杂志的标识，通常不会变化，h1则是里面的文章名。

h1-h6默认通过字体大小和粗细依次递减作为最直观的样式区分，但这不是固定的（这里出现样式两个字就知道这些功能是通过css来控制的，但没有写css的时候也会有默认的样式），而且不同网站的h1-h6的大小，粗细甚至颜色，字体都会有区别。

p，span，strong，em

说完了标题，下面到了正文部分。通常正文由一个个的段落构成，也就是<p>标签，这很好理解就不多说了，通常p标签的前后会有一些间距。

在段落中，我们可能会想要突出一些文字，用以强调这些字的重要性，此时需要<strong>和<em>，它们分别表示重要强调和一般强调，通常<strong>会以粗体表示，<em>则是用斜体（这只是浏览器默认的样式，css可以修改成任何你想要的）

有时候，我们可能只是单纯想对段落中的某些文字进行特殊处理，比如对这篇文章中所有的我们这两个字都标记出来，这个行为不属于强调，所以不适合上面说的<strong>和<em>。但需要对段落中的某一些文字做处理时，我们可以使用<span>，这个标签本身没有任何的视觉效果，通常用来做一些文字的特殊处理（段落中需要特殊处理的那几个文字加上它，就可以愉快的通过属性（比如id，class），让css和js定位并处理）

a

a标签是个特殊的标签，还记得HTML的定义么（不记得的去上一篇温习一下），在HTML文档中，超链接是一个十分重要的特性，承载超链接这个特性的标签就是<a>。

直接举个例子吧～

<p>欢迎访问<a href="https://github.com">GitHub</a></p>

这是一个十分典型的a标签使用场景，页面上会显示"欢迎访问GitHub"字样，点击GitHub，页面会跳转到https://github.com 这个地址。它的核心属性是href，href的作用是指定要跳转的地址，包括外部网址，内部其他页面，页面的其他位置（通过id来识别），还可以发送邮件，拨打电话，发送短信，执行js，配合download属性还能下载文件。除此之外，如果跳转网站的时候想要新开一个标签页，可以使用target="_blank"属性。

html 复制代码 
    <!-- 1. 绝对URL - 链接到外部网站 -->
    <a href="https://www.github.com">访问GitHub</a>
    <!-- 2. 相对URL - 链接到本站其他页面 -->
    <a href="/about.html">关于我们</a>
    <!-- 3. 页面锚点 - 链接到同一页面的特定位置 -->
    <a href="#section-2">跳到第二节</a>
    <h2 id="section-2">第二节内容</h2>
    <!-- 4. 功能链接 -->
    <a href="mailto:someone@example.com">发送邮件</a>
    <a href="tel:+1234567890">拨打电话</a>
    <a href="sms:+1234567890">发送短信</a>
    <a href="javascript:void(0)" onclick="myFunction()">执行JavaScript</a>
    <!-- 5. 文件下载 -->
    <a href="/brochure.pdf" download>下载手册</a>

列表与表格

通常情况下标题和段落会使文本拥有一定的可读性，但有时候可以增加一些其他的结构，让内容变得更加架构化，比如列表和表格。

列表

列表在生活中无处不在，在一些场景下，通常会以列表的形式将内容列举出来，这样会让思路更加清晰（比如现在看的这篇文章，里面就很多1，2，3这种列表）。列表分成三种，有序列表，无序列表以及描述列表。

  1. 有序列表和无序列表

顾名思义，这两个很好理解，有顺序的列表，比如1，2，3或者a,b,c这种就称为有序列表；前面标记符号圆圈啊，方块这种图标的就称为无序列表。一般来说有序列表的内容会有先后顺序或者重要程度排名，无序列表的内容则是有相同的权重，大家都一样重要。

html 复制代码 
    <ol reversed start="6" type="a">
      <li>豆浆</li>
      <li>油条</li>
      <li>豆汁</li>
      <li>焦圈</li>
    </ol>
    <ul style="list-style-type: square">
      <li>豆浆</li>
      <li>油条</li>
      <li>豆汁</li>
      <li>焦圈</li>
    </ul>

直接看代码，不管有序列表还是无序列表，列表的内容都用<li>包裹。针对列表本身，还需要有标签来告诉浏览器，从这里开始就是列表啦，到这里列表渲染结束。这种表示列表类型的标签就是<ol>：有序列表（Ordered List），<ul>：无序列表（Unordered List）

<ol>标签有几个重要的属性，包括reversed，start，type，reversed表示是否反向排序，它是一个布尔属性，默认正序；start表示起始数字，默认是1；type则是编号类型，决定是1，2，3还是a,b,c，默认是1。

<ul>标签没有那么多属性，它默认的符号是实心圆点，用户可以使用css来替换成想要的任何图标。默认有个css属性list-style-type可以修改，包括disc - 实心圆点 (默认值)，circle - 空心圆，square - 实心方块，none - 无符号。

  1. 描述列表

描述列表的目的是标记一组项目及其相关描述。先看代码：

html 复制代码 
    <dl>
      <dt>术语</dt>
      <dd>对这个术语的详细解释和说明。</dd>

      <dt>另一个术语</dt>
      <dd>另一个术语的详细解释。</dd>
    </dl>

和之前两种列表一样，描述列表也需要一个标签告诉浏览器什么时候开始和结束。它用的是<dl>。描述列表的里面会有成对出现的<dt>-<dd>，用来表示术语，以及对这个术语的解释。像现在标题的"描述列表"和内容就可以使用<dt>-<dd>来包裹。一个<dt>可以对应一个或者多个<dd>。

对比起标题和段落，市面上列表的样式会更加的多，在html阶段，掌握基础的列表标签以及常用的属性就算入门了。要做出那些看起来很好看的列表，更多的是css实力的体现（好看的都跟css有关系），很多组件库也有现成的优化过的列表组件可以直接使用。

表格

表格大家都见多了，我们会用表格来展示一些结构化的数据集。因为它在日常生活中使用频率很高，而且比较格式比较特别，所以HTML提供了一种方法在web上构建和呈现它。表格是一种行列结构，包括n行n列，行列之间形成的格子叫做单元格。写成代码的时候是一行一行来声明，然后再声明每一行有多少个单元格，里面还可能有单元格合并的情况。

html 复制代码 
    <table>
      <tr>
        <th>&nbsp;</th>
        <th>诺基</th>
        <th>弗洛尔</th>
        <th>艾拉</th>
        <th>胡安</th>
      </tr>
      <tr>
        <th>品种</th>
        <td>杰克罗斯犬</td>
        <td>贵宾犬</td>
        <td>流浪犬</td>
        <td>可卡犬</td>
      </tr>
    </table>

先看看最简单的表格代码，和列表一样，表格也需要用一个标签告诉浏览器起始位置和结束位置，这就是<table>的作用。表格的每一行，使用<tr>作为标签。<th>，<td>都表示单元格，它们的区别在于<th>表示的是表头，<td>表示的是内容单元格。在一个表格里，表头行只有一行，内容行会存在多行，同时，也可以为每一行增加一个表头。理论上，每一行每一列的单元格数量是一致的。

但是，凡事都有意外，有时候我们需要将单元格进行合并展示（excel表格中的合并单元格功能），这时候colspan（向右合并多少列）以及<rowspan>（向下合并多少列）就能发挥作用。这两个属性是作用在单元格中的，所以需要写在<th>，<td>中。不要忘记合并之后要记得删除被占用的<th>，<td>。

html 复制代码 
    <table border="1">
      <tr>
        <th>部门</th>
        <!-- 这个单元格纵跨2行 -->
        <th rowspan="2">姓名</th>
      </tr>
      <tr>
        <!-- 注意：这里少了一个td，因为被上面的rowspan占用了 -->
        <td>李四</td>
      </tr>
    </table>

    <table border="1">
      <tr>
        <th>姓名</th>
        <th colspan="2">联系方式</th>
        <!-- 这个单元格横跨2列 -->
      </tr>
      <tr>
        <td>张三</td>
        <td>电话: 138****1234</td>
        <td>邮箱: zhangsan@example.com</td>
      </tr>
    </table>

除了这些标签外，还可以使用<caption>为表格添加一个标题。在复杂表格的场景下，可以使用<thead>,<tbody>,<tfoot>来使表格变得更加结构化。

很多人会用表格实现网页的布局，可以用行列来表示网站的头部，尾部和内容区域。因为很久以前CSS的兼容性比较差，但随着CSS的发展，这种表格布局现在不太普遍（但是很多教程还是会教这个。。。可以知道，但没必要再去学怎么做，除非你要去维护"上古时期"的网站）。

结构化标签

在聊结构化标签之前，需要先补充一个概念：网页和网站。之前说过，网页实际上就是HTML文档，单纯的一个页面，但很多时候一个页面并不能将所有的内容都囊括在内，所以需要网站。网站是页面的集合，通过导航、链接把一个个网页组织起来。还是拿杂志来举例，网站就等于这本杂志，网页就是其中的一个个模块，导航栏就是目录。

现在的网页样式五花八门，也有很多有创意的交互，但大部分还是遵循一定的结构，下图的MDN页面就是一个经典的网页布局：上面是头部，包含网站logo，导航栏以及一些搜索框；中间是三栏布局，左边是侧边栏，中间是主要内容，右边是这个页面的导航。下面是页脚部分，除了截图的广告之外，还包含一些网站的基本信息。

HTML代码可以根据这些功能给每个区域都标记了语义化的标签，语义化更多的是为了浏览器能很好的识别网站结构，同样也是为了屏幕阅读器等辅助技术可以识别这些元素，这对无障碍阅读是一个很重要前提。常用的结构化标签如下：

  • 页眉：<header>
  • 导航栏：<nav>
  • 主内容：<main>，主内容里还有各种子内容，可以用<article>,<section>,<div>等来显示
  • 侧边栏：<aside>。通常放置在<main>中
  • 页脚：<footer>

  1. <header>和<footer>

    <header>通常是横跨顶部的大条带，上面包含标题，logo以及一些其他内容，<footer>是横跨页面底部的条带，通常包含一些版权声明，公司信息等网站需要，但日常浏览又不是很重要的信息。一个网站中的每个页面的<header>和<footer>应该都是一样的。

    但是，一个页面可以有多个<header>和<footer>。因为这两个元素不但可以用在全局的页面上，也能用在主内容里。理论上说，每一个模块都可以有头和尾。

  2. <nav>

    <nav>是指向网站中各个网页地址的集合，每个网页的导航栏都应该保持一致，它通常也会被放在页面顶部。按照我的习惯，我会将导航栏作为<header>的子元素。

  3. <main>

    通常我们会将网页显示主要内容的部分用<main>包裹，一个网页有且只有一个，而且它不能是 <article>, <aside>, <footer>, <header>, <nav> 等元素的子元素，通常会将它直接放到<body>下面。

  4. <section>

    <section>表示网页中一个通用独立的章节。它一般会放在<main>里面，根据网页的布局，将一个个不同的功能区域划分开来，让每一个功能都拥有自己的地盘。

  5. <article>

    顾名思义，这是一篇文章，不需要多说了吧

  6. <aside>

    官方说法，<aside>元素表示与页面主要内容间接相关的内容部分。有点拗口，简单来理解就是主要内容的补充部分，如果页面中某个部分删除后不会影响整个页面的理解，那就可以用这个元素包裹，比如侧边栏，比如一些备注信息等。

  7. <div>

    终于到了这个元素，这个可能是初学者见的最多的一个元素了，它好用的原因是它没有任何的语义含义。因为没有含义，所以可以哪里需要往哪里搬，不知道用什么元素的时候就可以用它。

    很多初学者会把它和<p>元素混用，因为<div>可以无脑写，所以在进行文字展示时，可能顺手就写上去了，但要记得，<div> 可以包含 <p>，但 <p> 不包含 <div>。

    有一个很重要但经常被忽视的原则：尽可能的使用语义化的标签，实在想不出来再用<div>代替（不然费那么大劲把语义化标签都定义得那么清楚不白瞎了么）

多媒体

除文字外，网页中还有丰富的多媒体元素，包括图片，音频，视频等，对应的标签分别是<img>，<audio>，<video>。

img

<img src="product.jpg" alt="产品图片" width="400" height="300">

图片标签是一个空元素，主要属性是src，alt，src指定图片路径，这是一个必须的属性；alt则是图片的替代文本（图片由于种种原因显示不了的时候展示它），这也是一个必须属性（理论上可以不写，但绝大多数项目规范都必须写）。width,height这两个属性就很简单了，图片的宽度和高度，需要注意的是属性值是个纯数字，没有单位，代表的是像素。还有类似控制懒加载的loading，声明响应式图片的srcset，这些可以在实际项目中尝试一下。

Audio
html 复制代码 
 <audio controls autoplay loop muted preload="auto">
      <source src="music.mp3" type="audio/mpeg" />
      <source src="music.ogg" type="audio/ogg" />
      您的浏览器不支持音频播放。
 </audio>

音频标签有两部分构成，首先是外部的<audio>，它控制的是这个音频的行为，controls属性控制是否显示播放控件，大部分情况下都需要，不然用户没有办法自己控制音频的播放与否；autoplay控制是否自动播放；loop控制是否循环播放；muted控制是否静音；proload则有三个属性：none,auto,metadata，分别表示不缓存文件，页面加载后缓存媒体文件，仅缓存文件的元数据

内部的<source>控制的是音频的来源，为了更好的浏览器兼容，可以设置多个<source>，用来防止某些浏览器不支持某些音频类型。src是老熟人了，它指向想要嵌入的视频路径，type表示这个<source>指定的MIME类型，浏览器会通过这个属性来迅速跳过那些不支持的音频类型。

如果所有的<source>浏览器都不支持，那对应位置就会显示那串文字"您的浏览器不支持音频播放"。

Video
html 复制代码 
    <video
      controls
      width="400"
      height="400"
      autoplay
      loop
      muted
      preload="auto"
      poster="poster.png"
    >
      <source src="video.mp4" type="video/mp4" />
      <source src="video.webm" type="video/webm" />
      你的浏览器不支持此视频。
    </video>

音频有的属性视频全都有，除此之外，视频需要一定的空间来显示内容部分，所以还可以用width,height来控制宽高。有一点要注意的是，视频会保持它原始的长宽比------也叫做纵横比 。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。poster指向的是图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。不设置默认视频第一帧。

多说一点：很久很久以前，没有视频，音频元素时，浏览器中的视频，音频播放是基于插件，用的最多的是Flash（早年间电脑打开基本都会问要不要安装Flash，不然有些功能使用不了）。

MIME类型：也称为媒体类型，指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式，浏览器通常使用 MIME类型来决定如何处理 URL

表单

在此之前，我们已经了解了很多的元素，包括文本，表格，多媒体等，这些文本更偏向于网页侧的单向交互。但实际上web是一个用户与网页的双向交互体验，比如购物，用户需要选择商品，告诉网页我要买什么。所以需要有元素让用户可以输入，这就是表单，还需要元素做点击，这就是按钮。

按钮

按钮通常使用<button>元素实现，它可以和任意元素关联，可以把文字，图片做成可点击效果；它本身也可以变成各种各样的形状，方便用户点击。总之，这是一个用途广泛，灵活性强的元素，如何使用端看开发者的编码能力和想象力。

<button>通常和js亲密接触，因为用户点击按钮背后肯定会跟随着与系统的交互，这就是js最擅长的事情。具体的事件等到js的时候再详细展开。

表单

一个基础的表单通常包括三个部分：

  1. 一个<form>元素，用来包裹表单控件，被包裹的控件被视为同一个表单，它们的数据会被一并提交。
  2. 一对或者多对表单控件，控件有很多，我们常见的就有单选，多选，单行输入框，多行输入框，下拉选择框等
  3. 一个<button>元素，点击时被<form>包裹的表单内容都会被提交。

<form>的主要属性如下：

  • action：包含一个路径，用于指定提交的表单数据将发送到哪个url进行处理。
  • method：指定将表单数据发送到服务器时使用的数据传输方法，常用的是get,post，这两个有啥区别暂时可以不纠结，可以先用get方法，这样数据会作为参数附加在 URL 的末尾进行发送

通过 <button> 元素的 type 属性可以指定按钮的其他行为：

  • <button type="submit"> 明确声明该按钮是"提交按钮"。一般来说不需要显式声明，除非 <form> 中包含了多个按钮，并且想明确表示哪个按钮是用于提交表单的。
  • <button type="reset"> 创建一个重置按钮------这会立即清空表单中输入的所有内容，将表单恢复到初始状态。
  • <button type="button"> 创建一个普通按钮，其行为和 <form> 外的按钮一样。普通按钮默认什么都不做，需要使用 JavaScript 来给它们添加功能。

在<form>包裹的表单可以包含任意的HTML元素，可以使用之前的文本标签对表单进行样式上和语义上的优化。常用的表单控件如下：

<input>

表示用户在表单中输入的各种数据项

<input type="text" name="name" id="name" required />

  • type：指定要创建的表单控件类型。常用的如下：
    • text：渲染一个可接受任意文本的基本文本框
    • color：显示一个取色器
    • radio：显示一个单选按钮
    • checkbox：显示一个多选按钮
    • number：只能输入数字
    • password：输入的内容都会被遮蔽，无法读取
    • email：只能输入邮箱，会自动校验邮箱格式
    • file：用户可以从设备中选取文件，一般用来做文件上传
  • name：为该数据项指定一个名称。当表单提交时，数据会以名值对（name/value pairs）的形式发送。一般来说，name 属性的值就是这个数据项的"名称"，而用户在文本框输入的数据就是这个数据项的"值"。
  • id：指定一个用于标识该元素的 ID。在这里，它用于将该表单控件与对应的 <label> 标签关联起来。
  • required：指定该表单控件在提交表单前必须填写。这应仅用于必填字段，而不应设置在可选字段上，value为空时，提交表单就会被拦截，显示错误提示。

<label>

为表单控件提供了标识性标签，用于描述应该在控件中输入的数据。

html 复制代码 
<label for="nameTest">姓名（必填）：</label>
<input type="text" name="name" id="nameTest" required />

给表单控件设置一个 id 属性，然后给 <label> 设置 for 属性，其值与该控件的 id 相同，这样用户点击<label>的时候也能聚焦表单控件。

<fieldset>

对表单控件进行分组，通常会在单选和多选表单中使用，它可以添加disabled 属性，表示禁用整个分组，通常会将整个分组置灰，并且无法点击。<legend>标签是它的标题

单选，多选，下拉选择以及多行文本的代码如下：

html 复制代码 
<form action="./payment_page" method="get">
      <h2>报名参见见面会</h2>
      <fieldset>
        <legend>选择酒店房型：</legend>
        <div>
          <input type="radio" id="hotelChoice1" name="hotel" value="economy" checked />
          <label for="hotelChoice1">经济型（+$0）</label>
          <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
          <label for="hotelChoice2">高级型（+$50）</label>
      </fieldset>
      <fieldset>
        <legend>要参加的课程：</legend>
        <div>
          <input type="checkbox" id="yoga" name="yoga" />
          <label for="yoga">瑜伽（+$10）</label>
          <input type="checkbox" id="coffee" name="coffee" />
          <label for="coffee">咖啡烘焙（+$20）</label>
        </div>
      </fieldset>
      <p>
        <label for="transport">出行方式：</label>
        <select name="transport" id="transport">
          <option value="">--请选择一项--</option>
          <option value="bike">骑自行车</option>
          <option value="walk">徒步</option>
          <option value="bus">乘坐公交</option>
        </select>
      </p>
      <p>
        <label for="comments">其他备注：</label>
        <textarea id="comments" name="comments" rows="5" cols="33"></textarea>
      </p>
      <p>
        <button>去结账</button>
      </p>
    </form>

radio 输入控件的工作方式大致和 text 输入控件相同，但也有几点不同：

  • 每组单选按钮的 name 属性值必须相同，以便将它们关联成一组。如果 name 属性值不同，它们会被视为不同的组，提交时也会有发送不同的值。
  • 每个单选按钮必须包含一个 value 属性，用于指定提交时该按钮对应的值。提交的数据会是一个名值对，其中名称（即 name）始终相同，例如 hotel=economy 或 hotel=superior。
  • 每个单选按钮的 <label> 应该描述该具体选项的值，而不是你正在选择的这一组选项所代表的字段含义。
  • 当单选框被添加checked属性时，代表默认选中，因为单选框无法取消选中一个单选按钮，除非选择另一个。
  • 当单选框被添加disabled属性时，代表禁用，当前选项不可被用户选择。

checkbox输入控件会被渲染为一组开关状态的复选框，它和radio的实现方式，不同点在于单选按钮允许从多个选项中选择零个或一个，而复选框允许从多个选项中选择零个或多个。从代码上来讲，每个复选框的 name 属性值不同，且通常没有设置 value 属性。这意味着，每个复选框代表不同的数据值，而单选按钮只能代表一个值。

<select>和<option>是实现下拉菜单的关键元素。<select> 元素囊括了所有不同的选项值。你需要在这里设置 id 属性，将控件与其标签关联起来，同时设置 name 属性，指定提交时数据项的名称。每个 <option> 元素可以带有 value 属性，指定如果该选项被选中时提交的值。如果未指定 value，则使用 <option></option> 标签内的文本内容作为提交值。

<textarea>元素用来创建多行文本输入，行为与 <input type="text"> 元素类似，不同之处在于它允许输入多行文本。rows 属性指定文本区域默认显示的行数，而 cols 属性指定文本区域默认显示的列数。如果未指定这两个属性，浏览器默认使用 cols="20" 和 rows="2"。

其他

<br />元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

<hr />元素表示段落级元素之间的主题转换

<iframe>元素表示嵌套的浏览上下文，它能够将另一个 HTML 页面嵌入到当前页面中。

到这里为止，HTML常用的标签和对应的元素就说的差不多了。看到这里应该已经能写出一个简单的网页了。HTML除了标签和元素之外，还有一些相关的概念，且听下回分解。

相关推荐
serve the people1 小时前
HTML Document Loaders in LangChain
chrome·langchain·html
惜.己1 小时前
html笔记（一）
前端·笔记·html
Lsx-codeShare1 小时前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app
曹牧1 小时前
HTML实体名称
前端·html
小胖霞1 小时前
Node+Express+MySQL 后端生产环境部署，实现注册功能(三)
前端·后端
一 乐1 小时前
农产品电商|基于SprinBoot+vue的农产品电商系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
guangzan1 小时前
在 React 中重拾原生 HTML 属性
html
云鹤_1 小时前
【Amis源码阅读】低代码如何实现交互？（上）
前端·低代码
热门推荐
01GitHub 镜像站点02今天 Cloudflare 全球事故，连 GPT 和你的网站都一起“掉线”了03UV安装并设置国内源04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06BongoCat - 跨平台键盘猫动画工具07Valdi：Snapchat 开源的新一代跨平台 UI 框架08swagger xss漏洞复现09全球最强模型Grok4，国内已可免费使用！（附教程）10Labelme从安装到标注：零基础完整指南