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. Python——raise引发异常

    程序出现错误,会自动引发异常,Python也允许使用raise语句自行引发异常. 一.使用raise引发异常 单独一个raise引发异常,默认引发RuntimeError异常,例: try: prin ...

  2. 【HC89S003F4开发板】 2调度器

    HC89S003F4开发板调度器调试 一.前言 逛论坛看到有人给HC89做了调度器,调度部分直接操作堆栈的. 下载链接 下载下来调试看看. 二.用户代码 @实现效果 编译后led灯闪烁 #includ ...

  3. 约会II

    #include <stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF& ...

  4. UnknownError: session deleted because of page crash from tab crashed

    一.问题 在docker上跑Selenium+ChromeDriver+Chrome无头模式报错: UnknownError: unknown error: session deleted becau ...

  5. stdmap 用 at() 取值，如果 key 不存在，不好意思，程序崩溃。QMap 用 value()取值，如果 key 不存在，不会崩溃，你还可以指定默认值

    我觉得 Qt6 最应该升级的是容器类 stdmap 在遍历的时候,同时获取 key 与 value 非常方便: for(auto& var:map){    qDebug()<<v ...

  6. 多线程面试题之【三线程按顺序交替打印ABC的方法】

    建立三个线程,线程名字分别为:A.B.C,要求三个线程分别打印自己的线程名字,但是要求三个线程同时运行,并且实现交替打印,即按照ABCABCABC的顺序打印.打印10轮,打印完毕控制台输出字符串:&q ...

  7. Asp.net Identity 修改默认数据库，增加自定义字段

    visual studio 2013 先新建一个项目 选择MVC,确定 打开 Views\Shared\_Layout.cshtml文件,按自己的要求修改 改 <!DOCTYPE html> ...

  8. ABP 基于DDD的.NET开发框架 学习（三）创建模块：任务管理

    1.图标i获取:https://material.io/icons/查看2.js中创建如var _tenantService = abp.services.app.tenant;需清除页面的缓存,按c ...

  9. Nacos笔记01——使用Nacos作为SpringCloud项目的服务注册中心

    前言 刚学SpringCloud时使用eureka作为服务注册中心,随着网飞公司eureka2.x不再更新,以及最近在公司实习接触到的SpringCloud项目是使用Nacos来做服务注册中心的,所以 ...

  10. TensorFlow实现Softmax Regression识别手写数字

    本章已机器学习领域的Hello World任务----MNIST手写识别做为TensorFlow的开始.MNIST是一个非常简单的机器视觉数据集,是由几万张28像素*28像素的手写数字组成,这些图片只 ...