DIV CSS3和html5 CSS3有什麼區別

2020-12-16 雙木545

首先,不管是DIV+CSS3還是html5+CSS3,他們都是我們對網頁開發布局方式的統稱,但是DIV+CSS3作為網頁的基礎開發這句話其實並不嚴謹,因為而div只是HTML的一個比較重要的元素而已,而標準的叫法應是HTML+CSS,我們要比較的其實是html+css3和html5+css3在布局開發到底有什麼不同!

以前的我們用html+css主要大部分是做PC端網頁的基礎部分開發,絕大部分業務邏輯和代碼量在伺服器端,前端只收到伺服器端動態生成的HTML和附加的簡單的JS/CSS/img,是一種非常不平衡的架構,而HTML5表面上是標籤的改動,但實際上應該是改動這些標籤後所帶來的影響,還有更多的是把業務邏輯和運算量放在了客戶端,讓HTML在APP的開發上具有了更多的優勢。

HTML5在APP的開發上的優勢有:

1、更好的語義性

以前的html+css3的網頁搭建,並沒有網頁結構的明確劃分,主要強調塊狀元素和行內元素,這兩個HTM元素概念從字面上和CSS樣式有著很深的聯繫,而這種聯繫有悖於Web規範中一直倡導的表現和樣式分離的核心理念。而html5+CSS3添加了header,nav,footer等新的結構標籤,使網頁結構更加清晰,淡化了塊狀元素和行內元素的這兩種分類,讓我們更清楚每塊內容都是什麼,也非常有利於搜尋引擎分析和和SEO的優化。

2、更好的訪問資源

以前的html+css3的網頁搭建,html無法訪問內存,想訪問文件系統磁碟操作,也需要依靠flash,想要在瀏覽器內存點東西只有cookie,而且存儲量小的可憐,而現在我們可以通過html5很多新增的API,可以調用攝像頭、GPS、藍牙,在離線資料庫存儲等很多很強大的功能。

3能夠獨立部署、分發、升級

現在的html5的前端開發,可以相對於伺服器端獨立部署,甚至還可以放在CDN上。瀏覽器可以先加載前端APP,然後讓前端APP和伺服器端通信。

我們來總結一下,html和css開發只能做一些網頁的基本搭建,像以前寫頁面的人很多要不然就是美工或是伺服器端的人,位置就很尷尬,而現在的HTML5和CSS3不光在以前基礎的結構內做出了優化,並且在移動端APP開發上也有著得天獨厚的優勢。

相關焦點

  • ...linear;}自動添加css3前綴後div {  display: -webkit-box...
    使用webstorm自動編譯scss文件,並對生成的css文件自動添加瀏覽器支持前綴css書寫div {  display: flex;  animation: all 1s linear;}自動添加css3前綴後div {  display: -webkit-box;  display: -
  • ...flex;  animation: all 1s linear;}自動添加css3前綴後div...
    使用webstorm自動編譯scss文件,並對生成的css文件自動添加瀏覽器支持前綴css書寫div {  display: flex;  animation: all 1s linear;}自動添加css3前綴後div {  display: -webkit-box;  display: -
  • 前端工程師必備的css3動畫技巧
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫本文是筆者之前文章用css3實現驚豔面試官的背景即背景動畫(高級附源碼)的續篇也是介紹css3技巧的文章,因為css這塊知識難點不是很多,更多的在於去熟悉css3的新特性和基礎理論知識。
  • 前端—— CSS3動畫
    雖說IE9以及更早版本的IE瀏覽器都不支持css3動畫,但是IE6-8瀏覽器已是江河日下,使用谷歌瀏覽器、火狐瀏覽器、IE10+瀏覽器以及移動端瀏覽器等這些支持css3動畫的瀏覽器的人數越來越多,所以如果很簡單的就能讓一部分人獲得更好的用戶體驗,那何樂而不為呢。
  • 前端工程師必備的css3動畫技巧(附源碼)
    ,更多的在於去熟悉css3的新特性和基礎理論知識。所以寫這篇文章的目的一方面是對自己工作中一些css高級技巧的總結,另一方面也是希望能教大家一些實用的技巧和高效開發css的方式,以提高在工作中的效率。我們將學到正文1.box-shadow的高級應用利用css3的新特性可以幫助我們實現各種意想不到的特效,接下來的幾個案例我們來使用css3的box-shdow來實現,馬上開始吧!
  • 《css3入門到精通系列》第一節:強大的css3選擇器
    css3在常規基礎上增加了屬性選擇器、偽類選擇器和過濾選擇器等,減少你在開發中對html和id的依賴,和jquery的選擇器一樣強大;為目標獲取元素後施加樣式提供了極大靈活性。根據頁面元素的不同可將css3選擇器大致分為5類:1、基本選擇器,2、層次選擇器3、偽類選擇器(動態偽類、UI元素狀態偽類、結構為類、否定偽類選擇器)4、偽元素5
  • 和娜娜一起學習之css3的選擇器
    我們就是通過給這些框框添加背景色的方式,來讓大家,了解css3的選擇器的效果,下面正式開始:記住必須是唯一的一個哦,要是有兩個的話,就選不中了。是 p,在使用的時候要注意,元素的類型,和位置一定要準確。
  • CSS3中的currentColor ,這個關鍵字你知道嗎?
    紅色框中的currentColor,是什麼東西,打開瀏覽器頁面也沒有報錯,於是百度了一下,原來currentColor是css3中擴展的關鍵字,具體意思就是使用該關鍵字的元素的比如:<div class=」fontcolor myDiv」>字體圖標</div>這個div就是我們上面說的元素,它有fontcolor和icon兩個class類fontcolor的定義如下:. fontcolor{
  • CSS3滑鼠經過動畫特效
    在網際網路項目開發過程中,經常需要用到特效,以增強視覺特殊效果,給用戶更好的體驗效果;今天給大家分享的是一款css3滑鼠經過動畫特效,在該特效中,當滑鼠經過圖片時,圖片略微放大,底部遮罩層出現,同時圖片的描述文字和連結會以動畫的方式出現在遮罩層之上,非常炫酷。
  • Web前端:CSS3——3種隱藏元素方法的區別
    一方面分成若干較小的模塊較利於規範及時更新和發布,及時調整模塊的內容,這些模塊獨立實現和發布,也為日後CSS的擴展奠定了基礎。另外一方面,由於受支持設備和瀏覽器廠商的限制,沒備或者廠商可以有選擇的支持一部分模塊,支持css3的一個子集,這樣有利於CSS3的推廣。
  • 傳智播客解讀Css3新特性、常用屬性及應用案例
    在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。下面,傳智播客將針對Css3的新特性、常用屬性及應用案例進行解讀。一、 Css3新特性與常用屬性1.傳智播客解讀Css3—css3和css2的區別css3=css2擴展和優化2.傳智播客解讀Css3—css3的新增的語法l偽類選擇器l選擇器:first-child第一項
  • 前端學習總結HTML5+CSS3+JavaScript(上)
    之前發的是算法結構的一點東西,因為主要是告我自己怎麼理解的,用的是偽類c語言,所以不要和我剛哈,不懂就問嘿嘿!大家可以交流學習嘻嘻。今天主要總結一下前端的知識,因為學了挺多日子了,前面好多東西忘得差不多了哈首先html5和css3是關於前端布局的一些樣式定義,html5相當於結構,你現在脫光光了,css3就是穿漂亮衣服吧,之後還會學讓她 擁有各種技能,表情之後再說。
  • Web前端和後端有什麼區別(下)
    1、了解 html。這是最簡單的,也是最基礎的.要熟練掌握 div, form table, ul li, p, span, font這些標籤,尤其是 div和 table, div用於布局, table也可用於布局,但不夠靈活,基本 table用於處理數據。 2、了解 css。
  • 因為CSS3,動畫將一切皆有可能
    熱火朝天的css3無疑吸引了很多前端開發者的眼球,然而在css3中的動畫屬性則是新功能中的主打招牌,說到css3的動畫屬性不得不讓人想起這三個屬性:Transform﹑Transition﹑Animation。
  • HTML中div和span有3大區別,你了解幾個!
    HTML中的span標記和div標記在使用css排版網頁時,span和div常用的兩個的標記。利用這個兩個標記,加上css樣式控制,可以實現很複雜的網頁效果,下面為大家詳細講解一下他們區別和使用。span和div概念區別和相似點div標記是html3.0時提出來的,但是不常用,直到css的出現才慢慢變得應用廣泛起來。HTML4.0以後span才被引入,主要針對樣式表設計的。
  • CSS3動態進度條及jQ百分比數字顯示
    有了設計理念和作品,那我們怎麼用最精彩的方法運用到我們的網頁製作當中呢﹖今天就為大家分享一個利用css3製作動態進度條以及附加jQuery百分比數字顯示。其效果對比flash來說卻毫不遜色,有一個精緻的動畫進度條,上面還有當前進度的百分比數字顯示,而且還會跟著進度條而移動。相信追求新穎的朋友來說一定會非常的喜歡。
  • 用css3實現背景即背景動畫(高級附源碼)
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫我們傳統的前端更多的是用javascript實現各種複雜動畫,自從有了Css3 transition和animation以來,前端開發在動畫這一塊有了更高的自由度和格局,對動畫的開發也越來越容易。
  • HTML5哪裡培訓課程:CSS3文本屬性
    如「font-family:"YourWebFontName";」2、source:此值指的是你自定義的字體的存放路徑,可以是相對路徑也可以是絕路徑;3、format:此值指的是你自定義的字體的格式,主要用來幫助瀏覽器識別,其值主要有以下幾種類型:truetype,opentype,truetype-aat,embedded-opentype
  • 8個純CSS3製作的動畫應用及源碼
    另外開關上的文字還有發光的特效,整體看上去很有立體感。3、HTML5 3D點陣列波浪翻滾動畫還記得之前分享過的兩款HTML5 3D波浪動畫特效麼?它們是純CSS3/HTML5實現3D波浪形動畫和HTML5 WebGL實驗 超酷的HTML5 Canvas波浪牆,其中一款利用WebGL讓3D效果渲染得淋漓盡致,不過也消耗CPU。今天我們要再分享一款基於HTML5 3D的點陣列波浪翻滾動畫特效,同樣是非常的壯觀。
  • HTML的SPAN和DIV的區別
    SPAN 和 DIV 的區別在於,DIV(division)是一個塊級元素,可以包含段落、標題、表格,乃至諸如章節、摘要和備註等。而SPAN 是行內元素,SPAN 的前後是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用SPAN。