html视频代码怎么用(html视频代码讲解)-众学网

HTML语言（HyperText Mark-up Language中文通常称作超文本置标语言，或超文本标记语言）是一种文本类、解释执行的标记语言。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

一、HTML 简介

什么是 HTML 文件？

HTML 指超文本标签语言。

HTML 文件是包含一些标签的文本文件。

这些标签告诉 WEB 浏览器如何显示页面。

HTML 文件必须使用 htm 或者 html 作为文件扩展名。

做个实验如何？

第一步：如果您使用 Windows，请启动记事本。

如果您使用 Mac，请启动 SimpleText。

（在 OSX 中请使用 TextEdit，并设置一下参数：在参数设置中选择 Plain text 字体替代 Rich text 字体，然后选择“在 HTML 文件中忽略 rich text 命令”。这一点很重要，因为不这样的话，HTML 代码也许不能正常工作。）

第二步：键入以下文本：

<html>
<head>
<title>页面的标题</title>
</head>
<body>
<p>这是我的第一个页面。<b>这是粗体文本。</b></p>
</body>
</html>

第三步：将这个文件存为 "mypage.html"。

例子解释：

HTML 文件中的第一个标签是 <html>。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 </html>。这个标签告诉您的浏览器，这是 HTML 文件的结束点。

位于 <head> 标签和 </head> 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。

<title> 标签中的文本是文件的标题。标题会显示在浏览器的标题栏。

<body> 标签中的文本是将被浏览器显示出来的文本。

<b> 和 </b> 标签中的文本将以粗体显示。

为什么我们要使用小写的标签？

我们刚才讲到：HTML 标签对大小写是不敏感的：<b> 和 <B> 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 HTML 标签。而我们总是使用小写。原因何在呢？

如果您希望为使用下一代 HTML 而做好准备，您就应该使用小写标签。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。

HTM 还是 HTML 扩展名？

当您将一个 HTML 文件存盘时，您即可以使用 HTM 也可以使用 HTML 作为扩展名。我们刚才使用了 .htm 作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。

如果您使用新近的软件，我们认为使用 .html 是相当安全的做法。

二、HTML 元素

HTML 文档是由 HTML 元素构成的文本文件。

HTML 元素是通过使用 HTML 标签进行定义的。

HTML 标签

HTML 标签是用来标记 HTML 元素的。

HTML 标签被 < 和 > 符号包围。

这些包围的符号叫作尖括号。

HTML 标签是成对出现的。例如 <b> 和 </b>。

位于起始标签和终止标签之间的文本是元素的内容。

HTML 标签对大小写不敏感，<b> 和 <B> 的作用的相同的。

还记得上一节中的那个例子吗：<html>

<head>
<title>页面的标题</title>
</head>

<body>
<p>这是我的第一个页面。</p><b>此文本是粗体的。</b></body>

</html>

这就是一个 HTML 元素：

<b>此文本是粗体的。</b>

这个 HTML 元素由起始标签 <b> 开始。

这个元素的内容是：“此文本是粗体的。”。

这个 HTML 元素由终止标签 </b> 结尾。

<b> 标签的作用是定义一个显示为粗体的 HTML 元素。

这也是一个 HTML 元素：

<body>
<p>这是我的第一个页面。</p>
<b>此文本是粗体的。</b>
</body>

这个 HTML 元素开始于 <body> 标签，结束于 </body> 标签。

<body> 标签的作用是定义 HTML 文件中的容纳 body 的 HTML 元素。

为什么我们要使用小写的标签？

我们刚才讲到：HTML 标签对大小写是不敏感的：<b> 和 <B> 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？

如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。

三、HTML 标签

HTML 中最重要的标签是定义标题、段落和换行的标签。

标题

标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML 会自动在标题前后添加一个额外的折行。

段落

段落使用 <p> 标签进行定义。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 会自动在段落前后添加一个额外的空行。

不要忘记关闭标签

您可能注意到了，在编写段落时可以不带有 </p> 标签：

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。HTML 未来的版本不允许省略任何结束标签。

通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

换行符

当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。

<p>This <br> is a para<br>graph with line breaks</p>

<br> 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br> 的终止标签。

您会越来越多地发现 <br> 与 <br /> 很相似。

由于 <br> 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。

把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

HTML 注释

<!– This is a comment –>

注意：左括号后需要写一个惊叹号，右括号前就不需要了。

对 HTML 元素的重新认识

每个 HTML 元素都有一个元素名（比如 body、h1、p、br）

开始标签是被括号包围的元素名

结束标签是被括号包围的斜杠和元素名

元素内容位于开始标签和结束标签之间

某些 HTML 元素没有内容

某些 HTML 元素没有结束标签

基本的注意事项 – 有益的提示

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。

使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它！（但是不要用 <br> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

您也许已经注意到了，在没有结束标签 </p> 的情况下，<p> 标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。

HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

四、HTML 属性

属性为 HTML 元素提供附加信息。

HTML 标签的属性

HTML 标签拥有属性。属性为 HTML 元素提供附加信息。

属性总是以名称/值对的形式出现，比如：name="value"

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

使用小写属性

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性值。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

五、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

锚标签和 Href 属性

HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

创建锚的语法：<a href="url">Text to be displayed</a>

<a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。

这个锚定义了指向 w3school 的链接：

<a href="http://www.w3school.com.cn/">Visit W3School!</a>

Target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>锚标签和 Name 属性

Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

以下是命名锚的语法：

<a name="label">Text to be displayed</a>

name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。

下面这行定义了命名锚：

<a name="tips">Useful Tips Section</a>

你会注意到，命名锚会以特殊的方式来显示。

将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：

<a href="http://www.w3school.com.cn/html_links.asp#tips">
Jump to the Useful Tips Section
</a>

从文件 html_links.asp 内部链接到 Useful Tips 节的超级链接是这样的：

基本的注意事项 – 有用的提示：

命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

六、HTML 表格

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

在浏览器显示如下：

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<table border="1"><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>表格的表头

表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr><th>Heading</th>
<th>Another Heading</th></tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

在浏览器显示如下：

row 1, cell 1row 1, cell 2row 2, cell 1

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

在浏览器中显示如下：

row 1, cell 1row 1, cell 2row 2, cell 1

七、HTML 图像

通过使用 HTML，可以在文档中显示图像。

图像标签（<img>）和源属性（Src）

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