HTML 简明教程 ( HTML5 标准 ) - 标记标签 ( tag )

yufei       5 年, 8 月 前       1656

HTML 使用标记标签来描述网页,HTML 文档由许多 HTML 标记标签组成

HTML 标记标签通常包含开始标记和结束标记,内容包含在标记的中间

例如,下面的代码一个典型的 HTML 标记标签

<p>你好,这是我的第一个段落</p>
开始标记 标记的内容 结束标记
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br/>

没有内容的 HTML 元素称为 空元素 ,空元素在开始标记中关闭,<br> 是一个没有 结束标记 的空元素

HTML 标记标签语法

  • HTML 标记标签以 开始标记 开始
  • HTML 标记标签以 结束标记 结束
  • 标记的内容位于 开始标记结束标记 之间
  • 某些 HTML 标记标签没有内容,只是一个 空标记
  • 空标记开始标记 中结束
  • 大多数 HTML 标记标签都可以拥有属性

注意: 我们将在本教程的下一章中学习有关属性的更多信息

HTML 文档示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

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

</html>

上面的示例包含 5 个 HTML 标记标签

<meta> 标记标签

<meta charset="utf-8" />

<meta> 标记标签是一个空标记标签,它用于定义该 HTML 文档使用的字符集,为 utf-8

<meta 标记的开始标记就是结束标记,结束标记一般使用 /> 代替 > 作为结束

<head> 标记标签

<head>
    <meta charset="utf-8" />
</head>

<head> 标记标签用于标记该 HTML 文档的一些元信息,所谓元信息,就是描述该文档的信息

该标记标签具有 开始标记 <head> 和结束标记 </head>

而标记的内容是 <meta charset="utf-8" />

<p> 标记标签

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

<p> 标记标签标记了 HTML 文档中的段落

该标记标签具有 开始标记 <p> 和结束标记 </p>

而标记的内容是 这是第一个段落

<body> 标记标签

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

<body> 标记标签定义了 HTML 文档的可见内容

此标记标签具有 开始标记 <body> 和结束标记 </body>

而标记的内容就是另一个标记 <p>这是第一个段落</p>

<html> 标记标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

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

</html>

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

此标记标签具有 开始标记 <html> 和结束标记 </html>

而标记的内容就是另两个标记

<head>
    <meta charset="utf-8" />
</head>

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

不要忘记添加结束标记

如果忘记添加结束标记,这对于 HTMLHTML5 规范来说,是错误的,

但对于绝大多数浏览器,仍会正确的显示 HTML

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

上面的示例在浏览器中也能正确显示,因为浏览器会使用最大的兼容性,但尽量不采用这种方法

忘记结束标记可能会产生不可预测的结果或错误

HTML 空标记标签

没有内容的 HTML 标记标签称为 空元素

空标记标签 在开始标记中关闭,<br> 是一个没有标记标签的空标记

但在 XHTMLXMLHTML 的未来版本中,必须关闭所有标记

在开始标记中添加斜杠 ( 例如 <br /> ) 是关闭 HTML 标记的正确方法,同时也被 XHTMLXML 支持

尽管 <br> 在所有浏览器中都有效,但使用 <br /> 实际上是一个长期保障措施

目前常见的 HTML 空标记有: <hr /><input /><img /><link /><meta />

HTML 标记不区分大小写,也就是 <P> 等同于 <p>

许多网站使用大写 HTML 标记。但是,W3C 建议在 HTML 4 和未来 (X ) HTML ( 5 ) 版本中使用小写

所有的 HTML 标记标签

更多有关 HTML(5) 标准的标记标签,可以访问 HTML 参考手册

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.