freeCodeCamp/guide/chinese/html/elements/index.md

3.3 KiB
Raw Blame History

title localeTitle
Elements 分子

HTML元素

元素是HTML的构建块用于描述网页的结构和内容。它们是超文本标记语言HTML的“标记”部分。

HTML语法使用尖括号“<”和“>”来保存HTML元素的名称。元素通常具有开始标记和结束标记并提供有关其包含的内容的信息。两者之间的区别在于结束标记有正斜杠。

这是一个使用p元素 <p> )告诉浏览器一组文本是段落的示例:


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

打开和关闭标记应该匹配,否则浏览器可能以意外的方式显示内容。

XKCD漫画显示文字“问:你如何惹恼开发者?”由开口div标签和关闭span标签包围

自闭元素

某些HTML元素是自动关闭的这意味着它们没有单独的结束标记。自闭元素通常会在文档中插入一些内容。

一个例子是br元素 <br> ),它在文本中插入换行符。以前,自动关闭标签内部有正斜杠( <br /> 但HTML5规范不再需要这样。

HTML元素功能

有许多可用的HTML元素。以下是它们执行的一些功能的列表

  • 提供有关网页本身的信息(元数据)
  • 将页面内容结构化为部分
  • 嵌入图像,视频,音频剪辑或其他多媒体
  • 创建列表,表格和表单
  • 提供有关特定文本内容的更多信息
  • 链接到样式表,其中包含有关浏览器应如何显示页面的规则
  • 添加脚本以使页面更具交互性和动态性

嵌套HTML元素

您可以将元素嵌套在HTML文档中的其他元素中。这有助于定义页面的结构。只需确保标签首先从最里面的元素关闭。

正确: <p>This is a paragraph that contains a <span>span element.</span></p>

不正确: <p>This is a paragraph that contains a <span>span element.</p></span>

块级和内联元素

元素有两大类,称为块级和内联。块级元素自动从新行开始,而内联元素位于周围内容中。

帮助将页面组织成部分的元素(例如导航栏,标题和段落)通常是块级元素。插入或提供有关内容的更多信息的元素通常是内联的,例如链接图像

HTML元素

有一个<html>元素用于包含HTML文档的其他标记。它也被称为“根”元素因为它是其他HTML元素的父级和页面的内容。

这是一个带有head元素 body元素和一个段落的页面示例:


<!DOCTYPE html> 
 <html> 
  <head> 
  </head> 
  <body> 
    <p>I'm a paragraph</p> 
  </body> 
 </html> 

HEAD元素

这是用于处理HTML文档的信息和元数据的容器。


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

身体元素

这是HTML文档的可显示内容的容器。


<body>...</body> 

P元素

创建一个段落,可能是最常见的块级元素。


<p>...</p> 

A链接元素

创建一个超链接,将访问者定向到另一个页面或资源。


<a href="#">...</a> 

其他资源