• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

HTML5基礎知識及兼容處理

作者: 日期:2019-01-11 點擊: 301

HTML5基礎概述HTML:超文本標記語言(頁面中不僅只有文字,而且可以呈現出圖片、音視頻等媒體資源)XHTML:它是HTML比較規範嚴謹的一代版本XML:可擴展的標記語言(HTML中使用的標簽都是W3C標准中規定的,XML允許我們自己擴展標簽的),它的作用不是用來寫頁面結構的,而是用來存儲一些數據的(以自己擴展的標簽作爲標識,清晰明了的展示出數據的結構

聊聊移動端的REM適配問題

作者: 日期:2017-08-22 點擊: 472

詳聊移動端rem的適配問題現在移動端對于前端行業來說特別流行,廢話不多說,那我們就來聊聊移動端的哪些事?寫移動端必須在html頁面head標簽內加一個meta標簽—viewport視口 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

如何編寫一個輕量級的CSS框架

作者: 日期:2017-08-19 點擊: 331

如何編寫輕量級 CSS 框架目前市場輕量級框架如雨後春筍,層出不窮。我想每個人都應該歸納總結工作中的常見需求,編寫一套適合自己的 CSS 框架。現在仍然有很多人對于前端框架的認識還停留在表面,認爲 Bootstrap 是後端人員專用,前端沒必要等等。我不知道這種說法從何而來,我最開始也不喜歡使用框架,或許和很多人的想法一樣,畏懼新知

canvas 圖片動畫繪制

作者: 日期:2017-08-13 點擊: 283

canvas 圖片動畫繪制繪制簡單圖像 語法: CanvasRenderingContext2D.drawImage( img, dx, dy ) 描述: 使用三個參數, 允許在畫布上的 任意位置 繪制圖片. 參數 img 是指圖片對象. 可以是 img 標簽, 或者是 video 標簽, 已經另一個 canvas 等. 需要注意的是如果直接添加 img 對象是不可以的,

CSS背景與邊框(二)

作者: 日期:2017-07-02 點擊: 288

6.複雜的背景圖案背景知識:css漸變, “條紋背景”6.1 網格把多個漸變圖案組合起來,讓它們透過彼此的透明區域顯現時,就會得到意想不到的圖案。background: white;background-image: linear-gradient(90deg, rgba(200,0,0,.5), 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, tra

CSS背景與邊框(一)

作者: 日期:2017-06-27 點擊: 261

背景與邊框1.半透明邊框背景知識:rgba/hsla,在rgb/hsl的基礎上增加了Alpha通道,用于設置顔色的不透明度(就是能透過多少背景) rgba接受四個數值,即rgba(red, green, blue,a),rgb可以爲數值(0 ~ 255),也可以爲百分比(0 ~ 100%),a表示不透明度(0~1),1爲完全不透明,0表示完全透明。 rgba(0,255,0,1) 表示純綠色,完全不透

HTML5實現圖片上傳與預覽

作者: 日期:2017-06-16 點擊: 570

File API File - 獨立文件;提供只讀信息,例如名稱、文件大小、mimetype 和對文件句柄的引用。 FileList - File 對象的類數組序列(考慮多文件上傳或者從桌面拖動目錄或文件)。 Blob - 可將文件分割爲字節範圍。 FileReader - 讀取File或Blob URL scheme檢測浏覽器是否支持// 檢測是否支持File APIif (window.Fil

深入理解CSS3 Flexbox

作者: 日期:2017-06-01 點擊: 431

一、前言Flexbox 是一個 CSS3 的盒子模型 ( box model ),顧名思義它就是一個靈活的盒子 ( Flexible Box ),爲什麽最近這個屬性才紅起來呢?最主要也是因爲 CSS3 的規範終于普及 ( 或 IE 終于敗亡 ),加上行動裝置的發展促成了響應式布局興起,自適應長寬彈性相當大的 Flexbox 就趁勢而起了。第一步要來看 Flexbox 的盒子模型,根據 W3C

Css: background-position屬性

作者: 日期:2017-05-18 點擊: 900

在 CSS 中提供的 background-position 用來設置背景圖片的最初的位置。既然需要設置位置,肯定需要根據頁面中的坐標確定,而這個坐標原點的確定是有background-origin 來設置的。background-origin 有:padding-box、border-box、content-box,三個取值,爲了比較清晰的說清楚,來看下面的一個圖就知道了:background-position在沒有指定

利用CSS實現無js的tab切換

作者: 日期:2017-04-27 點擊: 306

tab頁面的切換原理是利用display屬性來操作的,利用這一點,我們就可以利用input中的單選按鈕來實現這個功能。我們讓與input對應的label來作爲tab的導航。<input type="radio" id="tab1" name="parent-type"><label for="tab1" class="labe">tab1</la

淺談CSS優先級

作者: 日期:2017-04-14 點擊: 236

了解一下CSS優先級浏覽器通過優先級來判斷哪一些屬性值與一個元素最爲相關,從而在該元素上應用這些屬性值。優先級是基于不同種類選擇器組成的匹配規則。最近在寫一些小demo,過程中遇見由于不太熟悉CSS優先級問題而造成的麻煩,所以特地了解和學習了相關的知識,爲了避免遺忘,也有助于將來複習,所以記在博客裏。什麽是CSS權重優先級

前端性能優化小總結

作者: 日期:2017-04-11 點擊: 250

1.想深層次探究前端優化,就不僅僅停留到表面,要知道文件如何下載?浏覽器如何渲染?想優化頁面,就要知道一個頁面,産生的整個過程 浏覽器産生一個頁面的流程如下:1.1下載:最有優化點的一部下載,這個方向是優化必要點,貼一張chrome下載文件的時間截圖://來個表格,細致分析下下載過程中每個階段的耗時 1.持續時間 = 時間 *個數 2.時

常用的幾種HTML5體驗改進方法

作者: 日期:2017-03-21 點擊: 297

常用HTML5體驗改進方法1. fake 頁 - 首屏加速因爲 71% 的用戶期望移動頁面跟 pc 頁面一樣快 (3s) ,74% 的用戶能容忍的響應時間爲 5 秒,所以我們必須保證移動端頁面有足夠的速度。方案: 避免頁面長時間白頁,頁面渲染只需要完整的 HTML 以及 CSS 加載結束後頁面第一屏便渲染結束,然後再異步加載js 靜態資源不使用 cookie

HTML5新增標簽概括

作者: 日期:2017-03-19 點擊: 301

HTML5新增標簽 標簽名 標簽屬性 article 定義文章 aside 定義頁面內容之外的內容 audio 定義聲音內容

CSS3實現居中的各種方式

作者: 日期:2017-03-03 點擊: 389

本篇整理了CSS3實現居中(水平居中、垂直居中、水平垂直居中)的幾種解決方案水平居中:行內元素解決方案思路: 把行內元素包裹在一個屬性display爲block的父層元素中,並且把父層元素添加如下屬性即可:text-align: center適用元素:文字,鏈接,及其它inline或者inline-*類型元素(inline-block,inline-table,inline-flex)//父元素display:b

初學CSS3應該掌握哪些基礎知識

作者: 日期:2017-02-25 點擊: 284

初學CSS3應該掌握哪些基礎知識 初學CSS3應該掌握哪些基礎知識 CSS3簡介 CSS現狀 怎樣應用 引用前的准備 同一環境 如何使用手冊 具體學習那些知識點 CSS3選擇器

CSS常見問題及解決方案

作者: 日期:2017-02-18 點擊: 488

calc()css 數學運算彈性盒模型display: flex 新display: box 舊元素上下居中 css3: 彈性盒模型 css3: translate .element{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}模擬 table.elementParentParent { display: table

css3 3D轉換 transform

作者: 日期:2017-02-12 點擊: 232

CSS3 允許您使用 3D 轉換來對元素進行格式化那麽下面我們一起看一下2D和3D有什麽不同: [請用鼠標放到下面兩個盒子上,查看效果] /* .dd{ width:200px; height:200px; display:inline-block; border:1px solid yellow; background:red; } div-2d:hover{ transform: rotate(360deg); } div-3d:hover{ transform: rot

css3 2D轉換transform

作者: 日期:2017-02-11 點擊: 236

css32D轉換transform通過 CSS3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。 轉換是使元素改變形狀、尺寸和位置的一種效果。浏覽器支持 Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。 Chrome 和 Safari 需要前綴 -webkit-。 注釋:Internet Explorer 9 需要前綴 -ms-。2D轉換方法有以下幾種:屬

網頁各種布局的解決方案

作者: 日期:2017-02-05 點擊: 393

兩列布局(左邊定寬,右邊自適應)HTML代碼如下:<div class="parent"> <div class="left">側欄</div> <div class="right">主欄</div></div>思路1:采用float實現.對parent父節點設置padding-left: 210px; ,對left側欄節點設置fl

利用css3繪制三角形

作者: 日期:2017-01-25 點擊: 880

方法/步驟新建一個html5網頁,名稱爲index.html,在代碼中寫上四個div,分別是向上、向下、向左,向右四個三角形,代碼如下: <div class="triangle-up"> <!--向上的三角--> </div> <div class="triangle-down"> <!--向下的三角--> </div> <div c

HTML5 Web存儲(localStorage與sessionStorage)

作者: 日期:2017-01-24 點擊: 330

HTML5 Web存儲(localStorage與sessionStorage)localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的;sessionStorage用于本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

CSS好看常用的中文字體

作者: 日期:2017-01-24 點擊: 1085

如下: 例1(小米米官網):font-family: "Arial","Microsoft YaHei","黑體","宋體",sans-serif; 例2(淘寶技術研發中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋體',sans-serif; 例3(加網 ):font: 14px/1.5 'Microsoft Y

常用HTML5體驗改進方法

作者: 日期:2017-01-22 點擊: 181

常用HTML5體驗改進方法1. fake 頁 - 首屏加速因爲 71% 的用戶期望移動頁面跟 pc 頁面一樣快 (3s) ,74% 的用戶能容忍的響應時間爲 5 秒,所以我們必須保證移動端頁面有足夠的速度。方案: 避免頁面長時間白頁,頁面渲染只需要完整的 HTML 以及 CSS 加載結束後頁面第一屏便渲染結束,然後再異步加載js 靜態資源不使用 cookie

CSS3 字體和CSS3 新增控制字體屬性

作者: 日期:2017-01-22 點擊: 206

CSS3 字體和CSS3 新增控制字體屬性CSS3 字體在網頁編輯使用字體時,在CSS3出現之前設計師只能使用計算機已安裝的字體,而現在CSS3中,當你發現您要使用的字體文件時,只需簡單的將字體文件包含在網站中,它會自動下載給需要的用戶。 那麽如何使用CSS3字體呢,我們下面一起學習一下。 第一步:調用需要的字體<style>@font-face{ fon

CSS選擇器詳解

作者: 日期:2017-01-21 點擊: 234

CSS3選擇器CSS選擇器用于選擇你想要控制樣式的元素,准確的找HTML元素,是它存在的意義。CSS1和CSS2的選擇器我們經常使用,在這裏就不在贅述了,我們直接看看CSS3中給我們提供了哪些更加便捷的選擇器。所有主流浏覽器都支持 CSS3 選擇器。ie8以下浏覽器要想使用此選擇器,HTML文檔聲明需要是HTML5的文檔聲明<!DOCTYPE>。element1~elem

響應式布局之rem

作者: 日期:2017-01-14 點擊: 1277

rem這是個低調的css單位,近一兩年開始嶄露頭角,許多使用者對rem的評價不一,有的在嘗試使用,有的在使用過程中遇到坑就棄用了。但是在進行app開發或者叫做響應式布局的時候,它還是一個強力的候選手段之一。

響應式布局之媒體查詢

作者: 日期:2017-01-13 點擊: 571 html,css3

一個結構能夠兼容多個終端,而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網浏覽而誕生的。響應式布局可以爲不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用”大勢所趨”來形容也不爲過。隨著越來越多的設計師采用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

HTML5獲取地理位置信息

作者: 日期:2017-01-06 點擊: 195

HTML5提供了地理位置定位功能(Geolocation API),能確定用戶位置,我們可以借助HTML5的該特性開發基于地理位置信息的應用。本文結合實例給大家分享如何使用HTML5,借助百度、谷歌地圖接口來獲取用戶准確的地理位置信息。

HTML5新增標簽

作者: 日期:2016-11-20 點擊: 1311

在之前的HTML頁面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取頁面的內容的時候,它只能猜測你的某個Div內的內容是文章內容容器,或者是導航模塊的容器,或者是作者介紹的容器等等。也就是說整個HTML文檔結構定義不清晰,HTML5中爲了解決這個問題,專門添加了:頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽

HTML5培訓-head頭標簽詳解

作者: 日期:2016-11-15 點擊: 444

HTML的頭部內容特別多,有針對SEO的頭部信息,也有針對移動設備的頭部信息。而且各個浏覽器內核以及各個國內浏覽器廠商都有些自己的標簽元素,有很多差異性。移動端的工作已經越來越成爲前端工作的重要內容,除了平常的項目開發,HTML 頭部標簽功能,特別是meta,link等標簽的功能屬性顯得非常重要。這裏整理了一份 部分的清單,讓大家了解每個標簽及相應屬性的意義,寫出滿足自己需求的 頭部標簽,可以很有效的增強頁面的可用性。

html5開發培訓系列之Flexbox深入理解

作者: 日期:2016-07-31 點擊: 962 flexbox

Flex 布局深入理解flexbox的優勢隨著移動設備的普及,各種響應式用戶界面的流行,Web 應用一般都要求適配不同的設備尺寸和浏覽器分辨率,這無疑使布局的邏輯變得更加複雜. .........

 49    1 2 下一頁 尾頁