Web前端基礎(chǔ)課程
第一階段：Web前端開發(fā)環(huán)境搭建
- 操作系統(tǒng)操作常用高級設(shè)置和快捷鍵
- Sublime安裝和配置
- Atom安裝和配置
- WebStorm安裝和配置
第二階段：HTML5基礎(chǔ)
- HTML基礎(chǔ)
- 語義化標(biāo)簽與SEO
第三階段：CSS3基礎(chǔ)
- CSS屬性基礎(chǔ)
- CSS布局
- 面向?qū)ο蟮腃SS
- less过吻、sass州刽、styleus行贪、postcss *
- 第四階段：JavaScript基礎(chǔ)
- JavaScript語法基礎(chǔ)
- JavaScript數(shù)組、字符串粥帚、流程控制語句、
- JavaScript高級簡介
- 綜合項目
第一節(jié)：HTML基礎(chǔ)
- 什么是瀏覽器
- 什么是服務(wù)器
- 常見名詞解釋
- 認(rèn)識網(wǎng)頁
- 網(wǎng)頁內(nèi)容劃分：結(jié)構(gòu)、樣式暴凑、行為
什么是瀏覽器
- 瀏覽器幫助用戶進(jìn)行瀏覽網(wǎng)頁的軟件
- 360雙核瀏覽器凛篙、qq瀏覽器黍匾、
- 瀏覽器與瀏覽器內(nèi)核：
- ie：trident、safari:webkit呛梆、ff:gecko锐涯、chrome,opera:blink
常用瀏覽器介紹
瀏覽器是網(wǎng)頁運(yùn)行的平臺，常用的瀏覽器有
IE填物、火狐（Firefox）纹腌、谷歌（Chrome）、Safari和Opera等滞磺。
IE瀏覽器由微軟公司推出衷畦，有6.0憎乙、7.0、8.0、9.0疚脐、10.0、11.0等版本潮针，最新的是IE11.0和斯巴達(dá)瀏覽器edge坏晦。
Mozilla Firefox，中文通常稱為“火狐”脸哀，F(xiàn)irebug是火狐瀏覽器下的一款開發(fā)插件坤候，是開發(fā)HTML、CSS企蹭、JavaScript等的得力助手白筹。在實(shí)際網(wǎng)頁制作過程中火狐瀏覽器是最常用的瀏覽器。
Google Chrome谅摄，又稱谷歌瀏覽器徒河，是由Google（谷歌）公司開發(fā)的開放原始碼網(wǎng)頁瀏覽器。
名詞解釋
Internet：因特網(wǎng)送漠，互聯(lián)網(wǎng)顽照。可以實(shí)現(xiàn)全球信息互聯(lián)的網(wǎng)絡(luò)。
WWW：萬維網(wǎng)（world wide web）代兵，它是提供網(wǎng)站相關(guān)服務(wù)尼酿，人們可以通過萬維網(wǎng)服務(wù)進(jìn)行網(wǎng)上聊天、網(wǎng)上沖浪植影、網(wǎng)購裳擎、搜索資料、查看天氣思币、查看新聞鹿响、交友聊天等。
W3C：萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年.是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)谷饿。我們后面學(xué)的html惶我、css等標(biāo)準(zhǔn)都是由此機(jī)構(gòu)主導(dǎo)制定。
HTTP：超文本傳輸協(xié)議（HTTP博投，HyperText Transfer Protocol）绸贡，也就是瀏覽器和服務(wù)器端的網(wǎng)頁傳輸數(shù)據(jù)的約束和規(guī)范。
Web：web （互聯(lián)網(wǎng)總稱）web的本意是蜘蛛網(wǎng)和網(wǎng)的意思毅哗，在網(wǎng)頁設(shè)計中我們稱為網(wǎng)頁的意思∈研現(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域黎做。表現(xiàn)為三種形式叉跛，即超文本（hypertext）、超媒體（hypermedia）蒸殿、超文本傳輸協(xié)議（HTTP）等筷厘。
DNS：DNS（Domain Name System，域名系統(tǒng)）宏所，因特網(wǎng)上作為域名和IP地址相互映射的一個分布式數(shù)據(jù)庫酥艳，能夠使用戶更方便的訪問互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串爬骤。通過主機(jī)名充石，最終得到該主機(jī)名對應(yīng)的IP地址的過程叫做域名解析（或主機(jī)名解析）
域名： www.itcast.cn
什么是Web服務(wù)器和服務(wù)器
瀏覽器瀏覽頁面背后的秘密（了解）：
瀏覽器接受用戶操作→瀏覽器封裝HTTP請求→連接服務(wù)器：DNS解析→發(fā)送請求Request→服務(wù)器接收請求→處理請求→返回響應(yīng)報文→瀏覽器接收響應(yīng)報文→渲染頁面呈現(xiàn)
HTTP協(xié)議（了解，就業(yè)班詳細(xì)講）
認(rèn)識網(wǎng)頁
- 網(wǎng)頁主要由文字霞玄、圖像和超鏈接等元素構(gòu)成骤铃。當(dāng)然，除了這些元素坷剧，網(wǎng)頁中還可以包含音頻惰爬、視頻以及Flash等。
網(wǎng)頁的組成
- HTML：頁面結(jié)構(gòu)
- CSS：頁面樣式表現(xiàn)
- JavaScript：交互行為
- Web標(biāo)準(zhǔn)：結(jié)構(gòu)表現(xiàn)行為之間的關(guān)系
HTML部分
- HTML發(fā)展歷史
- HTML的頁面結(jié)構(gòu)
- HTML語法
HTML簡介
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)記語言”惫企，主要是通過HTML標(biāo)記對網(wǎng)頁中的文本撕瞧、圖片、聲音等內(nèi)容進(jìn)行描述。
HTML提供了許多標(biāo)記丛版，如段落標(biāo)記巩掺、標(biāo)題標(biāo)記、超鏈接標(biāo)記页畦、圖片標(biāo)記等胖替，網(wǎng)頁中需要定義什么內(nèi)容，就用相應(yīng)的HTML標(biāo)記描述即可寇漫。
HTML之所以稱為超文本標(biāo)記語言，不僅是因為他通過標(biāo)記描述網(wǎng)頁內(nèi)容殉摔，同時也由于文本中包含了所謂的“超級鏈接”點(diǎn)州胳。通過超鏈接將網(wǎng)站與網(wǎng)頁以及各種網(wǎng)頁元素鏈接起來，構(gòu)成了豐富多彩的Web頁面逸月。
HTML發(fā)展歷程
- HTML 1.0 超文本標(biāo)記語言(第一版) -在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))
- HTML 2.0 -1995年11月作為RFC 1866發(fā)布,在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時
- HTML 3.2 -1996年1月14日,W3C推薦標(biāo)準(zhǔn)
- HTML 4.0 -1997年12月18日,W3C推薦標(biāo)準(zhǔn)
- HTML 4.01(微小改進(jìn)) -1999年12月24日,W3C推薦標(biāo)準(zhǔn)
- XHTML 1.0 -發(fā)布于2000年1月26日,是W3C推薦標(biāo)準(zhǔn),后來經(jīng)過修訂于2002年8月1日重新發(fā)布
- XHTML 1.1 -于2001年5月31日發(fā)布
- HTML5.0 2014年10月29日栓撞，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力碗硬，該標(biāo)準(zhǔn)規(guī)范終于制定完成
HTML標(biāo)準(zhǔn)的選擇
- 目前最新的HTML版本是HTML5瓤湘。
- 部分國內(nèi)的網(wǎng)站還是使用XHTML標(biāo)準(zhǔn)，但是HTML5標(biāo)準(zhǔn)是趨勢
HTML語法
- HTML標(biāo)簽以 ”<“開頭恩尾。
- 緊接著就是標(biāo)簽名（中間沒空格）
- 標(biāo)簽名之后如果有屬性的話弛说，加空格然后是 屬性名=""
- 如果有多個屬性，屬性間用空格隔開翰意，空格可以有多個木人。
- 屬性結(jié)束后可以加一個或多個空格。
- 然后是結(jié)束標(biāo)簽">",如果是閉合標(biāo)簽需要在標(biāo)簽名前加”/"冀偶，例如：</html>
- 單標(biāo)簽醒第，斜線沒有任何意義，可有可無进鸠。
- 標(biāo)簽中間可嵌套內(nèi)容稠曼。
HTML整體結(jié)構(gòu)標(biāo)簽
- Doctype標(biāo)簽，文檔協(xié)議聲明標(biāo)簽
- 文檔協(xié)議聲明標(biāo)簽客年，非常重要
- 協(xié)議不同影響整個頁面顯示的效果
- 目前主流用HTML5的協(xié)議文檔
- html標(biāo)簽霞幅，文檔標(biāo)簽
- head，文檔頭部標(biāo)簽
- body量瓜，文檔內(nèi)容部分標(biāo)簽
- p段落標(biāo)簽
- h1標(biāo)題標(biāo)簽
- 案例：新聞詳情頁面
第三節(jié)：HTML頭部標(biāo)簽
- doctype標(biāo)簽
- head標(biāo)簽
- title標(biāo)簽
- link標(biāo)簽
- meta標(biāo)簽
- script標(biāo)簽
- style標(biāo)簽
- <!DOCTYPE> 標(biāo)記位于文檔的最前面蝗岖，用于向瀏覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范。主要用于瀏覽器解析文檔標(biāo)簽的依據(jù)榔至。
- 必需在開頭處使用<!DOCTYPE>標(biāo)記為所有的XHTML文檔指定XHTML版本和類型抵赢，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的XHTML文檔，并按指定的文檔類型進(jìn)行解析。
- <!DOCTYPE>標(biāo)記和瀏覽器的兼容性相關(guān)铅鲤，刪除<!DOCTYPE>划提，就是把如何展示HTML頁面的權(quán)利交給瀏覽器。這時邢享，IE6鹏往，IE7，IE8骇塘，F(xiàn)irefox2伊履，F(xiàn)irefox3，Chrome款违，有多少種瀏覽器唐瀑，頁面就有可能有多少種顯示效果，這是不被允許的插爹。
在sublime中
- html:xt + tab //輸出xhtml 過渡標(biāo)準(zhǔn)
- html:xs +tab //輸出xhtml 嚴(yán)格標(biāo)準(zhǔn)
- html:4t
- html:4s
- html:5
HTML基本文檔格式<html> 標(biāo)記
<html>標(biāo)記位于<!DOCTYPE> 標(biāo)記之后哄辣，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個 HTML 文檔赠尾， <html>標(biāo)記標(biāo)志著HTML文檔的開始力穗，</html>標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在他們之間的是文檔的頭部和主體內(nèi)容气嫁。
<html>
所有的標(biāo)簽必須寫在 兩個閉合標(biāo)簽之間当窗。
</html>
可以通過lang屬性設(shè)置當(dāng)前文檔的主要語言是什么，幫助搜索引擎解析文檔
<html lang="zh-cn"></html>
HTML基本文檔格式<head> 標(biāo)記
<head>標(biāo)記用于定義HTML文檔的頭部信息寸宵，也稱為頭部標(biāo)記超全，緊跟在<html>標(biāo)記之后。
head標(biāo)簽定義的內(nèi)容只是提供給瀏覽器使用邓馒，不用于用戶的呈現(xiàn)嘶朱。
主要用來封裝其他位于文檔頭部的標(biāo)記，例如<title>光酣、<meta>疏遏、<link>及<style>等，用來描述文檔的標(biāo)題救军、作者以及和其他文檔的關(guān)系等财异。
一個HTML文檔只能含有一對<head>標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中唱遭。
HTML基本文檔格式<meta>標(biāo)記
<meta charset="UTF-8">
utf-8是目前最常用的字符集編碼方式戳寸，常用的字符集編碼方式還有g(shù)bk和gb2312。
gb2312 簡單中文
GBK包含全部中文字符 繁體
BIG5 繁體中文
UTF-8則包含全世界所有國家需要用到的字符
從二進(jìn)制說起拷泽，符號表示文字疫鹊，表示的模式就是編碼：聯(lián)想電報
HTML文檔頭部相關(guān)標(biāo)記—<title>
<title>標(biāo)記用于定義HTML頁面的標(biāo)題袖瞻，即給網(wǎng)頁取一個名字，必須位于<head>標(biāo)記之內(nèi)拆吆。一個HTML文檔只能含有一對<title></title>標(biāo)記聋迎，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。其基本語法格式如下：
<title>網(wǎng)站標(biāo)題名稱</title>
title標(biāo)簽對于網(wǎng)站SEO至關(guān)重要枣耀，標(biāo)題的好壞直接影響網(wǎng)站的SEO
SEO（Search Engine Optimization）：網(wǎng)站搜索引擎優(yōu)化
Link標(biāo)簽
引入DNS預(yù)先解析
dns預(yù)解析(了解)
<link rel="dns-prefetch" >
引入網(wǎng)站icon圖標(biāo)：
<link rel="shortcut icon" />
引入css樣式霉晕，【后面講】
<link rel="stylesheet" href="css/bg.css">
HTML呈現(xiàn)標(biāo)簽
- body標(biāo)簽
- 標(biāo)題標(biāo)簽h1-h6
- 段落標(biāo)簽：p
- 注釋標(biāo)簽
- 換行標(biāo)簽 br
- 水平線標(biāo)簽 hr
HTML基本文檔格式—<body> 標(biāo)記
<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記捞奕。瀏覽器中顯示的所有文本牺堰、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)颅围，<body>標(biāo)記中的信息才是最終展示給用戶看的伟葫。
一個HTML文檔只能含有一對<body>標(biāo)記，且<body>標(biāo)記必須在<html>標(biāo)記內(nèi)谷浅，位于<head>頭部標(biāo)記之后扒俯，與<head>標(biāo)記是并列關(guān)系奶卓。
標(biāo)題標(biāo)簽： h1-h6一疯，塊級標(biāo)簽
<h1>我是頁面內(nèi)容的標(biāo)題</h1>
標(biāo)題作為頁面的標(biāo)題性的內(nèi)容，一定要符合語義夺姑。標(biāo)題1到6數(shù)字不是定義標(biāo)題的樣式大小墩邀，而是定義標(biāo)題的在整個頁面中的權(quán)重。
標(biāo)題標(biāo)簽只能 嵌套 行內(nèi)標(biāo)簽盏浙。
段落標(biāo)記眉睹，行內(nèi)標(biāo)簽
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)記废膘，就如同我們平常寫文章一樣竹海，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)記就是<p>丐黄。
<p>段落文本</p>
<p>是HTML文檔中最常見的標(biāo)記斋配，默認(rèn)情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行灌闺。
段落標(biāo)簽也只能嵌套行內(nèi)標(biāo)簽艰争。
水平線標(biāo)記<hr />
在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開桂对，使得文檔結(jié)構(gòu)清晰甩卓，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)蕉斜，也可以簡單地通過標(biāo)記來完成逾柿，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)記缀棍。其基本語法格式如下：
<hr />是單標(biāo)記，在網(wǎng)頁中輸入一個<hr />鹿寻，就添加了一條默認(rèn)樣式的水平線睦柴。
HTML空格合并處理
為了方便開發(fā)人員開發(fā)縮進(jìn)合理的HTML頁面，瀏覽器解析渲染HTML時 換行符毡熏、連續(xù)多個空格等會合并成一個空格在瀏覽器里面進(jìn)行顯示坦敌。
如果需要換行怎么辦呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<span>12</span>
<span>34</span>
</p>
</body>
</html>
換行標(biāo)記<br />
在HTML中痢法，一個段落中的文字會從左到右依次排列狱窘，直到瀏覽器窗口的右端，然后自動換行财搁。如果希望某段文本強(qiáng)制換行顯示蘸炸，就需要使用換行標(biāo)記<br />，這時如果還像在word中直接敲回車鍵換行就不起作用了尖奔。
HTML常用標(biāo)簽
段落標(biāo)簽：p搭儒， <p>我是段落</p>。
水平線標(biāo)簽：hr <hr>
換行標(biāo)簽：br提茁，<br>淹禾。普通的空格和換行會進(jìn)行合并。
文本節(jié)標(biāo)簽：span茴扁，行內(nèi)標(biāo)簽铃岔。
<em> 定義著重文字。 <i> 定義斜體字(不推薦)峭火。
<strong> 定義加重語氣毁习。
<sub> 定義下標(biāo)字*。
<sup> 定義上標(biāo)字卖丸。
<del> 定義刪除字
注釋標(biāo)簽：<!-- 注釋內(nèi)容 -->
案例：復(fù)雜案例纺且。
文本格式化標(biāo)記
- 在網(wǎng)頁中，有時需要為文字設(shè)置粗體稍浆、斜體或下劃線效果载碌，這時就需要用到HTML中的文本格式化標(biāo)記，使文字以特殊的方式顯示粹湃。
- 文本格式化常用標(biāo)記
