學習資料:http://how2j.cn/p/1036 周期:3天 總結:採用的都是html的知識,有過時的結束請忽略.初學者還是練一遍有個印象即可. 1.html中文問題 2.標簽 3.元素 4.屬性 5.註釋 6.標題 7.段落 8.粗體--斜體 9.預格式顯示Java代碼 10.刪除--下劃線 ...
周期:3天
github:https://github.com/BenCoper/Html5歡迎大家去Star以及Fork
總結:採用的都是html的知識,有過時的結束請忽略.初學者還是練一遍有個印象即可.
1.html中文問題
<head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> </head>
2.標簽
<p> 這是一個開始標簽 </p> 這是一個結束標簽 <p> Hello World </p> 標簽之間的文本叫做內容 <h1>大標題</h1> <h2>小一點的標題</h2> <h3>再小一點的標題</h3> <h4>更小一點的標題</h4>
3.元素
<html> 頭標簽 <body> 身體標簽 <h1>標題</h1> <br/> 換行 <hr/> 水平線 <p>段落表示</p> </body> </html>
4.屬性
<h1 align="center">居中標題</h1> 寫在開始標簽里的 align="center" 就叫屬性 align 是屬性名 center 是屬性值 屬性值應該使用雙引號括起來
5.註釋
<!--註釋內容-->
6.標題
<h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題5</h6>
7.段落
<p>段落1 </p> <p>段落2 </p> <p>段落3 </p>
8.粗體--斜體
<b>b標簽粗體效果</b> <strong>strong標簽粗體效果</strong> <br/> <!--推薦使用--> <i>使用 i 標簽帶來的斜體效果</i> <em>使用 em 標簽帶來的斜體效果</em> <!--推薦使用-->
9.預格式顯示Java代碼
<pre> public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } } </pre>
10.刪除--下劃線
<del>使用del標簽實現的刪除效果</del> <ins>使用ins標簽實現的下劃線效果</ins>
11.圖像
<img src="圖片路徑"/> <!--圖像大小--> <img width="200" height="200" src="圖片路徑"/> <!--圖像位置--> <div align="left"> <img src="http://how2j.cn/example.gif"/> </div> <div align="center"> <img src="http://how2j.cn/example.gif"/> </div> <div align="right"> <img src="http://how2j.cn/example.gif"/> </div> <!--替換圖片文字,載入不出圖片時顯示文字--> <img src="http://how2j.cn/example_not_exist.gif" alt="這個是一個圖片" />
12.超鏈接
<a href="http://www.12306.com">12306</a> <!--target屬性表示在新頁面打開超鏈接--> <a href="http://www.12306.com" target="_blank">http://www.12306.com</a> <!--超鏈接上顯示文字--> <a href="http://www.12306.com" title="跳轉到http://www.12306.com">www.12306.com</a> <!--圖片超鏈接--> <a href="http://www.12306.com"> <img src="http://how2j.cn/example.gif"/> </a>
13.表格
<!-- table:表格 tr:行 td:列 border:帶邊框的表格 width:表格高度,px及像素的意思 td-width:單元格寬度絕對值,也可用百分比顯示(50%) algin:單元格水平對齊(left,right,center) valgin:單元格垂直對齊(top,middle,bottom) colspan:水平合併 rowspan:垂直合併 bgcolor:背景顏色 --> <table border="1" width="200px"> <tr> <td width="50px">1</td> <td algin="center">居中</td> <td algin="left">靠左</td> <td algin="right">靠右</td> <td width="80%">1</td> <td valign="middle" >中間</td> <td valign="top" >頂部</td> <td valign="bottom" >底部</td> <td colspan="2" >1，2</td> <td rowspan="2">1,3</td> <td bgcolor="pink">b</td> </tr> </table>
14.列表
<!--ul無序,ol有序--> <ul> <li>無序</li> <li>列表</li> </ul> <ol> <li>有序</li> <li>列表</li> </ol>
15.div域span
<!-- div是塊元素，即自動換行 常見的塊元素還有h1,table,p span是內聯元素，即不會換行 常見的內聯元素還有img,a,b,strong 業界通常結合css來控制頁面佈局 --> <div> 第一個div </div> <div> 第二個div <!--換行--> </div> <span> 第一個span </span> <span> 第二個span <!--不換行--> </span>
16.字體
<!--color表示顏色,size表示字體大小--> <font color="blue" size="+2">藍色大2號字體</font>
17.內聯框架
<!-- iframe相當於瀏覽器裡面有個小瀏覽器，在這個小瀏覽器中，打開另一個網頁 --> <iframe src="http://how2j.cn/" width="600px" height="400px"> </iframe>
18.文本框
<!--普通文本框--> <input type="text"> <!--設置文本框長度--> <input type="text" size="10"> <!--初始值文本框--> <input type="text" value="有初始值的文本框"> <!--有背景文字的文本框,使用屬性placeholder--> <input type="text" placeholder="請輸入賬號">
19.密碼框
<!--輸入的數據會自動顯示為星號--> <input type="password">
20.表單
<!-- action獲取數據提交後的頁面,初學者體驗效果就好 get和post的區別 get 是form預設的提交方式 如果通過一個超鏈訪問某個地址，是get方式 如果在地址欄直接輸入某個地址，是get方式 提交數據會在瀏覽器顯示出來 不可以用於提交二進位數據，比如上傳文件 post 必須在form上通過 method="post" 顯示指定 提交數據不會在瀏覽器顯示出來 可以用於提交二進位數據，比如上傳文件 --> <form action="http://how2j.cn/study/login.jsp"> 賬號：<input type="text" name="name"> <br/> 密碼：<input type="password" name="password" > <br/> <input type="submit" value="登陸"> </form>
21.單選框
<!--兩個單選，都可以同時選中。但不能取消--> 單選1 <input type="radio" > 單選2 <input type="radio" > <!--checked預設選中--> 預設選中 <input type="radio" checked="checked" > <!--多個可單選框,activity參數--> 學習java<input type="radio" name="activity" value="學習java" > <br/> java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="radio" name="activity" value="dota" > <br/> LOL<input type="radio" name="activity" value="lol"> <br/>
22.覆選框
<!--覆選框,checkbox--> 學習java<input type="checkbox" value="學習java" > <br/> 學習<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="checkbox" value="dota" > <br/> LOL<input type="checkbox" value="lol"> <br/>
23.下拉列表
<!-- <select> 即下拉列表 需要配合<option>使用 size:表示顯示高度 multiple:可以用ctrl多選中 selected:預設選中 --> <select size="2" multiple="multiple > <option >1</option> <option >2</option> <option selected="selected" >3</option> </select>
24.文本域
<!-- 文本域可以有多行，並且可以有滾動條 cols:顯示寬度 rows:顯示行數 --> <textarea cols="30" rows="8">abc def </textarea>
25.普通按鈕
<!--參數button,普通按鈕不具備提交from表單的效果--> <input type="button" value="一個按鈕">
26.提交按鈕
<!-- <input type="submit"> 即為提交按鈕 用於提交form，把數據提交到服務端 --> <form action="/study/login.jsp" method="get"> 賬號:<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <input type="submit" value="登陸"> </form>
27.重置按鈕
<!-- <input type="reset"> 重置按鈕 可以把輸入框的改動複原 --> <form action="/study/login.jsp"> 賬號：<input type="text" name="name"> <br/> 密碼：<input type="password" name="password" > <br/> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
28.圖像提交
<!--<input type="image" > 即使用圖像作為按鈕進行form的提交--> <form action="/study/login.jsp"> 賬號：<input type="text" name="name"> <br/> 密碼：<input type="password" name="password" > <br/> <input type="image" src="http://how2j.cn/example.gif"> </form>
29.按鈕
<!-- <button></button>即按鈕標簽 與<input type="button">不同的是，<button>標簽功能更為豐富 按鈕標簽里的內容可以是文字也可以是圖像 如果button的type=“submit” ，那麼它就具備提交form的功能 --> <form action="/study/login.jsp"> 賬號：<input type="text" name="name"> <br/> 密碼：<input type="password" name="password" > <br/> <button type="submit">登陸</button> </form>
30.html綜合演示
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> 4 </head> 5 <body> 6 7 8 <table width="100%" > 9 <tr> 10 <td align="right"><font color="#FF0000">*</font>用戶名:</td> 11 <td><input type="text" size="30"/> <font color="red">用戶名不得小於3個字元</font></td> 12 </tr> 13 <tr> 14 <td align="right"><font color="#FF0000">*</font>密碼:</td> 15 <td><input name="text" type="text" size="30"/></td> 16 </tr> 17 <tr> 18 <td align="right"><font color="#FF0000">*</font>確認密碼:</td> 19 <td><input name="text2" type="text" size="30"/></td> 20 </tr> 21 <tr> 22 <td align="right"><font color="#FF0000">*</font>Email:</td> 23 <td><input name="text3" type="text" size="30"/></td> 24 </tr> 25 <tr> 26 <td align="right"><font color="#FF0000">*</font>真實姓名:</td> 27 <td><input name="text4" type="text" size="30"/></td> 28 </tr> 29 <tr> 30 <td align="right"><font color="#FF0000">*</font>性別:</td> 31 <td> 32 <select> 33 <option>男</option> 34 <option>女</option> 35 </select> 36 </td> 37 </tr> 38 <tr> 39 <td align="right"><font color="#FF0000">*</font>生日:</td> 40 <td><select name="select"> 41 <option>1980</option> 42 <option>1981</option> 43 <option>1982</option> 44 <option>1983</option> 45 <option>1984</option> 46 <option>1985</option> 47 <option>1986</option> 48 <option>1987</option> 49 <option>1988</option> 50 <option>1989</option> 51 <option>1990</option> 52 <option>1991</option> 53 </select> 54 <
