首页 > 其他分享 >列表、表格、表单

列表、表格、表单

时间:2023-03-07 09:00:26浏览次数:50  
标签:表格 标签 dd 列表 disabled 表单 button

定义列表

格式:

  • dl
    • dt
    • dd
    • dd

代码如下:

代码展示效果:

注意:

一个dt中可以包含一个dd,也可以包含多个dd

表格

表格中的标签都有:

  • table 表格的包裹标签
  • caption 表格标题
  • thead 表头
  • tboody 表格主体
  • tfooot 表尾
  • tr 行
  • th 表头单元格
  • td普通单元格

代码主要格式:

=注意:=

<table border="1" width="600" cellspacing="0" cellpadding="10">

<!-- 
            border 表格边框,值为数字表示边框粗细(当直接写border时,该值默认为1)
            width 表格总宽
            height 表格主体高度(是主体tbody的高度,不包含表头thead的高度)
            cellspacing 单元格之间的间距
            cellpadding 单元格内补白,内容与边框间距
         -->

</table>

例如:

(没加table的修饰之前)

(添加table的修饰之后)

<table>
	<thead align="right" valign="top">
		<!-- 
                align 水平对齐方式
                	值:left,right,center
                valign 垂直对齐方式
                	值:top,bottom,middle
                可以设置的元素:thead,tbody,tfoot,td/th
                (注意:1.当给table设置的时候是表格针对于整个页面居				中、居左、居右
                2.当表格没有设置高度的时候,单元格的高度为【内容高度					+内间距】,此时设置valign的值没有变化
         -->
	</thead>
</table>
<!-- 
        rowspan 跨行
        colspan 跨列
-->
    <table border="1" width="400">
        <thead>
            <tr>
                <th>时间</th>
                <th colspan="2">上午</th>
                <th colspan="2">下午</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">星期一</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

表单

标签名 语义和功能 属性 单标签和双标签
form 表单 action: 提交到后台的链接地址
target:设置打开窗口
双标签
input 多种类型的表单控件 type:类型
value:
disabled:禁用,失效
maxlength: 最大长度
checked:设置默认选中
单标签
button 按钮 type:
disabled:
双标签
textarea 文本域 rows:行数
cols:列数
disabled:
双标签
select 下拉选项框 disabled: 双标签
option 下拉选项的选项 value:
selected:默认选中的下拉选项
disabled:
双标签
label 关联表单控件 for:设置关联的元素 双标签
1. input 标签的 type 属性的值有 text、password、radio、checkbox、submit、reset、button,默认值是 text
2. button 标签的 type 属性的值有 submit、reset、button,默认值是 submit
<h3>单选按钮</h3>
         <input type="radio" name="gander" value="man">男
         <input type="radio" name="gander" value="woman">女
         <input type="radio" name="gander" value="else" checked>保密
         <!-- 单选按钮中的name必须相同 -->
         
<h3>复选框</h3>
         <input type="checkbox" name="" value="love">看书
         <input type="checkbox" name="" value="love">跑步
         <input type="checkbox" name="" value="love" checked>敲代码

<h3>普通按钮</h3>
         <button>点火发射</button>
         <input type="button" name="" id="" value="点击添加">

<h3>文本域</h3>
         <textarea name="" id="" cols="30" rows="10"></textarea>
         
<h3>下拉选项框</h3>
         <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广东</option>
         </select>
         
<h3>disable属性</h3>
        <input type="password" value="123456" maxlength="6" disabled>
        
<h3>lable 关联表单控件 和 for 设置关联的元素</h3>
		<!-- 方法一 -->
        <label for="mima">请输入密码</label>
        <input type="password"  maxlength="6" id="mima">
        <br>
        <!-- 方法二 -->
        <label >
            <input type="radio" name="gander" value="man">男
            <!-- 注意:这种方法关联的时候不要添加for,就算不写for的值也不能添加,不然无效 -->
        </label>
        <label >
            <input type="radio" name="gander" value="woman">女
        </label>
        <label >
            <input type="radio" name="gander" value="else" checked>保密
        </label>

标签:表格,标签,dd,列表,disabled,表单,button
From: https://www.cnblogs.com/chichi0002/p/17186861.html

相关文章