【HTML】列表标签、表格标签、块级标签、表单标签

2023-11-18

一、列表标签

1、无序列表

type属性:表示的是项目符号的类型

属性值 描述
circle 空心圆圈
disc 实心圆点(默认类型)
square: 实心方块
<ul type="disc">
    <li>列表项</i>
    <li>列表项</i>
    <li>列表项</i>
    <li>列表项</i>
    ......
</ul>

2、无序列表

type属性:表示的是项目符号的类型

属性值 描述
1 项目符号是数字
a或A 项目符号是26个字母
i或I: 项目符号是罗马数字

start属性:表示项目符号的起始值,属性值必须是数字

<ol type="" start="">
   <li>列表项</i>
   <li>列表项</i>
   <li>列表项</i>
   <li>列表项</i>
</ol>    

3、定义列表(项目列表)

对项目的解释说明,列表项前没有项目符号。

<dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    .....
</dt>

二、表格标签

1、表格整体架构

<table>
    <caption>标签的标题</caption>
    <thead>
        <tr> 
            <th></th> 
            <th></th>
        </tr>
    </thead>
    <tbody>
       <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

2、表格的标签介绍

<table></table>:表示一个表格
<caption></caption>:表示表格的标题
<thead></thead>:是一个语义标签,表示表格的头部(表头)
<tbody></tbody>:语义标签,表示表格的主体部分   
<tr></tr>:是表格中的行标签
<th></th>:表示列标题,默认居中、文字加粗
<td></td>:表示单元格(列)

3、table标签的属性

属性值 描述
border 表格的边框线
bgcolor 表示表格的背景色
background 表格的背景图片
cellspacing 表示单元格之间的空白间距
cellpadding 表示单元格内容与单元格边框之间的空白间距
width 表格的宽度
height 表格的高度

4、 tr标签的属性

属性值 描述
align 水平对齐方式(left、center、right)
valign 垂直对齐方式(top、middle、bottom)
bgcolor 表示行的背景色
background 行的背景图片
height 行高

5、th、td标签的属性

属性值 描述
width 列宽
align 水平对齐方式(left、center、right)
valign 垂直对齐方式(top、middle、bottom)
bgcolor 单元格的背景色
background 单元格的背景图片
height 单元格高

6、跨行、跨列的表格

即合并单元格

 跨列属性:colspan="列数"
跨行属性:rowspan="行数"

三、块级标签

1、段落标签

<p> 内容 </p>

2、span标签

<span> 内容 </span>

3、lable标签

<label> 内容 </label>

4、div标签

可以作为容器(可以放其他的块级标签)

<div>内容</div>

四、表单标签

1、作用

用于收集用户信息。实现用户与网页之间的沟通与对话。

2、构成

  • 提示信息:说明性文字,提示用户如何操作
  • 表单控件:具体的功能项
  • 表单域:提示信息和表单控件

3、创建表单

<form action="远程服务器地址(URL地址)" method="提交方式" name="表单名称">
    提示信息、表单控件
</from>

4、提示信息

<lable>提示信息</lable>

5、表单控件

(1)input控件

单行文本输入框

<input type="text" placeholder="提示信息" maxlength="最大输入长度" value="" />

密码框

<input type="password" placeholder="提示信息" maxlength="最大输入长度" value=""/>

单选按钮

<input type="radio" value="" name="名称" checked/>文字   

checked:默认选中

绑定按钮文字与单选按钮点击:

<input type="radio" name="sex" value="1" checked id="s1">
    <label for="s1"></label>

复选按钮

<input type="checkbox" name="名称" value="">文字

数字输入框

<inpu type="number" name="名称" value="" max="最大值" min="最小值">

日期、时间输入框

<input type="date" name="名称">

颜色选择框

<input type="clolor" name="名称">

图像控件

部分浏览器不识别

<input type="image" name="名称" src="图片路径">

文件控件

<input type="file" name="名称">

隐藏控件

在页面上不显示,但可以向服务器传递值

<input type="hidden" name="名称" value="">

按钮

提交按钮

单击按钮后,该表单信息(表单域当中所有控件的值)提交到服务器(action指定的服务器)

<input type="submit" value="按钮上的文字">
重置按钮

单击该按钮,表单信息恢复到初始状态

<input type="reset" value="按钮上的文字"
普通按钮

单击按钮,没有任何操作

<input type="button" value="按钮上的文字">

(3)select控件

<select>
    <option value="">选项</option>
    <option value="">选项</option>
    <option value="">选项</option>
</select>
eg:
<label for="">&nbsp;&nbsp;&nbsp;贯:</label>
<select name="address" >
	<option value="1">北京</option>
	<option value="2">河北</option>
	<option value="3">河南</option>
	<option value="4">陕西</option>
</select>&nbsp;&nbsp;

(4)textarea控件

多行文本框

<textarea name="名称" cols="列数" rows="行数">
</textarea>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【HTML】列表标签、表格标签、块级标签、表单标签 的相关文章