HTML学习（六）：列表表格表单

最新推荐文章于 2024-03-31 14:25:55 发布

蔚蓝色的风暴

最新推荐文章于 2024-03-31 14:25:55 发布

阅读量146

点赞数

分类专栏： web前端 HTML 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_37831759/article/details/119794031

版权

web前端同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

                                           ## 列表标签

列表标签有三种

（1）无序列表<ul>

在无序列表中，每一项为 <li>

<ul>
	<li>yoyo</li>
	<li>yoyo</li>
</ul>

结果为

yoyo
yoyo

注意 <li>必须在<ul>中

<ul>具有属性值 type 其中 dics为实心圆点 square 为实心方点 circle 为空心圆

<li>也有相同的属性值，但不常用

（2）有序列表<ol>

里面每一项都是<li>

<ol>
	<li>嗯</li>
	<li>哦</li>
</ol>

效果为

<ol>具有属性值type 属性值可以是 1 a A i I

start属性决定从几开始

注意：<li>是容器级标签，里面可以放任何东西，包括图片，包括<ol>

（3）定义列表<dl>

<dl>是 define list的缩写，只能包含<dt> 和 <dd>

<dt>是列表标题

<dd>是列表项

<dl>
	<dt>第一条</dt>
	<dd>哦哦哦<dd>
	
	<dt>第二条</dt>
	<dd>哈哈哈</dt>
</dl>

效果为

第一条

哦哦哦

第二条

哈哈哈

表格标签

表格标签为<table> 每个表格由行组成<tr> 每行由单元格<td>组成

<table>
	<tr>
		<td>哦哦</td>
		<td>哈哈</td>
	</tr>
</table>

效果如下

哦哦

哈哈

<table>有如下属性

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir=“rtl”，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background=“路径src/…”：背景图片。背景图片的优先级大于背景颜色。
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），
rtl：从右到左（right to left）
既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

`<tr>`行

一个表格是由行组成的，包含以下属性

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
- ltr：从左到右（left to right，默认)
- rtl：从右到左（right to left）

bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align=“center”：一行的内容水平居中显示，取值：left、center、right
valign=“center”：一行的内容垂直居中，取值：top、middle、bottom

`<td>`单元格

align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。

单元格的合并

colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

<th>加粗的单元格

<caption>表格标题

框架标签

<iframe>用于在网页中显示多个页面是<body>的子标签

表单标签

<form>表示表单标签，用于让用户填写
属性：

name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
method：表单数据的提交方式，一般取值：get(默认)和post

<input>输入标签接受用户输入

属性值有：

type输入类型
value默认内容
size输入字符数量
readonly只读
disable光标也点不进去

<form>
	姓名：<input value="呵呵" >逗比<br>
	昵称：<input value="哈哈" readonly=""><br>
	名字：<input type="text" value="name" disabled=""><br>
	密码：<input type="password" value="pwd" size="50"><br>
	性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
		  <input type="radio" name="gender" id="radio2" value="female" >女<br>
	爱好：<input type="checkbox" name="love" value="eat">吃饭
		  <input type="checkbox" name="love" value="sleep">睡觉
		  <input type="checkbox" name="love" value="bat">打豆豆
</form>

效果：

我是图片描述
注意，多个单选框的input标签中，name可以相同，但id必须唯一

`<select>`下拉列表标签

<select>标签中的每一项用<option>表示

<form>
    <select>
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option>大学</option>
        <option selected="">研究生</option>
    </select>
</form>

效果为
在这里插入图片描述

蔚蓝色的风暴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（六）：列表表格表单

列表标签列表标签有三种（1）无序列表<ul>在无序列表中，每一项为 <li><ul> <li>yoyo</li> <li>yoyo</li></ul>结果为 yoyo yoyo注意 <li>必须在<ul>中<ul>具有属性值 type 其中 dics为实心圆点 square 为实心方点 circle 为空心圆<li>也有相同的属性值，
复制链接

扫一扫