<!-- 什么是块级元素：
块级元素的特点：
总是在新行开始
高度，行高和外边距和内边距都可以进行控制
宽度缺省的容器是100% 除非是设置一个宽度
可以容纳其他的文本和其他的内联元素
内联元素的特点：
和其他的元素在同一行上
高和行高外边距和内边距都是不可以变的
宽度就是文本和图片的宽度是不可变化的
内联元素是只能容纳文本和其他的内联元素
那么我们常常用到的内联元素有哪些：
address-地址
blockquote块引用
center居中的对齐块
dir目录列表
div常用的 块级引用
dl定义列表
field—from控制组
h1，h2，h3，h4，h5，h6，
hr水平分隔线
noframe-frames可选的内容
noscript可选脚本的内容
ol排序表单
p段落
pre格式化文本
table表格
ul非排列表格
内联元素：
a锚dian
abbr缩写
acronym首字
b粗体
bdo-bidi override
big大字体
br换行
cite引用
code计算机代码
em强调
font字体
i斜体
img图片
input输入框
kbd定义键盘文本
label表格标签
q短引用
s中划线
samp定义范例计算机代码
select项目选择
samll小字体文本
span常用的 内联容器
strike中划线
strong粗体强调
sub下标
sup上标
textarea多行文本输入框
tt电传文本
u下划线
var定义变量
下面使用<div>这个标签对网页进行布局-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div#container{width: 500px}
div#header{background-color: #99bbbb}
div#menu{background-color:#ffff99;height: 200px;width:150px;float: left;}
div#content{background-color: #EEEEEE;height: 200px;width:350px;float: right;}
div#footer{background-color: #99bbbb;clear: both;text-align: center;}
h1{margin:bottom:0;}
h2{margin-bottom:0;font-size: 18px;}
ul{margin:0;}
li{list-style: none;}
</style>
<title>布局练习</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
<!-- 这个程序是采用的<div>这个标签对页面进行布局，怎样来设置整体的布局，这个地方要将布局放到<head>..<head>这一部分利用的是设置风格，style这个标签，我们这个页面的整体情况也是放在这一部分之中，我们来一点一点的对这个程序进行分析：
首先是<style type="text/css">这一句话 含义是表示我们对这个页面进行风格的设计
div#container{width：500px}我们可以把这一个理解为是创建一个容器，之后我们的设置都会在这个容器中进行
那么我们在这个程序中对这个容器进行的是怎样的划分：
header，Menu，Content，footer这几个部分我们在后面所跟的大括号里面对这个一部分的大小或者还属性进行设置，包括的是背景的颜色，大小进行设置，队布局设置好之后我们还需要对布局进行内容的填充，其实head之间的可以看做是main函数之前的对全局变量的设置，body才是进入函数的内部，我们在主函数中还要对这个这些变量进行运用，当我们在某一个部分的内容进行设置的时候我们用到的div里面的id，让其等于上面定义的全局变量，然后对内容的设置就相当于table了-->
HTML中<div>标签的一个简单的使用和介绍
阅读 100
2022-07-12
相关推荐
精彩评论（0）
0 0 举报