HTML HTML 元素 (stage1-11)

素颜马尾好姑娘i 2022-06-02 01:08 189阅读 0赞

# 基础篇-HTML 元素 #

HTML 文档由 HTML 元素定义。

#### 1.HTML 元素 ####

<table> 
 <thead> 
  <tr> 
   <th>开始标签</th> 
   <th align="center">元素内容</th> 
   <th align="right">结束标签</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;p&gt;</code></td> 
   <td align="center">这是一个段落</td> 
   <td align="right"><code>&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>&lt;a href="default.htm"&gt;</code></td> 
   <td align="center">这是一个链接</td> 
   <td align="right"><code>&lt;/a&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>&lt;br&gt;</code></td> 
   <td align="center">这是一个换行</td> 
   <td align="right"></td> 
  </tr> 
 </tbody> 
</table>

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

#### 2.HTML 元素语法 ####

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

#### 3.嵌套的 HTML 元素 ####

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

#### 4.HTML 文档实例 ####

<!DOCTYPE html>
    <html>
    <body>
    <p>这是第一个段落。</p>
    </body>
    </html>

以上实例包含了三个 HTML 元素,分别为`<html>/<body>/<p>`

#### 5.HTML 实例解析 ####

**`<p>` 元素:**

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

这个 `<p>` 元素定义了 HTML 文档中的一个段落。  
这个元素拥有一个开始标签 `<p>` 以及一个结束标签 `</p>`  
元素内容是: 这是第一个段落。

**`<body>` 元素:**

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

`<body>` 元素定义了 HTML 文档的主体。  
这个元素拥有一个开始标签 `<body>` 以及一个结束标签 `</body>`。  
元素内容是另一个 HTML 元素（p 元素）。

**`<html>` 元素：**

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

`<html>` 元素定义了整个 HTML 文档。  
这个元素拥有一个开始标签 `<html>` ，以及一个结束标签 `</html>`.  
元素内容是另一个 HTML 元素（body 元素）。

#### 6.不要忘记结束标签 ####

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

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

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。  
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

#### 7.HTML 空元素 ####

没有内容的 HTML 元素被称为空元素。  
空元素是在开始标签中关闭的。  
`<br>` 就是没有关闭标签的空元素（`<br>` 标签定义换行）。  
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。  
在开始标签中添加斜杠，比如 `<br />`，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。  
即使 `<br>` 在所有浏览器中都是有效的，但使用 **`<br />`** 其实是更长远的保障。

#### 8.HTML 提示：使用小写标签 ####

HTML 标签对大小写不敏感：  
`<P>` 等同于 `<p>`。许多网站都使用大写的 HTML 标签。  
我这里使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

1.  一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
2.  标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）