其他标签 本章介绍一些最新引入标准的标签。 <dialog> 基本用法 <dialog>标签表示一个可以关闭的对话框。 123<dialog> Hello world</dialog> 上面就是一个最简单的对话框。 默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性。 123<dialog open> Hello world</dialog> 上面代码会在网页显示一个方框，内容是Hello world。 <dialog>元素里面，可以放入其他 HTML 元素。 123456<dialog open> <form method="dialog"> <input type="text"> <button type="submit" value="foo">提交</button> </form>< ...

表单标签 表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。 表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。 <form> 简介 <form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。 123<form> <!-- 各种表单控件--></form> 上面代码就是表单的基本形式。 下面是一个比较常见的例子。 12345<form action="https://example.com/api" method="post"> <label for="POST-name">用户名：</label> <input id="POST-name" type="text" name="user"> <input type ...

iframe <iframe>标签用于在网页里面嵌入其他网页。 基本用法 <iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。 12345<iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p><a href="https://www.example.com">点击打开嵌入页面</a></p></iframe> 上面的代码在当前网页嵌入https://www.example.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。 浏览 ...

表格标签 表格（table）以行（row）和列（column）的形式展示数据。 <table>，<caption> <table>是一个块级容器标签，所有表格内容都要放在这个标签里面。 123<table> ... ...</table> <caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的。 123<table> <caption>示例表格</caption></table> <thead>、<tbody>、<tfoot> <thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。 12345<table> <thead>... ...</thead> <tbody>... ...</tbody> & ...

多媒体标签 除了图像，网页还可以放置视频和音频。 <video> <video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。 123<video src="example.mp4" controls> <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p></video> 上面代码中，如果浏览器不支持该种格式的视频，就会显示<video>内部的文字提示。 <video>有以下属性。 src：视频文件的网址。 controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。 width：视频播放器的宽度，单位像素。 height：视频播放器的高度，单位像素。 autopla ...

链接标签 链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。 URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。 <a> 链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。 1<a href="https://wikipedia.org/">维基百科</a> 上面代码就定义了一个超级链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。 <a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。 123<a href="https://www.example.com/"> <img src="https://www.example.com/foo.jpg">< ...

图像标签 图片是互联网的重要组成部分，让网页变得丰富多彩。本章介绍如何在网页插入图片。 <img> <img>标签用于插入图片。它是单独使用的，没有闭合标签。 1<img src="foo.jpg"> 上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。 <img>默认是一个行内元素，与前后的文字处在同一行。 1<p>Hello<img src="foo.jpg">World</p> 上面代码的渲染结果是，文字和图片在同一行显示。 图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。 <img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。 123<a href="example.html"> <img src="foo.jpg&quo ...

列表标签 列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。 有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。 1231. 列表项 A2. 列表项 B3. 列表项 C 无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。 123· 列表项 A· 列表项 B· 列表项 C <ol> <ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。 12345<ol> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li></ol> 上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号。 <ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表。 1234567891011<ol> <li>列表项 A</li> <l ...

文本标签 历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。 <div> <div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。 它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。 1234567<div class="main"> <div class="article"> <div class="title"> <h1>文章标题</h1> </div> </div></div> 上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。 1234567<main> <article> <header> < ...