第一節(jié) HTML基礎(chǔ)知識:
1.什么是瀏覽器秽荞?
瀏覽器幫助用戶進行瀏覽網(wǎng)頁的軟件俺亮,能夠讓將網(wǎng)頁內(nèi)容呈現(xiàn)給用戶查看啄育,并讓用戶與網(wǎng)頁交互。
2.常見到瀏覽器和內(nèi)核荠察?
IE內(nèi)核 Trident
谷歌內(nèi)核 WebKit / Blink
火狐內(nèi)核 Gecko
Safarri內(nèi)核 WebKit
歐朋內(nèi)核 Presto
3.一些名詞解釋
-Internet:因特網(wǎng)
-WWW:萬維網(wǎng)置蜀,世界互聯(lián)網(wǎng)服務。
-W3C萬維網(wǎng)聯(lián)盟悉盆,國際中獨立性技術(shù)標準機構(gòu)盯荤。
-HTTP:超文本傳輸協(xié)議,瀏覽器和服務器端網(wǎng)絡(luò)傳輸數(shù)據(jù)的約束和規(guī)范焕盟。
-Web:互聯(lián)網(wǎng)服務總稱秋秤。
-DNS:域名系統(tǒng)。
4.什么是服務器脚翘?
–瀏覽器接受用戶操作→瀏覽器封裝HTTP請求→連接服務器:DNS解析→發(fā)送請求Request→服務器接收請求→處理請求→返回響應報文→瀏覽器接收響應報文→渲染頁面呈現(xiàn)
5.網(wǎng)頁的組成灼卢?
-網(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成来农。當然鞋真,除了這些元素,網(wǎng)頁中還可以包含音頻备图、視頻以及Flash等灿巧。
-HTML:頁面結(jié)構(gòu)、CSS:頁面樣式表現(xiàn)揽涮、JavaScript:交互行為
6.網(wǎng)頁的結(jié)構(gòu)
<html>
<head> </head> ? ? 頭部
<body> ? ? ? ?身體
<h1> ? ?</h1> ?標題標簽
<p> ? </p> ?段落標簽
</body>
? </html>
特點:成對出現(xiàn)抠藕,有開有閉合,尖括號括住了標簽名蒋困。結(jié)束標簽內(nèi)增加了斜線
7.HTML語法
①“以“<”開頭
②接著標簽名盾似,中間無空格
③標簽名后面有屬性的,加空格雪标,然后是 屬性名=“”零院;多個屬性的用空格隔開
④屬性結(jié)束后加一個或多個空格
⑤然后是結(jié)束標簽“>”,如果是閉合標簽在標簽名前加“/”村刨,如
⑥單標簽告抄,斜線沒有意義可有可無
⑦標簽中可以嵌套內(nèi)容
第二節(jié)內(nèi)容筆記
一、HTML常用標簽
1嵌牺、body標簽:
<body>用于定義HTML文檔所要顯示的內(nèi)容打洼,也稱為主體標記。瀏覽器中顯示的所有文本逆粹、圖像募疮、音頻和視頻等信息都必須位于<body>標記內(nèi),<body>標記中的信息才是最終展示給用戶看的僻弹。
一個HTML文檔只能含有一對<body>標記阿浓,且<body>標記必須在<html>標記內(nèi),位于<head>頭部標記之后蹋绽,與<head>標記是并列關(guān)系芭毙。
2筋蓖、標題標簽h1-h6:
H1標題標簽是 標注當前頁面中的文檔最重要的核心主題的文本。
H1到 h6標簽稿蹲,相對于當前文檔的重要性依次降低扭勉。注意h1標簽在整個頁面中最多一次(當然可以超過,但是不利于搜索SEO)苛聘。
H2以后的這些標簽可以在一個頁面中有多個涂炎,但是不要濫用,濫用會導致網(wǎng)頁的SEO受影響设哗,搜索引擎會認為我們作弊唱捣。
H1 到H6 標簽不是用于 字體大小的樣式設(shè)置,關(guān)鍵是文檔內(nèi)容的文字的重要性的體現(xiàn)网梢,html是定義文檔內(nèi)容的震缭,而樣式由后面我們學的css來設(shè)定。
3战虏、段落標簽:<p>
4拣宰、換行標簽 <br/>,水平線標簽 hr
5烦感、文本節(jié)標簽:span
6巡社、定義著重文字,文字以斜體顯示:<em>
定義加重語氣手趣,文字以粗體形式顯示:<strong>
定義下標字:<sub> ?定義上標字:<sup>
定義刪除字晌该,<del>,s绿渣;
?注釋標簽:<!---注釋內(nèi)容---->
7.超鏈接和圖片
超級鏈接標簽:a
<a >超級鏈接內(nèi)容
–href屬性朝群,指向跳轉(zhuǎn)的地址
–#頁面定位
–target屬性:_blank_self
錨點鏈接:可以然后href屬性指向一個頁面中的id值,可以讓頁面跳轉(zhuǎn)到id對應的標簽的位 置中符。
超級鏈接不僅僅是可以嵌套文本姜胖,還可以嵌套圖片、表格淀散、標題谭期。
8. 相對路徑和絕對路徑
--相對路徑
圖像文件和html文件位于同一文件夾:只需輸入圖像文件的名稱即可,如<img src="logo.gif"/>
圖像文件位于html文件的下一級文件夾:輸入文件夾名和文件名吧凉,之間用“/”隔開,如<
src="img/img01/logo.gif"/>
圖像文件位于html文件的上一級文件夾:在文件名之前加入“../” 踏志,如果是上兩級阀捅,則需要使用 “../ ../”,以此類推针余,如<img src="../logo.gif"/>
--絕對路徑
絕對路徑一般是指帶有盤符的路徑饲鄙。例如:
“D:\HTML+CSS網(wǎng)頁制作\chapter02\img\logo.gif”凄诞,或完整的網(wǎng)絡(luò)地址,例如“http://www.itcast.cn/images/logo.gif”忍级。
9 .圖片格式和選擇
GIF格式
GIF最突出的地方就是他支持動畫帆谍,同時GIF也是一種無損的圖像格式,也就是說修改圖片之后轴咱,圖片質(zhì)量幾乎沒有損失汛蝙。再加上GIF支持透明(全透明或全不透明),因此很適合在互聯(lián)網(wǎng)上使用朴肺。但GIF只能處理256種顏色窖剑。在網(wǎng)頁制作中,GIF格式常常用于Logo戈稿、小圖標及其他色彩相對單一的圖像西土。
總結(jié):小、兼容性好鞍盗、支持透明需了、色彩太多不行。
PNG格式
PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)般甲。相對于GIF肋乍,PNG最大的優(yōu)勢是體積更小,支持alpha透明(全透明欣除,半透明住拭,全不透明),并且顏色過渡更平滑历帚,但PNG不支持動畫滔岳。同時需要注意的是IE6是可以支持PNG-8的,但在處理PNG-24的透明時會顯示為灰色挽牢。通常谱煤,圖片保存為PNG-8會在同等質(zhì)量下獲得比GIF更小的體積,而半透明的圖片只能使用PNG-24
JPG格式
JPEG格式是網(wǎng)絡(luò)上比較流行的一種格式禽拔,其文件擴展名為.jpg或.jpeg刘离。JPEG是一種有損壓縮格式,其文件體積非常小睹栖,非常有利于網(wǎng)絡(luò)傳輸硫惕,但由于是有損壓縮,所以將一幅圖像轉(zhuǎn)換為JPEG格式后圖像質(zhì)量會降低野来。一般用于廣告恼除,大的宣傳的圖片,照片等
選擇:
–jpg
?色彩還原高,適合復雜顏色圖片豁辉,比如banner
–gif
?色彩效果最低令野,支持透明,支持動畫徽级,適合顏色比較少气破,不適合漸變色。
–png
?PNG的優(yōu)點是餐抢,清晰现使,無損壓縮,壓縮比率很高弹澎,可漸變透明朴下,具備幾乎所有GIF的優(yōu)點;缺點是不如JPG的顏色豐富苦蒿,同樣的圖片體積也比JPG略大殴胧。
?PNG有著另一個優(yōu)點,那就是逐次逼近顯示(progressive display):傳輸圖像文件的同時佩迟,可以先把整個輪廓顯示出來团滥,然后逐步顯示圖像的細節(jié),即先顯示低分辨率顯示圖像报强,從模糊到清晰灸姊,然后逐步提高它的分辨率。這是一個很好的用戶體驗秉溉。
?總結(jié):
?gif和png基本差不多力惯,色彩比較少的直接gif,如果圖片動畫用gif召嘶。對色彩要求高的用jpg父晶。