他們這樣形容我 是暴雨澆不滅的火
? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? ????????????????—— 24.4.18
學習目標
? ? ? ? 理解
? ? ? ? ? ? ? ? HTML的概念
? ? ? ? ? ? ? ? HTML的分類
? ? ? ? ? ? ? ? HTML的關系
? ? ? ? ? ? ? ? HTML的語義化
? ? ? ? 應用
? ? ? ? ? ? ? ? HTML骨架格式
? ? ? ? ? ? ? ? sublime基本使用
一、HTML初識
HTML指的是超文本標記語言，是用來描述網(wǎng)頁的一種語言
超文本：暫且理解為“超級的文本”，和普通文本相比，內容更加豐富
HTML不是一種編程語言，而是一種標記語言
標記：文本想要變成超文本，就需要用到各種標記符號
標記語言是一套標記標簽
語言：每一個標記的寫法、讀音、使用規(guī)則，構成了標記語言
HTML發(fā)展歷史：
作用：
? ? ? ? 網(wǎng)頁是由網(wǎng)頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器解析，就可以顯示給用戶了
所謂超文本，有兩層含義：
????????①因為它可以加入圖片、聲音、動畫、多媒體等內容（超越文本限制）
? ? ? ? ②不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本）
<img src = "timg.jpg" />html總結：
? ? ? ? ① html是超文本標記語言
? ? ? ? ② 我們學習html主要學習html標簽
? ? ? ? ③ 我們用html標簽描述網(wǎng)頁元素，比如：圖片標簽、文字標簽、鏈接標簽等等
? ? ? ? ④ 標簽有自己的語法規(guī)范，所有的html標簽都是用 <> 表示的
二、HTML初體驗
文本文件：
將屬性后綴的.txt改為.html，點擊打開
html文件
修改文本文件
三、HTML元素標簽分類
標簽
? ? ? ? 在HTML頁面中，帶有"<>"符號的元素被稱為HTML標簽，如上面提到的<html>、<head>、<body>都是HTML骨架結構標簽
分類
1.常規(guī)元素（雙標簽）
<標簽名> 內容 </標簽名> ????比如：<body> 我是文字 </body>????????該語法中，“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>”表示該標簽的作用結束，一般“稱為結束標簽（end tag）”。
????????和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”
? ? ? ? 我們以后接觸的基本都是雙標簽
2.空元素（單標簽）
<標簽名 /> 比如 <br />????????空元素 用單標簽表示，簡單點說，就是里面不需要包含內容，只有一個開始標簽不需要關閉，單標簽的 / 可以省略
? ? ? ? 這種單標簽非常少，我們多記憶就好
例：
四、HTML標簽關系?
主要針對于雙標簽的相互關系分為兩種：務必熟悉！
嵌套關系/包含關系/父子關系
<head> <title> </title> </head>并列關系/兄弟關系
<head></head> <body></body>倡議：
? ? ? ? 如果兩個標簽是嵌套關系，子元素最好縮進一個tab的身位，如果是并列關系，最好上下對齊
總結：
html雙標簽，可以分為：一種是父子級 包含關系的標簽 一種是 兄弟級 并列關系的標簽
例題：
五、標簽屬性
1.用于給標簽提供附加信息
2.可以寫在：起始標簽 或 單標簽中，形式如下：
3.個別特殊的屬性沒有屬性名 只有屬性的值
<input disabled>一個標簽只能寫一次同種類型的種類 屬性名和屬性值都不區(qū)分大小寫
4.注意點：
①不同的標簽，有不同的屬性；也有一些通用屬性（在任何標簽內都能寫）
②屬性名、屬性值不能亂寫，都是W3C規(guī)定好
③屬性名、屬性值不區(qū)分大小寫，但是推薦小寫
④雙引號，也可以寫成單引號，甚至不寫，但推薦寫成雙引號
⑤標簽中不要出現(xiàn)同名屬性，否則后寫的會失效
六、HTML基本結構
瀏覽器的開發(fā)者框架
骨架格式
HTML有自己的語言語法骨架格式：要求無比非常流暢的默寫下來
<html> <head> <title></title> </head> <body> </body> </html>html骨架標簽練習
????????1.創(chuàng)建一個01.html骨架標簽的TXT文件
? ? ? ? 2.里面寫入剛才的HTML骨架
? ? ? ? 3.把后綴名改為.HTML
????????4.右擊瀏覽器打開
<html> <head> <title>第一個頁面，一切都會好的</title> </head> <body> 一切都會好的 我一直相信 </body> </html>
html骨架標簽總結
團隊約定大小寫
HTML標簽名、類名、標簽屬性和大部分屬性值統(tǒng)一用小寫
總結
1.在網(wǎng)頁中，如何查看某段結構的具體代碼？—— 點擊鼠標右鍵，選擇”檢查“
2.【檢查】和【查看網(wǎng)頁源代碼】的區(qū)別：
????????【查看網(wǎng)頁源代碼】看到的是程序員編寫的源代碼
????????【檢查】看到的是經(jīng)過瀏覽器”處理“后的源代碼
? ? ? ? 備注：日常開發(fā)中，【檢查】用的最多
3.網(wǎng)頁的基本結構如下：
? ? ? ? ①想要呈現(xiàn)在網(wǎng)頁中的內容寫在body標簽中
? ? ? ? ②head標簽中的內容不會出現(xiàn)在網(wǎng)頁中
? ? ? ? ③head標簽中的title標簽可以指定網(wǎng)頁的標題
? ? ? ? ④圖示：
????????⑤代碼：
<html> <head> <title></title> </head> <body> </body> </html>
七、安裝VSCode
1.VSCode優(yōu)點：
輕量便捷? ? ? ? 功能豐富? ? ? ? 免費使用? ? ? ? 插件優(yōu)秀? ? ? ? 通吃各種語言
2.官網(wǎng)下載VSCode
VScode的官網(wǎng)鏈接，點擊即可
推薦國內的鏡像地址：3.下載中文包
4.調整字體大小
設置——字體——字體大小
5.設置主題
6.安裝圖標主題：vscode-icons
7.使用VSCode快速打開網(wǎng)頁
安裝live-server
用vscode打開html文件?
鼠標右鍵點擊open with live server
文件夾打開：文件路徑
vscode打開：服務器路徑
用liveserver打開網(wǎng)頁 可以實時更新
設置自動保存 設置保存時間間隔
當點擊頁面以外，則失去焦點，自動進行保存
當鼠標離開vscode時，進行自動保存
注意：
????????①liveserver必須用vscode打開文件夾才可以使用文章來源：http://www.zghlxwxcb.cn/news/detail-856427.html
????????②網(wǎng)頁如果不標準則不會自動執(zhí)行進行刷新文章來源地址http://www.zghlxwxcb.cn/news/detail-856427.html
到了這里，關于前端三劍客 HTML+CSS+JavaScript ② HTML相關概念的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
