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. JSP的部分知识(二）

    指令include和动作include的区别 通过之前的学习知道,JSP最后会被转译成Servlet如果是指令include <%@include file="footer.jsp&q ...

  2. input的小技巧 清除自动记录

    input 消除自动记忆功能 在html里就可以直接清除了<input type="text" autocomplete="off"> input ...

  3. Python--遍历文件夹下所有文件和目录的方法（os.walk(rootdir)函数返回一个三元素元祖）

    import os import os.path # This folder is custom rootdir = '/Users/macbookpro/Desktop/test' for pare ...

  4. Scala 数组操作之数组转换

    使用yield和函数式编程转换数组 // 对Array进行转换,获取的还是Array val a = Array(1, 2, 3, 4, 5) val a2 = for (ele <- a) y ...

  5. 整合MyBatis

    配置数据源相关属性(见前一章节 DataSource配置) 引入依赖 <dependency> <groupId>org.mybatis.spring.boot</gro ...

  6. Spring Cloud 基于Consul 实现配置服务

    Spring Cloud体系中提供了Config组件来进行配置服务管理.而Consul除了提供服务注册与发现功能外,同时也提供配置管理功能.本位将介绍如何结合Spring Cloud + Consul ...

  7. App客户端性能测试点总结

    一.内存 测试范围1. 空闲状态下的应用内存消耗情况2. 中等规格状态下的应用内存消耗情况3. 满规格状态下的应用内存消耗情况4. 应用内存峰值情况5. 应用内存泄露情况6. 应用是否常驻内存7. 压 ...

  8. 简单记录一次注入到shell

    0x00 前言 帮朋友之前拿的一个站,有点久了没有完整截图,简单记录一下. 0x01 基础信息 操作系统:win 集成环境:phpstudy 端口开放:82,3306,3389 有phpmyadmin ...

  9. 【leetcode】338 .Counting Bits

    原题 Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate t ...

  10. redis连接数高居不下，怎么破？。。。。这么破

    最近项目一直在使用redis,首次用redis,随便从网上找了例子就用了,一开始用的还挺正常,后来发现,当客户端访问量一上来,redis的连接数居高不下,一开始以为是客户端没有关闭,开始怀疑redis ...