一、準(zhǔn)備工作
-
安裝編輯軟件和Chrome瀏覽器
image.png -
創(chuàng)建指定目錄存放代碼文件**
image.png -
給vscode安裝插件
image.png
二、圍繞如何學(xué)習(xí)HTML
- 是什么？
HTML 是一種網(wǎng)頁開發(fā)的標(biāo)準(zhǔn)語言，我們可以叫做超文本標(biāo)記語言。 - 為什么？
因?yàn)闉g覽器在展示圖文信息的時候，需要容器/骨架承載圖文內(nèi)容。
通俗點(diǎn)理解就是需要HTML來搭建網(wǎng)頁的結(jié)構(gòu)（劃分頁面的結(jié)構(gòu)）。 - 怎么用？
示例：
<!DOCTYPE html> <!-- 聲明文檔類型 -->
<html lang="zh"> <!-- 根元素 -->
<head> <!-- 網(wǎng)頁頭部標(biāo)簽 (不可視化部分) -->
<meta charset="UTF-8"> <!-- 描述網(wǎng)頁的信息 字符編碼設(shè)置為UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 針對移動端設(shè)置視口相關(guān)信息，例如：設(shè)備寬度，初始化字體比例-->
<title>網(wǎng)頁標(biāo)題</title><!-- 瀏覽器topbar顯示標(biāo)題 -->
</head>
<body>
<!-- 網(wǎng)頁主體（視化部分） -->
<h1>hello world !</h1>
<div class="text5">5</div>
</body>
</html>
使用標(biāo)簽時要注意的地方：
- 雙標(biāo)簽符合開閉原則 <開始標(biāo)簽> </結(jié)束標(biāo)簽>
- 單標(biāo)簽 <單標(biāo)簽>
3.標(biāo)簽的字母是小寫的
4.<標(biāo)簽 標(biāo)簽屬性=“值”> </標(biāo)簽>
類名和ID命名時需要注意：
4.1 注意采用字母開頭，不可以采用數(shù)字或者特殊開頭
4.2 不可以采用特殊符號命名 @!#%&*
4.3 可以采用數(shù)字結(jié)尾 text1 box1
4.4 類名屬性可以采用駝峰命名 loginButton indexHeader indexList
也可以采用短橫線 ‘-’來命名 login-button index-header index-list
4.5 ID名稱建議采用駝峰命名 loginButton indexHeader indexList
4.6 不推薦使用中文命名，不是不能使用中文命名
特別說明：
html 不是編程語言，css 也不是編程語言。
html 超文本標(biāo)記語言。標(biāo)簽就是標(biāo)記
例如： div span img ......
注釋
<h1>hello world # 1</h1>
