前端修炼の道 | <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 基础内容,千万别错过!

原文地址:https://www.cnblogs.com/Highdoudou/p/10025945.html

时间: 2024-10-07 16:35:02

前端修炼の道 | <div> 标签简介的相关文章

前端修炼(转)

看到一篇博文,受益匪浅,特此激励自己. 内容转载自: BorisHuai前端修炼 > 如何成为前端开发高手 HTML 1. 标签的分类 1. 标签表示一个元素 2. 按性质划分: Block-Level和Inline-Level 3. 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatting: em, strong, sub, del, ins, small Lists: ul, li, ol, dl, dt, d

jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/[email protected]/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全.正确搞明白的. 我知道很多人不同意我的观点.但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的.我最近在制作一个滚动条相关的页面效果,去 CSDN 论坛里提问,得到了一段代码,还是错误的. jQuery 里和滚动条有关的概念很多,但是

SpringMVC表单标签简介

转自:SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

div标签嵌套原则详解(转载)

这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong--我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套--XHTML 必竟不是 XML. 在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd--这些固定标签的嵌套规则十分

让DIV标签中的P标签水平和垂直都居中

http://blog.csdn.net/yaoyyl/article/details/50548589 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>让DIV标签中的P标签水平和垂直都居中</title> <style type="text/css"> div { width:400px; height:

SpringMVC&lt;from:form&gt;表单标签和&lt;input&gt;表单标签简介 转http://blog.csdn.net/hp_yangpeng/article/details/51906654

SpringMVC<from:form>表单标签和<input>表单标签简介 在使用SpringMVC的时候我们可以使用spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: Jsp代码 <%@taglib uri="http://www.springframework.org/tags/fo

div 属性 DIV标签属性有什么如何设置属性

div 属性 DIV标签属性有什么如何设置属性(音乐放松椅) div 属性介绍,对DIV可加属性有哪些,DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性,同时通过div各属性小实例,让大家认识各属性并掌握属性. div标签内常用属性列表 1.style 设置css样式(扩展了解style标签) 2.align 设置div盒子内的内容居中.居左.居右 3.id 引人外部对应#(井号)选择符号样式 4.class 引人外部对应.(句号)选择符号样式 5.title 设

div标签的闭合检查

什么叫DIV标签有没有闭合呢?有<div>开头就应该有</div>来结尾闭合了.有时候写代码写 了<div>,忘记</div>结尾,谓之没有闭合也. 如 何检查DIV标签有没有闭合呢?如果页面布局简单,代码少是可以直接观  察出来:如果布局复杂了,看代码很难看明白.有一个很简单的方法来检测:在整个页面中搜索<div  代码看有多少个,然后再搜索</div>代码看有多少个,如何一样的个数,那基本没问题. 如果没有闭合,那就用Firebug工具

解决UEditor将div标签换成p标签的问题

原文链接 将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码,将true设置为false me.setOpt({ 'allowDivTransToP':false, 'disabledTableInTable':true }); 然后在ueditor.config.js文件内搜索allowDivTransToP,找到如下的代码,将注释去掉并且改为