HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素

开始标签 * 元素内容 结束标签 *
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行  

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

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

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<p大多数 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

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

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>

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

</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

　　<body>

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

　　</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

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

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 003 元素的更多相关文章

  1. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  2. Java Collection - 003 高效的找出两个List中的不同元素

    如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素? 方法1:遍历两个集合 public ...

  3. Selenium with Python 003 - 页面元素定位

    WebUI自动化,首先需要定位页面中待操作的元素,然后进行各种事件操作,这里我们首先介绍Selenium Python 如何定位页面元素,WebDriver 提供了一系列的方法. 定位单个页面元素(返 ...

  4. 003——VUE操作元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 003 Python基本语法元素

    目录 一.概要 1.1 方法论 1.2 实践能力 一.概要 程序设计基本方法:https://www.cnblogs.com/nickchen121/p/11164043.html Python开发环 ...

  6. JQuery_处理元素和浏览器的窗口的尺寸

    一.jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或 ...

  7. jQuery使用之（一）标记元素属性

    jQuery使用主要介绍jQuery如何控制页面,包含元素的属性.css样式风格.DOM模型.表单元素和事件处理等. 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状 ...

  8. 【面试题003】c数组做为参数退化的问题，二维数组中的查找

    [面试题003]c数组做为参数退化的问题,二维数组中的查找  一,c数组做为参数退化的问题 1.c/c++没有记录数组的大小,因此用指针访问数组中的元素的时候,我们要确保没有超过数组的边界, 通过下面 ...

  9. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

随机推荐

  1. MyBatis逆向工程生成配置 generator (生成pojo、mapper.xml、mapper.java)

    MyBatis逆向工程生成 mybatis需要程序员自己编写sql语句,mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.mapper.xml ...

  2. EAFP vs LBYL

    EAFP vs LBYL 检查数据可以让程序更健壮,用术语来说就是防御性编程.检查数据的时候,有EAFP和LBYL两种不同的编程风格,具体的意思如下: LBYL: Look Before You Le ...

  3. 数据结构-链式队列-C++

    用链表搭建的栈与队列相对简单,队列的特点是先进先出,不啰嗦了,由于代码比较简单,相信光顾的人不会太多,下面直接贴代码. 头文件 #ifndef QUEUELI_H #define QUEUELI_H ...

  4. RAP2 前后端开发利器搭建

    RAP2 是一个api管理系统,前后端协作开发的利器. 在线体验地址http://rap2.taobao.org Web接口管理工具,开源免费,接口自动化,MOCK数据自动生成,自动化测试,企业级管理 ...

  5. JAVA堆，栈的区别，用AarrayList、LinkedList自定义栈

    大家都知道java模拟机在运行时要开辟空间所以它有特定的五个内存划分: 1.寄存器:    2.本地方法区:    3.方法区:    4.栈内存:    5.堆内存: 但是我们今天来注重讲一下栈和堆 ...

  6. oracle 生成随机日期+时间

    oracle 生成随机日期+时间 SELECT to_date(TRUNC(DBMS_RANDOM.VALUE(to_number(to_char(to_date('20110101','yyyymm ...

  7. 编写Postgres扩展之三：调试

    原文:http://big-elephants.com/2015-10/writing-postgres-extensions-part-iii/ 编译:Tacey Wong 在上一篇关于编写Post ...

  8. Pytorch 1.0升级到Pytorch 1.1.0

    Pytorch 1.0Pytorch 1.0于2018-12-8发布,详见https://github.com/pytorch/pytorch/releases/tag/v1.0.0 主要更新JIT全 ...

  9. IO模型之BIO代码详解及其优化演进

    一.BIO简介 BIO是java1.4之前唯一的IO逻辑,在客户端通过socket向服务端传输数据,服务端监听端口.由于传统IO读数据的时候如果数据没有传达,IO会一直等待输入传入,所以当有请求过来的 ...

  10. vue 打印html

    1.https://github.com/xyl66/vuePlugs_printjs从这个路径下载print.js.放到你的代码中 2.我是放到我本地一个js文件中. 3.引入当前文件 //打印插件 ...