天天看點

html 之表單,div标簽等。。。。。。。

一、表單

功能:表單用于向伺服器傳輸資料,進而實作使用者與Web伺服器的互動

      表單能夠包含input系列标簽,比如文本字段、複選框、單選框、送出按鈕等等。

      表單還可以包含textarea、select、fieldset和 label标簽。

表單屬性

     action: 表單送出到哪.一般指向伺服器端一個程式,程式接收到表單送出過來的資料(即表單元素值)作相應處理,比如https://www.sogou.com/web

     method: 表單的送出方式 post/get預設取值就是get

注意啦!!!!

from表單:實作使用者與web伺服器的互動
以鍵值對的形式發過去{"":"haiyan","":"123"}
如果沒有name屬性,你的資料是不過去的
name:鍵名


請求server端的方式:
    get:請求會放在url後面 username=yaun&password =123
    post:請求會放在請求體裡

    
關于 url的内容    
    url: https://www.baidu.com(協定:域名(也是ip+端口))
    url: http:127.0.0.1:8800/blog/addBlog(協定:ip:端口/)
    url: http:127.0.0.1:8800/blog/addBlog?username = yuan


    http:協定
    127.0.0.1:8800:ip位址與端口
    blog/addBlog:url的路徑(path)
    username = yuan:get請求資料

請求協定:
    浏覽器發給伺服器(get請求,post請求)
    格式:
        請求首行
        請求頭:就是一組組鍵值對
        換行 \n,\n\r
        請求資料:有兩種方式
        if get :
            url?data
        if post :
            請求資料
            
        get請求:安全性差,資料量有限(當設計到查詢的時候會用到get請求)
        那些是get請求(一般都是查詢資料庫操作):
            1.url通路server端
            2.超連結通路,即a标簽
        post請求:相對于get安全點,,但是沒有絕對的安全(修删改可以用post)
        
相應協定:      

表單元素

基本概念:

HTML表單是HTML元素中較為複雜的部分,表單往往和腳本、動态頁面、資料處理等功能相結合,是以它是制作動态網站很重要的内容。

表單一般用來收集使用者的輸入資訊

表單工作原理:

通路者在浏覽有表單的網頁時,可填寫必需的資訊,然後按某個按鈕送出。這些資訊通過Internet傳送到伺服器上。 

伺服器上專門的程式對這些資料進行處理,如果有錯誤會傳回錯誤資訊,并要求糾正錯誤。當資料完整無誤後,伺服器回報一個輸入完成的資訊

<input>系列标簽

\'\'\'
<1> 表單類型

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 送出按鈕            

             button 按鈕(需要配合js使用.) button和submit的差別?

             file 送出檔案:form表單需要加上屬性enctype="multipart/form-data" 
            
            上傳檔案注意兩點:
請求方式必須是post
enctype="multipart/form-data"

 <2> 表單屬性

 name:    表單送出項的鍵.

           注意和id屬性的差別:name屬性是和伺服器通信時使用的名稱;
           而id屬性是浏覽器端使用的名稱,該屬性主要是為了友善用戶端程式設計,而在css和javascript中使用的

value:    表單送出項的值.對于不同的輸入類型,value 屬性的用法也不同:

                type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
                type="text", "password", "hidden" - 定義輸入字段的初始值
                 
                type="checkbox", "radio", "image" - 定義與輸入相關聯的值


checked:  radio 和 checkbox 預設被選中

readonly: 隻讀. text 和 password

disabled: 對所用input都好使.

\'\'\'      

select标簽

\'\'\'
 <select> 下拉選标簽屬性
          name:表單送出項的鍵.
          size:選項個數
          multiple:multiple 
                 <optgroup>為每一項加上分組
                 <option> 下拉選中的每一項 屬性:
                       value:表單送出項的值.   
                       selected: selected下拉選預設被選中

\'\'\'      

<textarea> 多行文本框

‘’\'\'

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“寬度” rows=“高度” name=“名稱”>
                   預設内容
        </textarea>
</form>

\'\'\'      

<label>标簽

定義:<label> 标簽為 input 元素定義标注(标記)。

說明:

1 label 元素不會向使用者呈現任何特殊效果。

2 <label> 标簽的 for 屬性值應當與相關元素的 id 屬性值相同。

\'\'\'

<form method="post" action="">

        <label for=“username”>使用者名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

\'\'\'      

<fieldset>标簽

\'\'\'

<fieldset>
    <legend>登入吧</legend>
    <input type="text">
</fieldset>

\'\'\'      

執行個體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注冊頁面</title>
</head>
<body>
<h3>注冊頁面</h3>
<!--action放的是ip位址和端口-->
<!--method放的是請求方式-->
<form action="" method="post">
    <hr size="5" color="red">表單中input系列
    <label for="c1"> <!--label标簽就是把下面的姓名關聯起來-->
         <p>姓名:<input type="text" name="username" id="c1"></p>
    </label>
    <!--#當你不輸入的時候有個預設的value值-->
    <p>密碼:<input type="password" name="password" value="123"></p>
    <!--單選框ridio-->
    <p>性别:<input type="radio" name = gender value="male">男:<input type="radio" name="gender" value="female">女</p>
    <!--複選框checkbox-->
    <p>愛好:<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="sport">運動</p>
    <!--檔案-->
    <p>頭像:<input type="file" name="fileobj"></p>
    <hr size="5" color="red">上面的value和下面的value是不一樣的,上面的是發送請求的,下面的是修改值的
    <!--重置-->
    <p><input type="reset" value="reset"></p>
     <!--其實是submit按鈕把資料送出到action指定的位址了-->
    <p><input type="submit"></p>
    <!--空按鈕  當你輸入值才有内容-->
    <!--onclick:滑鼠點選事件-->
    <p><input type="button" value="按鈕" onclick="alert(\'确定\')"></p>
    <!--onmouseover:滑鼠指到上面就觸發-->
    <p><input type="button" value="按鈕" onmouseover="alert(\'确定\')"></p>
    <!--隐藏:不想讓使用者看見-->
    <p><input type="hidden" name="sss" value="sds"></p>
    <!--文本域-->
    <p>個人履歷<br>
        <textarea name="selfinfo" cols="30" rows="10"></textarea>
    </p>
    <fieldset>海燕啊啊啊啊啊啊啊</fieldset>
    <!--下拉框-->
    <hr size="5" color="red">表單中select系列
    <select name="provice" size="5"  multiple="multiple" >
        selected設定預設選擇。如果select裡有multiple屬性,那麼可以在option裡面設定多個selected
        <option value="hebei" selected="selected">甘肅省</option>
        <option value="henan" selected="selected">河南省</option>
        <option value="hebei">湖北省</option>
        <option value="shanxi">陝西省</option>
    </select>
    <fieldset>
        <legend>登入吧</legend>
        <input type="text">
    </fieldset>

</form>
<!--以鍵值對的形式發過去{"":"haiyan","":"123","gender":"male","hobby":["basketball","football"],"fileobj":"fileobj"}-->
<!--如果沒有name屬性,你的資料是發不過去的-->
<!--name:鍵名-->
</body>
</html>      

2.div和span标簽

<div></div> : <div>隻是一個塊級元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現.

<span></span>: <span>表示了内聯行(行内元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.

塊級元素與行内元素的差別

所謂塊元素,是以另起一行開始渲染的元素,行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面産生任何的影響。

這兩個元素是專門為定義CSS樣式而生的。

3.圖檔标簽img

src: 要顯示圖檔的路徑.

alt: 圖檔沒有加載成功時的提示.

title: 滑鼠懸浮時的提示資訊.

width: 圖檔的寬

height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.)

\'\'\'      

4.清單标簽

<ul>: 無序清單 [type屬性:disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]

<ol>: 有序清單
         <li>:清單中的每一項.

<dl>  定義清單

         <dt> 清單标題
         <dd> 清單項

\'\'\'      

 執行個體:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序清單&#45;&#45; order list-->
<!--預設是1,2,3,4有序,如果加type就會以你指定的有序-->
<ol type="a"> 
    <li>haha</li>
    <li>haha</li>
    <li>haha</li>
    <li>haha</li>
    <li>haha</li>
</ol>
<!--無序清單-->
<ul>
    <li>鳥</li>
    <li>鳥</li>
    <li>鳥</li>
    <!--實心圓(預設是實心圓)-->
    <li type="disc">鳥</li>
    <!--空心圓-->
    <li type="circle">鳥</li>
    <!--方形-->
    <li type="square">鳥</li>
</ul>
<!--定義清單-->
<!--define liset-->
<dl>
    <!--定義的标題内容  define title-->
    <dt>河北省</dt>
    <!--内容-->
    <dd>石家莊</dd>
    <dd>天津</dd>
    <dd>雄安</dd>
</dl>
</body>
</html>      

運作截圖

html 之表單,div标簽等。。。。。。。
html 之表單,div标簽等。。。。。。。