時間：2023-09-26 05:42:01 | 來源：網(wǎng)站運營
時間：2023-09-26 05:42:01 來源：網(wǎng)站運營
你需要知道的HTML知識：前端三大件：
在線咨詢
HTML+CSS+JSHTML，可能很多人覺得這個太簡單了，就是平常寫網(wǎng)頁的一堆元素。然而越是基礎(chǔ)的東西人們越容易忽略，所以特意梳理了下相關(guān)知識，希望加深對它的理解。HTML（HyperText Markup Language）超文本標(biāo)記語言。顧名思義，它是一門語言，用來標(biāo)記文檔結(jié)構(gòu)的語言。就像你寫 word 一樣，有各種格式和大綱，HTML描述了網(wǎng)頁文檔的結(jié)構(gòu)，標(biāo)記各種區(qū)塊。<!-- HTML4.01 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">上面分別是 HTML4 和 XHTML 的聲明部分，其中的DTD規(guī)定了可用的元素和屬性，這樣瀏覽器才能正確地渲染網(wǎng)頁。HTML4/4.01(SGML)時代，語法較為隨意，比如標(biāo)簽可以不閉合/大寫/屬性可為空等，所以各大瀏覽器會有語法容錯機制，自動補全標(biāo)簽閉合等。到了后來，大家覺得這并不是瀏覽器該做的事情，所以有更為嚴格的XHTML（xml）：必須小寫/閉合/屬性帶引號等等。但是XHTML愈加嚴格繁瑣的語法讓人不耐煩了，所以 HTML4 的下一個版本也即HTML5橫空出世，輕松的語法，更多語義化的元素以及表單增強等等。<!-- HTML 5 聲明 --><!DOCTYPE html>注：HTML5是主流和未來，所以下文內(nèi)容均是以 HTML5 為參考。HTML 文檔由各種元素和屬性組成，描述了網(wǎng)頁的結(jié)構(gòu)。HTML文檔元素從上至下包括：doctype:文檔聲明head部分：包含頁面設(shè)定，標(biāo)題，引用資源等 metatitlestylelinkscriptbasebody部分：網(wǎng)頁呈現(xiàn)出來的部分 div/section/article/aside/header/main/footerpspan/em/strong/itable/thead/tbody/th/tr/tdaform/input/select/button/textareablock: 獨占一行或多行,可以設(shè)置寬高及對齊等屬性inline：不占獨立區(qū)域，靠自身內(nèi)容支撐結(jié)構(gòu)，和相鄰元素和睦相處，寬高無效，但水平方向可以設(shè)置padding和margininline-block：和其它inline元素同行顯示，同時也可以設(shè)置寬高/margin/padding（水平和垂直）<!-- 塊級元素可以包含內(nèi)聯(lián)元素 --><div><span></span></div><!-- 塊級元素可以包含某些塊級元素 --><section><div></div></section> <!--正確--><p><div></div></p> <!--錯誤--><!-- form/a 不能再嵌套自身 --><a><a></a></a><!-- 內(nèi)聯(lián)元素一般不能嵌套塊級元素 --><body><a><div></div></a><body> <!--HTML4中不合法（但瀏覽器支持）/但HTML5中是合法的-->其中關(guān)于HTML4的嵌套規(guī)則可以參考這里, 而HTML5中對元素重新做了分類，嵌套關(guān)系根據(jù)元素的content model進行合法確定。比如上面的a>div在HTML5中就是合法的。參考HTML5中的a定義,它的內(nèi)容模型定義為transparent(透明),透明的意思就是在計算合法性的時候，會忽略a本身，嵌套關(guān)系需要根據(jù)a的父標(biāo)簽來決定。請看下面嵌套：<!--第一種嵌套--><div> <a> <div></div> </a></div><!--第二種嵌套--><p> <a> <div></div> </a></p>第一種是合法嵌套，因為相當(dāng)于div嵌套div，而第二種則不合法，因為相當(dāng)于p嵌套div,瀏覽器會進行猜測解析，不妨在瀏覽器測試一下哦。<!--使用萬能div--><div class="header"></div><div class="left"></div><div class="container"> <div class="content"></div></div><div class="footer"></div><!--不使用div--><header></header><nav></nav><main> <article></article> <aside></aside></main><footer></footer>對于上面兩種寫法，第二種就是HTML語義化?？赡苡腥擞X得這兩種寫法沒什么太大區(qū)別呀，結(jié)構(gòu)都很清晰，但是如果脫了css這層外衣，你覺得哪種寫法更容易理解呢？所謂HTML語義化，就是用最恰當(dāng)?shù)脑貥?biāo)簽標(biāo)記內(nèi)容結(jié)構(gòu)。div和span；div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；b、font、u等，改用css設(shè)置。strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。body默認有一定的margin,下拉框/按鈕等都有默認的外觀。然而，這些默認的樣式某些情況下會帶來問題，比如我們想要定制下拉框的外觀，那就需要花費精力去處理默認樣式，提高了定制成本。css reset的話，可以在網(wǎng)絡(luò)上找到一些簡單的代碼或者簡單的通過以下來重置樣式：html *{ margin:0; padding:0 ...}我的學(xué)習(xí)交流群點擊：web前端學(xué)習(xí)交流群關(guān)鍵詞：知識
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
