HTML 表格制作,列表以及叫你如何制作多级选择栏

289 阅读2分钟

「这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战

一,列表

列表可分为 有序列表无序列表 下面来了解一下具体使用方法

1.如何创建一个有序列表

<ol type='符号类型'>
	<p>type可设置符号类型,数字,大小写英文,或罗马字母</p>
    <li>点赞</li>
    <li>收藏</li>
    <li>加关注</li>
</ol>

运行结果:

  1. 点赞
  2. 收藏
  3. 加关注

2.如何创建一个无序列表

<ul tyep='disc'|'ciecle'|'square'>
	<p>type可设置加重符号</p>
    <li>点赞</li>
    <li>收藏</li>
    <li>加关注</li>
</ul>

运行结果

  • 点赞
  • 收藏
  • 加关注

二,表格

使用table标签来创建一个标签 其优点:简单通用,结构稳定。

我们都知道表格有行有列,那么我们就使用 行的标签创建行 表项标签创建列

创建一个三行四列的标签

<table border="2">
<caption>三行四列表格</caption>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
               
    </table>

如下:

三行四列表格

table属性简介:

  • border:定义表格边框的粗细
  • width:定义表格的宽度
  • height:定义表格的高度
  • cellspacing:定义表格间隙
  • cellpadding:定义表项内部空白

其中还有两个比较重要的属性:

rowspan="n" 定义表格上下行合并 colspan="n"定义表格左右行合并

❤再补充三个分组标签:

<thead>表格头部</thead>
<tbody>表格数据主题</tbody>
<tfooter>表格页脚</tfooter>

一个小小的博主每天为大家分享笔记,回顾基础知识 大家可以❤点点关注,收藏专栏❤每天温故而知新❀

一,首先我们来了解什么是选择框

那么如下图的展示就是我们今天要学习的选择框的制作

选择框

1.首先我们要用到的标签及其格式如下:

<select size='' name='' multiple='multiple'>
	<option value='可选择的内容' selected='selected'>...</option>
	<option>...</option>
	<option>...</option>
</select>

其中属性标签介绍如下: size:填入数字,表示滚动条下拉列表中一次可显示的列表项数,默认值是1 name:控制操作名 multiple:此属性控制可选多个选项,否则只能选择一个

value:指定控制操作的初始值 select:此标签代表默认选中 2.了解了标签及其属性下面我们来进入实战:

<select name='work' size='1'>
<!-- size设置列表中一次可显示的选项数 -->
	<option value='农民'>农民</option>
	<option value='教师'>教师</option>
	<option value='公务员'>公务员</option>
	<option value='程序员' selected='selected'>程序员</option>
<!-- selected='selected'设置程序员为默认选项 -->
</select>

一起来看一下结果: 表单

二,最后我们再插入一个文本域的讲解

创建一个多行文本域:

<textarea naem='文本域名字' row='设置行数' cols='设置列数'></textarea>

补充: 此标签不可以使用value属性 让我们来创建一个10行30列的文本框:

文本框