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

历史上的今天:04月18日

热门专题

昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
卓越综合高中|卓越综合高中
卓越综合高中
云南综合高中|云南综合高中
云南综合高中
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部