01-HTML基礎(chǔ)-基本概念

常見的主流瀏覽器:

  • IE內(nèi)核:Trident

  • Google內(nèi)核:Webkit/Blink

  • 火狐內(nèi)核:Gecko

  • Safarri內(nèi)核:WebKit

  • 歐朋內(nèi)核:Presto

  • 正是因?yàn)閮?nèi)容不同,所以瀏覽器有兼容問題

瀏覽器訪問網(wǎng)頁原理:

1.當(dāng)我們利用瀏覽器訪問網(wǎng)頁時,其實(shí)是有真實(shí)的物理文件傳輸?shù)?瀏覽器會先將網(wǎng)頁上的內(nèi)容緩存到本地文件夾中,然后再渲染出來呈獻(xiàn)給用戶查看

2.平時我們在上網(wǎng)時會感覺到第二次訪問網(wǎng)頁時會比第一次訪問網(wǎng)頁是要快,就是因?yàn)榈谝淮卧L問時已經(jīng)將這個網(wǎng)頁上的信息緩存到了本地

3.緩存文件夾中除了緩存圖片以外還緩存了一些例如.js .css ,html等文件,所以可以得出一個網(wǎng)頁不是一個文件,而是一堆文件,網(wǎng)頁越復(fù)雜那么組成這個網(wǎng)頁的文件就越多.

瀏覽器請求數(shù)據(jù)的過程

1.發(fā)送"請求報(bào)文"(請求報(bào)文中包括請求行+請求頭+空行+請求體)
2.處理瀏覽器請求
3.將處理結(jié)果返回給瀏覽器
4.發(fā)送"響應(yīng)報(bào)文"(響應(yīng)報(bào)文中包括響應(yīng)行+響應(yīng)頭+響應(yīng)體)
5.解析瀏覽器返回的內(nèi)容呈現(xiàn)給用戶

什么是URL

其實(shí)我們在瀏覽器的地址欄中輸入的這個地址就是一個URL**

  • URL格式:
  • URL拆分:
    • http:// URL協(xié)議類型
    • 127.0,0,1 服務(wù)器和IP地址
    • :80 服務(wù)器的端口號
    • index.html 需要訪問的資源名稱
  • URL拆分后每個部分的作用
    • .IP地址和端口號:其實(shí)IP地址它相當(dāng)于我們現(xiàn)實(shí)生活中的地址,例如:北京市昌平區(qū)佰嘉城小區(qū);端口號它相當(dāng)于我們現(xiàn)實(shí)生活中的門牌號碼,例如:34樓4單元201室.那么我們發(fā)現(xiàn)只要將地址和門牌號碼結(jié)合在一起就可以得到一個詳細(xì)地址.
      只要我們拿到了一個詳細(xì)地址,我們就可以根據(jù)這個地址找到對應(yīng)的位置
    • index.html作用:當(dāng)我們通過IP地址和端口號找到對應(yīng)的服務(wù)器之后,需要通過資源名稱告訴服務(wù)器,我們需要獲取服務(wù)器上的哪個資源.
      結(jié)論:服務(wù)器IP地址和端口號的作用就是告訴瀏覽器我們需要訪問的那臺服務(wù)器的詳細(xì)地址是什么.
HTTP協(xié)議

1.HTTP是Hypertext Transfer Protocol的縮寫,超文本傳輸
2.什么是協(xié)議? 無論什么協(xié)議他們都有一個共同點(diǎn),就是用來規(guī)范/約束某一類事物
3.HTTP協(xié)議是用來規(guī)范/約束哪一類事物?
規(guī)范/約束瀏覽器和服務(wù)器之間如何溝通
4.溝通問題?
溝通最常見的問題是語言不通.

HTML作用

1.HTML其實(shí)是HyperText Markup Language的縮寫,超文本標(biāo)記語言.
2.HTML其實(shí)只有一個作用,它是專門用來描述文本的語義的,也就是說我們可以利用HTML來告訴瀏覽器哪些是標(biāo)簽,哪些是段落.
3.這些用于描述其他文本語義的文本,我們稱之為標(biāo)簽,并且這些用于描述其它文本語義的標(biāo)簽將來在瀏覽器中是不會被顯示出來的
4.所以因?yàn)镠TML的這些標(biāo)簽是專門用來描述其它文本語義的,并且在瀏覽器中是不會被顯示出來的,所以我們稱之為這些文本為"超文本",而這些文本又叫做標(biāo)簽,所以HTML被稱之為"超文本標(biāo)記"語言
注意點(diǎn):雖然我們利用h1標(biāo)簽描述一段文本之后,這段文本在瀏覽器中顯示出來會被放大和加粗,看上去我們是利用HTML的標(biāo)簽修改了被描述的那段文本的樣式.但是一定要記住,HTML的作用只有一個,它是專門用來給文本添加語義的,而不是用來修改文本的樣式的.

HTML發(fā)展史

  • IETF簡介:
    • IETF是英文Internet Engineering Task Force的縮寫,中文是"物聯(lián)網(wǎng)工程任務(wù)組"
    • IETF負(fù)責(zé)定義并管理因特網(wǎng)技術(shù)的所有方面,包括用于數(shù)據(jù)傳輸?shù)腎P協(xié)議,讓域名與IP地址匹配的域名系統(tǒng)(DNS),用于發(fā)送郵件的簡單郵件傳輸協(xié)議(SMTP)等
  • W3C簡介
    • W3C是英文World Wide Web Consortium的縮寫,翻譯過來就是W3C理事會或萬維網(wǎng)聯(lián)盟,W3C是全球互聯(lián)網(wǎng)最據(jù)權(quán)威的技術(shù)標(biāo)準(zhǔn)化組織.

HTML基本結(jié)構(gòu)詳解

  • 基本結(jié)構(gòu):
<!DOCTYPE html>
<html>
        <head>
                <meta charset = "GBK"/>
                 <title></title>
        </head>
        <body></body>
</html>
  • 通過觀察我們發(fā)現(xiàn),HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對出現(xiàn)的,這些成對出現(xiàn)的標(biāo)簽中有一個帶/有一個不帶/,那么這些不帶/的標(biāo)簽我們稱之為開始標(biāo)簽,這些帶/的標(biāo)簽我們稱之為結(jié)束標(biāo)簽

  • html標(biāo)簽

    • 作用:用于告訴瀏覽器這是一個網(wǎng)頁,也就是說告訴瀏覽器我是一個HTML文檔
    • 注意點(diǎn):其他所有的標(biāo)簽必須寫在html標(biāo)簽里面,也就是寫在html開始標(biāo)簽和結(jié)束標(biāo)簽中間

  • head標(biāo)簽

    • 作用:
      • 用于給網(wǎng)頁添加一些適配信息
      • 例如:
        • 制定網(wǎng)頁的標(biāo)題/制定網(wǎng)頁的小圖片
        • 添加網(wǎng)頁的SEO相關(guān)的信息(制定網(wǎng)站的關(guān)鍵字/制定網(wǎng)站的描述信息)
        • 外掛一些外部的css/js文件
        • 添加一些適配器相關(guān)的內(nèi)容
    • 注意點(diǎn):一般情況下,寫在head標(biāo)簽內(nèi)部的內(nèi)容都不會顯示給用戶查看,也就是說一般情況下寫在head標(biāo)簽內(nèi)容部的內(nèi)容我們都看不到
  • <h3 id = "title12">title標(biāo)簽</h3>
    • 作用:
      • 專門用與指定網(wǎng)站的標(biāo)題,并且這個指定的標(biāo)題將來還會作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題.
    • 注意點(diǎn):title標(biāo)簽一定要寫在head標(biāo)簽里面.

  • body標(biāo)簽

    • 作用:
      • 專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)
    • 注意點(diǎn):
      • 雖然說有時候你可能將內(nèi)容寫到了別的地方在網(wǎng)頁中也能看到,但是千萬不要這么干,一定要將需要顯示的內(nèi)容寫在body中.
      • 一對html開始標(biāo)簽和結(jié)束標(biāo)簽中只能有一對body標(biāo)簽

字符集問題

meta標(biāo)簽

  • meta標(biāo)簽的作用:就是指定當(dāng)前網(wǎng)頁的字符集
  • 為什么會有亂碼現(xiàn)象?
    • 就是因?yàn)槲覀冊诰帉懢W(wǎng)頁的時候沒有指定字符集
  • 如何解決亂碼現(xiàn)象?
    • 在head標(biāo)簽中添加'<meta charset = "GBK"/>',就是指定字符集
  • 什么是字符集?
    • 字符集就是字符的集合,也就是很多字符集合在一起.正是因?yàn)槿绱?才導(dǎo)致了亂碼問題.
    • 在網(wǎng)頁中我們常見的字符集有兩個,GBK/UTF-8
    • 所以在網(wǎng)頁中指定字符集的意義就在于告訴瀏覽器我用的是哪個盒子,你應(yīng)該如何去查找才能找到對應(yīng)的正確的內(nèi)容.
  • GBK(GB2312)和UTF-8區(qū)別
    • GBK(GB2312)里面存儲的字符比較少,僅僅存儲了漢字和一些常用外文.
      • 體積比較小
    • UTF-8里面存儲了世界上所有的文字
      • 體積比較大
  • 那么在企業(yè)開發(fā)中我們應(yīng)該使用哪個呢?
    • 如果你的網(wǎng)站僅僅包含了中文,那么推薦使用GB2312,因?yàn)樗捏w積更小,訪問速度更快
    • 如果你的網(wǎng)站除了中文以外,還包含了一些其他國家的語言,那么推薦使用UTF-8
    • 懶人推薦:不管三七二十一,一律寫UTF-8即可.
  • 注意點(diǎn):
    • 在HTML文件中指定的字符集必須和保存這個文件的字符集一致,否則還是會出現(xiàn)亂碼
    • 所以僅僅指定字符集不一定能解決亂碼問題,還需要保存文件的時候,文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題.

DTD文檔聲明

什么是DTD文檔聲明?

由于HTML有很多個版本的規(guī)范,每個版本的規(guī)范之間又有一定的差異,所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁,我們需要在HTML文件的第一行告訴瀏覽器,我們當(dāng)前這個網(wǎng)頁是哪一個版本的HTML規(guī)范來編寫的.瀏覽器只要知道了我們是用哪一個版本的規(guī)范來編寫以后,他就能夠正確的編譯/解析/渲染我們的網(wǎng)頁.

DTD文檔聲明格式?

每一個不同版本的規(guī)范都有不同的DTD文檔聲明
我們只需要用HTML5的DTD文檔聲明,因?yàn)镠TML5的DTD文檔聲明是向下兼容的

DTD文檔聲明的注意點(diǎn)

  • 任何一個標(biāo)準(zhǔn)的HTML網(wǎng)頁,第一行一定是DTD文檔聲明,也就是說DTD文檔聲明必須卸載第一行.
  • 大小寫都可以
  • DTD文檔聲明不是一個標(biāo)簽
  • 雖然DTD文檔聲明的作用是用于告訴瀏覽器我們的網(wǎng)頁是用哪一個版本的標(biāo)準(zhǔn)編寫的,以便于方便瀏覽器解析和渲染,但是瀏覽器并不是完全依賴這個DTD文檔聲明,瀏覽器有一套屬于自己的機(jī)制,也就是說DTD文檔聲明不寫網(wǎng)頁也能正常運(yùn)行,但是由于W3C規(guī)定第一行必須寫上DTD文檔聲明,所以為了遵守規(guī)定,無論怎么我們都應(yīng)該在第一行寫上DTD文檔
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末贫橙，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子反粥，更是在濱河造成了極大的恐慌卢肃，老刑警劉巖，帶你破解...
    沈念sama閱讀 210,978評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件才顿，死亡現(xiàn)場離奇詭異，居然都是意外死亡郑气，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門示弓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來呵萨，“玉大人，你說我怎么就攤上這事囱皿∶保” “怎么了德谅？”我有些...
    開封第一講書人閱讀 156,623評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵窄做，是天一觀的道長椭盏。 經(jīng)常有香客問我掏颊，道長艾帐，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,324評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任准浴，我火速辦了婚禮乐横，結(jié)果婚禮上今野，老公的妹妹穿的比我還像新娘。我一直安慰自己催什，他們只是感情好蛆楞，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著豹爹，像睡著了一般臂聋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上孩等，一...
    開封第一講書人閱讀 49,741評論 1贊 289
  • 城市分裂傳說
    那天肄方，我揣著相機(jī)與錄音，去河邊找鬼虹茶。 笑死蝴罪，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的要门。 我是一名探鬼主播欢搜，決...
    沈念sama閱讀 38,892評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼狂巢，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了唧领？” 一聲冷哼從身側(cè)響起斩个，我...
    開封第一講書人閱讀 37,655評論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤受啥，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后滚局，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體藤肢，經(jīng)...
    沈念sama閱讀 44,104評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡嘁圈，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年最住，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片轧粟。...
    茶點(diǎn)故事閱讀 38,569評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡逃延，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出讽膏，到底是詐尸還是另有隱情，我是刑警寧澤府树，帶...
    沈念sama閱讀 34,254評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布卓箫，位于F島的核電站，受9級特大地震影響烹卒，放射性物質(zhì)發(fā)生泄漏弯洗。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一藐吮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧迫摔，春花似錦泥从、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0贊 21
  • 一樁弒父案凹炸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽昼弟。三九已至，卻和暖如春变骡，著一層夾襖步出監(jiān)牢的瞬間芭逝，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胖翰，地道東北人。 一個月前我還...
    沈念sama閱讀 46,260評論 2贊 360
  • 代替公主和親
    正文 我出身青樓懊缺，卻偏偏與公主長得像鹃两，于是被迫代替她去往敵國和親舀凛。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2贊 348

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

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評論 1贊 41
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案筋帖？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,734評論 1贊 92
  • 源自SeeYouBug博客 地址為：http://www.cnblogs.com/SeeYouBug 一日麸、HTML...
    欲淚成雪閱讀 1,214評論 0贊 15
  • 風(fēng)吹落一地思念 花開遍一地眷戀 風(fēng)帶走了花的種子 花開在了風(fēng)的心里 一切看似微妙 卻是剛剛好 愿你快樂。
    世俗女子閱讀 264評論 3贊 6
  • 三國時期极景，十八路諸侯齊聚一起盼樟，共討漢賊董卓，各顯英雄本色锈至，何其壯哉峡捡！偉人曾說過“數(shù)風(fēng)流人物，還看今朝”，當(dāng)今不正是...
    殘劍閱讀 368評論 0贊 2