一、HTML之——總結(jié)

HTML總結(jié)

1、 網(wǎng)頁的標(biāo)題、注釋、屬性

  • 網(wǎng)頁結(jié)構(gòu)
    ···
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>

</body>
</html>
···
html根標(biāo)簽，一個頁面中有且只有一個根標(biāo)簽，網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在html根標(biāo)簽中
head標(biāo)簽，該標(biāo)簽中的內(nèi)容，不會在網(wǎng)頁中直接顯示，它用來幫助瀏覽器解析頁面
body標(biāo)簽用來設(shè)置網(wǎng)頁的主體內(nèi)容，網(wǎng)頁中所有可見的內(nèi)容，都應(yīng)該在body中編寫

注釋：
在這個結(jié)構(gòu)中，可以來編寫HTML的注釋注釋中的內(nèi)容，不會在頁面中顯示，但是可以在源碼中查看。
我們可以通過編寫注釋來對代碼進行描述，從而幫助其他的開發(fā)人員工作，一定要養(yǎng)成良好的編寫注釋的習(xí)慣，但是注釋一定要簡單明了。

屬性：
可以通過屬性來設(shè)置標(biāo)簽如何處理標(biāo)簽中的內(nèi)容可以在開始標(biāo)簽中添加屬性
屬性需要寫在開始標(biāo)簽中，實際上就是一個名值對的結(jié)構(gòu)，屬性名="屬性值"，一個標(biāo)簽中可以同時設(shè)置多個屬性，屬性之間用空格隔開

2、 文檔聲明
h5的文檔聲明，聲明當(dāng)前的網(wǎng)頁是按照HTML5標(biāo)準(zhǔn)編寫的編寫網(wǎng)頁時一定要將此聲明寫在網(wǎng)頁的最上邊，如果不寫文檔聲明，則會導(dǎo)致有些瀏覽器進入一個怪異模式，導(dǎo)致瀏覽器無法正常解析顯示網(wǎng)頁，所以為了避免進入該模式，一定要寫文檔聲明

3、 設(shè)置字符集
需要告訴瀏覽器，網(wǎng)頁所采用的編碼字符集，meta標(biāo)簽用來設(shè)置網(wǎng)頁的一些元數(shù)據(jù)，比如網(wǎng)頁的字符集、關(guān)鍵字、簡介meta是一個自結(jié)束標(biāo)簽，編寫一個自結(jié)束標(biāo)簽時，可以在開始標(biāo)簽中添加一個/
<<< <meta charset = 'utf-8'>

4、 常用的標(biāo)簽

  • 標(biāo)題標(biāo)簽
    在HTML中，一共有六級標(biāo)題標(biāo)簽，h1h6在顯示效果上h1最大，h6最小，但是文字的大小我們并不關(guān)心。使用HTML標(biāo)簽時，關(guān)心的是標(biāo)簽的語義，我們使用的標(biāo)簽都是語義化標(biāo)簽，6級標(biāo)題中，h1的最重要，表示一個網(wǎng)頁中的主要內(nèi)容，h2h6重要性依次降低，對于搜索引擎來說，h1的重要性僅次于title，搜索引擎檢索完title，會立即查看h1中的內(nèi)容。h1標(biāo)簽非常重要，它會影響到頁面在搜索引擎中的排名，頁面只能寫一個h1。一般頁面中標(biāo)題標(biāo)簽只使用h1、h2、h3，h3以后的基本不使用

  • 段落標(biāo)簽
    段落標(biāo)簽用于表示內(nèi)容中的一個自然段
    使用p標(biāo)簽來表示一個段落
    p標(biāo)簽中的文字默認會獨占一行，并且段與段之間會有一個間距

  • 換行

    在HTML中，字符之間寫再多的空格，瀏覽器也會當(dāng)成一個空格解析，換行也會當(dāng)成一個空格解析。在頁面中可以使用br標(biāo)簽來表示一個換行，br標(biāo)簽是一個自結(jié)束標(biāo)簽

  • <hr>
    hr標(biāo)簽也是一個自結(jié)束標(biāo)簽，可以在頁面中生成一條水平線

5、 實體
在HTML中，一些如<、>這種特殊字符是不能直接使用的，需要使用一些特殊的符號來表示這些特殊字符，這些特殊符號稱為實體（轉(zhuǎn)義字符），瀏覽器解析到實體時，會自動將實體轉(zhuǎn)換為其對應(yīng)的字符

實體的語法 &實體的名字;
< &lt;
> &gt;
空格 &nbsp;
版權(quán)符號 &copy;

6、 圖像
使用img標(biāo)簽來向網(wǎng)頁中引入一個外部圖片
img標(biāo)簽也是一個自結(jié)束標(biāo)簽
屬性：
src：設(shè)置一個外部圖片的路徑
alt：可以用來設(shè)置在圖片不能顯示時，對圖片的描述
搜索引擎可以通過alt屬性來識別不同的圖片
如果不寫alt屬性，則搜索引擎不會對img中的圖片進行收錄
width：可以用來修改圖片的寬度，一般使用px作為單位
height：可以用來修改圖片的高度，一般使用px作為單位
寬度和高度兩個屬性如果只設(shè)置一個，另一個也會同時等比例調(diào)整大小
如果兩值同時指定，則按照你指定的值來設(shè)置
一般開發(fā)中除了自適應(yīng)的頁面，不建議設(shè)置width和height

7、 相對路徑_圖片格式
src屬性配置的是圖片的路徑，目前我們所使用的路徑全都是相對路徑
相對路徑：相對路徑指相對于當(dāng)前資源所在目錄的位置
可以使用../來返回上一級目錄，返回幾級目錄就寫幾個../
圖片的格式:

  • JPEG（JPG）
    - JPEG圖片支持的顏色比較多，圖片可以壓縮，但是不支持透明
    - 一般使用JPEG來保存照片等顏色豐富的圖片
  • GIF
    - GIF支持的顏色少，只支持簡單的透明，支持動態(tài)圖
    - 圖片顏色單一或者是動態(tài)圖時可以使用GIF
  • PNG
    - PNG支持的顏色多，并且支持復(fù)雜的透明
    - 可以用來顯示顏色復(fù)雜的透明的圖片
    圖片的使用原則：
    效果不一致，使用效果好的
    效果一致，使用小的

8、 XHTML的語法規(guī)范

  • HTML中不區(qū)分大小寫，但是我們一般都使用小寫
  • HTML中的注釋不能嵌套
  • HTML標(biāo)簽必須結(jié)構(gòu)完整，要么成對出現(xiàn)，要么自結(jié)束標(biāo)簽
  • 瀏覽器盡最大的努力正確地解析頁面，你所有的不符合語法規(guī)范的內(nèi)容瀏覽器都會為你自動修正，但是有些情況會修正錯誤
  • HTML標(biāo)簽可以嵌套，但是不能交叉嵌套
  • HTML標(biāo)簽中的屬性必須有值，且值必須加引號（單引號雙引號都可以）

9、 內(nèi)聯(lián)框架
使用內(nèi)聯(lián)框架可以引入一個外部的頁面使用iframe來創(chuàng)建一個內(nèi)聯(lián)框架
屬性：

  • src：指向一個外部頁面的路徑，可以使用相對路徑
  • width：
  • height：
  • name：可以為內(nèi)聯(lián)框架指定一個name屬性
    在現(xiàn)實開發(fā)中不推薦使用內(nèi)聯(lián)框架，因為內(nèi)聯(lián)框架中的內(nèi)容不會被搜索引擎所檢索

10、 超鏈接
使用超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到另一個頁面使用a標(biāo)簽來創(chuàng)建一個超鏈接
屬性：
href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址，可以寫一個相對路徑，也可以寫一個完整的地址
a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值：

  • _self：表示在當(dāng)前窗口中打開（默認值）
  • _blank：在新的窗口中打開鏈接可以設(shè)置一個內(nèi)聯(lián)框架的name屬性值，鏈接將會在指定的內(nèi)聯(lián)框架中打開

11、 CSS

<head>
    <meta charset="utf-8" />
    <title>CSS</title>
    <!-- 
        也可以將CSS樣式編寫到head中的style標(biāo)簽里，稱為內(nèi)部樣式表
        將樣式表編寫的style標(biāo)簽中，然后通過CSS選擇器選中指定元素
        然后可以同時為這些元素一起設(shè)置樣式，這樣可以使樣式進一步的復(fù)用
        將樣式表編寫到style標(biāo)簽中，也可以使表現(xiàn)和結(jié)構(gòu)進一步分離，它也是我們推薦的使用方式
    <style type="text/css">
        p{
            color:red;
            font-size:40px;
        }
    </style>
    -->
    
    <!-- 
        還可以將樣式表編寫到外部的CSS文件中，然后通過link標(biāo)簽來將外部的CSS文件引入到當(dāng)前頁面中
        這樣外部文件中的CSS樣式表將會應(yīng)用到當(dāng)前頁面中
        將CSS樣式統(tǒng)一編寫到外部的樣式表中，完全使結(jié)構(gòu)和表現(xiàn)分離，可以使樣式表在不同的頁面中使用
        最大限度地使樣式可以進行復(fù)用，將樣式統(tǒng)一寫在樣式表中，然后通過link標(biāo)簽引入
        可以利用瀏覽器的緩存，加快用戶訪問的速度，提高了用戶體驗
        所以在開發(fā)中我們最推薦使用的方式就是外部的CSS文件
    -->
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <!-- 
        可以將CSS樣式編寫到元素的style屬性當(dāng)中，這種樣式稱為內(nèi)聯(lián)樣式
        內(nèi)聯(lián)樣式只對當(dāng)前的元素中的內(nèi)容起作用，內(nèi)聯(lián)樣式不方便復(fù)用
        內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合，不方便后期的維護，不推薦使用的
    <p style="color:red;font-size:40px;">床前明月光，疑是地上霜</p>
    <p style="color:red;font-size:40px;">舉頭望明月，低頭思故鄉(xiāng)</p>
    -->
    <p>舉頭望明月，低頭思故鄉(xiāng)</p>
    <p>舉頭望明月，低頭思故鄉(xiāng)</p>
    <p>舉頭望明月，低頭思故鄉(xiāng)</p>
</body>

12、 CSS語法
CSS的注釋，作用和HTML注釋類似，只不過它必須編寫在style標(biāo)簽中，或者是CSS文件中
CSS的語法：選擇器 聲明塊

  • 選擇器：
    • 通過選擇器可以選中頁面中指定的元素，并且將聲明塊中的樣式應(yīng)用到選擇器對應(yīng)的元素上
  • 聲明塊：
    • 聲明塊緊跟在選擇器的后邊，使用一對{}括起來
    • 聲明塊中實際上就是一組一組的名值對結(jié)構(gòu)
    • 這一組一組的名值對我們稱為聲明
    • 在一個聲明塊中可以寫多個聲明，多個聲明之間使用;隔開
    • 聲明的樣式名和樣式值之間使用:來連接

13、 開發(fā)工具
14、 塊和內(nèi)聯(lián)
塊元素和內(nèi)聯(lián)元素:

  • 塊元素
    所謂的塊元素就是會獨占一行的元素?zé)o論它的內(nèi)容有多少，它都會獨占一整行
    常見的塊元素：div p h1 h2 h3……
    div這個標(biāo)簽沒有任何語義，就是一個純粹的塊元素并且不會為它里邊的元素設(shè)置任何的默認樣式,div元素主要用來對頁面進行布局的。
  • 內(nèi)聯(lián)元素（行內(nèi)元素）
    所謂的行內(nèi)元素指的是只占自身大小的元素，不會占用一行
    常見的內(nèi)聯(lián)元素：span a img iframe
    span沒有任何語義，span標(biāo)簽專門用來選中文字，然后為文字來設(shè)置樣式

塊元素主要用來做頁面中的布局，內(nèi)聯(lián)元素主要用來選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素，而不會使用內(nèi)聯(lián)元素去包含一個塊元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何其它的塊元素
15、 meta標(biāo)簽

  • 使用meta標(biāo)簽還可以用來設(shè)置網(wǎng)頁的關(guān)鍵字
  • 還可以用來指定網(wǎng)頁的描述搜索引擎在檢索頁面時，會同時槍擊頁面中的關(guān)鍵詞和描述，但是這兩個值不會影響頁面在搜索引擎中的排名
  • 使用meta可以用來做請求的重定向
    <meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" />
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,632評論 1贊 45
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3贊 119
  • 今晚看了產(chǎn)品篇的前四章，感悟到一件產(chǎn)品，用戶是最重要的，一件成功的產(chǎn)品，肯定把用戶放在最重要的位置。而小米就是...
    口十日月日央閱讀 300評論 0贊 1
  • 每次在地鐵里面都生怕慢走一步撞到別人，被撞倒的人嘴里面說著“沒關(guān)系”，眼睛里面卻表現(xiàn)著“因為你浪費了我3秒鐘，看，...
    笑靨1994閱讀 758評論 0贊 1