如何理解html的层次性结构?一个html网页最基本的层次结构是什么

如何理解html的层次性结构?一个html网页最基本的层次结构是什么,第1张

HTML的基本结构

超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。

<HTML>

 <HEAD>

头 部 信 息

 </HEAD>

 <BODY>

 文 档 主 体, 正 文 部 分

 </BODY>

</HTML>

其中<HTML>在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD>之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。<BODY>标记一般不省略, 表示正文内容的开始。

element{

    position: fixed

    top:0

    left:0

    z-index:(最高层的元素的层数+1)

}

用绝对定位+确定层数即可

可以通过DIV来分块布局,然后通过CSS样式来调整大小,颜色等样式。参考代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

#header {

background-color:black

color:white

text-align:center

padding:5px

}

#nav {

line-height:30px

background-color:#eeeeee

height:300px

width:100px

float:left

padding:5px

}

#section {

width:350px

float:left

padding:10px

}

#footer {

background-color:black

color:white

clear:both

text-align:center

padding:5px

}

</style>

</head>

<body>

<div id="header">

<h1>第一层</h1>

</div>

<div id="nav">

第二层左侧

</div>

<div id="section">

第二层右侧

</div>

<div id="footer">

第三层

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7655397.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存