前端笔记03——HTML元素

2024-06-30 17:31:42

前言

前面我学到了HTML的基础，这里给大家分享一下我学习到的HTML元素。

HTML元素

HTML元素是从开始标签(start tag)到接受结束标签(end tag)的所有代码。

HTML元素语法

HTML元素开始标签起始
HTML元素结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中关闭，举例图像标签<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2816162621,3916018043&fm=27&gp=0.jpg" width="300" height="200">
大多数HTML元素可以拥有属性

嵌套HTML元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。其实我们看到很多HTML 文档都是由嵌套的 HTML 元素构成。

举个HTML文档例子

下面的HTML文档例子中包含了三个HTML元素，分别是<html></html>、<body></body>、<p></p>。

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

不要结束标签

结束标签一般是</>这样的，可能忘记结束标签浏览器还是可以显示的，但是可能会出现不可预料的错误。

空的HTML元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使<br> 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

使用小写标签

HTML标签对大小写不敏感，但是万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

前端笔记03——HTML元素相关推荐

前端笔记03——重复打开新页签问题
今天遇到了一个前端问题,就是在点击链接或按钮时跳转新页签时,如果再次点击该按钮,还会重新打开一个页面,这里我想要再次点击按钮时定位到第一次打开的页面,于是就有了下面的代码. <!DOCTYPE ...
JQuery-学习笔记03【基础——DOM操作】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
大数据之路读书笔记-03数据同步
大数据之路读书笔记-03数据同步如第一章所述,我们将数据采集分为日志采集和数据库数据同步两部分.数据同步技术更通用的含义是不同系统间的数据流转,有多种不同的应用场景.主数据库与备份数据库之间的数据备 ...
1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀出处:http://www ...
[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
python半径为3圆形区域边界曲线_OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓...
本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...
[前端笔记——HTML 表格] 8.HTML 表格
[前端笔记--HTML 表格] 8.HTML 表格 1.HTML 表格基础 1.1 什么是表格? 1.2 创建表格: 2.HTML 表格高级特性和无障碍 2.1 使用`<caption>` ...

最新文章

热门文章