html title 不显示_第2天：HTML 结构
先簡單回答下昨天微信群中關(guān)于第一天內(nèi)容 第1天：開篇詞，開發(fā)環(huán)境準(zhǔn)備大家遇到的主要問題：
@QP：VSCode 插件可以介紹些；
我：等待時機成熟的時候我會把我常用的插件分享給大家，目前重點是先把基礎(chǔ)學(xué)好。@GCH：如何創(chuàng)建 HTML 文件？我：建一個后綴名為 html 的文件即可。VSCode也支持創(chuàng)建文件和文件夾。@很多人：如何打卡？我：每天打卡指令「隱藏」在文章中，需要閱讀文章才能找到打卡指令。打卡需要在文章末尾處留言，每天最多只有100個名額。
現(xiàn)在主流前端框架為 React 和 Vue，但是學(xué)習(xí)這些前端框架的時候還是需要打好基礎(chǔ)，瀏覽器最終認(rèn)識的是 HTML 和 CSS，萬變不離其宗，框架再咋么厲害最終還會被轉(zhuǎn)換成 HTML 和 CSS。在面試中，面試官往往還是喜歡基礎(chǔ)扎實的同學(xué)。只有掌握這些基礎(chǔ)知識，你才會深刻理解框架出現(xiàn)的原因，前端構(gòu)建解決了什么問題，Node 的出現(xiàn)對前端起到了什么作用。
Web創(chuàng)建的初心是人人可發(fā)布內(nèi)容，不去糾結(jié)代碼語法，這就使得HTML 寫法很隨意，比如下面這段代碼寫的很亂，很難閱讀，但是瀏覽器可以正常解析：
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <Title>HTML結(jié)構(gòu)TITLE>head><bOdy><P>歡迎來到前端小課，共同學(xué)習(xí)前端p>BODY>HTML>從瀏覽器中的 Elements 中可以看到，瀏覽器已經(jīng)把代碼轉(zhuǎn)換成一種「好看」的格式，標(biāo)簽不再包含大寫字母，格式也重新進行了排列。雖然 HTML 寫法很隨意，但是為了「方便閱讀代碼」，需要把 HTML 寫的結(jié)構(gòu)化，如同上圖顯示的那樣。在 VSCode 中點擊右鍵，選擇 「Format Document」 可以方便地格式化 HTML 代碼。
可以通過這個網(wǎng)站來驗證 HTML 是否有錯：https://validator.w3.org/#validate_by_input
「今天打卡指令隨意，可以提一些你遇到的問題、或者想法、或者你想和大家分享的知識點」。
在開始講 HTML 結(jié)構(gòu)前，試想一下，一個純文本的 html 文件，在瀏覽器中是否可以正常顯示。
歡迎來到前端小課和我一起學(xué)習(xí)前端在瀏覽器中打開這個 html 文件，效果如下，你會發(fā)現(xiàn)瀏覽器可以正常地顯示，只不過瀏覽器自動添加了 html、head 和 body 標(biāo)簽，這就是 HTML 的基本結(jié)構(gòu)：
但是為了更好地顯示網(wǎng)頁，我們還需要一些額外元素，比如網(wǎng)頁的元數(shù)據(jù) meta 標(biāo)簽，文檔的編碼格式，標(biāo)題。瀏覽器是不能直接理解 HTML 的，需要把 HTML 轉(zhuǎn)換成 DOM，HTML 和 DOM 是不一樣的，雖然它們看起來無太大的差別，你可把 DOM 理解成內(nèi)存中的樹狀結(jié)構(gòu)，可以通過 JavaScript 來動態(tài)獲取到某個節(jié)點。下面這段代碼是 HTML 的基本結(jié)構(gòu)：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML結(jié)構(gòu)title>head><body> <p>歡迎來到前端小課和我一起學(xué)習(xí)前端p>body>html>通過谷歌瀏覽器可以查看 DOM 結(jié)構(gòu)
我們一一來說明各個標(biāo)簽的作用：
meta 標(biāo)簽用來定義一些元數(shù)據(jù)，提供網(wǎng)站的基本信息，供搜索引擎抓取，還可以做 SEO。其中下面這段代碼是為了支持 HTML5：
<meta name="viewport" content="width=device-width, initial-scale=1.0">總結(jié)
本節(jié)內(nèi)容對 HTML 基本結(jié)構(gòu)做了一次介紹，通過本節(jié)內(nèi)容希望你能夠掌握，在任何編輯器中可以寫出一個 HTML 結(jié)構(gòu)，對 HTML轉(zhuǎn)換成 DOM 有一個基本的了解。可以通過谷歌瀏覽器查看任何節(jié)點元素。HTML 相對來說比較簡單，你可以把它理解為一個文檔，通過不同的標(biāo)簽來表示不同的內(nèi)容。明天的內(nèi)容為 HTML head 標(biāo)簽中能放啥，大家加油！
推薦閱讀：
第1天：開篇詞，開發(fā)環(huán)境準(zhǔn)備前端小課開課啦「免費加入」https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML前端小課
總結(jié)
以上是生活随笔為你收集整理的html title 不显示_第2天：HTML 结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语言课程设计超市售货_自闭症儿童家庭干预
- 下一篇： ibatise 没有大于等于吗_农村房屋