HTML重要知識合集

時間 2020-07-18

標籤 html 重要知識合集欄目 HTML 简体版

原文原文鏈接

HTML

[](#html是什麼)HTML是什麼？

HTML（Hyper Text Markup Language）超文本標記語言。超文本爲超級文本，能夠包含：圖片，音頻，視頻，超連接，表格等等。html

歷史更新迭代，html的歷史瀏覽器

HTML5 是最新版本 HTML4.01 是上一個版本服務器

document 文檔架構

c/s架構模式客戶端/服務器ide

有LOL，淘寶字體

須要不斷維護客戶端編碼

b/s架構模式瀏覽器/服務器 brower 瀏覽器spa

有QQ空間，微博code

方便快捷簡便視頻

如下是HTML文檔的初始格式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>這是個人第一個文檔</title>
    </head>
    <body>
        
    </body>
</html>

[](#解析以下)解析以下

<!DOCTYPE html> 聲明式語句，聲明一下當前的html版本是HTML5
<title>這是個人第一個網頁</title> 標題標籤
<meta charset="UTF-8"> 說明一下當前文檔的解讀編碼爲中文
<body></body> 網頁中能看到的內容，寫在body中
<head></head> 一般放置網頁的設置
<html></html> 全部標籤的根標籤
 註釋快捷鍵 ctrl+/
- *

[](#注意事項)注意事項

標籤是分類型的單標籤雙標籤
雙標籤 <標籤名稱>標籤的內容</標籤名稱> <開始標籤></結束標籤>
單標籤 <單標籤 />
屬性標籤是有屬性的 <開始標籤的標籤名稱屬性=「屬性值」 name=value> 標籤名稱屬性之間以空格區分
標籤是有嵌套關係的注意正確嵌套
標籤是有關係的父子關係兄弟關係後代關係

標籤和轉義符相關知識

  是空格(轉義符)
< > 分別是< 和 >
<p></p> 段落標籤
<span></span> 純粹的文本標籤
<img> 圖片標籤
src:圖片資源(source) 相對路徑（本地圖片）絕對路徑（線上圖片） base64
width height
- px
- 百分比：以父標籤的寬度爲依賴
alt 圖片加載不出來時顯示出來的文字
title 鼠標移入時，圖片顯示出來的文字

HTML標籤相關知識及顏色分類

[](#音頻-視頻)音頻、視頻

<audio controls="controls" src=""></audio>
    <video controls="controls" src=""></video>
    <!--controls 控件是否可見-->

由於不一樣瀏覽器顯示效果不一樣的緣由，將在第二階段詳細解釋。

[](#有序列表)有序列表

代碼以下

<!--type的值能夠爲，「a」,「A」,「i」,「I」,「1」-->
    <ol type = "1">
        <li></li>
        <li></li>
        <li></li>
    </ol>

效果實現以下：

1.
2.
3.

[](#無序列表)無序列表

代碼以下

<!--type的值能夠爲，square 正方形 desc 實心圓 circle 空心圓 none-->
    <ul type = "none">
        <li>明天放假</li>
        <li>好開心</li>
        <li>Yeah</li>
    </ul>

效果實現以下：

明天放假
好開心
Yeah

[](#自定義列表)自定義列表

代碼以下

<!--起始於<dl>標籤，每一個列表項以<dt>開始，列表項註釋<dd>-->
    <dl>
        <dt>我是王超</dt>
        <dd>來自山西臨汾</dd>
    </dl>

效果實現以下：

我是王超
    來自山西臨汾

[](#超連接標籤)超連接標籤

<!--href能夠是本地連接，也能夠是線上連接
        target是指打開當前網頁的方式，self爲默認自身窗口打開，_blank爲在新窗口打開
    -->
    <a href="http://www.baidu.com" target="self">請跳轉到百度</a>

<!--id 屬性 
        是一個全局屬性，每一個標籤均可以有的屬性
        id表示惟一性  每一個標籤只有一個id屬性  id屬性不能夠重複  禁止以數字開頭
    -->

[](#在當前頁面進行跳轉)在當前頁面進行跳轉

<!--同頁面跳轉
        須要有兩個值：
            href:#id;
            要跳轉的地方要有id屬性
    -->
    
    <a href = "#hello">跳轉到指定位置</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p id = "hello">你好，大舅哥</p>

[](#表格)表格

代碼以下

<table border="1px">
        <!--tr表明行-->
        <tr>
            <!--colspan橫跨多少列-->
            <!--td表明列-->
            <td colspan="5">swt2007開班</td>
        </tr>
        <tr>
            <!--th表示加粗-->
            <th>序號</th>
            <th>學生姓名</th>
            <td>聯繫方式</td>
            <td>畢業院校</td>
            <td>專業</td>
        </tr>
        <tr>
            <td>1</td>
            <td>楊濤</td>
            <td>1234567897</td>
            <td>山大</td>
            <td>軟工</td>
        </tr>
    </table>
    
    <table border="1px">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <!--rowspan豎跨多少行-->
            <td rowspan="3">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
        </tr>
    </table>
    
    <!--cellpadding 單元格內容和邊框中間的間距
        cellspacing 單元格和單元格之間的間距
    -->
    <table border="1px" cellpadding="10" cellspacing="20">
        <!--表格的標題-->
        <caption>我的簡歷</caption>

[](#表單)表單

代碼以下

<!--表單  註冊-->
    <!--
        註冊
        搜索
    -->
    <span>用戶名：</span><input type="text"><br>
    <span>密碼：</span><input type="password"><br>
    <label>
        <input type="radio" name="sex" checked="checked">男
    </label>
    <label>
        <input type="radio" name="sex">女
    </label>
    

    <!--
        <input>單行文本框
        <input type="password">密碼框
        <input type="radio">單選框
            如何讓單選框關聯起來？
                給這些須要關聯的單選框一個 name屬性  屬性值相等
            如何給能夠選擇的框 默認選中效果？
                給其添加 checked屬性 屬性值爲checked
            如何能點擊文本實現單選效果？
                給其外面添加label標籤，括起來

    -->

    <!--多選框-->
    <p>請說出您的興趣愛好有哪些？</p>
    <label>
        <input type="checkbox" checked="checked">讀書
    </label>
    <label>
        <input type="checkbox">看報
    </label>
    <label>
        <input type="checkbox">嗑瓜子
    </label>

[](#下拉列表)下拉列表

代碼以下

<!--下拉列表-->
    省：
    <select>
        <option>山西省</option>
        <option>陝西省</option>
        <option>河南省</option>
    </select>

    市：
    <select>
        <option>太原</option>
        <option>大同</option>
        <option>忻州</option>
    </select>
    
    <!--文本域-->
    <!--查詢 如何設置文本域寬高，如何禁止拉伸-->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    
    <!--按鈕-->
    <button>提交</button>
    <!--value 值 也就是input的內容（value的值就是框框裏的內容）-->
    <input type="button" value="肯定">

[](#標題標籤)標題標籤

h1-h6 代碼以下

<!--標題（h1-h6）-->
    <h1>我是最大的標題</h1>
    <!--h4和正常文本的字體大小一致-->
    <h4>標題</h4>
    <p>正常文本</p>

    <!--標籤是有權重的-->

實現效果以下：

[](#我是最大的標題)我是最大的標題

[](#標題)標題

正常的文本

[](#標籤的分類)標籤的分類

塊元素（block）：單獨佔據一整行，能夠改變寬高 ul ol p 默認寬度：父級容器的100%
內聯塊元素（inline-block）：不獨佔整行，能夠改變寬高；input button
內聯元素/行內元素（inline）：不獨佔整行，不能夠改變寬高；span a 寬度：取決於自身內容的寬度

[](#顏色的分類)顏色的分類

顏色：

三種方式

一、英文單詞：red,black,white
二、16進制 0-9 a-f     #000000(黑色) #ff0000(紅色) #00ff00(綠色) #ffffff(白色)
    三原色 rgb        #000          #f00         #fff
    越接近0就越深，越接近f就越淺
三、rgb()   每一個數值的取值範圍是0-255      rgb(0,0,0)   rgb(255,255,255)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。