首页 > 前端开发 > 正文

web前端开发中div是啥 div详细用法,举例说明

2023-10-15 23:31:24 | 我爱编程网

今天我爱编程网小编整理了web前端开发中div是啥 div详细用法,举例说明相关内容,希望能帮助到大家,一起来看下吧。

web前端开发中div是啥 div详细用法,举例说明

DIV是啥?在DW中我只会用表格……

路径换了吗?图片的路径是不是正确?

DIV和表格一样,都是网页常用的布局方式,早些年的时候,都是用表格来布局,现在基本上都用DIV来布局。

个人理解,就这两者的含义:DIV=分开(divide)、区分(division),table=制表,就可以看出来,DIV适合页面布局,而表格适合用来显示数据。

网站建设,简单的来说,就是“这个人长的怎么样”和“这个人内心怎么样”。一部分是外观所展示出来的“视觉效果”、另一部分是藏在里面的“代码元素”。

我们先来举一个简单的例子,用这3种不同的代码风格,实现同一个页面效果:
1.首先是用table来写,需要8行代码:
<table>
<tr>
<th>网站标题</th>
</tr>
<tr>
<td>网站内容</td>
</tr>
</table>
复制代码

2.然后进步到用DIV,2行就可以了,但是因为存在两个DIV,为了区别,需要给

不同的ID:
<div id=“title“>网站标题</div>
<div id=“content“>网站内容</div>
复制代码

3.用XHTML来写:
<h1>网站标题</h1>
<div>网站内容</div>
复制代码

优缺点:

用更为简洁的XHTML代码风格,不仅仅是为了提升页面开启速度。毕竟现在网络带宽越来越大,打开10K的网页代码和打开5K的网页代码区别并不明显。而采取XHTML建站的缺点也很明显,如果是一个同样规模的网站,用TABLE做,1小时就可以了,用DIV要2小时,用符合语义的XHTML则需要3小时,当然这只是一个预估,根据页面的不同和技术人员的熟练度,时间上面会有一定的出入。

web前端开发中div是啥 div详细用法,举例说明

Web前端现在主要用哪些技术?

web前端开发包括的技bai术:du
1、学好CSS是网页外观的重要一点,CSS可以帮助把网页外观做得更加美观。
2、div布局:DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。
2、学习JavaScript的基本语法,以及如何使用。JavaScript编程将会提高开发人员的个人技能。
3、了解Unix和Linux的基本知识虽然这两点很基础,但是开发人员了解Unix和Linux的基本知识是有益无害的。
4、html5+css3:移动端的网页制作。在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用JavaScript引擎,现在也是前端的一个趋势。
5、一些框架的应用:angular.js,node.js,bootsttap等框架的应用。
6、了解Web服务器对Apache的基本配置,并且掌握htaccess配置技巧
7、web前端开发技术,还需要学习一些seo优化技术,因为前端是经常会和网站接触的。
8、掌握web前端开发技术的同时,适当的学习一些后台开发语言(java,php等)也是一个不错的选择。

web前端开发中div是啥 div详细用法,举例说明

div详细用法,举例说明

首先要认识DIV是什么,div是HTML标签“<div>”。
DIV用法的语法
<div>内容</div>

div作为html网页中常用的标签,其默认样式是独占一行,其CSS样式需要重新赋予。比如对div宽度、高度等样式设置、内部字体大小、字体颜色都需要通过CSS来实现。
通俗认识div,div作用就是实现布局、实现对内容样式控制、实现各种各样的布局效果。
DIV的用法实例,这里通过对div设置不同CSS样式,观察其效果。
DIV+CSS实例完整HTML源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div的用法在线演示 www.divcss5.com </title>
<style>
div{ margin-top:10px}/* css注释说明:对div都设置上间距10px */
.divcss5-1{font-size:16px}/* 设置css字体大小16px */
.divcss5-2{color:#F00}/* 设置css字体颜色为红色 */
.divcss5-3{ background:#000; color:#FFF}/* 设置CSS背景颜色为黑色和字体颜色为白色 */
.divcss5-4{ border:1px solid #F00; height:60px}/* 设置css边框和CSS高度60px */
</style>
</head>
<body>
<div>普通内容一</div>
<div class="divcss5-1">我字体大小为16px</div>
<div class="divcss5-2">我字体颜色为红色</div>
<div class="divcss5-3">我背景为黑色字体为白色</div>
<div class="divcss5-4">布局设置边框和高度</div>
</body>
</html> 我爱编程网

以上就是web前端开发中div是啥 div详细用法,举例说明全部内容,更多相关信息,敬请关注我爱编程网。
与“web前端开发中div是啥 div详细用法,举例说明”相关推荐
web前端开发div使用 网页设计中DIV是什么意思?
web前端开发div使用 网页设计中DIV是什么意思?

网页设计中DIV是什么意思?在HTML网页源代码中DIV是什么意思,出现很多DIV,究竟有什么作用和功能?在网页html中查看源代码会看到很多代码,包括DIV、span、h1、b加粗、strong等标签组成。html中div使用截图一段HTML源代码截图其中包括divspanh1标签使用培训是针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的

2023-09-15 23:33:24
web前端开发中div意思 html语言中,<div>是干什么的 啊 ?
web前端开发中div意思 html语言中,<div>是干什么的 啊 ?

网页设计中DIV是什么意思?在HTML网页源代码中DIV是什么意思,出现很多DIV,究竟有什么作用和功能?在网页html中查看源代码会看到很多代码,包括DIV、span、h1、b加粗、strong等标签组成。html中div使用截图一段HTML源代码截图其中包括divspanh1标签使用培训是针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的

2023-09-26 18:33:58
web前端开发div图片居中 如何让图片在div中居中显示?
web前端开发div图片居中 如何让图片在div中居中显示?

css如何实现图片在div中垂直居中本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种常用的css实现图片在div中垂直居中的代码HTML代码&lt;div&gt;&lt;imgsrc="images/1.jpg"&gt;

2023-09-30 14:40:00
web前端开发div居中 如何让div里面的a标签居中显示
web前端开发div居中 如何让div里面的a标签居中显示

html如何让段落居中,然后段落里头的文字是左对齐的? &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  

2023-09-16 05:09:46
web前端开发div如何居中 DW怎么设置DIV模块在页面中居中?
web前端开发div如何居中 DW怎么设置DIV模块在页面中居中?

DW怎么设置DIV模块在页面中居中?Dreamweaver中想要让div模块始终居中,该怎么设置呢?Dreamweaver中margin、padding可以让div模块在页面居中,但如果是自适应所有屏幕,包括手机屏幕依然可以自动上下左右居中,该怎么设置呢?下面我们就来看看详细的教程。1、先新建一个html文件,并在head中添加样式表【】。2、在body中添加一个DIV,并引入

2023-09-28 02:48:20
web前端开发div层次感 web前端如何设置div?
web前端开发div层次感 web前端如何设置div?

web前端开发都包括哪些技术1、学会HTMLHTML是网页内容的载体内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。要熟练掌握div、table、ulli、p、span等这些标签,这些都是最常用的。2、学习CSS(CascadingStyleSheets)—样式。一般看到web前端开发工程师的要求里面,有一个会使用css+html或者css+

2023-10-12 20:52:15
web前端开发变色div html中点击按钮怎样改变div背景颜色
web前端开发变色div html中点击按钮怎样改变div背景颜色

前端开发中悬浮一个超链接怎么让自身整个盒子背景变色?样式部分:&lt;styletype="text/css"&gt;.box1:hover{background:#dfdfdf;}&lt;/style&gt;html部分:&lt;ahref=""class="box1"&gt;第一种情况,a标签就是作为一个整体的盒子。&lt;/a&gt;&lt;divid="bo

2023-09-21 16:34:59
web前端开发css外边距合并 css中一个div包含一个小div,如果外层的div不设border属性,里边的div上部会贴住外层div,为什么?
web前端开发css外边距合并 css中一个div包含一个小div,如果外层的div不设border属性,里边的div上部会贴住外层div,为什么?

cssmargin属性怎么用cssmargin属性是一个简写属性,在一个声明中设置所有外边距属性。该属性可以有1到4个值,这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。cssmargin属性怎么用?定义和用法margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。说明这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外

2023-10-14 09:56:10