您的位置：首页 > Web前端 > HTML

HTML中<div>标签的一个简单的使用和介绍

2015-08-04 17:07 926 查看
<!-- 什么是块级元素：

块级元素的特点：

总是在新行开始

高度，行高和外边距和内边距都可以进行控制

宽度缺省的容器是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了-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航