HTML 元素

TML 文档由 HTML 元素定义。

HTML 元素

开始标签 *	元素内容	结束标签 *
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<p大多数 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.

元素内容是: This is my first paragraph.

<body> 元素:

<body>

<p>这是第一个段落。</p>

</body>

The <body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

The <html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

ideo元素与audio元素所具有的属性大致相同，

下面来看一下这两个元素都具有哪些属性。

　src属性和autoplay属性

src属性用于指定媒体数据的URL地址。

autoplay属性用于指定媒体是否在页面加载后自动播放，使用方法如下。

在文件中创建多媒体元素<video>，并在元素的src属性中，

设置播放的视频文件的URL地址，并设置页面加载完成后自动播放这个文件。代码如下。

<!DOCTYPE HTML>

<html>

<head>

<title>使用多媒体元素播放文件</title>

</head>

<body>

你的浏览器不支持视频

</video>

</body>

</html>

　perload属性

perload属性用于指定视频或音频数据是否预加载。如果使用预加载，

则浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放速度，

因为播放时数据已经预先缓冲完毕。

该属性有3个可选值，分别是none、metadata和auto，其默认值为auto。

　none值表示不进行预加载。

　metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）。

　auto表示预加载全部视频或音频。

该属性的使用方法如下。

　poster（video元素独有属性）和loop属性

当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。当视频不可用时，

最好使用poster属性，以免展示视频的区域中出现一片空白。

该属性的使用方法如下。

在文件中创建一个video元素，为video元素设置poster属性，并选取一幅图片作为该属性的值。代码如下。

<html>

<head>

<title>设置video 元素的poster 属性</title>

</head>

<body>

你的浏览器不支持视频

</video>

</body>

</html>

运行实例，在播放视频文件之前，在视频播放区域中首先将显示poster属性指定的图片，

loop属性用于指定是否循环播放视频或音频，

其使用方法如下。

　controls属性、width属性和height属性（后两个是video元素独有属性）

controls属性指定是否为视频或音频添加浏览器自带的播放用的控制条。

控制条中具有播放、暂停等按钮。其使用方法如下。

说明

开发者也可以在脚本中自定义控制条，而不使用浏览器默认的控制条。

width属性与height属性用于指定视频的宽度与高度（以像素为单位），

使用方法如下。

在文件中创建一个video元素，首先在元素的src属性中设置需要播放的视频文件，

然后分别设置video元素的宽度与高度。代码如下。

<html>

<head>

<title>设置video 元素的大小</title>

</head>

<body>

你的浏览器不支持视频

</video>

</body>

</html>

　error属性

在读取、使用媒体数据的过程中，正常情况下该属性为null，

但是任何时候只要出现错误，该属性将返回一个MediaError对象，

该对象的code属性返回对应的错误状态码，其可能的值如下。

　MEDIA_ERR_ABORTED（数值1）：媒体数据的下载过程由于用户的操作而被终止。

　MEDIA_ERR_NETWORK（数值2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被终止。

　MEDIA_ERR_DECODE(数值3）：确认媒体资源可用，但是解码时发生错误。

　MEDIA_ERR_SRC_NOT_SUPPORTED（数值4）：媒体资源不可用，媒体格式不被支持。

error属性为只读属性。

　networkState属性

该属性在媒体数据加载过程中读取当前网络的状态，其值如下。

　NETWORK_EMPTY（数值0）：元素处于初始状态。

　NETWORK_IDLE（数值1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。

　NETWORK_LOADING（数值2）：媒体数据加载中。

　NETWORK_NO_SOURCE（数值3）：没有支持的编码格式，不执行加载。

networkState属性为只读属性，读取网络状态的实例代码如下。

　currentSrc属性、buffered属性

可以用currentSrc属性来读取播放中的媒体数据的URL地址，该属性为只读属性。

最靠谱的WEB前端教程——整整140集，全程干货无废话，学完变大佬！

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
<head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

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

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

<p>：定义一个段落。
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<strong>：定义强调文本，通常以粗体显示。
<em>：定义强调文本，通常以斜体显示。
<a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">

src：指定图像文件的路径。
alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>

action：指定表单数据提交的目标URL。
method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">

type：指定字段类型。
name：指定字段的名称。
placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定单选按钮组的名称。
value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

name：指定下拉列表的名称。
每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

在线咨询

上一篇：XML 和 HTML 比较：你应该知道的主要区别
下一篇：图片上传组件WebUploader图片被压缩解决方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 元素

一部分：HTML简介

什么是HTML？

HTML的基本结构

HTML标签和元素

HTML注释

第二部分：HTML基本元素

文本

图像

链接

列表

无序列表

有序列表

定义列表

第三部分：HTML表单

<form>元素

输入字段

文本框

密码框

单选按钮

复选框

下拉列表

第四部分：HTML样式和CSS

内联样式

外部样式表

总结

您的项目需求