Html
-
簡介
-
Html是一門超文字標記語言,主要用於編寫靜態網頁.
-
本文是Html知識點彙總以及一些概念的詳解和區分,作為初學者讀起來可能有點空洞,建議您先前往 ofollow,noindex" target="_blank">http://www.w3school.com.cn/html/index.asp 學習相關基礎知識再回頭看本文.如果你已掌握了Html必備知識那本文將會帶您快速回顧聯想一遍知識點並解決一些您可能遇到過卻未曾解決的疑惑.
-
Html思維導圖
-
思維導圖能輔助您快速聯想回憶一些知識點,並對知識點的有一個整體上的架構
1. block,inline,inline-block的區別
-
block:block元素會獨佔一行,多個block元素會各自新起一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <style type="text/css"> .div1{ background: pink; } .div2{ background: red; } .div3{ background: skyblue; } </style> <div class="div1" width="200px",height="100px">div1</div> <div class="div2" width="100px",height="200px">div2</div> <div class="div3" width="400px",height="50px">div3</div> </body> </html>
-
inline:inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裡,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化,inline元素設定width,height屬性無效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <style type="text/css"> .span1{ background: pink; width:200px; height:100px; } .span2{ background: red; width: 100px; height: 200px; } .span3{ background: skyblue; width: 400px; height: 50px; } </style> <span class="span1">span1</span> <span class="span2">span2</span> <span class="span3">span3</span> </body> </html>
-
inline-block:簡單來說就是將物件呈現為inline物件,但是物件的內容作為block物件呈現,比如我們想要多個元素擁有不同的寬高而又排列在同一行內
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <style type="text/css"> .div1{ background: pink; display: inline-block; width:200px; height:100px; } .div2{ background: red; display: inline-block; width: 100px; height: 200px; } .div3{ background: skyblue; display: inline-block; width: 400px; height: 50px; } </style> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> </body> </html>
2. href與src的區別
-
href:用於指定超連結目標的 URL
-
src:規定外部資源,指令碼檔案的 URL
-
簡而言之就是href用於跳轉到指定頁面的屬性,href的物件必須是一個完整的html,css,js..檔案;src則是載入資源或指令碼的連結,如.jpg .mp4
//含href屬性的標籤 <a href="http://www.cnblogs.com/Lazy-Cat/">Lazy.Cat</a> //含src屬性的標籤 <img src=""https://i.loli.net/2018/10/04/5bb5e3f117562.jpg"> <html src=""></html> <style src=""></style> <script src=""></script> <input type="image" src=""></input> ...
3. rel與type的區別
-
rel:指外鏈檔案與本頁面的關係
-
type:指外鏈檔案的檔案型別
-
建議寫法是捨棄rel屬性,直接用type屬性也能達到外鏈檔案的效果
//demo <link type="text/css" href="style.css">
4. Html與Html5的佈局格式
-
html5增加了很多語義化標籤,因此在佈局上更具有語義化
// Html4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <style> body {font-family:Verdana,sans-serif;font-size:0.8em;} div#header,div#footer,div#content,div#post {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;} div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;} div#content {background-color:#ddd;} div#menu ul {margin:0;padding:0;} div#menu ul li {display:inline; margin:5px;} </style> </head> <body> <div id="header"> <h1>Monday Times</h1> </div> <div id="menu"> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </div> <div id="content"> <h2>News Section</h2> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </div> <div id="footer"> <p>© 2014 Monday Times. All rights reserved.</p> </div> </body> </html> css樣式 div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white; } div#header,div#footer { color:white;background-color:#444;margin-bottom:5px; } div#content { background-color:#ddd; } div#menu ul { margin:0;padding:0; } div#menu ul li { display:inline; margin:5px; } /******************我是分割線*************************/ //Html5 <!DOCTYPE html> <html lang="en"> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body { font-family:Verdana,sans-serif;font-size:0.8em; } header,footer,section,article { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white; } header,footer { color:white;background-color:#444;margin-bottom:5px; } section { background-color:#ddd; } nav ul { margin:0;padding:0; } nav ul li { display:inline; margin:5px; } </style> <body> <header> <h1>Monday Times</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <section> <h2>News Section</h2> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </section> <footer> <p>© 2014 Monday Times. All rights reserved.</p> </footer> </body> </html> //css樣式 header,footer,section,article { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white; } header,footer { color:white;background-color:#444;margin-bottom:5px; } section { background-color:#ddd; } nav ul{ margin:0;padding:0; } nav ul li { display:inline; margin:5px; }
5. form表單提交資料
-
在form標籤中新增action(提交的地址)和method(post),且有一個submit按鈕("input type=’submit’")就可以進行資料的提交,每一個input標籤都需要有一個name屬性,才能進行提交
-
當點選登陸時,向服務端發生的資料是:username=username&password=password.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link type="text/css" href="style.css"> </head> <body> <form action="www.baidu.com" method="get" name="form1"> <input type="text" name="username"/> <input type="password" name="password"/> <input type="submit"/> </form> </body> </html>
6. Html標籤瀏覽器相容性
-
關於格式化的標籤在Html5中不予支援,平時編寫頁面也不建議使用格式化標籤,更好的方式是將它寫在CSS樣式裡,視訊播放有"video","embed","object"標籤,而它們各自的瀏覽器相容性以及支援的格式都有所差異,所以相容性最好的寫法如下
// 視訊 // ie以外的瀏覽器解析是事件捕獲的形式,即從外層到內層的執行.因 此首先執行video的每種資源格式,失敗再執行object,還是失敗最後再 執行embed.這種寫法對於未知格式的視訊播放很有用 <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video> //音訊 <audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
7. Html5瀏覽器支援
-
當下幾乎所有主流瀏覽器都支援Html5。此外,所有瀏覽器,不論新舊,都會自動把未識別元素當做行內元素來處理,對於老式瀏覽器我們可以新增如下處理
header, section, footer, aside, nav, main, article, figure { display: block; }
-
Internet Explorer 8 以及更早的版本,不允許對未知元素新增樣式.不過Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript", "the shiv",在程式碼中新增下面這段註釋即可
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
8. 關於事件的回撥函式
-
每一個事件在某種操作完成後後立即呼叫的一個函式,而函式需要我們用js等指令碼語言語法來寫這裡不多說
<button onclick="copyText()">Copy Text</button>