HTML 标签

HTML 标签

HTML 标签是 HTML 规范中预定义的一些元素,这些元素由 <> 以及标签的具体语义构成。例如 <html><p><table> 等等,所有的标签都有它们各自的语义。

书写方式

在 HTML 文件中,常用的标签有两种形式,一种是配对标签,例如 <p> 标签:

<p>这是一段文本</p>

这种配对标签有一个起始标签和一个结束标签构成。结束标签和起始标签大致相同,唯一的区别是结束标签多了一个 / 字符构成的结束标记。

除了配对标签,还有一种单一标签,它们一般是自闭合的。例如换行标签:

<br />

不过值得注意的是上面这种自闭合标签在 HTML5 中已经消失了,它们被空元素所取代,典型的有 <br><hr><img><meta> 等等。

在 HTML5 中,这些空元素不再需要用 / 做为结尾标记,但是如果你真的在线上环境这样写,浏览器也能正确解析,因为浏览器会做一些兼容处理。

HTML5 中大多数的标签都是配对标签,内容会被放到开始和结束标签之间,并且这些标签是可以嵌套的。具体的标签可能会包含一些额外的附加属性,这些属性由具体的标签所限制,例如 <p> 标签:

HTML 元素

在技术上来说,我们有的时候会说某某元素,例如 p 元素。这个元素的概念其实是起始标签、结束标签以及标签的属性和标签包含的内容的集合。不过在现实中,很多时候是根据上下文来描述的,说 p 标签没问题,说 p 元素也对,只要大家明白具体指代的是什么就可以了,无需过度解读。

在 HTML5 中,标签是不区分大小写的,例如下面两行代码都是有效的:

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>

不过在书写中更推荐大家使用小写字母。

标签的嵌套

大多数的 HTML 元素(空元素除外)都可以包含任意多的其它元素,例如:

<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>

上面这种一个元素放到另一个元素内容中的方式被称为嵌套,这些嵌套的元素之间是存在父子关系。这些嵌套的元素必须保持它们标签的正确顺序,否则可能会导致报错现象。例如下面的错误案例:

<p><strong>These tags are not nested properly.</p></strong>

元素类型

HTML 元素中包含两种类型,一种是块级元素(block),另一种是行内元素(inline)。这两种元素书写的方式没有区别,但是最终在浏览器呈现的样式却有很明显的差别。

块级元素会自动占据 100% 的宽度,并且会导致它前后的元素另起一行。而行内元素之仅会占据它自身需要的空间。常用的块级元素包括:<h1> - <h6><p><div><pre><form> 等等。常用的行内元素包括 <a><b><em><span> 等等。

块级元素最好不要放到行内元素中,因为块级元素的语义更多的是“一块”,你把“一块”放到“一行”内显然是不太合适的。当然这些类型并不是恒定的,你可以通过 CSS 修改它们,但是最好不要这样做,保持 HTML 原有语义是一种值得推荐的编码方式。

HTML 注释

HTML 中还有一种类似标签写法的注释方式:

<!-- .... -->

注释以 <!-- 开头,以 --> 收尾,二者之间的内容就是需要注释的内容。添加注释主要是为了开发人员更容易理解 HTML 的用意,这些注释不会再浏览器中呈现。例如下面的代码:

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->
<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

最后只会显示 <p> 标签的内容。

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top