黑馬程序員web前端HTML5+CSS3+移動(dòng)web全套，零基礎(chǔ)自學(xué)必備
7.15 學(xué)習(xí)打卡第一天 day 01
前端基礎(chǔ)： HTML 和 CSS
一、HTML 初識(shí)
（1）基礎(chǔ)認(rèn)知
1、網(wǎng)頁組成：文字、圖片、超鏈接、音頻，視頻等
網(wǎng)頁本質(zhì)：前端程序員寫的代碼（F12）
代碼通過瀏覽器轉(zhuǎn)換成網(wǎng)頁（渲染）
2、五大瀏覽器：IE、Firefox、Chrome（市場份額最多，速度快，效果好）、Safari（apple）、Opera
渲染引擎：瀏覽器內(nèi)核
前端工程師常用瀏覽器：Chrome
3、web標(biāo)準(zhǔn)的構(gòu)成：讓不同的瀏覽器按照相同的標(biāo)準(zhǔn)顯示結(jié)果，讓展示的效果統(tǒng)一。
構(gòu)成：結(jié)構(gòu)層，表現(xiàn)層，行為層。
結(jié)構(gòu)層：HTML（頁面元素）和內(nèi)容
HTML（超文本標(biāo)記語言）
構(gòu)建基本網(wǎng)頁的步驟：新建文字變粗.txt;添加內(nèi)容并保存；修改后綴為.html;雙擊文字變粗.html。
例：<strong>我要變粗</strong>
HTML固定結(jié)構(gòu)：整體、頭部、標(biāo)題、主體
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
網(wǎng)頁的主體內(nèi)容
</body>
</html>
開發(fā)工具：VS Code（速度快、體積小、插件多）
VS Code 快捷鍵：
1、快速生成標(biāo)簽：英文+ tab
2、保存文件：Ctrl+s
3、快速查看網(wǎng)頁效果 ： alt + b
4、快速生成結(jié)構(gòu)標(biāo)簽：！(英文)+ tab
注釋：ctrl + /
<!--注釋內(nèi)容-->
表現(xiàn)層：CSS（頁面樣式）
行為層：JavaScript（頁面交互）
（2）HTML標(biāo)簽學(xué)習(xí)
雙標(biāo)簽、單標(biāo)簽（<br>、<hr>）
標(biāo)簽的屬性：屬性名="屬性值"
標(biāo)簽之間關(guān)系：父子關(guān)系、兄弟關(guān)系
標(biāo)題標(biāo)簽：<h1>文字內(nèi)容</h1>(h1~h6，大小逐級(jí)遞減，獨(dú)占一行，文字都加粗)
段落標(biāo)簽:<p>內(nèi)容</p>(段落之間存在間隙，獨(dú)占一行)
換行標(biāo)簽：<br> （強(qiáng)制換行）
水平線 標(biāo)簽：<hr>(在頁面中顯示出一條水平線）
文本格式化標(biāo)簽：b加粗、u下劃線、i傾斜、s刪除線
strong 、ins 、em、 del (標(biāo)簽語義化要求)
圖片標(biāo)簽：<img src="" alt = "" title="" width= "" height="">
src 屬性：目標(biāo)圖片的路徑
alt 屬性：替換文本（加載失敗后顯示）
title 屬性：提示文本（鼠標(biāo)懸停是，才顯示的文本）
with 和 height 屬性：只設(shè)置其中一個(gè)，等比例縮放
（3）綜合案例
