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

vvpale 发布于2019-08-23 13:43 / 2017人阅读

摘要：标签是最基本的，同时也是最常用的标签。该标签是一个双标签，出现在主体区域中，主要作为一个容器标签来使用，在标签中可以包含除之外的所有主体标签。因此，的主要作用就是用来对结构进行布局。示例标签的使用上述代码中，分别创建了两个块级元素。

标签是最基本的，同时也是最常用的标签。

该标签是一个双标签，出现在主体区域中，主要作为一个容器标签来使用，在

标签中可以包含除之外的所有主体标签。

每一对

标签在 HTML 页面中都会构建一个区块，我们可以通过

将页面划分成许多大小不一的区块，以便更好地控制和布局页面内容。
因此，

的主要作用就是用来对 HTML 结构进行布局。

【示例 1-5】

标签的使用








     div1
     div2

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

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

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

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

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

（1）DOCTYPE 是什么？出现在什么位置？不写会出现什么问题？
（2）标签和标签是什么意思？它俩有什么区别？
（3）标签主要有哪些属性？作用分别是什么？

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99449.html

前端修炼の道 | 带你走进迷人的 CSS 世界

摘要：每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

shiweifu 2019-08-23 13:58 评论0 收藏0
前端修炼の道 | 如何成为一名合格前端开发工程师？

摘要：上期回顾在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师相信这个问题是大家比较关心的。 showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顾在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？相信这个问题是大家比较关心的。前端开发工...

Jackwoo 2019-08-23 12:50 评论0 收藏0
前端技术之_CSS详解第一天

摘要：前端技术之详解第一天一部分略。。。。中国主要城市北京上海广州美国主要城市纽约洛杉矶华盛顿西雅图在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，中的所有元素是一个小区域。前端技术之_CSS详解第一天一html部分略。。。。二、列表列表有3种2.1 无序列表无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。ul就是英语unordered list，无序列表的意...

番茄西红柿 2019-04-23 13:46 评论0 收藏0
前端修炼の道 | 你知道哪些复合选择器？

摘要：后代选择器后代选择器又称包含选择器，用于选择指定元素的后代元素。这些选择器既可以是基本选择器，也可以是一个复合选择器。注意元素选择器及和属性选择器之间没有空格。 showImg(https://segmentfault.com/img/bVblJEJ?w=900&h=383); 复合选择器是通过基本选择器进行组合后构成的，常用的复合选择器有：交集选择器并集选持器后代选择器子元...

Java_oldboy 2019-08-23 14:20 评论0 收藏0
前端修炼の道：第一个 HTML 页面

摘要：可见对一个页面正确渲染很重要。和标签对用于标识页面的头部区域，和之间的内容都属于头部区域中的内容。是一个辅助性标签，对页面可以进行很多方面的特性的设置。当页面没有设置字符集时，浏览器会使用默认的字符编码显示。 showImg(https://segmentfault.com/img/bVbjNkI?w=900&h=383); 往期回顾在 1.2 节介绍 HTML 语言时讲到：HTML...

JasonZhang 2019-08-26 13:23 评论0 收藏0