從HTML標籤開始

時間 2019-12-12

標籤 html 標籤開始欄目 HTML 简体版

原文原文鏈接

開始這一切吧！

沒錯，你沒看錯，我將從HTML標籤開始個人整個系列文章。很基礎吧？可是每一個前端人都是從最簡單的HTML標籤開始的，都是從一個<html></html>開始整個前端宇宙，不是麼？css

文章最終會寫成怎樣呢？我也不知道哈哈哈，拭目以待吧！也當給本身找找狀態了。（非初學者能夠跳過）html

HTML長這樣

HTML，全稱Hypertext Markup Language，也就是「超文本連接標示語言」……這其實沒啥好說的。。前端

簡單來講，你訪問一個網頁，無論這個網頁多酷炫，功能多複雜，它們都是從一個個HTML標籤開始創建的。就像谷歌的真面目是這樣的：web

頁面就是由右邊這些密密麻麻的標籤組成的。瀏覽器再根據標籤和樣式規則渲染出對應的頁面展現到咱們眼前。canvas

HTML版本發展

從HTML最初的草案發布到如今較爲成熟的HTML5，經歷了整整25年（跟我差很少同齡了）。HTML4.0以及4.01其實已經算得上是比較友好的標準了，咱們如今用到的一些基礎標籤，都是它的產物。好比：h1～h六、p、a、table、div、span、img......等等使用頻率很是高的標籤都是早早就實現了的。可是隨着現代Web技術的更新和發展，更加複雜的網頁需求以及更多的展現形式的出現，HTML已經很難承載這一切了。所以HTML5應運而生，做爲最新的HTML標準，HTML5添加了新的語義、圖形以及多媒體元素，也爲舊有的標籤添加了不少新的屬性。後端

好比新的標籤canvas解決了圖形甚至動畫的表達缺陷，新的APIlocalStorage解決了web應用的本地存儲問題，同時HTML5新加了不少符合語義化的標籤article、header、footer、section.....。咱們如今工做中，幾乎全部項目也都是基於HTML5的，除非你要兼容一些版本很低很低的瀏覽器。瀏覽器

碰到兼容IE的需求，真的頭疼。God bless you！微信

HTML標籤的分類

根據HTML各標籤的佈局特性，能夠對它們進行分類。less

塊級元素

塊級元素大可能是結構性標籤，特徵是可以識別和設置寬高，而且能夠自動換行。塊級元素能夠包含行內元素和塊級元素。佈局

如：address、caption、div、h1～h六、dd,dl,dt、fieldset、form、legend、li、ol、ul、noframes、noscript、p、pre、table、tbody、tgoot、td、th、thead、tr

行內元素

行內元素的特徵是不可以識別和設置寬高，而且不會自動換行。行內元素能夠包含行內元素，但不能包涵塊級元素（真要寫也不會出錯，可是不符合標準）。

如：a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、i、kbd、label、q、samp、select、strong、sub、sup、textarea、tt

行內塊級元素

和行內元素差很少，可是它能夠設置寬高。

如：img、input

通常還能夠經過css修改元素樣式display:inline-block實現

儘管標籤區分了其是塊級仍是行內，但你仍能夠經過設置它們的樣式改變它們的展現形式。

HTML語義化

說實話，我在工做中，仍是比較忽視語義化的，基本都是DIV+CSS的方式去作開發。這裏要反省一下本身，存在即合理，有那麼多語義化的標籤存在，仍是多去使用它們吧。選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。特別是作一些官網項目，或者SEO要求比較高的項目，儘可能逼着本身去實現語義化。

參考：如何理解 Web 語義化？

今天的沒啥養分，貌似寫這些出來也沒多大意義，明天寫寫盒模型好了。