整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html页面结构

tml文档结构


1. HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素语法

HTML 元素以开始标签起始 HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性

2.HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如:name="value"。

3. 注释

注释是一种特殊的标签,主要是帮助开发者理解代码的逻辑。不会在网页中显示,但是在源代码以及开发者工具中可以看到。很多编辑器中使用 Ctrl + / 组合键可以快速注释。

4. html结构

html页面主要由一个html根元素和两个子head和body子标签组成。别的更多标签都在这head和body里面。


<!DOCTYPE html> 声明为 HTML5 文档

html:元素是html页面的根元素,所有html标签的一个根节点。

head:文档的头部,描述了文档的各种属性和信息,包括文档的标题,在web中的位置以及和其他文档的关系。

meta:使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。

title:元素描述了文档的标题

body:元素包含了可见的页面内容,文档的主体,以后我们的页面内容基本上都是写到这个标签里面的(比如文本、超链接、图像、表格和列表)。


<!DOCTYPE html>
<!--html是html文档的根元素-->
<html >
    <!--head定义文档标题等属性,用户不可见-->
    <head>
        <meta charset="UTF-8">
        <!--title设置网页的标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body显示给用户的内容-->
    <body>
        Hello world, 我是一个男孩!
    </body>
</html>




阅读原文

简单的 HTML5 文档:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

文档内容......

</body>

</html>


浏览器支持

所有主流浏览器都支持 <html> 标签。


标签定义及使用说明

<html> 标签告知浏览器这是一个 HTML 文档。

<html> 标签是 HTML 文档中最外层的元素。

<html> 标签是所有其他 HTML 元素(除了 <!DOCTYPE> 标签)的容器。


HTML 4.01 与 HTML5之间的差异

HTML5 中,增加了一个新属性:manifest。


HTML 与 XHTML 之间的差异

xmlns 属性在 XHTML 中是必需的,但在 HTML中不是。

然而,即使 XHTML 文档中的 <html> 没有使用 xmlns 属性,W3C 上的 HTML 验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值,即使您没有包含它,此值也会被添加到 <html> 标签中。


属性

New :HTML5 中的新属性。

属性描述
manifestNewURL定义一个 URL,在这个 URL 上描述了文档的缓存信息。
xmlnshttp://www.w3.org/1999/xhtmlHTML 不支持。只有 XHTML 支持。 规定 XML 的 namespace 属性(如果您需要您的内容符合 XHTML,则使用这个属性。)。

全局属性

<html> 标签支持 HTML 的全局属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

篇文章介绍了<!--...--> 注释标签,我个人感觉很容易理解,在日常编码中,大多数编辑器都有注释标签的快捷键,如sublime或VS code里在html代码里,选中想要注释掉的代码后,直接按ctrl+/即可。几乎不用手动输入了。还是很方便的。

这篇我写<!DOCTYPE>标签,说起来这个标签,很常见,因为它会出现在每一个httml文档的最开头,然而,我们很少去重视它,为什么呢?

说到这个标签,我不得不说起html的版本历史了。

在大约10年前吧,html5应用还不如今天这么广泛吧,于是当时的文档类型声明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很长,也很难记,由于我入行晚,懂得这玩意就只是一个声明了,比如strict表示严格模式。其他的我也不想知道了。

当然html版本的规范从4到5的过渡经历了太多年,因为要考虑老浏览器的兼容性,再加上前期移动设备配置低,不支持较为复杂的媒体元素。于是,一些资历深的前端开发人员,面对这么长的代码还是有很长一段时间。

当然,9102年都快过完了,我们这边已经不需要再考虑这些了,于是,我直接就用html5了。

然后声明文档给格式,就变得很简单了。

<!DOCTYPE html>

最开始我是使用sublime生成的模板练习的,然后,犯懒,直接输入了<html>就出来下面的代码:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就开始进行填充了。

直到今天我才注意到原来<!DOCTYPE html>是单独的一行,与下方<html></html>是两码事。

所以,我重新看了下书上的强调内容:

  1. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,没有结束标签,对大小写不敏感。
  2. <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
  3. 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD(文档类型定义),因为 HTML 4.01 基于 SGML(标准通用标记语言))。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
  4. HTML5 不基于 SGML,所以不需要引用 DTD。

关于SGML,参见https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后,虽然上方的html4和xml的文档类型声明这么麻烦了,但是这里没什么知识点了,因为如今,html5应用这么普及了,我们只需在文档开头写<!DOCTYPE html>即可,当然html4的严格模式和传统模式大概知道就行了。