当前主流HTML5的网页是否依然是以DIV + CSS为基础开发的?

教程大全  / 倒序浏览   ©

#楼主# 2020-3-3

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
我是web前端的初学者,希望能够在学习中跟上主流,目前对于HTML和CSS都学习了语法,但考虑到在实际开发一个网站是如何通过这两者来进行的,有些不知所措。在网上搜了下大概都是讲通过DIV + CSS来布局网页的,但这个作为以往网页的开发手段,和现在表现内容更加生动丰富的HTML5网站,这个方法是否依然是主要的。
分享淘帖
回复

使用道具

xinting_6ym 发表于 2020-3-3 13:50:08
HTML5定义:能向后兼容目前UA处理内容的方式。为了让语言更简单,一些老的元素和Attribute会被舍弃。比如一些纯粹用于展现的元素(如big)或Attribute被舍弃,因为他们更适合用CSS来处理。
但UA依然可以支持老旧的属性和元素。这就是为什么HTML5标准清楚地划分了给开发的要求和给UA的要求。比如,开发者不应当使用plaintext元素,但UA需要兼容plaintext元素。
既然HTML5已区分对UA和对开发者的要求,再也不需将一些特性标记为deprecated了。

举个例子:
div+css一定会学习块状元素和行内元素,但这两个HTML元素概念从字面上却和CSS样式有着很深的联系,这种联系有悖于Web规范中一直倡导的表现和样式分离这种核心理念。
HTML5新规范中,已经淡化了元素的这两种分类,取而代之的方案是更具有语义的HTML元素分类方式,如下:
    元数据式内容(Metadata content):<base>、<command>、<link>、<meta>...
    流式内容(Flow content):<span>、<div>...[注:1]
    章节式内容:<article>、<aside>、<nav>以及<section>
    标题式内容:<h1>~<h6>、<hgroup>
    段落式内容:<span>、<img>...[注:2]
    嵌入式内容:<img>、<iframe>、<svg>、<audio>、<video>、<canvas>...
    交互式内容:<a>、<button>、<select>、<input>...
结论:
前端开发者在HTML5的开发中还继续使用css进行布局,但是更应该结合实际的页面的设计有意识的使用HTML5规范中的内容模型,并通过这些更具有语义的内容模型进行页面的normal flow设计。
详细的内容请看这里HTML5 Differences from HTML4
另外w3c上这篇文章也很好《HTML5 Differences from HTML4》 连接-->HTML5 Differences from HTML4

注1:这个分类基本包括了HTML4.01中的块状元素和行内元素。
注2:基本上等同于HTML4.01中行内元素的范围。
回复

使用道具 举报

十二音阶囤 发表于 2020-3-3 14:02:37
“在网上搜了下大概都是讲通过DIV + CSS来布局网页的……”

你先换个搜索引擎再说。
回复

使用道具 举报

俺乃小潜mg 发表于 2020-3-3 14:05:38
首先  直接回答题主的问题”当前主流HTML5的网页是否依然是以DIV + CSS为基础开发的?“这句话本身 大体上是正确的 但是又不够严谨

我们现在通过浏览器打开所看到的页面基本组成元素我们称之为HTML,也就是网站的结构层,而div只是HTML的一个比较重要的元素而已我们把一个站点比喻成一个人体吧那HTML就好比人体的骨架
CSS呢 就相当于人类的皮肤等  起到一个渲染装饰的作用  负责修饰人的外观  比如控制你这个人是高鼻子还是塌鼻子 双眼皮还是单眼皮   A cup还是E cup (害羞)
最后还有一个建设网站非常重要的语言是javascript 它是让网站”动起来“必要的组成部分它的作用是相当于控制人类微笑、拥抱、接吻以及pia pia pia等行为的咯~~(捂脸)
虽然大家都是用的都是HTML+CSS+javascript来实现网站的前端部分但是我们可以用语义化标签来实现更好的SEO可以用弹性布局、响应式布局来实现不同屏幕分辨率给用户展示更加友好的体验效果可以用requirejs、seajs来自动处理javascript模块的加载依赖可以用less、sass来提高css的写作效率可以用gulp+nodejs实现项目的构建、测试、打包部署等工作
同样是汉字有的人只能拿来应付考试  写篇水水的作文   比如说答主自己有的人却能写出来精彩纷呈小说 比如说天龙八部、鹿鼎记、神雕侠侣  比如说金庸老前辈
同样是HTML+CSS+javascript有的人只是用它们来做了一个只有几个页面的普通企业站  装饰门面有的人拿它们来做了一个叫做阿里巴巴的平台 小伙伴们双十一双十二在上面刷得不亦乐乎
我觉得题主是想做后者吧 那么咱一起努力咯


最最后 欢迎加入我们的萌萌哒前端人3 前面都满人了 囧  群号 639111724 大家一起交流吧^_^
回复

使用道具 举报

Gordon520 发表于 2020-3-3 14:07:23
虽然大家都是这么用的,但是你出去千万不要这么说哦,至少几个词要随口能说出来,例如 语义化标签,弹性布局,响应式布局,模块化,原子化,less,sass,组件化开发。

恩,然后回家后继续用div+css开发就行了。
回复

使用道具 举报

jimmy肖明 发表于 2020-3-3 14:45:34
书名有“DIV+CSS”的一律不要买、不要看!
回复

使用道具 举报

462710480 发表于 2020-3-3 15:15:00
DIV+CSS 这个说法是外行话,有类似字眼的教程、书不要看不要买,有这样说法的面试官的公司不要去。
回复

使用道具 举报

Aim_yuan 发表于 2020-3-3 15:36:03
不是哦。。是基于HTML5+CSS+Javascript开发的。。。
回复

使用道具 举报

素色流年783 发表于 2020-3-3 16:45:06
这么理解吧,传统的web架构
css为皮肤,div则为真皮,js组成简单的肌肉和血管,后端各种p才是大脑

html5时代,css和div依然是皮肤和真皮,但是皮肤比以前绚丽多彩了,也可以对外界交互产生简单的应激反应。。。
js可以组成更复杂肌肉,能做的动作也会增多,而且更加规范
肌肉与大脑的联动性也增加不少

从全靠大脑的时代,变成皮肤肌肉大脑协同的时代的。。。呵呵
回复

使用道具 举报

普通人物怨 发表于 2020-3-3 17:19:59
题主的问题是还没有对当前web技术建立一个比较系统的认识,不知道自己刚刚花时间学过的东西如何和平时看到的网页联系在一起。所以当前来自于 @席铭的回答应该说完全不在点子上。猜测题主应该也不是来自于计算机或者工科背景。

自web2.0以来一个网站更多的是一个软件的载体,前端很多“丰富的表现内容”其实来自于javascript,而非h5/css。h5/css更多的属于定义“看上去是什么样”的范畴。交互上的丰富感主要来自于javascript。学习H5/CSS是有必要的,但是对于现在的前端工程师来说,H5/CSS都是末节,大部分的工作都集中在javascript相关的知识概念上。

P.S.现在前端热度提升,对于有编程背景的朋友们,理解前端是个顺向的事情,而对于很多从美工/设计等方向过来的朋友们,了解前端属于逆向,建议从一点基本的编程知识开始了解,不要急于求成。
回复

使用道具 举报

阿豆学长长ov 发表于 2020-3-3 17:41:35
各种比较新的教程都强调使用语意话标签,直到使用了bootstrap用了一堆div。 规范归规范,有时候结果更重要,感觉过度在意规范,效率会耗费过多的精力,做出符合需求的东西最重要。
回复

使用道具 举报

永远爱你冰塘 发表于 2020-3-3 17:54:38
说DIV+CSS确实是对前端工程师们的侮辱(主要是那些垃圾书)

很老的那些网站全站基本用table来布局,现在这个阶段div居多,html5标签普及开来之后一些更友好的标签也在相继应用于线上产品(不兼容低端浏览器)

html标签是网站的骨架,css是外面的衣服,js(javascript)则用来响应与外界的交互。

初学的话,你右键看一下知乎源码,照着他的结构来没错的,等你学到一定程度自然就会懂了。
回复

使用道具 举报

jimmy肖明 发表于 2020-3-3 19:33:37
是,但不仅限于。

前端(HTML5)技术栈 = HTML(包括新的HTML5标签) + CSS(包括CSS3) + DOM + Javascript APIs (Web Workers/Web Socket/Video/Canvas..)
回复

使用道具 举报

我爱霍启刚掖 发表于 2020-3-3 20:56:11
首先要了解语境和历史。说div+css布局主要是针对(很久)之前流行的table布局,现在网页比那时候也复杂多了,不再是div和table的区别那么简单了。不过也可以说现在还是div+css布局,只是css复杂了很多,有时还需要js辅助。
回复

使用道具 举报

六月清晨搅 发表于 2020-3-3 21:17:28
DIV+CSS?!我也学前端有半年多了,还好没听过。。。一般都是html+css,不过html5和css3有些浏览器不兼容,不过时代更新,现在浏览器都在跪舔html5
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

海鑫木业

新手猿

  • 主题

    8

  • 帖子

    8

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆