html列表、表格、表单、文本框

html+css网站开发兵书——html部分

6.列表

\

• 无序列表 \
  1. 有序列表 \
  2. 内容\

无序列表type：   
    disc实心圆    circle空心圆    square实心正方形    

有序列表type：
1   数字1，2，3.....
a   小写英文字母a,b,c,d.....    A    大写英文字母
i   小写罗马数字                I    大写罗马数字
有序列表可设置起始数值   start=3

​ 简化列表

<dl>   <dt>   <dd>
<dl compact="">
    <dt>
        html
        <dd>超文本标记语言，是用于描述网页文档的一种标记语言</dd>
    </dt>
    <dt>
        css
        <dd>级联样式表，用来进行网页风格设计的</dd>
    </dt>
    <dt>
        div
        <dd>div是用来为HTML文档内块的内容提供结构和背景的元素</dd>
    </dt>
</dl>

7.表格

<!-- width/height  也可设置成百分比格式-->   
<!-- cellpadding表格内文字与边框距离边距 -->
<!-- cellspacing表格内各个单元格的间距 -->

<table border="2" bordercolor="pink" bgcolor="" cellpadding="1" align="center" width="450" background="tupian.jpg" >
    <caption style="text-align:center font-weight: bold">表格标题</caption>
        <!-- 表头部 -->
        <thead align="center" height="80" valign="top" bgcolor="">
        <tr>
            <th bgcolor="#EF2525">表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        </thead>

        <!-- 表内容 -->
        <tbody>
        <tr>
            <td>文字1</td>
            <td>文字2</td>
            <td>文字3</td>
        </tr>
        <tr>
            <td>文字1</td>
            <td>文字2</td>
            <td>文字3</td>
        </tr>

每一行可以进行设置行背景  <tr align="center" bgcolor="red"> 
每一行可以进行设置纵向对齐   valign="top/middle/bottom"

其他属性

跨多列的表格单元：colspan
跨多行的表格单元：rowspan
文字内容不换行：nowrap

8.表单

<form enctype="编码方式">
    <input name="表单名称" type="控件类型" method="处理程序获得信息的方式"
     target="目标窗口的打开方式">
</form>

enctype取值：
text/plain   纯文本形式传送
application  默认编码形式
multipart    MIME编码，上传文件的表单必须选择该项

type的取值：
text  文字字段    password 密码域   button普通按钮   
hidden 隐藏域     file 文件域     image图形区，图像提交按钮
radio 单选按钮    checkbox 复选框      
reset 重置按钮    submit   提交按钮

target的取值：
_blank  将返回的信息显示在新打开的窗口中
_parent 显示在父级的浏览器窗口中
_self   显示在当前浏览器窗口
_top    显示在顶级浏览器窗口

method的取值：
get： 表单数据会被当作CGI或ASP的参数发送，也就是来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度会比post快，但缺点是数据长度不能够太长《默认方式》
post：表单数据是和URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的显示，缺点是速度上也回避POST慢。 

​ 按钮

<form action="deal.asp" name="example" method="post">
        <!-- 在页面中添加一个普通按钮 -->
        <input type="button" value="普通按钮" name="button1">
        <!-- 在页面中添加一个关闭当前窗口的按钮 -->
        <input type="button" value="关闭当前窗口" name="close" onclick="window.close()">
        <!-- 在页面中添加一个打开新窗口的按钮 -->
        <input type="button" name="opennew" value="打开窗口" onclick="window.open()">

​ 单选按钮

<input type="radio" value="单选按钮的取值" name="单选按钮名称" checked>

必须设置value的值
checked 表示默认选中项

​ 复选项

<form action="deal.asp" name="example" method="post">
        <!-- checked复选  默认选中 -->
        <input type="checkbox" name="test" value="A2" checked>看书
        <input type="checkbox" name="test" value="A3">上网
        <input type="checkbox" name="test" value="A1">逛街
    </form>

​ 重置按钮/提交按钮

<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">

​ 密码域/文字域

name: 域的名称，不能包含特殊字符，也不能以html预留字作为名称
size: 定义密码域的文本框在页面中的显示长度，以字符作为单位
maxlength: 定义在密码域的文本框中最多可以输入的文字数
value: 定义默认值

9. 文本框

<textarea name="文本域名称" value="文本框默认值" cols="列数" rows="行数">

​ 下拉菜单

<form action="">
        <select name="下拉菜单的名称" id="">
        <!-- selected 初始显示位置 -->
        <option value="选项1" selected></option> 选项显示内容
        <option value="选项2"></option>选项显示内容 
        </select>
    </form>

​ 上传文件

<form action="">
        输入要上传文件的路径：
        <input type="file" name="picture"><p>
        <!-- submit提交按钮 -->
        <input type="submit" name="submit" value="确定">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" name="reset" value="取消"><br>
</form>

​ 提交框改为图片形式

    管理员登陆：
    <form action="land.asp" name="research" method="post">
        <p>用户：
        <input type="text" name="usename">
        </p>
        <p>密码：
        <input type="password" size="10"><br><br><br>
        <input type="image" src="tupian.jpg" name="image1" width="40" height="20">
        </p>
    </form>