沒錯,你沒看錯,我將從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...