• 1.2 HTML“三表”


     HTML“三表”

    • 表单(form)
    • 表格(table)
    • 列表(list)

    表单(form)

    输入文件型表单
    <form action=“URL”(或空格) method=“post/get”>
      <input  />
      ......... ..........
    </form>

      get:从服务器上面取数据       post:向外传输数据

      get:不加密 ,明文显示      post:加密 安全性高

    ----------------------- 文本框:

      type方式:text

           name:文本框的名称

           value:文本框的默认值

           size:文本框的长度

           maxlength:控制文本框最大能输几位( 不管中英文,数字)

           placeholder:输入内容,会把默认的文字覆盖。---( css3 )

    文本框
      <input type=“text” name=“” value=“” size=“设置文本框中字的大小” maxlength=“控制输入字符的个数”/>
    口令框     (不用placeholder)
      <input type=“password” name=“” size=“” value=“” maxlength=“”/>  

    单选框    (一定要加上name="",同组相同)
      <input type=“radio” name=“sex” value=“man”/>男
      <input type=“radio” name=“sex” value=“woman” checked/>女
      注: checked为默认值,一般情况下可以不用写,要加的话一般加在第一个。
    复选框
      <input type=“checkbox” name=“love” value=“zq” checked />足球
      <input type=“checkbox” name=“love” value=“lq”/>篮球
      注: checked表默认值
    选择文件
      <input type=“file” value=“photo” name=“photo” size=“控制框的大小”/>
    按钮
      <input type=“submit” name=“sub” value=“提交”/>  提交按钮
      <input type=“reset” name=“res” value=“重新设置”/> 重新设置按钮
      <button>按钮</button> 设置按钮,默认是提交按钮

    填写意见框(文本域):是双标签 

      <textarea name=“idea” cols=“列” rows=“行”>请填写意见< / textarea>

      style="resize:none;"  可以锁定框的大小,防止把文本域缩放;

      overflow:auto;   取消ie浏览器下的默认滚动条;

    下拉框:是双标签
      <select name=“sheng” >
        <option value=“sc”>四川省</option>                  <!--子集-->
        <option value=“hb” selected>河北省</option>
        <option value=“ah”>安徽省</option>
      </select>
      注: selected表默认值

    表格(table)

    创建一个四行三列的表格

    <table width="480" height="200" border="1" rules="all">
      <tr>
        <td height="45" colspan="3" align="center">课程表</td>
      </tr>
      <tr>
        <th >星期一</th>
        <th >星期二</th>
        <th >星期三</th>
      </tr>  
      <tr>
        <td align="center">语文</td>
        <td align="center">英语</td>
        <td align="center">数学</td>
      </tr>

      <tr>
        <td align="center">数学</td>
        <td align="center">语文</td>
        <td align="center">英语</td>
      </tr>
    </table>

      <tr></tr>   定义表格的行
      <td></td>  定义表格的单元格(列)
      <th></th>  定义表格的表头 ,表 格标题,会自动加粗居中

    1.设定边框的厚度 -- border

      <table border="1">,表格的外边框的线为1个像素
    2.设定格线的宽度 -- cellspacing
      <table cellspacing="1">  

    3.设定资料与格线的距离 -- cellpadding
      <table cellpadding="1">  
    4.调整表格宽度 -- width
      <table width=点数("110")或百分比>
    5.调整表格高度 -- height
      <table height=点数("110")或百分比>
    6.设定表格背景色彩 -- bgcolor
      <table bgcolor="#rrggbb">
    7.设定表格边框色彩 -- bordercolor
      <table bordercolor=#rrggbb>
    8.设置文本水平居中-- align
           <td align="center">语文</td>
    9.设置文本垂直居中-- valigin
            <td valigin=“ middle”>语文</td>
    10.合并单元格
            <td vcolspan="  ">语文</td>
    11.拆分单元格
           <td rowspan="  ">语文</td>

    12.行列的线

      rules ="cols"     只有列的线

      rules ="rows"    只有行的线

      rules ="all"        行列线都有

      rules ="none"    行列的线都没有

    列表(list)


    有序列表:在列表项内容前自动增加排列序号
    <ol type=“a” start=“3”> (注:默认序列为数字)
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
          </ol>
    :type中是a,表序列为小写字母(大写表大写字母),type中是i,表罗马序号小写(I大写表大写),start=“3”,表从第三个字符开始


    无序列表:强调式列表,在内容前显示特殊符号
    <ul type=“square(方形实心) | disc(实心圆) | circle(空心圆)”> (注:默认为圆点)
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li> 
    </ul>
    注:去除序列前的符号 ul,li{margin:0;padding:0;list-style:none;}

           ul li{list-style:none;}                          清除列表前面的样式

           ul li{list-style-postion:inside;}             使列表前的样式包含在列表中

           ul li{list-style-postion:outside;}           使列表前的样式包含在列表之外

           ul li{list-style-image:url}                自定义列表样式

  • 相关阅读:
    凯撒密文的破解编程实现
    微软ping命令的源代码
    从编程到入侵
    永远的后门
    永远的后门
    奇妙的Base64编码
    用端口截听实现隐藏嗅探与攻击(二)
    奇妙的Base64编码
    Liferea 1.1.2
    Equinox Desktop Environment 1.1
  • 原文地址:https://www.cnblogs.com/fxty/p/7041350.html
Copyright © 2020-2023  润新知