01-認識HTML

認識網(wǎng)頁和網(wǎng)站

什么是網(wǎng)頁?

  • 網(wǎng)頁的專業(yè)術語叫做 Web Page;

  • 打開瀏覽器查看到的頁面洁奈,是網(wǎng)絡中的一“頁”;

  • 網(wǎng)頁的內(nèi)容可以非常豐富:包括文字诊赊、鏈接、圖片夺谁、音樂、視頻等等

網(wǎng)站是什么呢?

  • 網(wǎng)站是由多個網(wǎng)頁組成的; p通常一個網(wǎng)站由N個網(wǎng)頁組成(N >= 1);

網(wǎng)頁的顯示過程 – 用戶角度

  • 1.用戶在瀏覽器輸入一個網(wǎng)站;

  • 2.瀏覽器會找到對應的服務器地址肉微,請求靜態(tài)資源(可以存放在世界上任何一個地方);

  • 3.服務器返回靜態(tài)資源給瀏覽器;

  • 4.瀏覽器對靜態(tài)資源進行解析和展示;

image.png

網(wǎng)頁的顯示過程 – 前端工程師

  • 1.開發(fā)項目(HTML/CSS/JavaScript/Vue/React)

  • 2.打包匾鸥、部署項目到服務器里面

image.png

服務器是什么?

  • 我們?nèi)粘I罱佑|到的基本都屬于****客戶端****、前端的內(nèi)容:

    • 比如瀏覽器碉纳、微信勿负、QQ、小程序;
  • 我們知道自己的手機并不可能存放哪些多的數(shù)據(jù)和資源:

    • 比如你用《網(wǎng)易云聽音樂》劳曹,音樂數(shù)據(jù)大部分都是存在“服務器”中的;
  • 那么服務到底是什么呢?

    • 服務器本質(zhì)上也是一臺類似于你電腦一樣的主機;

    • 但是這個主機有幾個特點:

    ?? 二十四小時不關機的(穩(wěn)定運行); ?? 沒有顯示器的; ?? 一般裝的是Linux操作系統(tǒng)(比如centos);

  • 公司大部分用的是****云服務器****(比如阿里云奴愉、騰訊云攒至、華為云);

世界上第一個網(wǎng)頁

image.png
  • 雖然目前我們會認為這個網(wǎng)頁簡單到不值一提躁劣,但是在當時它的發(fā)明是“天才之作”迫吐。

現(xiàn)代的網(wǎng)頁已經(jīng)非常復雜

image.png

網(wǎng)頁的組成

那么網(wǎng)頁是由什么開發(fā)出來的呢?

  • 階段一:HTML元素;

  • 階段二:HTML元素 + CSS樣式;

  • 階段三:HTML元素 + CSS樣式 + JavaScript語言;

image.png

網(wǎng)頁的組成

image.png

網(wǎng)頁的組成

image.png

網(wǎng)頁源代碼的角度

image.png

網(wǎng)頁開發(fā)的角度

image.png

瀏覽器的作用

我們已經(jīng)明確知道了網(wǎng)頁的組成部分:HTML + CSS + JavaScript****。

那么這些看起來枯燥的代碼账忘,是如何被渲染成多彩的網(wǎng)頁呢?

我們知道是通過瀏覽器來完成;

image.png

瀏覽器最核心的部分其實是 “瀏覽器****內(nèi)核****”;

瀏覽器的渲染引擎

  • 瀏覽器最核心的部分是渲染引擎(Rendering Engine)志膀,一般也稱為“****瀏覽器****內(nèi)核****”

  • 負責解析網(wǎng)頁語法,并渲染(顯示)網(wǎng)頁 n 常見的瀏覽器有很多:

不同瀏覽器的****內(nèi)核

  • 常見的瀏覽器內(nèi)核有

    • Trident ( 三叉戟):IE鳖擒、360安全瀏覽器溉浙、搜狗高速瀏覽器、百度瀏覽器蒋荚、UC瀏覽器; pGecko( 壁虎) :Mozilla Firefox;

    • Presto(急板樂曲)-> Blink (眨眼):Opera

    • Webkit :Safari戳稽、360極速瀏覽器、搜狗高速瀏覽器期升、移動端瀏覽器(Android惊奇、iOS) pWebkit -> Blink :Google Chrome

image.png
  • 不同的瀏覽器內(nèi)核有不同的解析、渲染規(guī)則播赁,所以同一網(wǎng)頁在不同內(nèi)核的瀏覽器中的渲染效果也可能不同颂郎。
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市容为,隨后出現(xiàn)的幾起案子乓序,更是在濱河造成了極大的恐慌,老刑警劉巖坎背,帶你破解...
    沈念sama閱讀 206,013評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件替劈,死亡現(xiàn)場離奇詭異,居然都是意外死亡得滤,警方通過查閱死者的電腦和手機陨献,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耿戚,“玉大人湿故,你說我怎么就攤上這事∧せ祝” “怎么了坛猪?”我有些...
    開封第一講書人閱讀 152,370評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長皂股。 經(jīng)常有香客問我墅茉,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,168評論 1 278
  • 正文 為了忘掉前任就斤,我火速辦了婚禮悍募,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洋机。我一直安慰自己坠宴,他們只是感情好,可當我...
    茶點故事閱讀 64,153評論 5 371
  • 文/花漫 我一把揭開白布绷旗。 她就那樣靜靜地躺著喜鼓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衔肢。 梳的紋絲不亂的頭發(fā)上庄岖,一...
    開封第一講書人閱讀 48,954評論 1 283
  • 那天,我揣著相機與錄音角骤,去河邊找鬼隅忿。 笑死,一個胖子當著我的面吹牛邦尊,可吹牛的內(nèi)容都是我干的背桐。 我是一名探鬼主播,決...
    沈念sama閱讀 38,271評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼胳赌,長吁一口氣:“原來是場噩夢啊……” “哼牢撼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起疑苫,我...
    開封第一講書人閱讀 36,916評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎纷责,沒想到半個月后捍掺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,382評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡再膳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,877評論 2 323
  • 正文 我和宋清朗相戀三年挺勿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喂柒。...
    茶點故事閱讀 37,989評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡不瓶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出灾杰,到底是詐尸還是另有隱情蚊丐,我是刑警寧澤,帶...
    沈念sama閱讀 33,624評論 4 322
  • 正文 年R本政府宣布艳吠,位于F島的核電站麦备,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜凛篙,卻給世界環(huán)境...
    茶點故事閱讀 39,209評論 3 307
  • 文/蒙蒙 一黍匾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呛梆,春花似錦锐涯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至融痛,卻和暖如春壶笼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背雁刷。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評論 1 260
  • 我被黑心中介騙來泰國打工覆劈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沛励。 一個月前我還...
    沈念sama閱讀 45,401評論 2 352
  • 正文 我出身青樓责语,卻偏偏與公主長得像,于是被迫代替她去往敵國和親目派。 傳聞我的和親對象是個殘疾皇子坤候,可洞房花燭夜當晚...
    茶點故事閱讀 42,700評論 2 345

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