成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從HTML標(biāo)簽開(kāi)始

chadLi / 634人閱讀

摘要：開(kāi)始這一切吧沒(méi)錯(cuò)，你沒(méi)看錯(cuò)，我將從標(biāo)簽開(kāi)始我的整個(gè)系列文章。簡(jiǎn)單來(lái)說(shuō)，你訪問(wèn)一個(gè)網(wǎng)頁(yè)，不管這個(gè)網(wǎng)頁(yè)多酷炫，功能多復(fù)雜，它們都是從一個(gè)個(gè)標(biāo)簽開(kāi)始建立的。

開(kāi)始這一切吧！

沒(méi)錯(cuò)，你沒(méi)看錯(cuò)，我將從HTML標(biāo)簽開(kāi)始我的整個(gè)系列文章。很基礎(chǔ)吧？但是每個(gè)前端人都是從最簡(jiǎn)單的HTML標(biāo)簽開(kāi)始的，都是從一個(gè)開(kāi)始整個(gè)前端宇宙，不是么？

文章最終會(huì)寫成怎樣呢？我也不知道哈哈哈，拭目以待吧！也當(dāng)給自己找找狀態(tài)了。（非初學(xué)者可以跳過(guò)）

HTML長(zhǎng)這樣

HTML，全稱Hypertext Markup Language，也就是“超文本鏈接標(biāo)示語(yǔ)言”……這其實(shí)沒(méi)啥好說(shuō)的。。

簡(jiǎn)單來(lái)說(shuō)，你訪問(wèn)一個(gè)網(wǎng)頁(yè)，不管這個(gè)網(wǎng)頁(yè)多酷炫，功能多復(fù)雜，它們都是從一個(gè)個(gè)HTML標(biāo)簽開(kāi)始建立的。就像谷歌的真面目是這樣的：

頁(yè)面就是由右邊這些密密麻麻的標(biāo)簽組成的。瀏覽器再根據(jù)標(biāo)簽和樣式規(guī)則渲染出對(duì)應(yīng)的頁(yè)面展示到我們眼前。

HTML版本發(fā)展

從HTML最初的草案發(fā)布到現(xiàn)在較為成熟的HTML5，經(jīng)歷了整整25年（跟我差不多同齡了）。HTML4.0以及4.01其實(shí)已經(jīng)算得上是比較友好的標(biāo)準(zhǔn)了，我們現(xiàn)在用到的一些基礎(chǔ)標(biāo)簽，都是它的產(chǎn)物。比如：h1～h6、p、a、table、div、span、img......等等使用頻率非常高的標(biāo)簽都是早早就實(shí)現(xiàn)了的。但是隨著現(xiàn)代Web技術(shù)的更新和發(fā)展，更加復(fù)雜的網(wǎng)頁(yè)需求以及更多的展示形式的出現(xiàn)，HTML已經(jīng)很難承載這一切了。因此HTML5應(yīng)運(yùn)而生，作為最新的HTML標(biāo)準(zhǔn)，HTML5添加了新的語(yǔ)義、圖形以及多媒體元素，也為舊有的標(biāo)簽添加了很多新的屬性。

比如新的標(biāo)簽canvas解決了圖形甚至動(dòng)畫(huà)的表達(dá)缺陷，新的APIlocalStorage解決了web應(yīng)用的本地存儲(chǔ)問(wèn)題，同時(shí)HTML5新加了很多符合語(yǔ)義化的標(biāo)簽article、header、footer、section.....。我們現(xiàn)在工作中，幾乎所有項(xiàng)目也都是基于HTML5的，除非你要兼容一些版本很低很低的瀏覽器。

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

HTML標(biāo)簽的分類

根據(jù)HTML各標(biāo)簽的布局特性，可以對(duì)它們進(jìn)行分類。

塊級(jí)元素

塊級(jí)元素大多是結(jié)構(gòu)性標(biāo)簽，特征是能夠識(shí)別和設(shè)置寬高，并且可以自動(dòng)換行。塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。

如：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)元素的特征是不能夠識(shí)別和設(shè)置寬高，并且不會(huì)自動(dòng)換行。行內(nèi)元素可以包含行內(nèi)元素，但不能包涵塊級(jí)元素（真要寫也不會(huì)出錯(cuò)，但是不符合標(biāo)準(zhǔn)）。

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

行內(nèi)塊級(jí)元素

和行內(nèi)元素差不多，但是它可以設(shè)置寬高。

如：img、input

一般還可以通過(guò)css修改元素樣式display:inline-block實(shí)現(xiàn)

盡管標(biāo)簽區(qū)分了其是塊級(jí)還是行內(nèi)，但你仍可以通過(guò)設(shè)置它們的樣式改變它們的展示形式。

HTML語(yǔ)義化

說(shuō)實(shí)話，我在工作中，還是比較忽視語(yǔ)義化的，基本都是DIV+CSS的方式去做開(kāi)發(fā)。這里要檢討一下自己，存在即合理，有那么多語(yǔ)義化的標(biāo)簽存在，還是多去使用它們吧。選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。特別是做一些官網(wǎng)項(xiàng)目，或者SEO要求比較高的項(xiàng)目，盡量逼著自己去實(shí)現(xiàn)語(yǔ)義化。

參考：如何理解 Web 語(yǔ)義化？

今天的沒(méi)啥營(yíng)養(yǎng)，貌似寫這些出來(lái)也沒(méi)多大意義，明天寫寫盒模型好了。

關(guān)于我

微信號(hào)：rcgrcg，歡迎交友～

為了生計(jì)，我也接外包項(xiàng)目的哦～

網(wǎng)站搭建（PC、H5、前后端全包，我們有團(tuán)隊(duì)的哦），APP開(kāi)發(fā)（安卓和IOS），都是有成功案例的哦。

有興趣的請(qǐng)聯(lián)系我！！服務(wù)包您滿意的那種！！

Good luck！
2018-11-12 廈門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53257.html

相關(guān)文章

  • Vue.js 模板解析器原理 - 來(lái)自《深入淺出Vue.js》第九章

    摘要：模板解析器原理本文來(lái)自深入淺出模板編譯原理篇的第九章，主要講述了如何將模板解析成，這一章的內(nèi)容是全書(shū)最復(fù)雜且燒腦的章節(jié)。循環(huán)模板的偽代碼如下截取模板字符串并觸發(fā)鉤子函數(shù)為了方便理解，我們手動(dòng)模擬解析器的解析過(guò)程。 Vue.js 模板解析器原理 本文來(lái)自《深入淺出Vue.js》模板編譯原理篇的第九章，主要講述了如何將模板解析成AST，這一章的內(nèi)容是全書(shū)最復(fù)雜且燒腦的章節(jié)。本文未經(jīng)排版，真...

    pinecone 評(píng)論0 收藏0

  • 從0開(kāi)始接觸html--第一天學(xué)習(xí)內(nèi)容總結(jié)

    摘要：第一天總結(jié)段落有序無(wú)序定義列表塊級(jí)元素獨(dú)占一行，行內(nèi)元素共占一行和和和塊級(jí)分區(qū)元素行內(nèi)分區(qū)元素特殊字符空格小于號(hào)大于號(hào)圖片圖片不能正常顯示的時(shí)候顯示此內(nèi)容路徑鼠標(biāo)懸停時(shí)顯示的內(nèi)容圖片地圖細(xì)節(jié)文本標(biāo)簽內(nèi)容標(biāo)題標(biāo)第一天 總結(jié): h1-h6 p 段落 hr br 有序 ol li 無(wú)序 ul li 定義列表 dl dt dd 塊級(jí)元素：獨(dú)占一行，h1-h6 p hr div 行內(nèi)元素：共占一行,...

    changfeng1050 評(píng)論0 收藏0

  • HTML基礎(chǔ)

    摘要：概念前端最核心的技術(shù)結(jié)構(gòu)骨架樣式效果用戶行為做的事情超文本標(biāo)記語(yǔ)言超文本文本文件瀏覽器可以直接打開(kāi)如果具有中文，可能出現(xiàn)亂碼問(wèn)題標(biāo)記語(yǔ)法結(jié)構(gòu)標(biāo)簽名注意瀏覽器解析標(biāo)記規(guī)定的標(biāo)記內(nèi)容注意是不嚴(yán)格的語(yǔ)言允許不用編寫所有內(nèi)容標(biāo)簽名 HTML 概念 前端最核心的技術(shù) HTML + CSS + javascript HTML - 結(jié)構(gòu) - 骨架 CSS - 樣式 - 效果 JAVASCR...

    Prasanta 評(píng)論0 收藏0

  • HTML 基礎(chǔ)知識(shí)及webstorm基本快捷鍵

    摘要：我們?cè)诳商鎿Q的元素上使用，然而把用于在涉及的文檔和外部資源之間建立一個(gè)關(guān)系。屬性僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置。 一、webstorm快捷鍵編寫HTML標(biāo)簽的快捷鍵： 標(biāo)簽名+TAB鍵（修改格式，格式化代碼）快捷鍵： ctrl+shift+f 【此快捷鍵在webstorm中無(wú)效】（用ctrl+alt+L）同時(shí)編寫多個(gè)相同的標(biāo)簽的快捷鍵 ：標(biāo)簽名*個(gè)數(shù)+tab鍵同時(shí)編寫多行代碼...

    wenshi11019 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<