typora-copy-images-to: media
第01階段.前端基礎.認識HTML
學習目标
- 了解
- HTML标簽的概念
- HTML标簽的分類
- HTML标簽的關系
- HTML标簽的語義化
- 應用
- HTML骨架格式
- sublime基本使用
1. HTML 初識
- HTML 指的是超文本标記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言。
- H（很）T（甜）M（蜜）L（啦）
- HTML 不是一種程式設計語言，而是一種标記語言 (markup language)
- 标記語言是一套标記标簽 (markup tag)
所謂超文本，有2層含義：
- 因為它可以加入圖檔、聲音、動畫、多媒體等内容（**超越文本限制 **）
- 不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連接配接（**超級連結文本 **）。
pink老師 一句話說出他們:
網頁是由網頁元素組成的 ， 這些元素是利用html标簽描述出來，然後通過浏覽器解析，就可以顯示給使用者了。
門外漢眼中的效果頁面
我們要做的html頁面
1.1 HTML骨架格式
日常生活的書信，我們要遵循共同的約定。
同理：HTML 有自己的語言文法骨架格式：（要遵循，要專業） 要求務必非常流暢的默寫下來。。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html骨架标簽總結
| 标簽名 | 定義 | 說明 |
|---|---|---|
| HTML标簽 | 頁面中最大的标簽，我們成為 根标簽 | |
| 文檔的頭部 | 注意在head标簽中我們必須要設定的标簽是title | |
| 文檔的标題 | 讓頁面擁有一個屬于自己的網頁标題 | |
| 文檔的主體 | 元素包含文檔的所有内容，頁面内容 基本都是放到body裡面的 | |
| 文檔的标題 | 讓頁面擁有一個屬于自己的網頁标題 |
**課堂練習1： **
書寫我們的第一個HTML 頁面。
- 建立一個demo 的 TXT 檔案。
- 裡面寫入剛才的HTML 骨架。
- 把字尾名改為 .HTML。
- 右擊–谷歌浏覽器打開。
<html> <head> <title>我的第一個頁面</title> </head> <body> 火爐洗練 一飛沖天 月薪過萬 你我之間 </body> </html>
團隊約定大小寫
HTML标簽名、類名、标簽屬性和大部分屬性值統一用小寫
推薦：
<head>
<title>我的第一個頁面</title>
</head>
不推薦：
<HEAD>
<TITLE>我的第一個頁面</TITLE>
</HEAD>
1.2 HTML元素标簽分類
标簽：
在HTML頁面中，帶有“< >”符号的元素被稱為HTML标簽，如上面提到的 <html>、<head>、<body>都是HTML骨架結構标簽。
分類：
- 正常元素（雙标簽）
- 該文法中“<标簽名>”表示該标簽的作用開始，一般稱為“開始标簽（start tag）”，“</标簽名>” 表示該标簽的作用結束，一般稱為“結束标簽（end tag）”。
- 和開始标簽相比，結束标簽隻是在前面加了一個關閉符“/”。
- 我們以後接觸的基本都是雙标簽
- 空元素（單标簽）
- 空元素 用單标簽來表示， 簡單點說，就是裡面不需要包含内容， 隻有一個開始标簽不需要關閉。
- 這種單身狗标簽非常少，一共沒多少，我們多記憶就好
pink老師 一句話說出他們:
世界上單身狗畢竟是少數的， 大部分還是喜歡成雙成對，不要拉下你的另外一半，對待一個雙标簽要有始有終。
1.3 HTML标簽關系
主要針對于雙标簽 的互相關系分為兩種： 請大家務必熟悉記住這種标簽關系，因為後面我們标簽嵌套特别多，很容易弄混他們的關系。
- 嵌套關系
<head>
<title> </title>
</head>
2.并列關系
<head></head>
<body></body>
倡議：
如果兩個标簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。如果是并列關系，最好上下對齊。
【提示】:
html雙标簽 可以分為 有 一種是 父子級 包含關系的标簽 一種是 兄弟級 并列關系的标簽
1.4 課堂一練
**請問下列哪組标簽關系是錯誤的？ **
2. 代碼開發工具（書寫代碼）
- 為了提高我們的開發效率
- 減少代碼的出錯我們不提倡用記事本開發，我們有更好的犀利哥。
Html第一天上午筆記1. HTML 初識2. 代碼開發工具（書寫代碼）3. 文檔類型<!DOCTYPE>4. 頁面語言lang5. 字元集6. HTML标簽的語義化7. 拓展閱讀@ - Dreamweaver
- SublimeText
- WebStorm
- HBuilder
- VScode
有人說：
普通青年 Dreamweaver
文藝青年 sublime
高手和傻子 用記事本
其實。。。。
感覺： 這個feel 倍兒爽 feel feel倍兒爽 爽爽爽爽！
sublime有非常多的優點， 最開心的就是非常輕量級，打開速度超快，後面更高的功能，後面再接觸。
sublime生成html骨架小技巧
- 輕按兩下打開軟體
- 建立檔案（ctrl+n）
- 儲存（ctrl+s）,儲存為：檔案名.html （ 注意 字尾名必須是 .html )
- 放大縮小代碼 ctrl+ 加号 鍵 和 ctrl + 減号鍵 或者 按住 ctrl 在 滾動滑鼠滾輪
- 生成頁面骨架結構
- html: 5 按下tab鍵 或者
- ! 按下tab鍵
- 在浏覽器中預覽頁面
- 右鍵在 浏覽器中打開
3. 文檔類型<!DOCTYPE>
同學你用啥手機？你咋回答？
用法：
作用：
聲明位于文檔中的最前面的位置，處于 标簽之前。此标簽可告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。
**注意： **
一些老網站可能用的還是老版本的文檔類型比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文檔類型相容很好(向下相容的原則)，是以大家放心的使用HTML5的文檔類型就好了。
pink老師 一句話說出他們:
就是告訴浏覽器按照HTML5 規範解析頁面.
團隊約定：
HTML檔案必須加上 DOCTYPE 聲明，并統一使用 HTML5 的文檔聲明
4. 頁面語言lang
<html lang="en"> 指定html 語言種類
最常見的2個：
-
en
-
zh-CN
pink老師 一句話說出他們:
指定該html标簽 内容 所用的語言為中文
團隊約定：
考慮浏覽器和作業系統的相容性，目前仍然使用 zh-CN 屬性值
@拓展閱讀：
簡單來說，可能對于程式來說沒有太大的作用，但是它可以告訴浏覽器，搜尋引擎，一些處理Html的程式對頁面語言内容來做一些對應的處理或者事情。
比如可以
- 根據根據lang屬性來設定不同語言的css樣式，或者字型
- 告訴搜尋引擎做精确的識别
- 讓文法檢查程式做語言識别
- 幫助翻譯工具做識别
-
幫助網頁閱讀程式做識别
等等
5. 字元集
字元集(Character set)是多個字元的集合。
計算機要準确的處理各種字元集文字，需要進行字元編碼，以便計算機能夠識别和存儲各種文字。
utf-8是目前最常用的字元集編碼方式，常用的字元集編碼方式還有gbk和gb2312。
- gb2312 簡單中文 包括6763個漢字
- BIG5 繁體中文 港澳台等用
- GBK包含全部中文字元 是GB2312的擴充，加入對繁體字的支援，相容GB2312
- UTF-8則基本包含全世界所有國家需要用到的字元
- 這句代碼非常關鍵， 是必須要寫的代碼，否則可能引起亂碼的情況。
pink老師 一句話說出他們:
這句話是讓 html 檔案是以 UTF-8 編碼儲存的， 浏覽器根據編碼去解碼對應的html内容。
團隊約定：
一般情況下統一使用 "UTF-8" 編碼, 請盡量統一寫成标準的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"。
6. HTML标簽的語義化
白話： 所謂标簽語義化，就是名額簽的含義。
- 友善代碼的閱讀和維護
- 同時讓浏覽器或是網絡爬蟲可以很好地解析，進而更好分析其中的内容
- 使用語義化标簽會具有更好地搜尋引擎優化
pink老師 一句話說出他們:
根據标簽的語義，在合适的地方給一個最為合理的标簽。
語義是否良好： 當我們去掉CSS之後，網頁結構依然組織有序，并且有良好的可讀性。( 裸奔起來一樣好看 )
遵循的原則：先确定語義的HTML ，再選合适的CSS。是以，我們接下來學習html标簽，要根據語義去記憶。 HTML網頁中任何元素的實作都要依靠HTML标簽。
7. 拓展閱讀@
單身狗的由來
單身狗一詞最早是出自網絡社群，起源與大話西遊有關。
大話西遊之大聖娶親最後一幕“他好像一條狗”由來。