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

<!-- 什么是块级元素：
块级元素的特点：
总是在新行开始
高度，行高和外边距和内边距都可以进行控制
宽度缺省的容器是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>

HTML中div标签的一个简单的使用和介绍相关推荐

html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
html语言div怎么使用,什么是div标签？HTML中div标签怎么使用？
HTML中的div标签是实现网页的重要基础,是学习HTML知识必不可少的内容,本篇文章就来为大家介绍关于HTML中div标签的使用方法. 什么是div标签? div标签表示一组必要的结构.目的是将夹在 ...
html中的main标签,html中div标签、section标签和acticle标签三者有啥区别,main和div
html中div标签.section标签和acticle标签三者有啥区别什么是html中的div标签.section标签和acticle标签的区别, 线索: 本来我以为这三个标签的作用差不多.后来查了 ...
工作中关于rpm的一个简单但头疼的问题
工作中关于rpm的一个简单但头疼的问题: 公司有个需要自动化更新rpm包的需求,rpm包名是:tingyun-agent-php-1.0.5-1.x86_64,本来是一个很简单的东西,一行代码就可以实 ...
html中a标签根据一个参数跳转不同的页面
html中a标签根据一个参数跳转不同的页面 a标签 a标签通过调用fun1()方法来跳转不同页面 <a href="javascript:void(0);" onclick= ...
html中div标签圈套,HTML中div标签和span标签的应用
HTML中div标签和span标签的应用发布时间:2020-06-16 18:09:16 来源:亿速云阅读:217 作者:元一一.div标签 DIV标签,称为区隔标记.作用是设定字.画.表格等的 ...
android计算器功能实现,在android中利用 studio实现一个简单的计算器功能
在android中利用 studio实现一个简单的计算器功能发布时间:2020-11-07 15:35:20 来源:亿速云阅读:168 作者:Leah 这篇文章将为大家详细讲解有关在android ...
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
src获取同级目录中的图片_一个简单的Python爬虫实例：百度贴吧页面下载图片
本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片. 1. 概述本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片.下载图片的步骤如下: 获取网页html文本内容: 分析html ...

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

HTML中div标签的一个简单的使用和介绍相关推荐

最新文章

热门文章