• 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. 文件格式——fastq格式

    fastQ格式 FASTQ是一种存储了生物序列(通常是核酸序列)以及相应的质量评价的文本格式. 他们都是以ASCII编码的.现在几乎是高通量测序的标准格式.NCBI Short Read Archiv ...

  2. Spring入门第二十八课

    事务的传播行为 当事务方法被另一个事务方法调用时,必须指定事务应该如何传播,例如:方法可能继续在现有事务中运行,也可能开启一个新的事务,并在自己的事务中运行. 事务的传播行为可以由传播属性指定.Spr ...

  3. 介绍两款常用的“图表统计图"的插件

    一.相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件:fusionChart.DataVisualization. 1.fusionChart实际项目中用 ...

  4. 【解决】client does not support authentication

    cmd窗口登陆mysql: C:\Users\Administrator>  sqlplus  /nolog mysql>  conn / as sysdba; mysql> alt ...

  5. java线程基础知识----线程与锁

    我们上一章已经谈到java线程的基础知识,我们学习了Thread的基础知识,今天我们开始学习java线程和锁. 1. 首先我们应该了解一下Object类的一些性质以其方法,首先我们知道Object类的 ...

  6. 获取指定日期相关DATENAME和DATEPART数据

    DATENAME和DATEPART有何区别,Insus.NET写成一个函数,可以方便查询与对比: 一个是返回一个字符串,另一个是返回一个整数. SET ANSI_NULLS ON GO SET QUO ...

  7. [CentOS7] 搭建vncserver,远程通过vncviewer来查看图形界面

    Linux上搭建vncserver需下载tigervnc,当然可以从命令下载: 查看一下可以下载哪些: 下载tigervnc-server: 然后可以简单看下 cat /lib/systemd/sys ...

  8. hdu6070(分数规划/二分+线段树区间更新,区间最值)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6070 题意: 给出一个题目提交序列, 从中选出一个正确率最小的子串. 选中的子串中每个题目当且仅当最 ...

  9. [Xcode 实际操作]五、使用表格-(2)设置UITableView单元格高度

    目录:[Swift]Xcode实际操作 本文将演示如何制作一个自定义行高的表格视图 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

  10. Exadata 12.2.1.1.0 Highlights

    突然发现,在中国农历新年的这几年里,Exadata 12.2版本已经发布了. 本起去docs.oracle.com上看看它的新特性,结果发现文档还没有更新: 下面是找到的一些资料,让我们来一睹为快吧: ...