前端修炼の道 | <div> 标签简介
<div> 标签是最基本的，同时也是最常用的标签。
该标签是一个双标签，出现在主体区域中，主要作为一个容器标签来使用，在 <div> 标签中可以包含除 <body> 之外的所有主体标签。
每一对 <div></div> 标签在 HTML 页面中都会构建一个区块，我们可以通过 <div> 将页面划分成许多大小不一的区块，以便更好地控制和布局页面内容。
因此，<div> 的主要作用就是用来对 HTML 结构进行布局。
【示例 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 所示。
从图 1-30 可以看到，作为块级元素的两个 div 元素分别独占一行，其宽度自动填满父元素宽度，且依次垂直排列。
1、请用自己的理解说明以下内容是什么意思？
（1）DOCTYPE 是什么？出现在什么位置？不写会出现什么问题？
（2）<head> 标签和 <body> 标签是什么意思？它俩有什么区别？
（3）<meta> 标签主要有哪些属性？作用分别是什么？
2、使用所学 HTML 标签创建下图所示的 HTML 页面
谈及网页，必有装扮。
想美化网站样式、怎能绕过 CSS 样式？
下节皆为 CSS 基础内容，千万别错过！
前端修炼の道 | <div> 标签简介的更多相关文章
- 前端知识-控制div标签的显示与隐藏
//将附件信息列表进行隐藏 var tAppendixDiv = document.getElementById("AppendixDiv"); tAppendixDiv.styl ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- 前端学习(一) body标签(上)
body标签中相关标签 主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- HTML <div> 标签
定义和用法: <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用 ...
- (转载)SPRINGMVC表单标签简介
SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...
- 如何在一个div标签里显示出另一个网页？ <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>
如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...
- Struts2标签简介
Struts2标签简介 Struts2标签的优势 标签库简化了用户对标签的使用 结合OGNL使用,对于集合.对象的访问功能非常强大 提供可扩展的主题.模板支持,极大简化了视图页面的编写 不依赖任何表现 ...
- Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN
Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...
随机推荐
- docker mysql 数据库乱码
创建 mysql 时,需要加上编码,不然会乱码: docker run --name mysql01 -p : -e MYSQL_ROOT_PASSWORD=pwd123 -d mysql:5.5 - ...
- 《CSS世界》读书笔记（十）
<!-- <CSS世界>张鑫旭著 --> 温和的padding属性 因为默认的box-sizing是content-box,所以使用padding会增加元素的尺寸. 尺寸表现对 ...
- javax.el.PropertyNotFoundException: Property 'know_id' not found on type java.lang.String
今天通过Servlet明明查出来了结果,在跳转到页面时报这个异常.根据经验仔细核对了字段书写时,未发现错误. 耐心仔细检查之后发现el表达式的List集合写错了 <c:forEach items ...
- 面向对象select方法
<?php class Table{ protected $tablename; protected $arrTable; protected $w ...
- Docker Swarm volume 数据持久化
Docker Swarm volume 数据持久化 volume 是将宿主级的目录映射到容器中,以实现数据持久化. 可以用两种方式来实现: volume 默认模式:工作节点宿主机数据同步到容器内. v ...
- json转数组
- (NSDictionary *)dataArrayFromJson { NSString *filePath = [[NSBundle mainBundle] pathForResource:@& ...
- Tomcat的overview界面说明
Tomcat的overview界面说明 一.Tomcat的overview界面 双击或者open,进入Tomcat的overview界面, 一般情况workspace的子路径为.metadata.pl ...
- HTML基础【3】：列表标签
无序列表 作用:给一堆内容添加无序列表语义(一个没有先后顺序整体),列表中的条目不分先后 格式: li 英文是 list item,翻译为列表项 <h4>选择居住城市(CN)</h4 ...
- 查找IDEA 项目中的依赖包存放在.m2位置
原因:在maven项目pom.xml中添加依赖,可能由于网络不好,下载不完全,导致再次下载一直报错. 就会导致出现依赖一直报错.
- 浅谈String中的==和对象中引用对象类型的==
@Test public void test02() { StringBuffer sb = new StringBuffer(); sb.append('a'); sb.append(11); Sy ...