首页 > 代码库 > 1.2 HTML“三表”

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=http://www.mamicode.com/“” size=“设置文本框中字的大小” maxlength=“控制输入字符的个数”/>
口令框     (不用placeholder)
  <input type=“password” name=“” size=“” value=http://www.mamicode.com/“” maxlength=“”/>

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

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

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

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

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

下拉框:是双标签
  <select name=“sheng” >
    <option value=http://www.mamicode.com/“sc”>四川省
    <option value=http://www.mamicode.com/“hb” selected>河北省
    <option value=http://www.mamicode.com/“ah”>安徽省
  </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}                自定义列表样式

 

1.2 HTML“三表”