html网页基本组成结构(DOM节点、元素、属性和文本)

先来看html网页的代码和浏览器展现的结果(下图1和图2):

图1

图2

然后对照着下图的DOM树,分析DOM的节点层次和定义:

除了html中的<!DOCTYPE>和<meta>声明外,

1.第一级是html文件中的根元素:<html></html>标签

2.第二级是根元素html下面的子元素:<head></head>和<body></body>标签

3.第三级是<head>元素的子元素:<title></title>标签以及

<body>元素的子元素:<a></a>和<h1></h1>标签

4.title元素中有一个文本这是网页标题;

a元素中有一个href属性和一个文本这是链接;

h1元素中有一个文本这是网页内容中的标题。


综上:

1.html文档是一个文档节点,

2.每个html元素是元素节点,

3.html元素内的文本是文本节点,

4.每个html属性是属性节点。


节点的层级关系用术语来描述:

父(parent)、子(child)和同胞(sibling)等。

在节点树中,顶端节点被称为根(root),在页面中对应的是<html></html>标签,

每个节点都有父节点、除了根(它没有父节点),<head></head>和<body></body>的父节点就是<html></html>,

一个节点可拥有任意数量的子节点,<body></body>的子节点有<a></a>和<h1></h1>,

同胞是拥有相同父节点的节点,<a></a>和<h1></h1>有相同的父节点,因此它俩就是同胞。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:05月01日

热门专题

易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
安徽中源管业有限公司|安徽中源管业有限公司,安徽中源管业有限公司介绍,安徽中源管业有限公司电话,安徽中源管业有限公司地址,安徽中源管业有限公司厂家,安徽中源管业有限公司电力管,安徽中源管业有限公司管材
安徽中源管业有限公司
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部