前端修炼の道 | <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 ...
随机推荐
- U-boot2010.06移植--阶段一
2011-02-24 23:14:57 我今天的移植将分如下3步.加上写记录文档,预计时间3小时. 一,不改变源码,完成编译. 二,修改源码,搭建一个U-boot的框架,完成编译. 三,修改源码,完成 ...
- Linux sar工具安装使用
使用sar Sar是后台进程sadc的前端显示工具,安装名为“sysstat”的包后,sadc就会自动从内核收集报告并保存. 安装sar [root@localhost ~]# yum insta ...
- luoguP1281 书的复制 DP，贪心
luoguP1281 书的复制 链接 https://www.luogu.org/problemnew/show/P1281 思路 简单dp,输出方案. 很明显dp记录路径对不对? 恭喜你死了. 求出 ...
- 20175312 2018-2019-2 《Java程序设计》第4周学习总结
20175312 2018-2019-2 <Java程序设计>第4周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第五章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...
- ComponentOne 产品经理：为什么要从C1Report迁移到FlexReport
概述 如果你正在使用ComponentOne Enterprise 的Reports for WinForm 报表控件(C1Report),你一定会喜欢更为强大的FlexReport! FlexRep ...
- IP分为五类
IP地址分为五类: IP地址分为五类:A类保留给政府机构,B类分配给中等规模的公司,C类分配给任何需要的人,D类用于组播,E类用于实验. 常用的三类IP地址 IP = 网路地址(网络号)+主机地址(主 ...
- 个人爱好：idea 项目结构呈现风格
- 【GO】【sublime】
1.首先下载GO的安装包:https://golang.org/doc/install#testing 找到上面一个Download超大按钮,找不到的可以不用再看了. 下载完成,安装. 安装成功后,启 ...
- 七天学会ASP.NET MVC ——深入理解ASP.NET MVC
七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二) ...
- windows server2008 IIS搭建网站简易教程（阿里云）
最近搞了个阿里云服务器 想着需要用这个服务器学点东西,故而想着把自己之前写的网站能部署上去,虽然自己是做前端移动开发,但是对这个服务器的东西也很感兴趣 第一步 配置阿里云入口规则 如图开放81 80 ...