㈠ Web前端工程師要了解的html+css基礎知識
今天小編要跟大家分析的文章是關於Web前端工程師要了解的html+css基礎知識。正在從事Web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事Web前端工作和學習的小夥伴們有所幫橡鎮助。一、什麼是HTML？
HTML即超文本標記語言(HyperTextMarkupLanguage)，是用來描述網頁的一種語言。
超文本標記語言的結構包括"頭"部分（外語：Head）、和"主體"部分（外語：Body），其中"頭"部提供關於網頁的信息，"主體"部分提供網頁的具體內容。
標記語言是一套標記標簽(markuptag)
HTML使用標記標簽來描述網頁
如下代碼：
MyFirstHeading
Myfirstparagraph.
例子解釋:
與之間的文本描述網頁
與之間的文本是可見的頁面內容
與
之間的文本被顯示為標題與
之間的文本被顯示為段落二、HTML元素
HTML文檔是由HTML元素定義的。
HTML元素指的是從開始標簽（starttag）到結束標簽（end
tag）的所有代碼。
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
開始標簽
元素內容
結束標簽
Thisisaparagraph
href="default.htm">
Thisisalink注釋：啟梁開始標簽常被稱為開放標簽（openingtag），結束標簽常稱為閉合標簽（closingtag），大多數HTML元素可擁有屬性。
空的HTML元素：
沒有內容的HTML元素被稱為空元素。在XHTML、XML以及未來版本的HTML中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如:
就是沒有關閉標簽的空元素,而
是關閉空元素的正確方法，HTML、XHTML和XML都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用
其實是更長遠的保障。
HTML提示：使用小寫標簽
HTML標簽對大小寫不敏感：
等同於
。許多網站都使用大寫的HTML標簽。 ㈡ Web 設計的CSS 工具有哪些 Web程序員必備的CSS工具 CSS問題檢查工具：CSS Lint CSS代碼分析統計工具：CSS Stats CSS代碼優化壓縮工具：CSS Shrinks CSS代碼整理工具：ProCSSor Codrops CSS 語法參考 CSS3瀏覽器兼容支持情況查詢工具：Can I Use 檢查你的代碼是否符合CSS標准：W3C CSS Validation Service CSS動畫生成工具：Gradient Animator ㈢ Web前端工程師要掌握的CSS技巧
今天小編要跟大家分享的文章是關於昌亮Web前端工程師要掌握的CSS技巧。正在從事web前端工作的小夥伴們快來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。 ㈣ web前端開發學習路線 第一階段： HTMLCSS: HTML進階、CSS進階、divcss布局、HTMLcss整站開發、 JavaScript基礎： Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。 JS基本特效： 常見特效、例如：tab、導航、整頁滾豎斗動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。 JS高級特徵： 正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、 JQuery：基礎使用 懸著器、DOM操作、特效和動畫、方法鏈、拖拽、陪纖陪變形、JQueryUI組件基本使用。 第二階段： HTML5和移動Web開發 HTML5： HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas. CSS3: CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。 Bootstrap: 響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。 移動Web開發： 跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。 第三階段： HTTP服務和AJAX編程 WEB伺服器基礎： 伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。 PHP基礎： PHP基礎語法、使用PHP處理簡單的GET或者POST請求、 AJAX上篇： Ajax簡介和非同步的概念、Ajax框架的封裝、對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。 AJAX下篇： JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。 第四階段： 面向對象進階 面向對象終極篇： 從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。 面向對象三大特徵： 繼承性、多態性、封裝性、介面。 設計模式： 面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式蘆蠢、裝飾者模式、適配器模式、面向切面編程。 第五階段： 封裝一個屬於自己的框架 框架封裝基礎： 事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。 框架封裝中級： 運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。 框架封裝高級和補充： JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。 第六階段： 模塊化組件開發 面向組件編程： 面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。 面向模塊編程： AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。 第七階段： 主流的流行框架 Web開發工作流： GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。 MVC/MVVM/MVW框架： Angular.js、Backbone.js、Knockout/Ember。 常用庫： React.js、Vue.js、Zepto.js。 第八階段： HTML5原生移動應用開發 Cordova： WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。 Ionic： Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。 ReactNative： ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。 HTML5： HTML5中國產業聯盟、環境、HBuilder開發工具、MUI框架、H5開發和部署。 第九階段： Node.js全棧開發： 快速入門： Node.js發展、生態圈、Io.js、Linux/Windows/OSX環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。 核心模塊和對象： 全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端。 Web開發基礎： HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。 快速開發框架： Express簡介MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。 希望對您有所幫助！~ ㈤ Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
W3School使用的是小寫標簽，因為萬維網聯盟（W3C）在HTML4中推薦使用小寫，而在未來(X)HTML版本中強制使用小寫。
三、HTML屬性
HTML標簽可以擁有屬性。屬性提供了有關HTML元素的更多的信息。
屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性總是在HTML元素的開始標簽中規定。
屬性實例:
HTML鏈接由標簽定義。鏈接的地址在href屬性梁旁粗中指定：
Thisisa
link
注釋：屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='Bill"HelloWorld"Gates'。
HTML提示：使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過，萬維網聯盟在其HTML4推薦標准中推薦小寫的屬性/屬性值。
而新版本的(X)HTML要求使用小寫屬性。
一些常見HTML屬性:
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性
值
描述
class
classname
規定元素的類名（classname）
id
id
規定元素的唯一id
style
style_definition
規定元素的行內樣式（inline
style）
title
text
規定元素的額外信息（可在工具提示中顯示）
四、HTML編輯器
使用Notepad或TextEdit來編寫HTML
可以使用專業的HTML編輯器來編輯HTML：
AdobeDreamweaver
MicrosoftExpressionWeb
CoffeeCupHTMLEditor
五、HTML標題
標題（Heading）是通過-
等標簽進行定義的。
Thisisaheading
定義最大的標題。
Thisisaheading
定義最小的標題。
注釋：瀏覽器會自動地在標題的前後添加空行。
注釋：默認情況下，HTML會自動地在塊級元素前後添加一個額外的空行，比如段落、標題元素前後。
以上就是小編今天為大家分享的關於Web前端工程師要了解的html+css基礎知識的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
CSS Lint是一個開源的校驗CSS文件質量的工具，最初是由 Nicholas C. Zakas和 Nicole Sullivan編寫的，最初版本在Velocity會議上於2011年6月發布。CSS Lint的檢測規則包括錯誤的和警告，當選擇器或屬性書寫不正確、漏掉了大括弧、多寫了分號等時，會提示解析錯誤，解析錯誤優先提示。
Css Stats是一款在線CSS代碼分析工具，輸入網站CSS網址即可進行CSS代碼分析。Css Stats是前端網頁設計師分析網站CSS代碼的利器，可以統計CSS代碼里的規則、字體大小、寬度高度、顏色數等等。
對於網頁設計師而言分享網頁CSS代碼是必須要做的事情，統計網站設計里使用了多少種字體、多少種字體大小、多少種顏色、背景顏色有多少種，只有對CSS代碼有一個詳細的統計數字才能分析出來整個網站設計出來以後的效果。Css Stats還提供熱門網站的CSS分析數據，例如谷歌、雅虎、Twitter、FaceBook、Tumblr等網站。
CSS Shrinks 能夠非常明顯的壓縮你的CSS體積大小。很多Web程序員編寫的CSS代碼里有大量的冗餘語法，空白空間等，這款工具能在不影響你的CSS的正確性的情況下，優化CSS的語法，去除無用的空格和空行，顯著的壓縮CSS的提交，大量的減少帶寬的浪費。
ProCSSor 除了提供基本優化CSS代碼功能，還提供了大量的自定義選項。比如，讓你設定CSS規則，CSS屬性，CSS語法的優化選項。它還提供了對新型CSS3屬性、規則中各種瀏覽器里的不兼容替代方案。
Codrops CSS 參考內容豐富而全面，並且界面清爽直接，你可以使用這個工具掌握CSS里最重要而全面的知識。它的CSS知識庫分成了數個類別，包括偽類，屬性，函數，數據類型，概念，規則等。
「Can I Use」在這里你能找到所有web新特性在各個品牌瀏覽器以及各品牌瀏覽器不同版本的兼容性，當你知道你針對的用戶都在使用什麼瀏覽器時，這寫table將對你建設網站有很大幫助。打開caniuse.com，該網站首頁將所有HTML5、CSS3等web新特性羅列出來，如果你想查看某個特性在不同瀏覽器種的兼容情況，點擊一下就可以。比如，看一下@font-face Web fonts在各個瀏覽器中的兼容性，點擊CSS區域中的第一項，會看到一個表格，列出所有瀏覽器的版本，用不同顏色代表每個瀏覽器對@font face Web fonts的支持，被標識為紅色的代表不支持，淺綠色代表部分支持。圖中列出的瀏覽器還包括一些手機平板設備瀏覽器，例如Android系統瀏覽器。如此全面，設計網站時，可以根據網站針對的用戶有選擇的使用CSS和Javascript的高級特性，提高用戶體驗。
這個工具是用來檢查你的CSS語法是否正確，是否符合W3C CSS標准。我們知道從最早的IE開始，各種瀏覽器都實現了一些自己的方言，這些方言中在各種瀏覽器里互不相通。但我們開發網頁時，必須最大限度的考慮各種瀏覽器的兼容性，最好的方法是遵守W3C的CSS標准規范。W3C CSS Validation Service就是用來校驗你的css中的問題，它會提醒你那些語法，哪些屬性，那些規則是有問題的。
這是一款使用CSS Gradient和CSS Animation技術實現的動態背景生成工具。工具非常易用，輕松地點擊幾下滑鼠，一個現代感十足的漸變動態背景代碼就生成了。它可以讓CSS漸變背景平滑地移動，我們可以設置移動的角度，移動的速度，漸變的角度。支持所有現代瀏覽器以及 ie 10+。非常適合做網頁開屏背景。
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想像的高度height；舉個例子：
其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應（多用於佔位，避免閃爍）當然該元素高度肆攔上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對於父元素的高度的。同理，left、right則是相對於父元素的寬度的。
這一點，我昨天在查資料寫這篇文章—最全面的元素水平垂直居中方法匯總的時候就發現有個大牛也理解錯了—-CSS布局奇淫技巧之_各種居中裡面的第八點。3、邊框寬度不允許使用百分比裂迅胡值這點就不解釋了。4、width：100%當父容器里有絕對定位的子元素時，子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的content，其等於父元素的content寬度。
將上面子元素的position改成了relative後，其寬度就變成了parent寬度。
5、line-height你知道line-height:150%和line-height:1.5的區別嗎？知道了就可以跳過此處，不知道繼續看下面：舉個例子：
上面可以看到line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。6、ex和ch單位ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算；ch:以節點所使用字體中的「0」字元為基準，找不到時為0.5em；
ex和ch單位，類似於em和rem,依賴於當前的字體和字體大小。但是，不同的是，這兩貨是基於字體的度量單位，依賴於設定的字體。ch單位通常被定義為數字0的寬度。你可以在EricMeyers的博客里找到關於它的一些有意思的討論，例如將一個等寬字體的字母」N」的寬度設置為40ch，那麼在另一種類型的字體里它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。ex定義為當前字體的小寫x字母的高度或者1/2的1em。很多時候，它是字體的中間標志。
x-height;theheightofthelowercasex這些單位有很多用途，大部分用於版式的微調。比方說，sup元素（上角文字標），可以通過position:relative;bottom:
1ex;實現。類似的方法，你可以實現一個下角文字標。瀏覽器默認的方式是利用上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：Css代碼
7、使用calc時運算符之間要有空格，否則可能無效。
以上就是小編今天為大家分享的關於Web前端工程師要掌握的CSS技巧的文章，希望本篇文章能對正在從事web前端相關工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css