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. 使用Lombok总结

    Lombok学习总结 Project Lombok is a java library that automatically plugs into your editor and build tool ...

  2. CTeX 更改字体（软件）

    CTeX默认显示字体太小了,写起来看着费眼睛.有没有办法更改字体呢? 更改字体方法:(图片是默认字体) 未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文) </b

  3. smarty中常用的流程控制逻辑

    if else {if $age > 18} <div>年满十八岁!</div> {else if $age > 16} <div>年满十六岁!< ...

  4. MySQL监控&性能瓶颈排查

    监控的意义&目的 业务/数据库服务是否可用 通过事务实时性能数据变化感知业务的变化 数据库性能变化趋势判断服务器资源是否足够 数据可靠性 业务数据是否可靠 服务可用,不代表数据就是正确的 有可 ...

  5. js 自定义加减乘除方法（防止js自身计算错误）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Codeforces Round #557 (Div. 1)

    A.直接做. #include<vector> #include<cstdio> #include<cstring> #include<iostream> ...

  7. chrome网页中打开exe

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\VMS] @="URL:VMS" "URL Protoco ...

  8. https、加密安全

    1.Https HTTPS在传输的过程中会涉及到三个密钥: 服务器端的公钥和私钥,用来进行非对称加密 客户端生成的随机密钥,用来进行对称加密 一个HTTPS请求实际上包含了两次HTTP传输,可以细分为 ...

  9. React Native 开发豆瓣评分（一）环境搭建&配置模拟器

    详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...

  10. day14-python之集合函数字符串格式化

    1.集合 #!/usr/bin/env python # -*- coding:utf-8 -*- # s=set(['alex','alex','sb']) # print(s) # s=set(' ...