前端知識(shí)點(diǎn)(3)

  1. HTML的發(fā)展:
    (1): 1993年6月:HTML第一個(gè)版本發(fā)布派阱。
    (2): 1995年11月:HTML2.0远豺。
    (3): 1997年1月:HTML3.2 (W3C推薦)。
    (4): 1999年12月:HTML4.01 (W3C推薦)访惜。
    (5): 2000年底:XHTML1.0 (W3C推薦)溢陪。
    (6): 2014年10月: HTML5 (W3C推薦)。
  2. doctype:
    (1): HTML總共有那么多的版本齐疙,而且這其中至少有三個(gè)版本在廣泛使用膜楷,那么瀏覽器怎么知道我們在使用哪個(gè)版本呢?
    (2): 為了讓瀏覽器知道我們使用的HTML版本我們還需要在網(wǎng)頁的最上邊添加一個(gè)doctype聲明,來告訴瀏覽器網(wǎng)頁的版本贞奋。
  3. 怪異模式:
    (1): 為了兼容一些舊的頁面赌厅,瀏覽器中設(shè)置了兩種解析模式:
    -標(biāo)準(zhǔn)模式(Standards Mode)
    -怪異模式(Quirks Mode)
    (2): 怪異模式解析網(wǎng)頁時(shí)會(huì)產(chǎn)生一些不可預(yù)期的行為,所以我們應(yīng)該避免怪異模式的出現(xiàn)轿塔。
    (3): 避免的最好方式就是在頁面中編寫正確的doctype特愿。
  4. 編碼問題:
    (1): 在計(jì)算機(jī)的內(nèi)部,文件都是以二進(jìn)制編碼保存的勾缭。
    (2): 所謂的二進(jìn)制編碼就是指1和0揍障,也就是我們的所有內(nèi)容都需要轉(zhuǎn)換為1和0。
    (3): 中國兩個(gè)字在計(jì)算機(jī)的底層保存的可能要轉(zhuǎn)換為10100101這種二進(jìn)制碼漫拭,這一過程稱為編碼亚兄。
    (4): 計(jì)算機(jī)在讀取文件是需要將10100101在轉(zhuǎn)換為中國給我們顯示這一過程稱為解碼。
  5. 字符集:
    (1): 這就帶來一個(gè)問題采驻,中國到底是10100101還是01011010到底由誰說了算审胚。
    (2): 所以我們還需要一個(gè)東西稱為字符集,字符集規(guī)定了如何將文本轉(zhuǎn)換為二進(jìn)制編碼礼旅。
    (3): 常見的字符集:ASKII膳叨、ISO8859-1、GBK痘系、GB2312菲嘴、UTF-8。
  6. 亂碼:
    (1): 如果我們保存文件時(shí)使用的是utf-8進(jìn)行編碼汰翠,而瀏覽器讀取頁面時(shí)使用gb2312龄坪,這樣就會(huì)導(dǎo)致頁面中的內(nèi)容不能正常顯示,也就是我們所說的亂碼复唤。
    (2): 所以我們只需要統(tǒng)一兩者使用的字符集就可以解決亂碼問題健田。
    (3): 這里為了頁面有更好的使用性,我們一般使用utf-8佛纫。
  7. 解決:
    (1): 保存文件的編碼我們直接通過編輯器即可指定妓局,接下來就是要告訴瀏覽器使用什么字符集去解析文件总放。
    (2): 在html5中只需要使用meta標(biāo)簽即可完成這個(gè)任務(wù):<meta charset="utf-8" />
  8. <meta>:
    作用:
    • <meta>標(biāo)簽可提供有關(guān)頁面的元信息,比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞好爬。
    • <meta>標(biāo)簽位于文檔的頭部局雄,不包含任何內(nèi)容。<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)存炮。
  9. meta的用法:
    (1): 設(shè)置頁面的字符集:
    • <meta charset="utf-8">
      (2): 設(shè)置網(wǎng)頁的描述:
    • <meta name="description" content="">
      (3): 設(shè)置網(wǎng)頁的關(guān)鍵字:
    • <meta name="keywords" content="">
      (4): 請求的重定向:
    • <meta http-equiv="refresh" content="5,url=地址"/>
  10. 常用標(biāo)簽:
    (1): <html>:
    作用:
- <html>標(biāo)簽用于告訴瀏覽器這個(gè)文檔中包含的信息是用HTML編寫的炬搭。

用法:
- 所有的網(wǎng)頁的內(nèi)容都需要編寫到html標(biāo)簽中,一個(gè)頁面中html標(biāo)簽只能有一個(gè)僵蛛。
- html標(biāo)簽中有兩個(gè)子標(biāo)簽head和body尚蝌。
(2): <head>:
作用:
- <head>標(biāo)簽用來表示網(wǎng)頁的元數(shù)據(jù),head中包含了瀏覽器和搜索引擎使用的其他不可見信息充尉。
- head標(biāo)簽作為html標(biāo)簽的子元素的出現(xiàn),一個(gè)網(wǎng)頁中只能有一個(gè)head衣形。
(3): <title>:
作用:
- <title>標(biāo)簽表示網(wǎng)頁的標(biāo)題驼侠,一般會(huì)在網(wǎng)頁的標(biāo)題欄上顯示。
- title標(biāo)簽中的文字谆吴,是頁面優(yōu)化的最重要因素倒源。在搜索引擎的搜索時(shí)最先看到的、最醒目的內(nèi)容句狼。
用法:
- 建議將title標(biāo)簽貼著head標(biāo)簽編寫笋熬,這樣搜索引擎可以快速檢索到標(biāo)題標(biāo)簽。
- 網(wǎng)站中的多個(gè)頁面的title也不應(yīng)該重復(fù)腻菇,這樣不利于搜索隱藏檢索胳螟。
(4): <body>:
作用:

  • <body>標(biāo)簽用來設(shè)置網(wǎng)頁的主體,所有在頁面中能看到的內(nèi)容都應(yīng)該編寫到body標(biāo)簽中筹吐。
    用法:
  • body標(biāo)簽作為html的子標(biāo)簽使用糖耸。
    (5): <h1>~<h6>
    作用:
  • h1h6都是網(wǎng)頁中的標(biāo)題標(biāo)簽,用來表示網(wǎng)頁中的一個(gè)標(biāo)題丘薛,不同的是嘉竟,從h1h6重要性越來越低。
  • 標(biāo)題標(biāo)簽相當(dāng)于正文的標(biāo)題洋侨,通常認(rèn)為重要性僅次于頁面的title舍扰。
  • 一般標(biāo)題標(biāo)簽我們只會(huì)使用到h3,h3以后的標(biāo)題標(biāo)簽對(duì)于搜索引擎就沒有什么意義了希坚。
  • 一個(gè)頁面中只會(huì)使用一個(gè)h1標(biāo)簽边苹。
    (6): <p>
    作用:
  • <p>標(biāo)簽表示網(wǎng)頁中的一個(gè)段落。
  • 一般瀏覽器會(huì)在段落的前和后各加上一個(gè)換行吏够,也就是段落會(huì)在頁面中自成一行勾给。
    (7): <br />
    作用:
  • <br />標(biāo)簽表示一個(gè)換行標(biāo)簽滩报,使用br標(biāo)簽可以使br標(biāo)簽后的內(nèi)容另起一行。
    (8): <hr />
    作用:
  • <hr />標(biāo)簽是水平線標(biāo)簽播急,使用hr標(biāo)簽可以在頁面中打印一條水平線脓钾,水平線可以將頁面分成上下兩個(gè)部分。
    (9): <img />
    作用:
  • <img />標(biāo)簽是圖片標(biāo)簽桩警,可以用來向頁面中引入一張外部的圖片可训。
    屬性:
    -src
    指定一個(gè)外部的圖片的路徑。
    -alt
    圖片的描述捶枢。
    (10): <a>
    作用:
  • <a>標(biāo)簽是超鏈接標(biāo)簽握截,通過a標(biāo)簽,可以快速跳轉(zhuǎn)到其他頁面烂叔。
    屬性:
  • href
    指向一個(gè)鏈接地址谨胞。
  • target
    設(shè)置打開目標(biāo)頁面的設(shè)置,可選值:_blank新窗口蒜鸡、_self當(dāng)前窗口胯努。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市逢防,隨后出現(xiàn)的幾起案子叶沛,更是在濱河造成了極大的恐慌,老刑警劉巖忘朝,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件灰署,死亡現(xiàn)場離奇詭異,居然都是意外死亡局嘁,警方通過查閱死者的電腦和手機(jī)溉箕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來导狡,“玉大人约巷,你說我怎么就攤上這事『蹬酰” “怎么了独郎?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枚赡。 經(jīng)常有香客問我氓癌,道長,這世上最難降的妖魔是什么贫橙? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任贪婉,我火速辦了婚禮,結(jié)果婚禮上卢肃,老公的妹妹穿的比我還像新娘疲迂。我一直安慰自己才顿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布尤蒿。 她就那樣靜靜地躺著郑气,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腰池。 梳的紋絲不亂的頭發(fā)上尾组,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音示弓,去河邊找鬼讳侨。 笑死,一個(gè)胖子當(dāng)著我的面吹牛奏属,可吹牛的內(nèi)容都是我干的跨跨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼囱皿,長吁一口氣:“原來是場噩夢啊……” “哼歹叮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起铆帽,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎德谅,沒想到半個(gè)月后爹橱,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡窄做,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年愧驱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椭盏。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡组砚,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掏颊,到底是詐尸還是另有隱情糟红,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布乌叶,位于F島的核電站盆偿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏准浴。R本人自食惡果不足惜事扭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望乐横。 院中可真熱鬧求橄,春花似錦今野、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至啃匿,卻和暖如春蛔外,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背溯乒。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國打工夹厌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人裆悄。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓矛纹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親光稼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子或南,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)艾君。 注意:講述HT...
    kismetajun閱讀 27,485評(píng)論 1 45
  • 什么是html采够? html是一種網(wǎng)頁標(biāo)記語言,叫超文本標(biāo)記語言冰垄,我們平時(shí)上網(wǎng)所看到的所有網(wǎng)頁均來自于html蹬癌,英文...
    波段頂?shù)?/span>閱讀 8,362評(píng)論 2 7
  • 一、HTML虹茶、XML逝薪、XHTML 有什么區(qū)別 1. HTML是什么? 描述網(wǎng)頁的一種語言 超文本標(biāo)記語言 (Hyp...
    饑人谷_CST閱讀 804評(píng)論 0 7
  • --- 學(xué)習(xí)目標(biāo): - 了解常用瀏覽器 - 掌握WEB標(biāo)準(zhǔn) - 理解標(biāo)簽語義化 - 掌握常用的排版標(biāo)簽 ...
    紅豆丁244閱讀 1,375評(píng)論 0 2
  • 格式后期處理蝴罪。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,126評(píng)論 0 17