1.HTML
<!DOCTYPE=HTML>表示各個瀏覽器用統一的HTML模式來解析,避免出現不同瀏覽器用不同規則解析顯示效果不一樣的問題。
2.<HEAD></HEAD>里定義的標簽
<title></title>打開瀏覽器時上面的提示信息
<meta>沒有結束標簽
a.<meta charset="UTF-8"/>指定網頁的編碼方式,或者使用<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
b.<meta http-equiv="Refresh" content="3" /> 三秒鍾刷新網頁;
<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com" />三秒后跳轉到其他網頁
c.<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止緩存頁面
d.<meta name=“keywords” content=“博客園,程序員,八卦”/>關鍵字,可用於爬蟲處理
e.<meta name=“description” content=”博客園是最適合DotNet開發人員的技術家園”/> 描述信息
f.<link rel="shortcut icon" href="kaola.jpg" type="image/x-icon" />為title顯示相應的圖標信息,href指定圖標的路徑
3.標簽的兩類(塊級標簽、行內標簽)
<span></span>塊級標簽,只占文字的這一部分
<div></div>行內標簽,占文本的這一行
在文本中如果需要標記某些特別的字符,需要使用規定的寫法,詳情參考:
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
<p></p>標簽,段落標簽,段與段之間有間距,<br />自閉合標簽,換行
<a href="http://www.baidu.com">百度</a> 跳轉標簽
<a href="http://www.baidu.com" target="_blank">百度</a> 加上參數target="_blank"表示新開一個頁面
跳轉到本頁面的開頭行,id必須唯一定義
<a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1" style="height: 500px">第一章內容</div> <div id="i2" style="height: 500px">第二章內容</div> <div id="i3" style="height: 500px">第三章內容</div>
<h1></h1>標記字體的大小,從h1到h6,從大到小的順序,這是缺省樣式,可以通過引入CSS修改屬性。
input和select標簽詳解
<body> <form> <div style="border :1px solid red;" > <p>用戶名:<input type="text"/></p> #單行文本 <p>密碼:<input type="password"></p> #密碼 <p>郵箱:<input type="email"></p> #自動檢測郵箱 </div> <div style="border:2px solid green"> <p> 性別: 男<input type="radio" name="sex"/><br /> #加上name屬性,選項互斥 女<input type="radio" name="sex" /> </p> <p> 愛好:1<input type="checkbox" /><br /> #多選框 2<input type="checkbox" /><br /> 3<input type="checkbox" /><br /> 4<input type="checkbox" /><br /> 5<input type="checkbox" /><br /> </p> <p> 省份:<select multiple size="3"> #下拉菜單,multiple可以多選,size默認顯示幾行數據 <option>廣東</option> <option>湖北</option> <option>湖南</option> <option>山西</option> <option>江西</option> </select> 城市:<select> <optgroup label="廣東"> #label這一列不可選,label下面的選項可以被選中 <option>廣州</option> <option>深圳</option> </optgroup> <optgroup label="湖北"> <option>武漢</option> <option>仙桃</option> </optgroup> </select> </p> <p>上傳相片:<input type="file"/></p> #上傳文件 <p>備注信息:<textarea>填寫</textarea></p> #多行文本 <input type="button" value="button"/> <input type="submit" value="submit"/> <input type="reset" value="reset"/> </div> </form> </body>
向服務器傳遞數據:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com" method="post" enctype="multipart/form-data"> <input type="text" name="user"/> <input type="password" name="pwd"/> 男<input type="radio" name="sex",value="1"/> 女<input type="radio" name="sex",value="2"/> <p> 愛好: 籃球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="2"/> 羽毛球<input type="checkbox" name="favor" value="3"/> </p> <p>上傳文件: <input type="file" name="uploadfile"/> </p> <p>城市: <select> <option value="1">上海</option> <option value="2">深圳</option> <option value="3">廣州</option> </select> </p> <input type="submit" value="提交"/> </form> </body> </html>
直接傳值給sogou,利用sogou搜索的時候,輸入查詢條件,可以看到"https://www.sogou.com/web?query=發&ie=utf8&_ast=1474797952&_asf=null&w=01029901&cid=",這是傳遞的值,因此可以利用程序直接傳值給瀏覽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk"> <title></title> </head> <body> <form action="https://www.sogou.com/web" method="post"> <!--https://www.sogou.com/web?query=發--> <input type="text" name="query"/> <input type="submit" value="提交"/> </form> </body> </html>
table標簽,下面繪制三行三列的圖表,tr表示行,th表示列的名稱,td表示列里的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1"> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> <tr> <td>內容1</td> <td>內容2</td> <td>內容3</td> </tr> <tr> <td>內容1</td> <td>內容2</td> <td>內容3</td> </tr> </table> </body> </html>
合並單元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1"> <tr> <th colspan="2">標題1</th> <th>標題2</th> <!--<th>標題3</th>--> </tr> <tr> <td>內容1</td> <td rowspan="2">內容2</td> <td>內容3</td> </tr> <tr> <td>內容1</td> <!--<td>內容2</td>--> <td rowspan="2">內容3</td> </tr> <tr> <td>內容1</td> <td>內容2</td> <!--<td>內容3</td>--> </tr> <tr> <td>內容1</td> <td>內容2</td> <td>內容3</td> </tr> </table> </body> </html>
iframe,fieldset,div,span,ul,ol,dl