前端修炼の道 | <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 ...
随机推荐
- Quartz Scheduler misfireThreshold属性的意义与触发器超时后的处理策略
Quartz misfireThreshold属性的意义与触发器超时后的处理策略. 在配置quartz.properties有这么一个属性就是misfireThreshold,用来指定调度引擎设置触发 ...
- 收银台数据库存储AES加解密
高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合.缺点是密钥的传输 ...
- php 数组数字 补零
$hour_list = range(0,24); foreach($hour_list as $key=>$val){ $hour_list[$key] = str_pad($val, 2, ...
- Python云图——WordCloud了解一下
字符可以作画(参考前文:使用记事本画出照片) 字符串一样也可以 安装词云WordCloud. pip install wordcloud 编写要生成词云的内容字符串 保存为txt格式就可以了 使用Py ...
- Codeforces Round #505 (Div 1 + Div 2 Combined) Solution
从这里开始 题目列表 瞎扯 Problem A Doggo Recoloring Problem B Weakened Common Divisor Problem C Plasticine zebr ...
- Centos7初始化脚本
今天分享一个自己写的一个初始化的小脚本. 编写初始化系统要考虑到系统的版本问题,现在用的比较多的就是centos6和centos7,所以首先要判断一下系统的版本. cat /etc/redhat-re ...
- Redis入门指南之一（简介）
1. 简介 Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,通过提供多种键值数据类型来适应不同的场景下的缓存与存储需求.同时Redis的诸多高级功能使其可以胜任消息队列.任务队列等不同的 ...
- Lab 9-2
Analyze the malware found in the file Lab09-02.exe using OllyDbg to answer the following questions. ...
- npm下设置NODE_ENV下mac与windows的差异
linux & mac: export NODE_ENV=production windows:set NODE_ENV=production windows: mac:
- Android中如何解决editText一进入activity就自动获取焦点的bug
有时候我们在进入activity 的时候,EditText会自动聚焦 有人说搞个宽高 都为0dp的EditText 但是我们搞代码的肯定要从实际层面解决,这样更能说服人 所以只需要在EditText的 ...