【匯總】HTML 常用知識點(diǎn)

一、W3C --- web標(biāo)準(zhǔn)

  • W3C標(biāo)準(zhǔn) 即萬維網(wǎng)聯(lián)盟標(biāo)準(zhǔn)。 在線教程

  • W3C 表針 對 web 開發(fā)，進(jìn)行一系列的標(biāo)準(zhǔn)化定義

  • 網(wǎng)頁的三層結(jié)構(gòu)：html（結(jié)構(gòu)）、css（表現(xiàn)）、javaScript（行為）

符合 W3C 標(biāo)準(zhǔn)的頁面是什么樣的？

后續(xù)更新

二、HTML 基礎(chǔ)

1. HTML 是一門 超文本標(biāo)記語言，運(yùn)行在瀏覽器上，由瀏覽器解析

  • 全拼：HyperText Markup Language

  • .htm .html 都是靜態(tài)網(wǎng)頁文件的擴(kuò)展名

推薦使用 html 后綴名
htm 是歷史遺留的 8.3 文件格式，DOS 操作系統(tǒng)只能支持長度為三位的后綴名

  • HTML 是一種標(biāo)記語言，而不是一種編程語言

  • HTML 是使用標(biāo)簽來描述網(wǎng)頁的一種語言

  • web瀏覽器來讀取HTML文件，并將其作為網(wǎng)頁顯示

2. HTML 結(jié)構(gòu)

  • 一個簡單的 html 文檔
<html>

<head>
  <title>文檔的標(biāo)題</title>
</head>

<body>
  文檔的內(nèi)容... ...
</body>

</html>
  • html5 文檔
<!DOCTYPE html>             聲明文檔類型
<html>                      頁面根元素
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
 
    <h1>我的第一個標(biāo)題</h1>
     
    <p>我的第一個段落。</p>
 
</body>
</html>

(1) <!DOCTYPE html> 標(biāo)簽 聲明是 html5 文檔類型

  • <!DOCTYPE html> 聲明為 HTML5 文檔，html5只有一種聲明方式

  • HTML4 有三種聲明格式（ 不再使用 ）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

(2) <html></html> 標(biāo)簽 根元素

(3) <head></head> 標(biāo)簽 定義文檔的頭部，是所有頭部元素的容器

  • 下面這些標(biāo)簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>

(4) <body></body> 標(biāo)簽 定義文檔的主體

(5) <title></title> 標(biāo)題 雙標(biāo)簽，是 <head></head> 標(biāo)簽中唯一必須的元素

  • 在 HTML / XHTML 文檔中是必須的

  • 定義了瀏覽器工具欄的標(biāo)題、

  • 默認(rèn)顯示在收藏夾中的標(biāo)題、

  • 搜索引擎結(jié)果頁的標(biāo)題（搜索引擎）

(6) <meta> head中 單標(biāo)簽 描述了元數(shù)據(jù) 參考資料

  • 元數(shù)據(jù)不會顯示在頁面，但會被瀏覽器解析，作用如下：

    • 為搜索引擎定義關(guān)鍵詞

    • 為網(wǎng)頁定義描述內(nèi)容

    • 定義網(wǎng)頁作者

    • 每30秒中刷新當(dāng)前頁面

常用meta整理
meta 設(shè)置

<meta name="keywords" content="搜索引擎定義關(guān)鍵詞">
<meta name="description" content="網(wǎng)頁 描述內(nèi)容">
<meta name="author" content="組這名字">
<meta http-equiv="refresh" content="30">

(7) <base> head中 單標(biāo)簽 為頁面上的所有鏈接 規(guī)定默認(rèn)地址、打開方式

  • <a>、<img>、<link>、<form> 標(biāo)簽中的 URL 不再生效

  • 屬性 href="" 頁面所有鏈接的跳轉(zhuǎn)地址

  • 屬性 target="" 打開時方式： _self默認(rèn)本網(wǎng)頁中打開；_blank默認(rèn)新網(wǎng)頁中打開

(8) <link> 單標(biāo)簽 引入外部資源 （ 引入css樣式、引入瀏覽器工具欄圖標(biāo)）

  • 屬性 href=“ ” 外部資源地址

  • 屬性 rel=“ ” 規(guī)定當(dāng)前文檔 與 被連接文檔間的對應(yīng)關(guān)系

    • 值 stylesheet ：表示引入css樣式
    • 值 shortcut icon： 表示引入圖標(biāo)
    • 值 有多個
<link rel="stylesheet" type="text/css" href="mystyle.css">

<link rel="shortcut icon" >  // 路徑必須使用絕對路徑

(9) <style></style> 雙標(biāo)簽 引入外部css樣式、包含css樣式

  • 屬性 type="text/scc" 定義內(nèi)容為 css 類型

  • h5 屬性 scoped="scoped" 樣式僅僅應(yīng)用到 style 元素的父元素及其子元素

  • 引入外部樣式 不推薦 <style src="mystyle.css"></style>； 需使用 <link> 引入

(10) <script></script> 雙標(biāo)簽 引入外部腳本、包含腳本代碼；新增異步屬性

  • 屬性 src="" 規(guī)定外部腳本文件的 URL， 該屬性 具有跨域請求能力

  • 屬性 type = "text/javascript" 默認(rèn)屬性，可忽略

  • 異步屬性：--- 僅適用于外部腳本

    • 屬性 async 或 async="async" 被立即下載、解析、執(zhí)行（異步完成，與頁面渲染同時進(jìn)行）；若置于頂端引入外部js腳本，有可能出現(xiàn)解析不到元素報錯的情況

    • 屬性 defer 或 defer="defer" 腳本被立即下載（異步完成，與頁面渲染同時進(jìn)行），但 解析、執(zhí)行 是等到整個頁面全部解析完成 再解析、執(zhí)行

    • 不添加 異步屬性：瀏覽器解析到 script 標(biāo)簽時會停止其他元素的渲染，只是下載、解析、執(zhí)行 js 完成后，在繼續(xù)解析渲染頁面

三、元素 類型

1. 塊級元素 （block element）

  • 塊級元素 獨(dú)占一行
  • 塊級元素 可設(shè)置寬高
  • 可容納塊級元素、行內(nèi)元素...
  • div 、 p 、 h1 、 ul 、 li 、 table 系列、 form 表單

2. 行內(nèi)元素（內(nèi)聯(lián)元素） (inline element）

  • 塊級元素 一行可多個行內(nèi)、行內(nèi)塊元素
  • 塊級元素 不可設(shè)置寬高；但可以設(shè)置：margin左右 、 padding左右
  • 只能容納 行內(nèi)元素/行內(nèi)塊...
  • a 、 span 、 img 、 input 、 select 、textarea、 b、 p、i 、 sub、 sup

3. 塊級元素、行內(nèi)元素的 的重要區(qū)別：

  • 塊級元素單行顯示；可設(shè)置寬高；

  • 行內(nèi)元素一行顯示；不可設(shè)置寬高；但可設(shè)置 margin左右 、 padding左右 、 line-height

4. 行內(nèi)塊 元素

  • 行內(nèi)塊元素：行內(nèi)元素轉(zhuǎn)化的一種類別

  • 特性：

    • 行內(nèi)塊：可設(shè)置寬高
    • 行內(nèi)塊：一行可現(xiàn)實(shí)多個

  • vertical-align對齊屬性：

    • 默認(rèn) 以父元素的基線對齊；
    • middle值：在父元素的中部；
    • top值：以行中最高元素的頂端對齊；
    • bottom值：以行中最低元素的頂端對齊；

5. 行內(nèi)元素、行內(nèi)塊元素（ 都屬于 內(nèi)聯(lián)元素 ） 及 存在間隙的bug

  • 內(nèi)聯(lián)元素 存在間隙原因：

    • 元素之間有空格 或 回車等

  • 解決方案：

      1. margin-right: -4px;
      1. float: left;
      1. 外層容器 font-size: 0px; 行內(nèi)塊 再單獨(dú)設(shè)置 font-size;

四、常用標(biāo)簽

1. a 標(biāo)簽

  • 屬性：

    • href=" " 頁面跳轉(zhuǎn)的地址

    • target=""

      • target="_self" 在本窗口中打開，【默認(rèn)】
      • target="_blank" 在新窗口中打開

    • download="filename" 該屬性也可以設(shè)置一個值來規(guī)定下載文件的名稱

  • a 標(biāo)簽優(yōu)化：

    • head 中寫 <base target=”_blank”> 決定了 頁面中所有a標(biāo)簽鏈接 在新窗口中打開

  • 錨點(diǎn)鏈接

    • 設(shè)置錨點(diǎn)： id = “”
    • 鏈接到錨點(diǎn) <a href = "#id值"></a>
    • 空連接 <a href = "#"></a> 默認(rèn)的錨是#top 也就是網(wǎng)頁的最上端

  • 下載壓縮包等資源文件

    • <a href="a.zip">下載</a>
    • <a href="a.rar">下載</a>

  • 阻止 a 標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn) 的 4種方式：

    • <a href="javascript:void(0);" onclick= "myjs( )"> void是一個操作符，void(0)返回undefined，地址不發(fā)生跳轉(zhuǎn) 、頁面不會移動

    • <a href="#"> 頁面不跳轉(zhuǎn)，但頁面會移動到頂端

    • a 標(biāo)簽 被點(diǎn)擊執(zhí)行的函數(shù)中 return false

    • e.preventDefault() 阻止 與 事件關(guān)聯(lián)的默認(rèn)動作，IE 不支持，兼容代碼如下：

<body>
    <a  id="test">  Click Me  </a>
</body>
<script>
    var test = document.getElementById('test');

    function stopDefault(e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else {
            window.event.returnValue = false;
        }
    }
    test.onclick = function(e) {
        stopDefault(e);
    }
</script>

2. img 標(biāo)簽

  • 必需屬性：

    • src="" 圖片路徑: 絕對路徑 / 相對路徑
    • alt="" 替換文本，圖片不顯示的時候顯示文字

  • 屬性： width="" height="" 設(shè)置圖片的寬高

    • 只設(shè)置一個則成比例放大縮小
    • 兩個都設(shè)置圖片會變形

  • 屬性： align="" 圖像被環(huán)繞的方式

    • left / right 多行文字環(huán)繞 圖片
    • top / bottom / middle 單行文字環(huán)繞 圖片
    • 但實(shí)現(xiàn) 文本環(huán)繞圖片 的常見形式： 給圖片設(shè)置 float： left

3. ul ol dl 等 列表標(biāo)簽

  • 去除每一項(xiàng)的序號 或圓點(diǎn)，設(shè)置：list-style: none

  • 無序列表： ul li

    • ul 的 type 屬性：
    • disc 默認(rèn)值 實(shí)心小圓圈
    • circle 空心小圓圈
    • square 小方塊

  • 有序列表： ol li

    • ol 的 type 屬性：
    • 1 默認(rèn)值 1、2、3
    • a ： a 、 b 、 c
    • A ： A 、 B 、 C
    • i ： i 、 ii 、 iii
    • I ： I 、 II 、 III

  • 無序列表：dl dt dd

4. table 系列標(biāo)簽

  • table

    • thead
    • tbody
      • tr 行
        • th 列（表頭）
        • td 列

  • 基本結(jié)構(gòu)如下：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>張新</td>
            <td>18</td>
            <td>帥</td>
        </tr>
    </tbody>
</table>

  • table 標(biāo)簽上的屬性 （屬性值 為 number 類型，不帶單位）

    • cellspacing=" " 單元格 與 單元格 之間的距離，默認(rèn)值為 2

    • cellpadding=" " 表格中內(nèi)容距邊框的距離

    • width=" " 表格寬

    • height=" " 表格高

    • border=" " 表格邊框的寬度

    • align="center / left / right" 整個表格的水平對齊方式

  • th / td 標(biāo)簽上的屬性 （屬性值 為 number 類型，表示合并幾個單元格）

    • colspan=" " 水平方向上 合并單元格

    • rowspan=" " 垂直方向上 合并單元格

    • align="center / left / right" 每個單元格中內(nèi)容 水平對齊方式

  • 創(chuàng)建一個紅色邊框 1px 寬的表格（制作假邊框：用邊框間距離 當(dāng)做邊框的寬度）
    • 表格 邊框 寬度設(shè)為0
    • 邊框間距離為 1px
    • 整體table的 背景顏色 定位 紅色
    • 每個單元格原色 定位 白色
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style media="screen">
        table {
            width: 200px;
            height: 100px;
            background-color: red;
        }

        th, td {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <table cellspacing="1" border="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td >張新</td>
                <td>18</td>
                <td>帥</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

5. 易忽略標(biāo)簽匯總

<h1></h1> 標(biāo)題標(biāo)簽 --- 利于搜索引擎
- 搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引
- h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推
<font size="6"></font>   一號標(biāo)題 對應(yīng) 6號字體，依次類推


<br> 換行

<hr> 定義水平線

<q>引用文本</q>                  它的語義：引用別人的話, 不單單是加了雙引號

&nbsp;                          空格（分號不能少）

<pre></pre>                     保留原格式（對空行和空格進(jìn)行控制）

<b></b>  <strong></strong>      加粗

<i></i>  <em></em>              斜體

<del></del>  <s></s>            刪除文本標(biāo)簽

<ins></ins>  <u></u>            下劃線

<sub></sub>                     上標(biāo)
<sup></sup>                     下標(biāo)

<small></small>                 縮小

<code></code>                   電腦自動輸出

五、表單控件

1. 表單構(gòu)成：表單域、提示信息、表單控件

2. 表單標(biāo)簽 <form> </form>

  • 屬性：
    • action="url" 規(guī)定提交表單 向何處發(fā)送數(shù)據(jù)
    • method="get / post 等值" 規(guī)定用于發(fā)送 form-data 的 HTTP 方法
    • name=" " 表單的名稱

3. 文本輸入框 <input type="text">

  • 屬性：
    • type=" " 根據(jù)不用的 type 值，輸入字段有很多種形式
    • name=" " 輸入內(nèi)容的鍵名
    • value=" " 默認(rèn)內(nèi)容值
    • autocomplete="on / off" 是否啟動自動記憶補(bǔ)全功能，瀏覽器基于之前鍵入過的值
    • required 必填的表單項(xiàng)
    • readonly 輸入框，只讀模式
    • disabled 未激活
    • autofocus 自動獲取光標(biāo)焦點(diǎn)
    • placeholder=" " 占位符的值，僅適用于 input 標(biāo)簽；此屬性僅適用于：屬性適用于以下的 type 類型：text, search, url, telephone, email 以及 password。設(shè)置占位符內(nèi)容的樣式，如下：
<style>
    input::placeholder {
        color: green;
    }
</style>

4. 密碼輸入框 <input type="password">

  • 文本輸入框的所有屬性值，對于密碼輸入框都有效

5. 單選框 <input type="radio"> 圓形選項(xiàng)

  • 屬性：

    • type="radio" 單選框?qū)傩?/li>
    • checked 或 checked="checked" 默認(rèn)選中項(xiàng)
    • name=" " 單選框名稱
    • required 必填的表單項(xiàng)

  • 要想保證單選效果，name 屬性值 必須相同

6. 多選框 <input type="checkbox"> 方形選項(xiàng)

  • 屬性：

    • type="checkbox" 多選框?qū)傩?/li>
    • checked 或 checked="checked" 默認(rèn)選中項(xiàng)
    • name=" " 多選框名稱
    • required 必填的表單項(xiàng)

  • name 屬性設(shè)置同樣的值，也不能單選

7. 提交按鈕 <input type="submit">

8. 下拉列表 <select> <option> tab1 </option></select>

  • <select> </select> 標(biāo)簽可創(chuàng)建：單選 或 多選下拉框

  • select 標(biāo)簽屬性：

    • name=" " 下拉列表的名稱
    • multiple 下拉列表可多選
    • size=" "
    • disabled 規(guī)定禁用該下拉列表
    • required 必填項(xiàng)

  • option 標(biāo)簽屬性：

    • selected 選中項(xiàng) （不設(shè)置該屬性，默認(rèn)選中第一個）
    • value=" " 定義送往服務(wù)器的選項(xiàng)值
  • 下拉列表分組顯示： <select> <optgroup> <option> <option> </optgroup> </select> 
<select>
    <optgroup label="北京市">
        <option value="33">1</option>
        <option value="22">2</option>
        <option value="11">3</option>
    </optgroup>
    <optgroup label="天津市">
        <option value="33">4</option>
        <option value="22">5</option>
        <option value="11">6</option>
    </optgroup>
</select>
  • optgroup 標(biāo)簽屬性
    • label 分組選項(xiàng)組名

9. 文本域 <textarea> </textarea>

  • 屬性：
    • rows=" " 輸入的行數(shù) ；值為 number
    • cols=" " 輸入的字符數(shù) ；值為 number ； 字符數(shù)可理解為：以阿拉伯?dāng)?shù)字個數(shù)為準(zhǔn)

10. 文件上傳控件 <input type="file">

11. 隱藏域 <input type="hidden" value=""> 收集 或 發(fā)送信息

  • 隱藏域的作用：
    • value=" " 屬性 存儲數(shù)據(jù)，可在提交表單時一起發(fā)送給服務(wù)器

12. <label></label> 標(biāo)簽，被點(diǎn)擊時 出發(fā)相應(yīng)表單控件

  • label 元素不會向用戶呈現(xiàn)任何特殊效果；但 在 label 元素內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件
  • 屬性： for=" " 關(guān)聯(lián) 表單控件的 id=" " 屬性

13. 完整的表單提交代碼【待實(shí)現(xiàn)】

六、常用的全局屬性（含h5）

1. title=" " 顯示提示信息

  • 鼠標(biāo)移動到元素上時，會顯示一段提示文本（title屬性值）

2. class=" " 規(guī)定標(biāo)簽類名

3. style=" " 規(guī)定行內(nèi)樣式

4. id=" " 規(guī)定元素id，作為唯一標(biāo)識

5. data-屬性名 = " " （h5）自定義屬性，用于 存儲數(shù)據(jù)

  • 屬性名：其中不應(yīng)該含大寫字母

  • 數(shù)據(jù)存儲在標(biāo)簽DOM對象的dataset數(shù)據(jù)集中；訪問數(shù)據(jù) DOM.dataset.屬性名

  • 示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>11</title>
    </head>
    <body>
        <button type="button" data-id="888">按鈕</button>
    </body>
    <script>
        var btn = document.getElementsByTagName('button')[0];

        btn.addEventListener('click', function (e) {
            console.log(e.target.dataset.id);  // '888'
        });
    </script>
</html>

6. draggable="true / false / auto" （h5）元素是否可以被拖動， 默認(rèn)值 auto 使用瀏覽器默認(rèn)行為

  • 拖拽示例：
<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <style type="text/css">
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>
<body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動的段落。請把該段落拖入上面的矩形。</p>

</body>
<script type="text/javascript">
    function allowDrop(e) {
        // 阻止默認(rèn)事件
        e.preventDefault();
    }

    function drag(e) {
        e.dataTransfer.setData("Text", e.target.id);
    }

    function drop(e) {
        var data = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
        e.preventDefault();
    }
</script>
</html>

七、路徑

相對路徑：相對當(dāng)前文件所在位置的路徑

  • "./"：代表目前所在的目錄。

  • "../"：代表上一層目錄。

  • 以"/"開頭：代表根目錄。

絕對路徑

  • 盤符路徑：c:/apache/cgi-bin 下的 不建議使用

  • 服務(wù)器路徑：以http開頭的鏈接

根目錄

  • 是相對子目錄來說的，在文件系統(tǒng)建立時即已被創(chuàng)建
  • 打開“我的電腦”，雙擊C盤就進(jìn)入C盤的根目錄，雙擊D盤就進(jìn)入D盤的根目錄；其它類推。

八、link 標(biāo)簽引入 瀏覽器工具欄圖標(biāo)；制作 .ico 格式的圖標(biāo)

關(guān)于網(wǎng)站圖標(biāo)favicon.ico
favicon.ico 制作工具

  • 圖標(biāo)大小

    • 三種尺寸：16 × 16、32 × 32、48 × 48
    • 32*32 最佳，再大了某些瀏覽器會不顯示

  • 引入方式

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

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,118評論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,537評論 19贊 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評論 1贊 41
  • 誰在為你制造規(guī)則？ 羅從政/原創(chuàng) 每個人的人生，就像一場長途旅行，都有著一定的路徑，或者軌道，沿著這條軌道，你就能...
    高考加油站閱讀 464評論 0贊 3
  • 從前有一個人，因喜歡灌溉耕田，所以想開墾一片荒地，成為農(nóng)田。而他，也正式成為農(nóng)夫。他是農(nóng)夫。他抱著對美好生活的...
    流水冰漣閱讀 1,082評論 0贊 0

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