码迷,mamicode.com
首页 > Web开发 > 详细

web前端之html_day2

时间:2016-05-09 11:13:54      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:web前端   html.css   

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>     给表格加标题

    技术分享

    技术分享

    table结构:

       <table>

            <thead></thead>

            <tbody></tbody>

            <tfoot></tfoot>

        </table>

    如果按照结构去写表格,就一定要按照顺序去写

    技术分享

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>

本文出自 “Shaw Blog” 博客,请务必保留此出处http://opsedu.blog.51cto.com/9265055/1771358

web前端之html_day2

标签:web前端   html.css   

原文地址:http://opsedu.blog.51cto.com/9265055/1771358

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!