web前端之html_day2

1meta標籤

<metacharset="UTF-8"/>

<metaname="Keywords" content=" "/>

<meta name='Description' content=" "/>                                    

         Charset:指定當前文檔編碼格式

    Keywords:表示關鍵字,對搜索引擎友好,實現網站推廣

    Description:表示網站描述,網站優化

2、表格

    <table width='30px' height='60px'border='1' cellpadding='0'>定義一個表格

        <tr>            定義行

            <td></td>定義列

        </tr>

</table>

   width:  設置寬度

    height:設置高度

    border:設置邊框

    cellpadding:    設置文字與列(td)之間的距離

    cellspacing:    設置列與列之間的距離(默認爲2

    align='center' 給表格設置,讓表格居中,給列設置,讓文字居中

    <th></th>   設置表格內容標題,用法和td用法是一樣的

    bgcolor     設置表格背景顏色

    <caption></caption>     給表格加標題

    wKiom1cv5oXyLjaqAAAdIi8-2ao716.png

    wKioL1cv53_iWdfFAAAlD_8MtQ0374.png

    table結構:

       <table>

            <thead></thead>

            <tbody></tbody>

            <tfoot></tfoot>

        </table>

    如果按照結構去寫表格,就一定要按照順序去寫

    wKioL1cv55ugKGIqAADOngDNsJE403.png

2、表單

    作用:搜索用戶信息

屬性:action/method

    action 指定處理表單信息的程序

    method get或者post  指的是表單的提交方式

       get:講我們的表單信息暴漏在地址欄中(安全性差)

       post:通過後臺方式提交給處理程序(安全性比較高)

    表單結構:

       <form>

               表單控件

       </form>

    表單控件:

       a文本框 <inputtype="text">

                   <form action="1.php"method="post">

             <input type="text" name="username"maxlength="3" readonly="readonly" >

                                     maxlength:設置最大長度

                readonly="readonly":只讀(此時表單不能輸入信息)

             <input type="text" name="username"maxlength="6" disabled="disabled">

                                     disabled="disabled"控件未激活(此時表單不能輸入信息)

            </form>

 

 

        b、密碼框 <inputtype="password">

             <input type="password">

                                    

      c、單選框 <input type="radio">

                            <form action="1.php"method="post">

                 <inputtype="radio" name="xingbie">

                 <inputtype="radio" name="xingbie" checked="checked">

                                     checked="checked"設置默認選中

             </form>

       d、多選框<inputtype="checkbox">

           <inputtype="checkbox" checked="checked">看書

             <inputtype="checkbox">上網

           <input type="checkbox">旅遊

             <inputtype="checkbox" checked="checked">學習

       e、下拉列表框

       <select></select>這是下拉列表框

           <select>

                 <option>北京</option>

                 <option>上海</option>

                 <option>河南</option>

             </select>

       下拉列表分組顯示

           <select>

                 <optgrouplabel="上海">

                      <option>松江區</option>

                      <option>閔行區</option>

                      <option>徐彙區</option>

                 </optgroup>

             </select>

       屬性:multiple="multiple"  實現多選效果

屬性:selected="selected"設置下拉列表框實現默認選中

           <selectmultiple="multiple">

                  <option>北京</option>

                  <option>安徽</option>

                  <optionselected="selected">上海</option>

             </select>

       f、多行文本框 <textarea></textarea>

           屬性:  cols="30"   用法效果和width一樣

                   rows="10"  用法效果和height一樣

           介紹自己:

            <textareacols="30" rows="60">

            </textarea>

       g、上傳控件

           <inputtype="file">

    三種按鈕:

        h、普通按鈕

           <input type="button" value="確定">

           注意:此按鈕和js配合使用

       i、重置按鈕(將表單中的數據恢復到默認值)

           <inputtype="reset">

       j、提交按鈕

         <input type="submit">

           <input type="image"src="Hydrangeas.jpg"> 此按鈕和submit按鈕都可以提交表單

       k、表單分組控件:<fieldset></fieldset>

           <fieldset>

                 <legend>人員註冊信息</legend>

                 <label>姓名:</label>

<label>年齡:</label>

             </fieldset>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章