HTML基础知识之DIV

一、HTML 块元素

  • 大多数 HTML 元素被定义为块级元素或内联元素;
  • 元素在浏览器显示时,通常会以新行来开始和结束;
  • 如:<h1>,<p>,<ul>,<table>,<div>等标签;

二、HTML 内联元素

  • 内联元素在显示时通常不会以新行开始;
  • 如:<b>, <td>, <a>, <img>,<span>等标签;

三、HTML <div> 元素

  • HTML 中的<div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器;
  • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分;
  • <div> 元素经常与 CSS 一起使用,用来布局网页;

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>
<style>
    .all{
        width:500px;
        height:500px;
        margin:0 auto;
        background-color:#000;
        }
    .one{
        height:100px;
        background-color:#89E1BF;
        }
    .two{
        height:100px;
        background-color:#DEE099;
        }
    .three{
        height:100px;
        background-color:#D7A1CE;
        }
        
</style>

<body>
    <!--父div-->
    <div class="all">
        <!--子div-->
        <div class="one">
        </div>
        <!--子div-->
        <div class="two">
        </div>
        <!--子div-->
        <div class="three">
        </div>
    </div>
</body>
</html>

演示效果如图所示:

1.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,168评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,827评论 1 45
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,377评论 0 3
  • HTML 指超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言...
    神齐阅读 2,139评论 0 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,750评论 0 30

友情链接更多精彩内容