15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML基础知识(一)

HTML基础知识(一)

时间:2023-08-30 00:48:01 | 来源:网站运营

时间:2023-08-30 00:48:01 来源:网站运营

HTML基础知识(一):

HTML基础知识(一)

背景知识

HTML(Hypertext Markup Language,超文本标记语言)诞生于 20 世纪 90 年代初。

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

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

HTML 元素

大小写

空元素

自闭合标签

虚元素

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

表示方式

虚元素有两种表示方式:

  1. 只使用开始标签,比如:<hr>
  2. 使用自闭合标签,比如:<hr/>
浏览器其实可以识别到虚元素,所以不会等待虚元素的结束标签出现。

元素属性

一个元素,多个属性

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

我喜欢吃<a class="fruit" href="www.baidu.com" id="apple">苹果</a>和香蕉属性的顺序是没有要求的,全局属性和元素专有属性都可以随意交错。正如上例,classid 属性均是全局属性。

布尔属性

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

请输入你的姓名:<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 文档的外层结构由两个元素组成:DCOTYPEhtml。例如:

<!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>上例中,body 元素是 code 元素的父元素,因为 code 元素的开始、结束标签均在 body 元素的开始、结束标签之间。反过来,code 元素也是 body 元素的子元素。一个元素可以拥有多个子元素,但是只能有一个父元素。

body 元素与 code 元素都是 html 元素的后代元素,但是只有 body 元素是 html 元素的子元素。子元素是关系最近的后代元素。

具有同一个父元素的元素互为兄弟元素。上例中的 head 元素和 body 元素就是兄弟元素。

HTML 实体

HTML 文档中有些字符往往具体特殊含义,有时需要在文档内容中显示这些特殊字符,就需要使用 HTML 实体。HTML 实体是用来替代特殊字符的一种代码。

字符实体名称
<&lt;
>&gt;
&&amp;


关键词:知识,基础

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭