黑馬程序員pink老師前端入門教程，零基礎(chǔ)必看的h5(html5)+css3+移
個(gè)人向pink老師前端教程筆記
本筆記前言：基礎(chǔ)班主要學(xué)習(xí)pc端網(wǎng)站布局，最終要制作一個(gè)品優(yōu)購靜態(tài)網(wǎng)站的相關(guān)頁面。精通網(wǎng)頁布局，為后面學(xué)習(xí)javescript打下基礎(chǔ)。
學(xué)習(xí)路線：html5基礎(chǔ)—css3基礎(chǔ)—h5c3提高—項(xiàng)目，品優(yōu)購電商網(wǎng)站。
03-網(wǎng)頁的相關(guān)概念——筆記
1 網(wǎng)站和網(wǎng)頁的定義：
網(wǎng)站指的是在因特網(wǎng)上根據(jù)一定規(guī)則，使用html等制作的用于展示特定內(nèi)容的網(wǎng)頁集合。網(wǎng)頁是網(wǎng)站中的一頁，通常是html格式的文件，它要通過瀏覽器來閱讀。
2 網(wǎng)頁的組成元素：
圖片，鏈接，文字，聲音，視頻等元素組成，通常，網(wǎng)頁常見以.htm或.html后綴結(jié)尾，因此將其稱之為html文件。
3 什么是html？
HTML指的是超文本編輯語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標(biāo)記語言。
ps：老師首次用記事本開始操作，將記事本的后綴改為了 .html ，輸入了 <img src="圖片文件名"> 。創(chuàng)立了一個(gè)簡單的網(wǎng)站。
3.1 超文本的2層含義：
① 它可以加入圖片，聲音，動(dòng)畫，多媒體等，這超越了文本限制。
② 它可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件鏈接，即超級(jí)鏈接文本。
4 網(wǎng)頁的形成：
網(wǎng)頁是由網(wǎng)頁元素組成的，這些元素是利用html標(biāo)簽描述出來，然后通過瀏覽器解析來顯示給用戶的。見圖片。
04-常用瀏覽器以及內(nèi)核——筆記
1 常用瀏覽器
主要是谷歌瀏覽器。
2 瀏覽器內(nèi)核
見圖片
05-web標(biāo)準(zhǔn)——筆記（重點(diǎn)）
1 web標(biāo)準(zhǔn)是什么？
web標(biāo)準(zhǔn)是W3C組織和其他組織制定的一系列標(biāo)準(zhǔn)的集合。W3C（萬維網(wǎng)聯(lián)盟）是國際最著名的標(biāo)準(zhǔn)化組織。
2 為什么需要Web標(biāo)準(zhǔn)？
瀏覽器不同顯示出來的頁面或排版就有些許不同，但通過web標(biāo)準(zhǔn)可以使其展示統(tǒng)一內(nèi)容。
3 Web標(biāo)準(zhǔn)的構(gòu)成：
主要包括結(jié)構(gòu)，表現(xiàn)，行為三個(gè)方面。
見圖片。
Web標(biāo)準(zhǔn)給出的最佳體驗(yàn)方案是：結(jié)構(gòu)，樣式，行為相分離。簡單理解為：結(jié)構(gòu)寫到HTML文件中，表現(xiàn)寫到CSS中，行為寫到JaveScript文件中。
見圖片。
07-HTML語法規(guī)范——筆記
1 基本語法概述：
所有的標(biāo)簽都要在尖括號(hào)<>里面，而且絕大部分都是成對出現(xiàn)的。比如：<html>和</html>，標(biāo)簽中第一個(gè)對應(yīng)的是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。極少情況的單標(biāo)簽，比如：<br />。
2 標(biāo)簽關(guān)系：
包含關(guān)系，并列關(guān)系。
見圖片。
08-HTML基礎(chǔ)結(jié)構(gòu)標(biāo)簽——筆記
每個(gè)頁面都有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也叫骨架標(biāo)簽）。HTML頁面也叫HTML文檔。
基本的結(jié)構(gòu)標(biāo)簽，見圖片。
ps:圖片中打錯(cuò)了<titile>應(yīng)該為<title>。
每個(gè)標(biāo)簽具體指的是網(wǎng)頁的哪些部分，建議去看原視頻。
09-VScode工具創(chuàng)建頁面——筆記
1 開發(fā)工具
建議使用開發(fā)工具：VScode。
2 開發(fā)工具的快捷鍵及注意事項(xiàng)
新建文件夾：Ctrl+N
保存：Ctrl+S，注意一定要保存為 .html 文件。
頁面放大和縮?。?/span>Ctrl+加號(hào)鍵，Ctrl+減號(hào)鍵
生成頁面骨架結(jié)構(gòu)：輸入！，按下Tab鍵。（必須用英文輸入法輸入！）
其余知識(shí)多為實(shí)操內(nèi)容，建議多練。
10-DOCTYPE和lang以及字符集的作用——筆記
見圖片。
ps：圖片第一句話，改為“以下”。
圖片補(bǔ)充，zh-CN定義語言為中文。
字符集是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和儲(chǔ)存各種文字。在<head>標(biāo)簽內(nèi)，可通過<meta>標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。其中char為字符的意思，set為集合的意思。
charset 最常用的值為UTF-8,而UTF-8也被稱為萬國碼，基本包含了世界上所有國家需要用到的字符。
格式為：<meta charset="UTF-8"/>
12-標(biāo)題標(biāo)簽——筆記
<h1>到<h6>，一共有6級(jí)標(biāo)簽，重要性，字體大小，粗細(xì)程度從h1到h6逐漸遞減。
h是head的縮寫。
ps: alt+z為自動(dòng)換行。
13-段落標(biāo)簽和換行標(biāo)簽——筆記
1 段落標(biāo)簽：
<p>我是一個(gè)段落標(biāo)簽</p>
p是單詞paragraph的縮寫，意為段落。
2 換行標(biāo)簽：
<br />
br為單詞break的縮寫，意為打斷，換行。
