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月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
52 1
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
27天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
44 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(7)Layer图层元素
本文介绍了Twaver HTML5中的图层元素(Layer),包括图层的属性和使用方法。文章详细解释了如何创建图层、设置图层属性(如可见性、可编辑性、可移动性和可旋转性),并通过示例代码展示了如何在React组件中使用图层。
45 1
Twaver-HTML5基础学习(7)Layer图层元素
|
2月前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
本文介绍了在Twaver HTML5中如何为告警元素(Alarm)创建闪烁效果,以提醒用户注意。文章通过示例代码展示了如何通过定时器间隔性地改变告警标签的颜色,从而实现闪烁提示效果。
36 1
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(2)基本数据元素(Data)
本文介绍了Twaver HTML5中的基本数据元素,包括Data、Element、Alarm和Layer等,它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法,并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。
43 1
Twaver-HTML5基础学习(2)基本数据元素(Data)
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。