從HTML標籤開始

2021-08-31 16:38:01 字數 1813 閱讀 3873

沒錯,你沒看錯,我將從html標籤開始我的整個系列文章。很基礎吧?但是每個前端人都是從最簡單的html標籤開始的,都是從乙個開始整個前端宇宙,不是麼?

文章最終會寫成怎樣呢?我也不知道哈哈哈,拭目以待吧!也當給自己找找狀態了。(非初學者可以跳過)

html,全稱hypertext markup language,也就是「超文字鏈結標示語言」……這其實沒啥好說的。。

簡單來說,你訪問乙個網頁,不管這個網頁多酷炫,功能多複雜,它們都是從乙個個html標籤開始建立的。就像谷歌的真面目是這樣的:

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

從html最初的草案發布到現在較為成熟的html5,經歷了整整25年(跟我差不多同齡了)。html4.0以及4.01其實已經算得上是比較友好的標準了,我們現在用到的一些基礎標籤,都是它的產物。比如:h1~h6、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各標籤的布局特性,可以對它們進行分類。

塊級元素

塊級元素大多是結構性標籤,特徵是能夠識別和設定寬高,並且可以自動換行。塊級元素可以包含行內元素和塊級元素。

如: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

行內元素

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

如: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實現

儘管標籤區分了其是塊級還是行內,但你仍可以通過設定它們的樣式改變它們的展示形式。

說實話,我在工作中,還是比較忽視語義化的,基本都是div+css的方式去做開發。這裡要檢討一下自己,存在即合理,有那麼多語義化的標籤存在,還是多去使用它們吧。選擇合適的標籤(**語義化)便於開發者閱讀和寫出更優雅的**的同時讓瀏覽器的爬蟲和機器很好地解析。特別是做一些官網專案,或者seo要求比較高的專案,盡量逼著自己去實現語義化。

參考:如何理解 web 語義化?

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

為了生計,我也接外包專案的哦~

good luck!

2018-11-12 廈門

從HTML標籤開始

沒錯,你沒看錯,我將從html標籤開始我的整個系列文章。很基礎吧?但是每個前端人都是從最簡單的html標籤開始的,都是從乙個開始整個前端宇宙,不是麼?文章最終會寫成怎樣呢?我也不知道哈哈哈,拭目以待吧!也當給自己找找狀態了。非初學者可以跳過 html,全稱hypertext markup langu...

html的入門 從標籤開始(4)

html中的其他標記 doctype 文件型別 由於html存在多個版本,因此每個網頁的開頭都應該用乙個doctype宣告來告訴瀏覽器此頁使用了html的哪個版本 當然,即使沒有宣告doctype宣告,瀏覽器通常也會顯示頁面 由於xhtnl是採用xml編寫的,因此有時你會看到使用了嚴格版xhtml ...

ASP從HTML標籤中提取中文

function delhtml strhtml 做了乙個函式名叫delhtml dim objregexp,stroutput set objregexp new regexp 建立正規表示式 objregexp.ignorecase true 設定是否區分大小寫 objregexp.global...