HTML基础知识（一）

此非鱼

于 2022-08-30 20:00:00 发布

阅读量529

点赞数

分类专栏：前端前端基础文章标签： html 前端

本文链接：https://blog.csdn.net/zhangxini518/article/details/126588229

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端基础

2 篇文章 0 订阅

订阅专栏

HTML基础知识（一）

背景知识

HTML（Hypertext Markup Language，超文本标记语言）诞生于 20 世纪 90 年代初。

HTML5 不仅仅是 HTML 标准的最新版本，它还是一系列用来制作现代富 Web 内容的相关技术的总称。其实最为熟知的 H5 核心规范就是三大件：HTML、CSS、JavaScript。

JavaScript 出自于一家名叫网景的公司。

HTML 元素

HTML 元素是一种用来向浏览器说明文档内容的工具，有三个组成部分：开始标签、结束标签以及标签之间的内容。

大小写

元素名是不区分大小写的。<code> 、<CODE>、<CoDe>都是一样的效果。

空元素

HTML 元素的开始和结束标签之间，可以没有内容。没有内容的元素被称为空元素。
空元素对于有些元素来说是没有实际意义的，比如：<code></code>。但是它还是有效的 HTML 代码。

自闭合标签

自闭合标签就是将开始标签与结束标签合二为一，以一种更为简洁的方式表示。
空元素可以只用一个标签的方式来表示，比如：<code/>。

虚元素

HTML 元素中，有些元素只能使用一个标签方式来表示，在它当中放置任何内容都不符合 HTML 规范，这类元素被称为 虚元素。比如：<hr>，它是一种组织性元素，表示内容中段落级别的终止。

表示方式

虚元素有两种表示方式：

只使用开始标签，比如：<hr>
使用自闭合标签，比如：<hr/>

浏览器其实可以识别到虚元素，所以不会等待虚元素的结束标签出现。

元素属性

元素可以使用属性进行配置。
属性只能用在开始标签或者单个标签上，不能用于结束标签。
属性由名称、值两部分组成。比如：<a href="xxx.html"></a>。等号前面是属性名称，后面是属性值。
有一些属性是全局属性，可用于所有的 HTML 元素；但有些属性是某些元素特有的属性。
属性值的界定可以使用双引号，也可以单引号。如果属性值本身含有引号，则两种引号都要使用到。

一个元素，多个属性

一个 HTML 元素，可以拥有多个属性。这些属性之间以一个或者多个空格分隔。

我喜欢吃<a class="fruit" href="www.baidu.com" id="apple">苹果</a>和香蕉

属性的顺序是没有要求的，全局属性和元素专有属性都可以随意交错。正如上例，class、id 属性均是全局属性。

布尔属性

有些属性属于布尔属性，这种属性不需要设定值，只需要将属性名添加到元素中即可。举例：

请输入你的姓名：<input disabled>

其中 disabled 就是布尔属性，其在 input 属性中只添加了属性名称。其实，你也可以写成如下形式，都是等效的：

请输入你的姓名：<input disabled="">
请输入你的姓名：<input disabled="true">
请输入你的姓名：<input disabled="disabled">

自定义属性

用户可以自定义属性，这种属性必须以 data- 开头。例如：

请输入你的姓名：<input disabled="true" data-creator="adam" data-purpose="collection">

这种属性也叫作者定义属性、扩展属性。自定义属性之所以以 data- 开头是为了避免与 HTML 的未来版本中可能出现的属性名发生冲突。自定义属性一般与 CSS 、JavaScript 结合起来使用。

HTML文档

HTML 元素和属性并不会单独存在，它们是用来标记 HTML 文档内容的，需要一个 HTML 文档来装载它们。

想要创建 HTML 文档，最为便捷的方法就是新建一个文本文档，将其文件扩展名改为 .html即可。通过这样创建的 HTML 文档，是本地磁盘读取的，HTML 文档也可以从 WEB 服务器上载入。

HTML 与 XHTML

符合 HTML 语法的文档不一定符合 XML 语法，所以使用标准的 XML 解析程序处理 HTML 文档可能会出错。为了解决这个问题，可以使用 XHTML，它是 HTML 的 XML 序列化形式。也就是说，用符合 XML 规范的方式来表达文档的内容以及 HTML 元素和属性，以便 XML 解析程序处理。

HTML 文档的结构

外层结构

HTML 文档的外层结构由两个元素组成：DCOTYPE 和 html。例如：

<!DOCTYPE HTML>
<html>
    <!--HTML 元素与属性在这-->
</html>

上例中，DOCTYPE 元素使用布尔属性 HTML 是为了告诉浏览器，这是一个 HTML 文档。紧接着使用 html 元素来告诉浏览器：从这个开始标签（<html>）开始，一直到结束标签（</html>），它们两个之间的所有 HTML 元素内容都应该作为 HTML 处理。

元数据

HTML 文档的元数据用于向浏览器提供文档的一些信息。元数据包含在 head 元素中。

<!DOCTYPE HTML>
<html>
    <head>
        <!--元数据 metadata 在这里定义-->
        <title>标题</title>
    </head>
</html>

上例中的元数据只有一个 title 元素，其一般会被浏览器识别并显示在窗口的标题栏上或者是标签页上。

元数据除了可以写一些用来说明 HTML 文档的元素，head 元素还可以用来规定文档与外部资源的关系，比如 CSS，JavaScript等等。

文档内容

文档内容写在 body 元素中。例如：

<!DOCTYPE HTML>
<html>
    <head>
        <!--元数据 metadata 在这里定义-->
        <title>标题</title>        
    </head>
    <body>
        <!--文档内容 和 元素写在这里-->
        我是<code>前端</code>程序员
    </body>
</html>

body 元素用于告诉浏览器：要向用户展示文档的哪些部分。

HTML 文档元素之间的关系

HTML 文档中元素之间有明确的关系，其中有：父元素、子元素、后代元素、兄弟元素。

<!DOCTYPE HTML>
<html>
    <head>
        <!--元数据 metadata 在这里定义-->
        <title>标题</title>        
    </head>
    <body>
        <!--文档内容 和 元素写在这里-->
        我是<code>前端</code>程序员
    </body>
</html>