1.1?? 表單標簽
1.1.1??? Form標簽
Form標簽,表單的域標簽,用于包裹整個表單的內容。
表單就是用戶提交數據到后臺的一個虛擬單子。
表單一般由 文本框、下拉列表、單選、多選、文本域等組成。
Action屬性,用于指定當前表單 提交的時候指向后臺的地址。
1.1.2??? Input標簽
Input標簽是文本框、單選、多選、按鈕等。
Type屬性不同的取值決定了input標簽的作用。
文本框:text
密碼框:password
單選:radio
多選:checkbox
按鈕:button
提交按鈕:submit
重置按鈕: reset
Demo:
<input type="password">
<input type="radio" name="gender">
<input type="text">
?
Input標簽的 checked屬性,屬性值只有一個checked,可以省略屬性值,在單選按鈕和多選按鈕中表示 此按鈕被選中。
1.1.3??? Select標簽
Select標簽用于下拉列表,或者列表標簽。
選項用option標簽來設置,value值只有在后臺有用。Option包裹的內容是顯示的選項的文本。例如:
?<select name="" id="" multiple>
??? ??? ?? ?<option value="1">公歷</option>
??? ??? ?? ?<option value="2">農歷</option>
??? ??? ?? ?<option value="2">農歷</option>
??? ??? ?? ?<option value="2">農歷</option>
??? ??? ?</select>??
?
Multipe:也是一個單屬性。值只有一個multiple。設置了此屬性表示select標簽表現為 列表標簽。否則表示下拉列表標簽。
1.1.4??? 文本域標簽
Textarea文本域標簽,用來輸入大量文本的的標簽。文本域標簽的cols表示可以容納多少列字符。Rows容納多少行數據。一般用于輸入大量文本時才用這個,其他情況用input 就可以 了。
?
??? ??? ?<!-- 文本域 -->
??? ??? ?<textarea cols="20" rows="10">
??? ??? ?? 內容
??? ??? ?</textarea>
?
1.1.5??? Fieldset標簽
表單組合標簽,僅僅用于表單的組合。只是語義層面的事情。
可以影響到reset按鈕的效果。
Legend標簽用于組合標簽的標題。
<fieldset>
??? ??? ??? <legend>用戶組2</legend>
??? ??? ??? 用戶名2:<input type="text">
??? ??? ??? <br>
??? ??? ??? 密碼2:<input type="text">
??? ??? </fieldset>
?
1.1.6??? Lable標簽
Lable標簽可以讓 標簽文本點擊的時候讓label指向的標簽表單標簽獲得焦點。
兩種方式,使用for屬性指向 表單標簽。
用lable標簽包裹表單標簽。
案例:
??? <label for="txtName">文本框獲得焦點</label>
<label><input type="button" value="普通的按鈕"> 選中按鈕</label>
?
1.1.7??? 表單總結
Form:包裹標簽,action:#
?
Input:文本框、單選按鈕、多選按鈕type:checkbox、提交的按鈕、按鈕、重置的按鈕。
<input type=”text” >
Type:radio ,單選
<input type=”submit” value=”提交”>
<input type=”button”? value=”普通的按鈕”>
Checked屬性:標識單選或者多選按鈕是否被選中。單屬性。
?
Lable標簽,for屬性指向要提供服務的 標簽的id值。
Lable直接包裹標簽,可以實現點擊標簽的文字內容,讓包裹的表單標簽 標簽獲得焦點。
??? <label for="txtName">文本框獲得焦點</label>
<label><input type="button" value="普通的按鈕"> 選中按鈕</label>
?
Select:下拉列表,列表。? Multiple,單屬性。
Option設置我們的列表的選項。
?
Textarea文本域標簽:當輸入大量的文本的時候需要使用文本域標簽。
Cols設置文本域可以輸入多少列 字符。寬度。
Rows 設置文本域的可以輸入的行 字符數,高度。
?
Fildset標簽
Legend,組合標簽的標題。
?
?
1.2?? Iframe標簽
iframe標簽,元素會創建包含另外一個文檔的內聯框架(即行內框架)。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
可以設置高度和寬度(height,width)
去掉邊框:frameborder設置為0;
?
不建議使用了。
?
1.2.1??? Mate標簽的補充
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
上面代表如果是用ie打開的當前頁面,那么就使用最新的ie版本打開此頁面。
?
SEO優化的設置:
????? <meta name="keywords" content="招聘java,php,android,ios,c/c++,網頁設計,平面設計,UI設計,JavaScript,網絡營銷講師">
?
??? <meta name="description" content="IT培訓的龍頭老大,年薪30萬-50萬招聘Java,PHP, android,ios,c/c++。" >
?
?
<base target="_blank">
Base標簽可以讓當前頁面中的所有的a標簽都擁有相同 的屬性,比如targent屬性。
1.3?? 字符實體
怎么才能實現在HTML頁面中顯示HTML的代碼呢?
比如說:要在頁面中顯示:
??? <HTML5>
??? <p>這是p標簽的寫法</p>
?
HMTL:
-
網頁結構:HTML
Div、span、strong、em、table、tr、td
Ul、li、ol、dl、dt、dd
Input? select? textarea lable form fielset
?
CSS,描述樣式
JavaScript,實現頁面交互的效果。