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