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

╰+攻爆jí腚メ 2022-06-18 04:24 281阅读 0赞

## 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.表格 ###

<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慢。

**按钮**

**单选按钮**

<input type="radio" value="单选按钮的取值" name="单选按钮名称" checked>
    
    必须设置value的值
    checked 表示默认选中项

**复选项**

**重置按钮/提交按钮**

**密码域/文字域**

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

### 9. 文本框 ###

**下拉菜单**

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

**上传文件**

<form action="">
            输入要上传文件的路径：
            <input type="file" name="picture"><p>
            
            <input type="submit" name="submit" value="确定">
                    
            <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>