前端修炼の道 | <div> 标签简介

image

<div> 标签是最基本的,同时也是最常用的标签。

该标签是一个双标签,出现在主体区域中,主要作为一个容器标签来使用,在 <div> 标签中可以包含除 <body> 之外的所有主体标签。

每一对 <div></div> 标签在 HTML 页面中都会构建一个区块,我们可以通过 <div> 将页面划分成许多大小不一的区块,以便更好地控制和布局页面内容。

因此,<div> 的主要作用就是用来对 HTML 结构进行布局。

image

【示例 1-5】<div> 标签的使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

    div {

         margin: 8px;

         background: #CFF;

         border: 1px solid red;

    }

</style>

</head>

<body>

     <div>div1</div>

     <div>div2</div>

</body>

</html>

上述代码中,分别创建了两个 div 块级元素。

另外,为了更清楚地看出块级元素的表现效果,在头部区域添加了一个 <style></style> 标签对,其中放置的代码称为 CSS 代码,用于设置元素的格式。

该示例中的 CSS 设置了 div 元素的边框、背景颜色样式以及 div 的外边距。打开浏览器运行上述代码的结果如图 1-30 所示。

image

从图 1-30 可以看到,作为块级元素的两个 div 元素分别独占一行,其宽度自动填满父元素宽度,且依次垂直排列。

image

1、请用自己的理解说明以下内容是什么意思?

(1)DOCTYPE 是什么?出现在什么位置?不写会出现什么问题?

(2)<head> 标签和 <body> 标签是什么意思?它俩有什么区别?

(3)<meta> 标签主要有哪些属性?作用分别是什么?

2、使用所学 HTML 标签创建下图所示的 HTML 页面

image
image
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 负面标签,用强力胶贴 开家长会时,有些家长特别无奈:“我家孩子注意力不行,做着作业不是要吃的,就是偷偷玩。”叹气声...
    如水如沐阅读 3,759评论 0 0
  • 夜晚是属于你的现实的我不愿离去瞥见了你的一丝轮廓 你在我的身躯脱落游荡在月下的黑河 预见你每一个动作好的坏的却一丝...
    独行的飞鹰阅读 3,987评论 11 18
  • 刷着微博,看着段子,突然有些感触。经历了那么多,大事或小事,总算明白,别人说的道理再多再对,很多事情只有亲身体验,...
    Vesu阅读 1,157评论 0 0
  • 2016年11月24日,这是我参加鹏程写作明星训练营的第18天,本周因为训练营的主办方要举行首届游学笔会,所...
    Snowlion阅读 1,267评论 0 0