資訊專欄INFORMATION COLUMN
摘要：開始這一切吧沒錯，你沒看錯，我將從標簽開始我的整個系列文章。簡單來說，你訪問一個網(wǎng)頁，不管這個網(wǎng)頁多酷炫，功能多復雜，它們都是從一個個標簽開始建立的。
開始這一切吧！
沒錯，你沒看錯，我將從HTML標簽開始我的整個系列文章。很基礎吧？但是每個前端人都是從最簡單的HTML標簽開始的，都是從一個開始整個前端宇宙，不是么？
文章最終會寫成怎樣呢？我也不知道哈哈哈，拭目以待吧！也當給自己找找狀態(tài)了。（非初學者可以跳過）
HTML長這樣HTML，全稱Hypertext Markup Language，也就是“超文本鏈接標示語言”……這其實沒啥好說的。。
簡單來說，你訪問一個網(wǎng)頁，不管這個網(wǎng)頁多酷炫，功能多復雜，它們都是從一個個HTML標簽開始建立的。就像谷歌的真面目是這樣的：
頁面就是由右邊這些密密麻麻的標簽組成的。瀏覽器再根據(jù)標簽和樣式規(guī)則渲染出對應的頁面展示到我們眼前。
HTML版本發(fā)展從HTML最初的草案發(fā)布到現(xiàn)在較為成熟的HTML5，經(jīng)歷了整整25年（跟我差不多同齡了）。HTML4.0以及4.01其實已經(jīng)算得上是比較友好的標準了，我們現(xiàn)在用到的一些基礎標簽，都是它的產(chǎn)物。比如：h1～h6、p、a、table、div、span、img......等等使用頻率非常高的標簽都是早早就實現(xiàn)了的。但是隨著現(xiàn)代Web技術的更新和發(fā)展，更加復雜的網(wǎng)頁需求以及更多的展示形式的出現(xiàn)，HTML已經(jīng)很難承載這一切了。因此HTML5應運而生，作為最新的HTML標準，HTML5添加了新的語義、圖形以及多媒體元素，也為舊有的標簽添加了很多新的屬性。
比如新的標簽canvas解決了圖形甚至動畫的表達缺陷，新的APIlocalStorage解決了web應用的本地存儲問題，同時HTML5新加了很多符合語義化的標簽article、header、footer、section.....。我們現(xiàn)在工作中，幾乎所有項目也都是基于HTML5的，除非你要兼容一些版本很低很低的瀏覽器。
碰到兼容IE的需求，真的頭疼。God bless you！
HTML標簽的分類根據(jù)HTML各標簽的布局特性，可以對它們進行分類。
塊級元素大多是結(jié)構(gòu)性標簽，特征是能夠識別和設置寬高，并且可以自動換行。塊級元素可以包含行內(nèi)元素和塊級元素。
如：address、caption、div、h1～h6、dd,dl,dt、fieldset、form、legend、li、ol、ul、noframes、noscript、p、pre、table、tbody、tgoot、td、th、thead、tr
行內(nèi)元素的特征是不能夠識別和設置寬高，并且不會自動換行。行內(nèi)元素可以包含行內(nèi)元素，但不能包涵塊級元素（真要寫也不會出錯，但是不符合標準）。
如：a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、i、kbd、label、q、samp、select、strong、sub、sup、textarea、tt
和行內(nèi)元素差不多，但是它可以設置寬高。
如：img、input
一般還可以通過css修改元素樣式display:inline-block實現(xiàn)
盡管標簽區(qū)分了其是塊級還是行內(nèi)，但你仍可以通過設置它們的樣式改變它們的展示形式。
HTML語義化說實話，我在工作中，還是比較忽視語義化的，基本都是DIV+CSS的方式去做開發(fā)。這里要檢討一下自己，存在即合理，有那么多語義化的標簽存在，還是多去使用它們吧。選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。特別是做一些官網(wǎng)項目，或者SEO要求比較高的項目，盡量逼著自己去實現(xiàn)語義化。
參考：如何理解 Web 語義化？
今天的沒啥營養(yǎng)，貌似寫這些出來也沒多大意義，明天寫寫盒模型好了。
關于我微信號：rcgrcg，歡迎交友～
為了生計，我也接外包項目的哦～
網(wǎng)站搭建（PC、H5、前后端全包，我們有團隊的哦），APP開發(fā)（安卓和IOS），都是有成功案例的哦。
有興趣的請聯(lián)系我??！服務包您滿意的那種??！
Good luck！
2018-11-12 廈門
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/53257.html
摘要：模板解析器原理本文來自深入淺出模板編譯原理篇的第九章，主要講述了如何將模板解析成，這一章的內(nèi)容是全書最復雜且燒腦的章節(jié)。循環(huán)模板的偽代碼如下截取模板字符串并觸發(fā)鉤子函數(shù)為了方便理解，我們手動模擬解析器的解析過程。 Vue.js 模板解析器原理 本文來自《深入淺出Vue.js》模板編譯原理篇的第九章，主要講述了如何將模板解析成AST，這一章的內(nèi)容是全書最復雜且燒腦的章節(jié)。本文未經(jīng)排版，真...
摘要：第一天總結(jié)段落有序無序定義列表塊級元素獨占一行，行內(nèi)元素共占一行和和和塊級分區(qū)元素行內(nèi)分區(qū)元素特殊字符空格小于號大于號圖片圖片不能正常顯示的時候顯示此內(nèi)容路徑鼠標懸停時顯示的內(nèi)容圖片地圖細節(jié)文本標簽內(nèi)容標題標第一天 總結(jié): h1-h6 p 段落 hr br 有序 ol li 無序 ul li 定義列表 dl dt dd 塊級元素：獨占一行，h1-h6 p hr div 行內(nèi)元素：共占一行,...
摘要：我們在可替換的元素上使用，然而把用于在涉及的文檔和外部資源之間建立一個關系。屬性僅僅嵌入當前資源到當前文檔元素定義的位置。 一、webstorm快捷鍵編寫HTML標簽的快捷鍵： 標簽名+TAB鍵（修改格式，格式化代碼）快捷鍵： ctrl+shift+f 【此快捷鍵在webstorm中無效】（用ctrl+alt+L）同時編寫多個相同的標簽的快捷鍵 ：標簽名*個數(shù)+tab鍵同時編寫多行代碼...
閱讀 1860·2021-10-19 13:30
閱讀 1416·2021-10-14 09:48
閱讀 1625·2021-09-22 15:17
閱讀 2074·2019-08-30 15:52
閱讀 3335·2019-08-30 11:23
閱讀 2035·2019-08-29 15:27
閱讀 964·2019-08-29 13:55
閱讀 807·2019-08-26 14:05
