• HTML 不是编程语言，它是一种标记语言
  • HTML 中常见的几个名词是 元素、 标签(开始标签和结束标签)、 属性、 元素内容
  • 这篇文章将要介绍的是 HTML 元素的概念

元素的概念

例子：

<html>

<body>

<a href="http://www.baidu.com">点击跳转到百度</a>

</body>

</html>

运行结果为：

点击跳转到百度

***

上面是一个超链接的例子，点击上面的文字 “点击跳转到百度”，就可以跳转到百度的页面了。

现在我们从上面的代码中抽取一部分代码，如下所示：

<a href="http://www.baidu.com">点击跳转到百度</a>

一个元素一般包括标签、属性(属性的名称和属性的值)、元素内容，所以说这部分代码就是一个元素。

标签 属性的名称 属性的值 元素内容
< a > < /a > href http://www.baidu.com 点击跳转到百度

注意：

  • 有时会有这样的说法，例如：< a > 元素 。 我们知道 < a > 、< /a > 、 < html > 、 < /html > 、 < body > 、 < /body > 等这些都是标签，这时可能我们就会有点迷惑了，< a > 是标签，为什么又会有 < a > 元素 这样的说法呢？ 其实不用太纠结，这只是两种不同的说法，习惯性的说法是 < a > 元素、 < html > 元素，此时我们只要知道 < a > 元素这样的说法表示上面表格列出的所有东西，即标签、属性、元素内容，但是如果是 < a > 标签这样的说法，那就真的只是表示 < a > 这个标签了。
  • 一个元素一般包括标签、属性、元素内容，但是也有比较特别的元素，例如：< br > 。
  • 元素是可以嵌套的，一个元素可以包含另一个元素，例如上面的例子中， < body > 元素包含 < a > 元素，这时 < a > 元素就是 < body > 元素的元素内容，< html > 元素包含 < body > 和 < a > 元素，那么这两个都是 < html > 元素的元素内容。

总结：

  • 注意区分 < a > 元素 和 < a > 标签 这两种说法。
  • 以 < br > 元素为特殊元素的代表，下面举了一个相关的例子。
  • 在开始标签和结束标签之间的内容就为该元素的元素内容，例如：< a > 元素的内容为 点击跳转到百度。

与 < br > 相关的例子：

<html>

<body>

<p>这是一个换行元素</p>

<p>这是一个<br/>换行元素</p>

</body>

</html>

运行结果为：

这是一个换行元素

这是一个
换行元素

***
我们可以从运行结果中看到，< br > 元素的效果是将文字换行了。

在编写代码时一般写成 < br / > 。

我们可以看到，< br > 元素是没有结束标签的，我们知道一个元素的元素内容是指在开始标签与结束标签之间的内容，换句话说 < br > 元素是没有元素内容的，我们也称这类元素为空元素。

注意，空元素没有元素内容，但可以有属性，例如：< img src="图片.jpg" width="100" height="150" / > 。

End~

HTML 笔记之 HTML 元素的概念的更多相关文章

  1. HTML中块元素与内联元素的概念

    HTML中块元素与内联元素的概念 div就是一个块元素,所谓的块元素就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行. p h1 h2 h3 ... div这个标签没有任何语义,就是一个纯 ...

  2. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  3. Shiro笔记（一）基本概念

    Shiro笔记(一)基本概念 一.简介 Shiro是一个Java安全框架,可以帮助我们完成:认证.授权.加密.会话管理.与Web集成.缓存等. Authentication:身份认证/登录,验证用户是 ...

  4. AME_AME审批中子元素的概念和用途（概念）

    2014-05-30 Created By BaoXinjian AME: Oracle Approvals Management AME的6个元素的概念和主要作用: Attribue  ->  ...

  5. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  6. 机器学习框架ML.NET学习笔记【1】基本概念与系列文章目录

    一.序言 微软的机器学习框架于2018年5月出了0.1版本,2019年5月发布1.0版本.期间各版本之间差异(包括命名空间.方法等)还是比较大的,随着1.0版发布,应该是趋于稳定了.之前在园子里也看到 ...

  7. html5--1.3 元素的概念与3个常用标签

    html5--1.3 元素的概念与3个常用标签 学习要点 1.元素的概念 2.3个常用的标签 HTML 元素指的是从开始标签到结束标签的所有代码. 开始标签 元素内容 结束标签 <h1> ...

  8. Python3+Selenium3+webdriver学习笔记10（元素属性、页面源码）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记10(元素属性.页面源码)'''from selenium i ...

  9. CLR via C#深解笔记一 - CLR & C# 基础概念

    写在前言   .Net Framework并不是Win 32 API 和COM上的一个抽象层.   某种程度上,它是自己的操作系统,有自己的内存管理器,自己的安全系统,自己的文件加载器,自己的错误处理 ...

随机推荐

  1. Servlet的一些细节

    由于客户端是通过URL地址访问web服务器的中的资源的,所以Servlet程序若想被外界访问,必须把servlet程序映射到一个URL地址上,这个工作在web.xml文件中使用<servlet& ...

  2. Entity Framework 分页处理

    在SQL中进行分页,网上已经有很多例子了,在这里我使用Linq to SQL让C#来生成分页代码,首先创建分页的扩展方法: public static class Extensions { /// & ...

  3. Ubuntu tar 解压缩命令详解

    tar 解压缩命令详解: -c: 建立压缩档案 -x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只 ...

  4. C++基础之类和对象一

    (1)类是一种复杂的数据类型,它是抽象数据类型的实现,是数据和相关操作的封装体.类用来确定一类对象的形为,而这些行为是通过类的内部数据和操作来确定的.这些行为是通过一种操作接口来描述的.(2)类的定义 ...

  5. MCP|MZL|Accurate Estimation of Context- Dependent False Discovery Rates in Top- Down Proteomics 在自顶向下蛋白组学中精确设定评估条件估计假阳性

    一. 概述: 自顶向下的蛋白质组学技术近年来也发展成为高通量蛋白定性定量手段.该技术可以在一次的实验中定性上千种蛋白,然而缺乏一个可靠的假阳性控制方法阻碍了该技术的发展.在大规模流程化的假阳性控制手段 ...

  6. jmeter - 录制app接口

    准备: 1.手机 2.wifi 3.Jmeter   步骤: 1.Jmeter->文件->Template    2.手机设置代理 端口:8888:电脑的ip,如下图设置 3.点击启动   ...

  7. h5自定义播放器得实现原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js和css文件位置对页面性能的影响

    翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...

  9. Luogu P2833 等式 我是傻子x2

    又因为调一道水题而浪费时间...不过细节太多了$qwq$,暴露出自己代码能力的不足$QAQ$ 设$d=gcd(a,b)$,这题不是显然先解出来特解,即解出 $\frac{a}{d}x_0+\frac{ ...

  10. python大战机器学习——半监督学习

    半监督学习:综合利用有类标的数据和没有类标的数据,来生成合适的分类函数.它是一类可以自动地利用未标记的数据来提升学习性能的算法 1.生成式半监督学习 优点:方法简单,容易实现.通常在有标记数据极少时, ...