1、HTML是什么
HTML指的超文本標記語言(Hyper Text Markup Language)，是一種用來描述網頁的語言。超文本指的是除了可以包含文字之外，還可以包含圖片、鏈接、音樂、視頻、程序等內容。（每個都需要一個標記，在網頁中通過不同的標記組成起來。）
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
前端三劍客。
2 常用的HTML標簽
① html 根標記
② head 頭標記
③ body 體標記
④ a 超鏈接
⑤ form 表單
⑥ table 表格
<!-- 一個HTML頁面最基本的組成部分 html: 跟標記 head：頭標記 寫描述性的信息（css\javaScricpt） body: 體標記 寫頁面顯示的信息 --> <html> <head></head> <body> 想寫什么 <!--標題標記 h1....--> <h1 align="center">E</h1> <h2 align="right">E</h2> <h3 align="left">E</h3> <!--超鏈接 href 可以指定應用內或者是應用外的任意地址--> <a href="http://www.baidu.com">跳轉連接</a> <!-- 表格--> <h1 align="center">Information</h1> <table border="lpx" align="center" width="60%"> <!--內部是屬性設置--> <!--tr : 表示一行--> <tr> <!-- th: 標題列 自帶劇中並加粗效果 td: 普通列 --> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <td>12234</td> <td>Zhang</td> <td>Mail</td> <tr> </tr> </table> <!--表單： 收集用戶的信息，提交到后台服務器--> <form action="提交的地址，例如http://www.baidu.com" method="GET/POST"> 用戶名稱：<input type="text" name="username" value="admim"/> <!--數據的提交方式：username=admin ,此時username相當於一個key --> <br/> <!--換行--> 用戶密碼：<input type="password" name="password"/> 用戶性別： 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="0"/> <!--通過在radio指定相同的name 來表示互斥的關系--> <br/> 用戶愛好：羽毛球<input type="checkbox" name="hobby" value="1"/> <!--checkbox表示多選框--> 籃球<input type="checkbox" name="hobby" value="2"/> 乒乓球<input type="checkbox" name="hobby" value="3"/> <br/> 用戶地址：省份<select name="province"> <!--select 表示下拉列表--> <option value="hb">河北省</option> <option value="js">江蘇省</option> <option value="ah">安徽省</option> </select> <br/> <input type="submit" value="注冊"/> <!--表示按鈕，點擊后向 action中的地址進行數據的提交--> </form> </body> </html>
3、表現CSS
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
<div></div>： 選中一部分區域，施加一些樣式。描述性質的，所以需要寫道head中。
<html> <head> <style> div{ //元素選擇器div(實際不能注釋) 如果很多個div，設置不同的，可以在div中設置唯一的id， 在head 中#id{} 如果需要多個同一個設置，設置class屬性，head中 .calsss{} width: 300px; height:300px; border:2px solid red; } </style> </head> <body> 。。。。 <div>這是一個div</div> <\body> <\html>
同時可以利用樣式文件：.css文件導入樣式設置
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<!-- 一個HTML頁面最基本的組成部分 html: 跟標記 head：頭標記 寫描述性的信息（css\javaScricpt） body: 體標記 寫頁面顯示的信息 --> <html> <head> <!--引入樣式文件--> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> div{ width: 300px; height:300px; border:2px solid red; } #dd{ background-color:blue; } .ss{ background-color:yellow; } </style> </head> <body> 想寫什么 <!--標題標記 h1....--> <h1 align="center">E</h1> <h2 align="right">E</h2> <h3 align="left">E</h3> <!--超鏈接 href 可以指定應用內或者是應用外的任意地址--> <a href="http://www.baidu.com">跳轉連接</a> <!-- 表格--> <h1 align="center">Information</h1> <table border="lpx" align="center" width="60%"> <!--內部是屬性設置--> <!--tr : 表示一行--> <tr> <!-- th: 標題列 自帶劇中並加粗效果 td: 普通列 --> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <td>12234</td> <td>Zhang</td> <td>Mail</td> <tr> </tr> </table> <!--表單： 手機用戶的信息，提交到后台服務器--> <form action="提交的地址，例如http://www.baidu.com" method="GET/POST"> 用戶名稱：<input type="text" name="username" value="admim"/> <!--數據的提交方式：username=admin ,此時username相當於一個key --> <br/> <!--換行--> 用戶密碼：<input type="password" name="password"/> 用戶性別： 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="0"/> <!--通過指定相同的name 來表示互斥的關系--> <br/> 用戶愛好：羽毛球<input type="checkbox" name="hobby" value="1"/> <!--表示多選框--> 籃球<input type="checkbox" name="hobby" value="2"/> 乒乓球<input type="checkbox" name="hobby" value="3"/> <br/> 用戶地址：省份<select name="province"> <!--表示下拉列表--> <option value="hb">河北省</option> <option value="js">江蘇省</option> <option value="ah">安徽省</option> </select> <br/> <input type="submit" value="注冊"/> <!--表示按鈕，點擊后向 action中的地址進行數據的提交--> </form> <div>這是一個div</div> <!--對所有div的做標記，元素選擇性--> <div></div> <div id="dd"></div> <!--對某一個做標記，id選擇性--> <div class="ss"></div> <!--對某一類做標記，類選擇性--> <div class="ss"></div> </body> </html>