html重點(diǎn)知識(shí)

HTML

Hyper Text（超文本） Markup（標(biāo)記） Language（語(yǔ)言）

  • HTTP和HTTPS的基本概念

    • HTTP：是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，是一個(gè)客戶(hù)端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP），用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。
    • HTTPS：是以安全為目標(biāo)的HTTP通道，簡(jiǎn)單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細(xì)內(nèi)容就需要SSL。
    • HTTPS協(xié)議的主要作用可以分為兩種：一種是建立一個(gè)信息安全通道，來(lái)保證數(shù)據(jù)傳輸?shù)陌踩涣硪环N就是確認(rèn)網(wǎng)站的真實(shí)性。

  • HTTP與HTTPS有什么區(qū)別？

    • HTTP協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的，因此使用HTTP協(xié)議傳輸隱私信息非常不安全，為了保證這些隱私數(shù)據(jù)能加密傳輸，于是網(wǎng)景公司設(shè)計(jì)了SSL（Secure Sockets Layer）協(xié)議用于對(duì)HTTP協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而就誕生了HTTPS。簡(jiǎn)單來(lái)說(shuō)，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比http協(xié)議安全。
    • HTTPS和HTTP的區(qū)別主要如下：
        1. https協(xié)議需要到ca申請(qǐng)證書(shū)，一般免費(fèi)證書(shū)較少，因而需要一定費(fèi)用。
        1. http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。
        1. http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
        1. http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全。
  • HTTPS的工作原理
    • 我們都知道HTTPS能夠加密信息，以免敏感信息被第三方獲取，所以很多銀行網(wǎng)站或電子郵箱等等安全級(jí)別較高的服務(wù)都會(huì)采用HTTPS協(xié)議。
image.png
  • 客戶(hù)端在使用HTTPS方式與Web服務(wù)器通信時(shí)有以下幾個(gè)步驟，如圖所示。
      1. 客戶(hù)使用https的URL訪問(wèn)Web服務(wù)器，要求與Web服務(wù)器建立SSL連接。
      1. Web服務(wù)器收到客戶(hù)端請(qǐng)求后，會(huì)將網(wǎng)站的證書(shū)信息（證書(shū)中包含公鑰）傳送一份給客戶(hù)端。
      1. 客戶(hù)端的瀏覽器與Web服務(wù)器開(kāi)始協(xié)商SSL連接的安全等級(jí)，也就是信息加密的等級(jí)。
      1. 客戶(hù)端的瀏覽器根據(jù)雙方同意的安全等級(jí)，建立會(huì)話(huà)密鑰，然后利用網(wǎng)站的公鑰將會(huì)話(huà)密鑰加密，并傳送給網(wǎng)站。
      1. Web服務(wù)器利用自己的私鑰解密出會(huì)話(huà)密鑰。
      1. Web服務(wù)器利用會(huì)話(huà)密鑰加密與客戶(hù)端之間的通信。
image.png

  • HTTPS的優(yōu)點(diǎn)

    • 盡管HTTPS并非絕對(duì)安全，掌握根證書(shū)的機(jī)構(gòu)、掌握加密算法的組織同樣可以進(jìn)行中間人形式的攻擊，但HTTPS仍是現(xiàn)行架構(gòu)下最安全的解決方案，主要有以下幾個(gè)好處：
        1. 使用HTTPS協(xié)議可認(rèn)證用戶(hù)和服務(wù)器，確保數(shù)據(jù)發(fā)送到正確的客戶(hù)機(jī)和服務(wù)器；
        1. HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比http協(xié)議安全，可防止數(shù)據(jù)在傳輸過(guò)程中不被竊取、改變，確保數(shù)據(jù)的完整性。
        1. HTTPS是現(xiàn)行架構(gòu)下最安全的解決方案，雖然不是絕對(duì)安全，但它大幅增加了中間人攻擊的成本。
        1. 谷歌曾在2014年8月份調(diào)整搜索引擎算法，并稱(chēng)“比起同等HTTP網(wǎng)站，采用HTTPS加密的網(wǎng)站在搜索結(jié)果中的排名將會(huì)更高”。

  • HTTPS的缺點(diǎn)

    • 雖然說(shuō)HTTPS有很大的優(yōu)勢(shì)，但其相對(duì)來(lái)說(shuō)，還是存在不足之處的：
        1. HTTPS協(xié)議握手階段比較費(fèi)時(shí)，會(huì)使頁(yè)面的加載時(shí)間延長(zhǎng)近50%，增加10%到20%的耗電。
        1. HTTPS連接緩存不如HTTP高效，會(huì)增加數(shù)據(jù)開(kāi)銷(xiāo)和功耗，甚至已有的安全措施也會(huì)因此而受到影響。
        1. SSL證書(shū)需要錢(qián)，功能越強(qiáng)大的證書(shū)費(fèi)用越高，個(gè)人網(wǎng)站、小網(wǎng)站沒(méi)有必要一般不會(huì)用。
        1. SSL證書(shū)通常需要綁定IP，不能在同一IP上綁定多個(gè)域名，IPv4資源不可能支撐這個(gè)消耗。
        1. HTTPS協(xié)議的加密范圍也比較有限，在黑客攻擊、拒絕服務(wù)攻擊、服務(wù)器劫持等方面幾乎起不到什么作用。最關(guān)鍵的，SSL證書(shū)的信用鏈體系并不安全，特別是在某些國(guó)家可以控制CA根證書(shū)的情況下，中間人攻擊一樣可行。
  • 簡(jiǎn)述瀏覽器請(qǐng)求數(shù)據(jù)過(guò)程
      1. 按下回車(chē)時(shí)瀏覽器根據(jù)輸入的URL地址發(fā)送請(qǐng)求報(bào)文
      1. 服務(wù)器接收到請(qǐng)求報(bào)文，會(huì)對(duì)請(qǐng)求報(bào)文進(jìn)行處理
      1. 服務(wù)器將處理完的結(jié)果通過(guò)響應(yīng)報(bào)文返回給瀏覽器
      1. 瀏覽器解析服務(wù)器返回的結(jié)果，將結(jié)果顯示出來(lái)
image.png
  • 什么是 URL
    • 1.我們?cè)跒g覽器的地址欄中輸入的地址其實(shí)就是URL
    • 2.URL格式：
      • 127.0.0.1/index.html （瀏覽器會(huì)自動(dòng)補(bǔ)全http:和：80）
      • http://127.0.0.1/index.html ( 瀏覽器會(huì)自動(dòng)補(bǔ)全：80）
      • http://127.0.0.1:80/index.html（完整格式）
      • 協(xié)議類(lèi)型://ip地址:端口號(hào)/資源路徑/資源名稱(chēng)
    • 3.URL拆分
      • 網(wǎng)絡(luò)協(xié)議類(lèi)型 http://
      • 服務(wù)器IP地址 127.0.0.1
      • 服務(wù)器端口號(hào) : 80
        資源路徑 網(wǎng)頁(yè)在服務(wù)器上的路徑
        資源名稱(chēng) index.html
image.png


  • 了解了什么是URL和URL的組成部分之后，我們就來(lái)聊一聊 同源策略
    • 什么叫同源？
      URL由協(xié)議、域名、端口和路徑組成，如果兩個(gè)URL( 也就是請(qǐng)求的URL地址，必須與瀏覽器上的URL地址處于同域[ 同域就是協(xié)議、域名和端口相同 ])則表示他們同源。 相反，只要協(xié)議，域名，端口有任何一個(gè)的不同，就被當(dāng)作是跨域。
看圖更明白


<!DOCTYPE html>

作用：指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

<html lang="en">

向搜索引擎表示該頁(yè)面是html語(yǔ)言，并且語(yǔ)言為英文網(wǎng)站，其"lang"的意思就是“l(fā)anguage”，語(yǔ)言的意思，而“en”即表示english

  • html、xhtml、html5的區(qū)別
    • html:語(yǔ)法非常松散,容錯(cuò)性強(qiáng)
    • xhtml:更為嚴(yán)格,要求標(biāo)簽必須小寫(xiě),必須閉合,標(biāo)簽中的屬性必須使用引號(hào)引起來(lái)等.
    • html5:是html的下一個(gè)版本,除了非常松散容錯(cuò)性強(qiáng)之外,還增加了許多新特性

 <base target="_blank">

用來(lái)統(tǒng)一該頁(yè)面的所有超鏈接以什么方式打開(kāi)

meta標(biāo)簽常見(jiàn)使用

  • 字符集(簡(jiǎn)單說(shuō)就是字符的集合)
<meta charset="utf-8">
  • 頁(yè)面描述，用于搜索引擎收錄
<meta name="description" content=" " />
  • 頁(yè)面關(guān)鍵詞，用于被搜索引擎收錄
<meta name="keyword" content=" " />
  • 兼容IE
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 禁止用戶(hù)縮放/做移動(dòng)端適配等
<meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 設(shè)置標(biāo)簽頁(yè)的小圖標(biāo)
<link rel="shortcut icon" href="圖片地址.ico" type="image/x-icon">



html標(biāo)簽

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

注意:企業(yè)開(kāi)發(fā)中一個(gè)頁(yè)面只能有一個(gè)<h1></h1>標(biāo)簽,而且要慎用h系列的標(biāo)簽


  • SEO簡(jiǎn)介

    • 全稱(chēng)：Search English Optimization，搜索引擎優(yōu)化。自從有了搜索引擎，SEO便誕生了。

    • 存在的意義：為了提升網(wǎng)頁(yè)在搜索引擎自然搜索結(jié)果中的收錄數(shù)量以及排序位置而做的優(yōu)化行為。簡(jiǎn)言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網(wǎng)站，并且在別人訪問(wèn)時(shí)網(wǎng)站能排在前面。

    • 分類(lèi)：白帽SEO和黑帽SEO。白帽SEO，起到了改良和規(guī)范網(wǎng)站設(shè)計(jì)的作用，使網(wǎng)站對(duì)搜索引擎和用戶(hù)更加友好，并且網(wǎng)站也能從搜索引擎中獲取合理的流量，這是搜索引擎鼓勵(lì)和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷來(lái)獲取更多用戶(hù)的訪問(wèn)量，這類(lèi)行為大多是欺騙搜索引擎，一般搜索引擎公司是不支持與鼓勵(lì)的。本文針對(duì)白帽SEO，那么白帽SEO能做什么呢？

        1. 對(duì)網(wǎng)站的標(biāo)題、關(guān)鍵字、描述精心設(shè)置，反映網(wǎng)站的定位，讓搜索引擎明白網(wǎng)站是做什么的；
        1. 網(wǎng)站內(nèi)容優(yōu)化：內(nèi)容與關(guān)鍵字的對(duì)應(yīng)，增加關(guān)鍵字的密度；
        1. 在網(wǎng)站上合理設(shè)置Robot.txt文件；
        1. 生成針對(duì)搜索引擎友好的網(wǎng)站地圖；
        1. 增加外部鏈接，到各個(gè)網(wǎng)站上宣傳

  • 前端SEO
    通過(guò)網(wǎng)站的結(jié)構(gòu)布局設(shè)計(jì)和網(wǎng)頁(yè)代碼優(yōu)化，使前端頁(yè)面既能讓瀏覽器用戶(hù)能夠看懂，也能讓“蜘蛛”看懂。

  • 一、網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡(jiǎn)單、開(kāi)門(mén)見(jiàn)山，提倡扁平化結(jié)構(gòu)。
    ??一般而言，建立的網(wǎng)站結(jié)構(gòu)層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網(wǎng)站目錄結(jié)構(gòu)超過(guò)三級(jí)，“蜘蛛”便不愿意往下爬，“萬(wàn)一天黑迷路了怎么辦”。并且根據(jù)相關(guān)調(diào)查：訪客如果經(jīng)過(guò)跳轉(zhuǎn)3次還沒(méi)找到需要的信息，很可能離開(kāi)。因此，三層目錄結(jié)構(gòu)也是體驗(yàn)的需要。為此我們需要做到：

    • 1.控制首頁(yè)鏈接數(shù)量
      ??網(wǎng)站首頁(yè)是權(quán)重最高的地方，如果首頁(yè)鏈接太少，沒(méi)有“橋”，“蜘蛛”不能繼續(xù)往下爬到內(nèi)頁(yè)，直接影響網(wǎng)站收錄數(shù)量。但是首頁(yè)鏈接也不能太多，一旦太多，沒(méi)有實(shí)質(zhì)性的鏈接，很容易影響用戶(hù)體驗(yàn)，也會(huì)降低網(wǎng)站首頁(yè)的權(quán)重，收錄效果也不好。
      ??因此對(duì)于中小型企業(yè)網(wǎng)站，建議首頁(yè)鏈接在100個(gè)以?xún)?nèi)，鏈接的性質(zhì)可以包含頁(yè)面導(dǎo)航、底部導(dǎo)航、錨文字鏈接等等，注意鏈接要建立在用戶(hù)的良好體驗(yàn)和引導(dǎo)用戶(hù)獲取信息的基礎(chǔ)之上。

    • 2.扁平化的目錄層次
      ??盡量讓“蜘蛛”只要跳轉(zhuǎn)3次，就能到達(dá)網(wǎng)站內(nèi)的任何一個(gè)內(nèi)頁(yè)。扁平化的目錄結(jié)構(gòu)，比如：“植物”--> "水果" --> "蘋(píng)果"、“桔子”、“香蕉”，通過(guò)3級(jí)就能找到香蕉了。

    • 3.導(dǎo)航優(yōu)化
      ??其次，在每一個(gè)網(wǎng)頁(yè)上應(yīng)該加上面包屑導(dǎo)航，好處：從用戶(hù)體驗(yàn)方面來(lái)說(shuō)，可以讓用戶(hù)了解當(dāng)前所處的位置以及當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置，幫助用戶(hù)很快了解網(wǎng)站組織形式，從而形成更好的位置感，同時(shí)提供了返回各個(gè)頁(yè)面的接口，方便用戶(hù)操作；對(duì)“蜘蛛”而言，能夠清楚的了解網(wǎng)站結(jié)構(gòu)，同時(shí)還增加了大量的內(nèi)部鏈接，方便抓取，降低跳出率。

    • 4.網(wǎng)站的結(jié)構(gòu)布局--不可忽略的細(xì)節(jié)
      ??頁(yè)面頭部：logo及主導(dǎo)航，以及用戶(hù)的信息。
      ??頁(yè)面主體：左邊正文，包括面包屑導(dǎo)航及正文；右邊放熱門(mén)文章及相關(guān)文章，好處：留住訪客，讓訪客多停留，對(duì)“蜘蛛”而言，這些文章屬于相關(guān)鏈接，增強(qiáng)了頁(yè)面相關(guān)性，也能增強(qiáng)頁(yè)面的權(quán)重。
      ??頁(yè)面底部：版權(quán)信息和友情鏈接。
      ??特別注意：分頁(yè)導(dǎo)航寫(xiě)法，推薦寫(xiě)法：“首頁(yè) 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據(jù)相應(yīng)頁(yè)碼直接跳轉(zhuǎn)，下拉框直接選擇頁(yè)面跳轉(zhuǎn)。而下面的寫(xiě)法是不推薦的，“首頁(yè) 下一頁(yè) 尾頁(yè)”，特別是當(dāng)分頁(yè)數(shù)量特別多時(shí)，“蜘蛛”需要經(jīng)過(guò)很多次往下爬，才能抓取，會(huì)很累、會(huì)容易放棄。

    • 5.控制頁(yè)面的大小，減少http請(qǐng)求，提高網(wǎng)站的加載速度。
      ??一個(gè)頁(yè)面最好不要超過(guò)100k，太大，頁(yè)面加載速度慢。當(dāng)速度很慢時(shí)，用戶(hù)體驗(yàn)不好，留不住訪客，并且一旦超時(shí)，“蜘蛛”也會(huì)離開(kāi)。

  • 二、網(wǎng)頁(yè)代碼優(yōu)化

    • 1.<title>標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁(yè)面的<title>標(biāo)題中不要設(shè)置相同的內(nèi)容。標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁(yè)面的<title>標(biāo)題中不要設(shè)置相同的內(nèi)容。

    • 2.<meta keywords>標(biāo)簽：關(guān)鍵詞，列舉出幾個(gè)頁(yè)面的重要關(guān)鍵字即可，切記過(guò)分堆砌。

    • 3.<meta description>標(biāo)簽：網(wǎng)頁(yè)描述，需要高度概括網(wǎng)頁(yè)內(nèi)容，切記不能太長(zhǎng)，過(guò)分堆砌關(guān)鍵詞，每個(gè)頁(yè)面也要有所不同。

    • 4.<body>中的標(biāo)簽：盡量讓代碼語(yǔ)義化，在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)臉?biāo)簽，用正確的標(biāo)簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6 是用于標(biāo)題類(lèi)的，<nav>標(biāo)簽是用來(lái)設(shè)置頁(yè)面主導(dǎo)航的等。

    • 5.<a>標(biāo)簽：頁(yè)內(nèi)鏈接，要加 “title” 屬性加以說(shuō)明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因?yàn)橐坏爸┲搿迸懒送獠挎溄又?，就不?huì)再回來(lái)了。

    • 6.正文標(biāo)題要用<h1>標(biāo)簽：“蜘蛛” 認(rèn)為它最重要，若不喜歡<h1>的默認(rèn)樣式可以通過(guò)CSS設(shè)置。盡量做到正文標(biāo)題用<h1>標(biāo)簽，副標(biāo)題用<h2>標(biāo)簽, 而其它地方不應(yīng)該隨便亂用 h 標(biāo)題標(biāo)簽。

    • 7.<br>標(biāo)簽：只用于文本內(nèi)容的換行。

    • 8.表格應(yīng)該使用<caption>表格標(biāo)題標(biāo)簽。

    • 9.<img>應(yīng)使用 "alt" 屬性加以說(shuō)明。

    • 10.<strong>、<em>標(biāo)簽 : 需要強(qiáng)調(diào)時(shí)使用。
      ???<strong>標(biāo)簽在搜索引擎中能夠得到高度的重視，它能突出關(guān)鍵詞，表現(xiàn)重要的內(nèi)容，<em>標(biāo)簽強(qiáng)調(diào)效果僅次于<strong>標(biāo)簽。
      ???<b>、<i>標(biāo)簽: 只是用于顯示效果時(shí)使用，在SEO中不會(huì)起任何效果。

    • 11.文本縮進(jìn)不要使用特殊符號(hào) &nbsp; 應(yīng)當(dāng)使用CSS進(jìn)行設(shè)置。版權(quán)符號(hào)不要使用特殊符號(hào) &copy;可以直接使用輸入法，拼“banquan”，選擇序號(hào)5就能打出版權(quán)符號(hào)?。

    • 12.巧妙利用CSS布局，將重要內(nèi)容的HTML代碼放在最前面，最前面的內(nèi)容被認(rèn)為是最重要的，優(yōu)先讓“蜘蛛”讀取，進(jìn)行內(nèi)容關(guān)鍵詞抓取。

    • 13.重要內(nèi)容不要用JS輸出，因?yàn)椤爸┲搿辈徽J(rèn)識(shí)。

    • 14.盡量少使用iframe框架,因?yàn)椤爸┲搿币话悴粫?huì)讀取其中的內(nèi)容。

    • 15.謹(jǐn)慎使用display：none ;對(duì)于不想顯示的文字內(nèi)容，應(yīng)當(dāng)設(shè)置z-index或設(shè)置到瀏覽器顯示器之外。因?yàn)樗阉饕鏁?huì)過(guò)濾掉display:none其中的內(nèi)容。

    • 16.不斷精簡(jiǎn)代碼。

    • 17.js代碼如果是操作DOM操作，應(yīng)盡量放在body結(jié)束標(biāo)簽之前，html代碼之后。


<a   title="你能看到我"  target="_self">鼠標(biāo)放上來(lái)就能看到title內(nèi)容</a>
  • 功能與屬性
    • 錨點(diǎn)：a標(biāo)簽href里面寫(xiě)上需要跳到位置的標(biāo)簽的ID名
    • 跳轉(zhuǎn)到指定頁(yè)面的指定部分,需要在a標(biāo)簽的href里添加該頁(yè)面的地址+指定部分的ID
    • 例: <a href="index.html#center" >跳轉(zhuǎn)到指定頁(yè)面的指定部分</a>
    • href 里面有個(gè)tel：電話(huà)號(hào)的屬性，可以用這個(gè)來(lái)?yè)艽螂娫?huà)，可以用來(lái)做電商商家電話(huà)功能
    • 例:<a href="tel:182101*****">作者電話(huà)</a> 
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" title="郁金香"/>
  • 常用屬性：
    • src 圖片的路徑
    • alt 圖片地址錯(cuò)誤時(shí)顯示給用戶(hù)看的內(nèi)容
    • title 鼠標(biāo)懸停在圖片上看到的提示
<ul>
 <li>
    <p>我是P標(biāo)簽</p>
    <a href=" ">我是a標(biāo)簽</a>
 </li>
 <li></li>
</ul>
  • 無(wú)序列表：
    • 注意點(diǎn)：ul里面只能放li標(biāo)簽,但是li標(biāo)簽里面可以放其他標(biāo)簽
<table border="1" cellspacing="0">
  <caption></caption>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
  • 表格標(biāo)簽：
    • <table border="1"></table>
    • 表格標(biāo)簽?zāi)J(rèn)邊框是0,如想要看到效果如要給table添加border="1"
    • <caption></caption>讓表格標(biāo)題居中于表格中間,必須放在table標(biāo)簽后面
    • <th></th>會(huì)讓標(biāo)題自動(dòng)加粗和居中
<input type="text">
  • input 標(biāo)簽
    • type 屬性的取值
    • button 按鈕
    • checkbox 多選框
    • file 上傳文件
    • image 圖片
    • password 密碼
    • radio 單選框
    • reset 清空內(nèi)容
    • submit 提交
    • text 文本
<textarea name="" cols="40" rows="8" style="resize: none">    
  這是一個(gè)多行的文本輸入框
  resize是控制輸入框不可拖動(dòng)
</textarea>
  • 視頻標(biāo)簽的兩種格式:
<video src="視頻路徑" autoplay="autoplay" controls="controls" poster=""></video>

<video>
  <source src="視頻路徑"  type="video/webm"></source>
  <source src=""  type="video/mp4"></source>
  <source src=""  type="video/ogg"></source>
</video>
視頻標(biāo)簽屬性參考
  • 音頻標(biāo)簽
<audio src="" autoplay="autoplay" controls="controls"></audio>

  • 屬性和注意點(diǎn)：

    • 屬性：可參考video屬性(視頻標(biāo)簽屬性參考)
    • 注意：audio標(biāo)簽的使用和video標(biāo)簽使用基本一樣，只不過(guò)有三個(gè)不能用。height / width / poster

  • 概要和詳情標(biāo)簽

<details>
  <summary style="outline: none">[這是我的簡(jiǎn)書(shū)](http://www.itdecent.cn/p/3c4c0ef28502)</summary>
  這是我的第一篇簡(jiǎn)書(shū)文章，如果對(duì)你有幫助，可以點(diǎn)個(gè)贊支持一下 !!
</details>
  • 跑馬燈效果
<marquee behavior="" direction="">爸爸的爸爸叫爺爺</marquee>

  • 屬性：

    • direction設(shè)置滾動(dòng)方向 ；值：left / right / up / down
    • scrollamount設(shè)置滾動(dòng)速度 ；值：越大越快
    • loop設(shè)置滾動(dòng)次數(shù)，默認(rèn)是-1，無(wú)線滾動(dòng)，數(shù)字越小次數(shù)越少
    • behavior設(shè)置滾動(dòng)類(lèi)型，slide滾動(dòng)到邊界就停止；alternate滾動(dòng)到邊界就彈回

  • 被廢棄的標(biāo)簽

    • <br> 不另起段落換行
    • <hr> 一條橫線
    • <font></font>
    • <b>加粗</b> == <strong></strong>
    • <u>加下劃線</u> == <ins></ins>
    • <i>傾斜</i> <em></em>
    • <s>加中劃線</s> == <del></del>


HTML常見(jiàn)面試題

  • HTML5有哪些新特性

    • 1.拖拽釋放(Drag and drop) API
    • 2.語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
    • 3.音頻、視頻API(audio,video)
    • 4.畫(huà)布(Canvas) API
    • 5.地理(Geolocation) API
    • 6.表單控件，calendar、date、time、email、url、search
    • 7.新的技術(shù)webworker, websocket, Geolocation
    • 8.本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
      1. sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

  • 簡(jiǎn)述一下對(duì)HTML語(yǔ)義化的理解

    • 1.去掉或丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)。
    • 2.有利于SEO和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的信息，爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
    • 3.方便其它設(shè)備解析。
    • 4.便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化根據(jù)可讀性。

  • DOCTYPE有什么作用？標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分？它們有何意義?

    • 作用：告訴瀏覽器使用哪個(gè)版本的HTML規(guī)范來(lái)渲染文檔。DOCTYPE不存在或形式不正確會(huì)導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。
    • 標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行；
    • 混雜模式（Quirks mode）中頁(yè)面是一種比較寬松的向后兼容的方式顯示。



參考：

HTML字符編碼

W3Cschool

字符實(shí)體

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容