HTML 元素

简介: HTML 元素

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端扫盲之HTML

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

HTML 元素

HTML 文档由 HTML 元素定义,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。


HTML 元素

*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。


HTML 元素语法

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


嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素(可以包含其他 HTML 元素)构成。


HTML 文档实例

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

HTML 实例解析

元素:

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

这个

元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签

以及一个结束标签

元素内容是: 这是第一个段落。

元素:

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

元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 以及一个结束标签 。 元素内容是另一个 HTML 元素(p 元素)。

** 元素:**

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

元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 ,以及一个结束标签 . 元素内容是另一个 HTML 元素(body 元素)。

不要忘记结束标签


如果您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

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

HTML 空元素


HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为

(用于定义换行),

元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠,比如

,HTML、XHTML 和 XML 都接受这种方式。

注意:在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭,即使是空元素。

HTML 提示:使用小写标签


由于 HTML 标签对英文字母的大小写不敏感,所以

表达的意思相同,不过早年的大部分网站喜欢使用大写的 HTML 标签。

W3CSchool 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

在HTML4之前,HTML的标准比较混乱,所以早年的HTML代码并不是那么规范,与XML的代码会更加相似,而XML代码的一大特点就是标签喜欢使用大写,所以在HTML刚发展的几年大部分网站都喜欢使用大写的标签。

随着HTML4甚至HTML5的普及,后续的网站都遵循HTML4的推荐——使用小写,这也是为什么现在的大多数网站使用小写的HTML标签的原因。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
1天前
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
103 0
|
1天前
|
缓存 前端开发 JavaScript
13个很酷但很少有人知道的HTML元素
13个很酷但很少有人知道的HTML元素
37 0
13个很酷但很少有人知道的HTML元素
|
1天前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
1天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
19 1
|
1天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
1天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
1天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
1天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
1天前
|
搜索推荐
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
25 0
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
|
1天前
|
JavaScript 前端开发
在JavaScript中怎样获取或修改HTML元素。
在JavaScript中怎样获取或修改HTML元素。