html部分知識點學習
一、什麼是空標籤
沒有閉合的標籤稱為空標籤。
一個空元素(empty element)可能是 HTML,SVG,或者 MathML 裡的一個不可能存在子節點(例如內嵌的元素或者元素內的文字)的element。
<area> <base> <br> <col> <colgroup> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr>
二、什麼是可替換標籤
可替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容
MDN解釋 可替換元素(replaced element)的展現效果不是由 CSS
來控制的。這些元素是一種外部物件,它們外觀的渲染,是獨立於 CSS 的。
簡單來說,它們的內容不受當前文件的樣式的影響。CSS 可以影響可替換元素的位置,但不會影響到可替換元素自身的內容。
某些可替換元素,例如 <iframe> 元素,可能具有自己的樣式表,但它們不會繼承父文件的樣式。
CSS 能對可替換元素產生的唯一影響在於,部分屬性支援控制元素內容在其框中的位置或定位方式。
舉例說明:瀏覽器會根據img標籤的src屬性的值來讀取圖片資訊並顯示出來,而如果檢視HTML程式碼,卻看不到圖片的實際內容;又例如根據input標籤的type屬性來決定是顯示輸入框,還是單選按鈕等。這些元素往往沒有實際的內容,即是一個空元素。
典型的可替換元素有:
<iframe> <video> <embed> <img>
有些元素僅在特定情況下被作為可替換元素處理,例如:
<option> <audio> <canvas> <object> <applet>
三、全域性屬性
我們可以在所有的HTML元素上指定全域性屬性,甚至是在標準裡沒有指定的元素。這意味著任何非標準元素仍必須能夠應用這些屬性,即使使用這些元素意味著文件不再是html5相容的。
四、display屬性
這個太多了,貼個MDN連結大家有興趣看看吧!!!
MDN
屬性指定了元素的顯示型別,它包含兩類基礎特徵,用於指定元素怎樣生成盒模型——外部顯示型別定義了元素怎樣參與流式佈局的處理,內部顯示型別定義了元素內子元素的佈局方式。
display 的一些取值已經在其單獨的規範中給出了完整的定義;在文末的表格中可以找到所有規範的連結。全部的取值如下:
MDN關於display屬性解釋五、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>
六、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 標籤」,滿足一些奇葩需求
七、forme標籤知識點:
7.1a標籤和forme標籤請求區別
都是發起請求,唯一區別是a標籤發起get請求,from發起post請求。
from標籤必須要有提交按鈕,否則無法提交
7.2action引數
get請求預設將action引數放到查詢引數
post預設將action引數放到請求第四部分form data
可以通過給action加引數讓post也有查詢引數,但沒辦法讓get請求有第四部分,比如(users?zzz=3)
八、input標籤知識點:
1、複選框:通過label標籤包裹input可以自動關聯,點選me和複選框,都可選中
2、單選框:多個單選框(input的type為radio時),設定每個input的name屬性為相同
值,即可做到只能選一個
3、如果一個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>