前端修炼の道 | <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 ...
随机推荐
- SpringMVC 允许跨域访问 也可以选择限制指定IP 允许访问 对象的数据传输
java ajax
- JAVA值传递之基本数据类型和引用数据类型
#1.基本数据类型值传递 package 经典小Demo.值传递; public class Test { public static void main(String[] args) { int a ...
- 2019/3/28 wen 继承
- nginx-编译安装 第一章
nginx 第一章:编译安装 nginx 官网网站:http://nginx.org/en/ 1.基础说明 基本HTTP服务器功能其他HTTP服务器功能邮件代理服务器功能TCP/UDP代理服务器功能体 ...
- 使用curl自动签到smzdm
curl -H 'cookie:urcookies' -e 'http://www.smzdm.com/qiandao/' -k 'https://zhiyou.smzdm.com/user/chec ...
- 【题解】Luogu P4054 [JSOI2009]计数问题
原题传送门 我自闭了qaq 这道题非常简单,因为1<=c<=100,所以直接对每个c开二维树状数组,操作就跟模板一样 写码5分钟,调码半小时,这道题的输入顺序是x1,x2,y1,y2,我真 ...
- Git冲突和解决冲突-测试方法
原文链接:https://www.cnblogs.com/blogslee/p/6828659.html
- 王之泰201771010131《面向对象程序设计（java）》第七周学习总结
王之泰201771010131<面向对象程序设计(java)>第七周学习总结 第一部分:理论知识学习部分 第五章 第五章内容深度学习: 继承:如果两个类存在继承关系,则子类会自动继承父类的 ...
- 同事在使用shiro后遇到的异常
一切配置按照demo来的,给他讲了一遍捋顺了.然后之前他做的demohim按照他网络摘抄的shiro博客看的. 然后注册了,正常,登录,提示密码不匹配. 问题出在注册的密码加密次数是2, 而shiro ...
- 详解java中的byte类型
Java也提供了一个byte数据类型,并且是基本类型.java byte是做为最小的数字来处理的,因此它的值域被定义为-128~127,也就是signed byte.下面这篇文章主要给大家介绍了关于j ...