【第四天】03-HTML的內容標簽筆記(下)

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:

  1. 網頁結構:HTML

    Div、span、strong、em、table、tr、td

    Ul、li、ol、dl、dt、dd

    Input? select? textarea lable form fielset

    ?

  2. CSS,描述樣式

  3. JavaScript,實現頁面交互的效果。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統一,系統功能實現集...
    liusong007閱讀 1,082評論 0 1
  • 4.表單標簽 4.1Form標簽 Form標簽,表單的域標簽,用于包裹整個表單的內容。 表單就是用戶提交數據到后臺...
    千里一線緣閱讀 556評論 0 0
  • ********** 未經本人允許,嚴禁轉載任何網站 ********** 本人在慕課網學習HTML+CSS基礎課...
    zhaolion閱讀 11,001評論 46 548
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,320評論 1 41
  • 一.什么是< form>表單 格式: 作用:form表單一般用來收集用戶的信息,并把信息傳送到后臺。 注意點:1....
    饑人谷_劉沖閱讀 2,755評論 0 1