web前端學習第一天(2.14-2.15)

第一節(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父晶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市弄跌,隨后出現(xiàn)的幾起案子甲喝,更是在濱河造成了極大的恐慌,老刑警劉巖铛只,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件埠胖,死亡現(xiàn)場離奇詭異,居然都是意外死亡淳玩,警方通過查閱死者的電腦和手機直撤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜕着,“玉大人谊惭,你說我怎么就攤上這事。” “怎么了圈盔?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長悄雅。 經(jīng)常有香客問我驱敲,道長,這世上最難降的妖魔是什么宽闲? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任众眨,我火速辦了婚禮,結(jié)果婚禮上容诬,老公的妹妹穿的比我還像新娘娩梨。我一直安慰自己,他們只是感情好览徒,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布狈定。 她就那樣靜靜地躺著,像睡著了一般习蓬。 火紅的嫁衣襯著肌膚如雪纽什。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天躲叼,我揣著相機與錄音芦缰,去河邊找鬼。 笑死枫慷,一個胖子當著我的面吹牛让蕾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播或听,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼探孝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了神帅?” 一聲冷哼從身側(cè)響起再姑,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎找御,沒想到半個月后元镀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡霎桅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年栖疑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滔驶。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡遇革,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萝快,我是刑警寧澤锻霎,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站揪漩,受9級特大地震影響旋恼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜奄容,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一冰更、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昂勒,春花似錦蜀细、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奕谭,卻和暖如春涣觉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背血柳。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工官册, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人难捌。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓膝宁,卻偏偏與公主長得像,于是被迫代替她去往敵國和親根吁。 傳聞我的和親對象是個殘疾皇子员淫,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML標準击敌。 注意:講述HTML5...
    Programmer客棧閱讀 2,016評論 0 12
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,336評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫介返、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,126評論 4 61
  • 遇見一個人沃斤,會偷偷翻他微博無數(shù)次圣蝎,卻始終不敢關(guān)注他 遇見一個人,會偷偷在背后注視他衡瓶,卻始終不敢與他正面相遇 遇見一...
    一笑師妹閱讀 222評論 0 0
  • “重感情的人啊 日子終究不會好過 信任 依賴 念舊 分分鐘把你虐的萬劫不復” ??? ????
    陳沫可閱讀 141評論 0 0