元素

HTML本质上是由一系列的元素(Element)构成的。

  • 元素是网页的一部分;
  • 一个元素可以包含一个数据项,或是一块文本,或是一张照片,亦或是什么也不包含;

HTML有哪些元素?

元素的组成

剖析一个HTML元素的组成:

点击a标签 导致element ui标签栏消失 html element标签_嵌套


这个元素的主要部分有:

  1. 开始标签(Opening tag):包含元素的名称(本例为 p),被左、右尖括号所包围。表示元素从这里开始或者开始起作用。
  2. 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 。
  3. 内容(Content):元素的内容,本例中就是所输入的文本本身。
  4. 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。

元素的属性

元素也可以拥有属性(Attribute):

点击a标签 导致element ui标签栏消失 html element标签_HTML_02


属性包含元素的额外信息,这些信息不会出现在实际的内容中。

一个属性必须包含如下内容:

  1. 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
  2. 属性名称,后面跟着一个等于号。
  3. 一个属性值,由一对引号“ ”引起来。

属性的分类

有些属性是公共的,每一个元素都可以设置

  • 比如class、id、title属性

有些属性是元素特有的,不是每一个元素都可以设置

  • 比如meta元素的charset属性、img元素的alt属性等

单标签元素 – 双标签元素

双标签元素:我们会发现前面大部分看到的元素都是双标签的。

  • html、body、head、h2、p、a元素;

单标签元素:也有一些元素是只有一个标签。

  • br、img、hr、meta、input;

注意事项

  • HTML元素不区分大小写,但是推荐小写

元素的结构总结

点击a标签 导致element ui标签栏消失 html element标签_前端_03

元素的嵌套关系

某些元素的内容除了可以是文本之外,还可以去其他元素,这样就形成了 元素的嵌套

点击a标签 导致element ui标签栏消失 html element标签_前端_04

HTML的注释

点击a标签 导致element ui标签栏消失 html element标签_HTML_05


注释

  • 简单来说,注释就是一段代码说明。
  • <!-- 注释内容 -->
  • 注释是只给开发者看的,浏览器并不会把注释显示给用户看。

注释的意义

  • 帮助我们自己理清代码的思路, 方便以后进行查阅。
  • 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)。
  • 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)。
  • 可以临时注释掉一段代码, 方便调试。

注释快捷键:ctrl + /