html部分知識點學習

時間 2019-11-08

標籤 html 部分知識學習欄目 HTML 简体版

原文原文鏈接

1、什麼是空標籤
沒有閉合的標籤稱爲空標籤。javascript

一個空元素（empty element）多是 HTML，SVG，或者 MathML 裏的一個不可能存在子節點（例如內嵌的元素或者元素內的文本）的element。html

<area>
<base>
<br>
<col>
<colgroup> 
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

2、什麼是可替換標籤
可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容html5

MDN解釋可替換元素（replaced element）的展示效果不是由 CSS
來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於 CSS 的。
簡單來講，它們的內容不受當前文檔的樣式的影響。CSS 能夠影響可替換元素的位置，但不會影響到可替換元素自身的內容。java

某些可替換元素，例如 <iframe> 元素，可能具備本身的樣式表，但它們不會繼承父文檔的樣式。canvas

CSS 能對可替換元素產生的惟一影響在於，部分屬性支持控制元素內容在其框中的位置或定位方式。瀏覽器

舉例說明：瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看HTML代碼，卻看不到圖片的實際內容；又例如根據input標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。這些元素每每沒有實際的內容，便是一個空元素。服務器

典型的可替換元素有：app

<iframe>
<video>
<embed>
<img>

有些元素僅在特定狀況下被做爲可替換元素處理，例如：ide

<option>
<audio>
<canvas>
<object>
<applet>

3、全局屬性佈局

MDN 是全部HTML元素共有的屬性; 它們能夠用於全部元素，即便屬性可能對某些元素不起做用。
咱們能夠在全部的HTML元素上指定全局屬性，甚至是在標準裏沒有指定的元素。這意味着任何非標準元素仍必須可以應用這些屬性，即便使用這些元素意味着文檔再也不是html5兼容的。

4、display屬性
這個太多了，貼個MDN連接你們有興趣看看吧！！！

MDN
屬性指定了元素的顯示類型，它包含兩類基礎特徵，用於指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式佈局的處理，內部顯示類型定義了元素內子元素的佈局方式。
display 的一些取值已經在其單獨的規範中給出了完整的定義；在文末的表格中能夠找到全部規範的連接。所有的取值以下：
MDN關於display屬性解釋

5、iframe元素
做用：將另外一個HTML頁面嵌入到當前頁面中
知識點：
iframe標籤目前已經不多用到。
frameborder：iframe默認有邊框，frameborder爲1有邊框爲0無邊框。
iframe的src屬性能夠寫相對路徑

示例解釋：
iframe默認打開連接爲空，有2個a標籤，target屬性值和iframe的name屬性值設置爲相同，則點擊a標籤，會在iframe打開
<body>

<iframe name="name" src="#" width="100%" height="300px" frameborder="0" ></iframe>
<a target="name" href="./index.html">相對路徑打開</a>
<a target="name" href="https://www.baidu.com">打開百度</a>

</body>

6、a標籤知識點
6.1target屬性
_blank:瀏覽器新標籤打開
_self:當前頁面（本身）打開
_parent:父級頁面打開
_top最頂端頁面打開
示例說明：
頁面1iframe經過相對路徑引入test1.html，頁面2經過相對路徑引入test2.html，頁

面3的a標籤target屬性分四種。

_blank：瀏覽器新標籤打開頁面
_self：在test2頁面自身打開
_parent：在test1頁面打開
_top：在test頁面打開
test頁面經過iframe嵌入test1，test1經過iframe嵌入test2。

頁面1
<body>
<iframe src="./test1.html" frameborder="1"></iframe>
</body>

頁面2
<body>
    <p>test1</p>
    <iframe src="./test2.html" frameborder="1"></iframe>
</body>

頁面3
<body>
    <p>test2</p>
    <a target="_blank" href="https://www.baidu.com">_blank</a>
    <a target="_self" href="https://www.baidu.com">_self</a>
    <a target="_parent" href="https://www.baidu.com">_parent</a>
    <a target="_top" href="https://www.baidu.com">_top</a>
</body>

6.2href屬性取值：
空值：刷新並返回頂部
#錨點：不會刷新頁面，不發起請求，點了沒反應。
http協議：根據target屬性，點擊後當或新標籤打開連接
下載：a標籤下載屬性須經過服務器方式，本地file路徑是打開新標籤不是下載。
**//baidu.com無協議絕對地址：瀏覽器根據當前協議，補全無協議連接的協議。
file協議：
若是用 file:// 協議瀏覽頁面，就會訪問到 file://qq.com，這是一個不存在的路徑
應該儘可能不使用 file:// 協議預覽網頁，以避免無協議連接出錯

僞協議：

<a href="">空值</a>
<a href="#">錨點</a>
<a href="https://www.baidu.com">http協議</a>
<a href="xdml.png" download='個人xdml'>下載</a>
<a href="//baidu.com">無協議（聽從當前頁面協議）</a>
<a href="./test1.html">相對路徑</a>
<a href="?name=test">?name=test</a>放查詢參數
<a href="JavaScript:;">?name=test</a>僞協議
  ---僞協議能夠在用戶點擊 a 時執行一段 javascript 代碼
 ---僞協議能夠在當前頁面執行一段代碼
 ---僞協議能夠實現「點擊以後沒有任何動做的 a 標籤」，知足一些奇葩需求

7、forme標籤知識點：
7.1a標籤和forme標籤請求區別
都是發起請求，惟一區別是a標籤發起get請求，from發起post請求。
from標籤必需要有提交按鈕，不然沒法提交
7.2action參數
get請求默認將action參數放到查詢參數
post默認將action參數放到請求第四部分form data
能夠經過給action加參數讓post也有查詢參數，但沒辦法讓get請求有第四部分，好比（users?zzz=3）

8、input標籤知識點：
一、複選框：經過label標籤包裹input能夠自動關聯，點擊me和複選框，均可選中

二、單選框：多個單選框（input的type爲radio時），設置每一個input的name屬性爲相同
值，便可作到只能選一個
三、若是一個form標籤內只有一個button且沒寫type屬性，瀏覽器會自動升級爲提交按
鈕（submit）若是寫了type屬性，則按屬性執行
不寫type屬性和type屬性爲button，點擊效果不一樣，有屬性的不提交，無屬性的瀏
覽器自動升級

<body>
    <form action="users?zzz=3" method="POST" target="_blank">
        <input type="text">
        <input type="text">
        <!-- <button >提交</button> -->
        <!-- button的type爲button時點擊沒反應，刪掉後點擊會發送請求 -->
        <button type="button">提交</button>
    </form>
</body>

相關標籤/搜索

每日一句

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