HTML基础标签（二）【列表标签、表格标签、块级标签、表单标签】

最新推荐文章于 2021-07-24 17:28:18 发布

impact_factor

最新推荐文章于 2021-07-24 17:28:18 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

分类专栏： html 笔记文章标签： html html5

本文链接：https://blog.youkuaiyun.com/impact_factor/article/details/115836435

笔记同时被 2 个专栏收录

7 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文详细介绍了HTML中的列表、表格、块级元素及表单等基本元素的使用方法，并提供了丰富的示例代码，帮助读者更好地理解和应用这些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、列表

1、无序列表

列表项没有先后顺序

   <ul type="disc">
     <li>列表项</i>
	 <li>列表项</i>
	 <li>列表项</i>
	 <li>列表项</i>
	 ......
   </ul>

type属性：表示的是项目符号的类型；
circle：空心圆圈；
disc：实心圆点(默认类型)；
square：实心方块；

2、有序列表

列表项有先后顺序

   <ol>
	   <li>列表项</i>
	   <li>列表项</i>
	   <li>列表项</i>
	   <li>列表项</i>
	   ......
	</ol>

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

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

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

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

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

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

4、列表的嵌套

在列表项下嵌套列表，可以表示分类

<ul>
  <li>列表项</li>
     <ol>
	    <li>列表项</li>
	 </ol>
</ul>

二、表格标签

表格整体结构：

<table border="边框线宽" cellspacing="单元格间距" cellpadding="内容和单元格边框线的间距">
	<caption>标签的标题</caption>
    <thead>
        <tr>
            <th>列标题</th>
            <th>列标题</th>
            <th>列标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </tbody>
</table>

1、<table></table>：表示一个表格

2、<thead></thead>：是一个语义标签，表示表格的头部(表头)

3、<tr></tr>：是表格中的行标签

4、<td></td>：表示单元格(列)

5、<th></th>：表示列标题，默认居中、文字加粗

6、<tbody></tbody>：语义标签，表示表格的主体部分

7、<caption></caption>：表示表格的标题

table标签的属性：

border：表格的边框线

bgcolor：表示表格的背景色

background：表格的背景图片

cellspacing：表示单元格之间的空白间距

cellpadding：表示单元格内容与单元格边框之间的空白间距

width：表格的宽度

height：表格的高度

th、td的属性：

width：表示列宽

align：表示水平对齐方式(left、center、right)

valign：垂直对齐方式(top、middle、bottom)

bgcolor：表示单元格的背景色

background：单元格的背景图片

height：单元格高

<td valign = "bottom"> 底部对齐</td>

<td valign = "top"> 顶部对齐</td>

tr的属性：

align：表示水平对齐方式(left、center、right)

valign：垂直对齐方式(top、middle、bottom)

bgcolor：表示行的背景色

background：行的背景图片

height：行高

跨行、跨列的表格：即合并单元格

跨列属性：colspan="列数"

跨行属性：rowspan="行数"

三、块级标签

1、段落标签：

<p> 内容 </p> --> 自动换行

2、span标签

<span> 内容 </span>

3、lable标签

<label> 内容 </label>

4、div标签

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

<div>内容</div>

四、网页的布局

框架(不能放在<body>中)

  <frameset cols="列数" rows="行数">
	   <frame></frame>
	</frameset>

五、表单

1、作用：

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

2、表单的构成：

(1)提示信息：是说明性的文字，提示用户如何进行操作

(2)表单控件：是具体的功能项

(3)表单域：包含了提示信息和表单控件

3、创建表单：

   <form action="URL地址" method="提交方式" name="表单名称">
      提示信息、表单控件
   </form>

action：指定接收表单数据的服务器的地址
method：表单数据的提交方式。常用的方式是get或post
name：表单名称，用于多个表单的区分

4、提示信息：

<label> 提示信息 </label>

5、表单控件：

(1)input控件：

A、单行文本框：

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

B、密码框：

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

C、单选按钮：

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

D、复选按钮：

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

E、数字输入框：

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

F、日期、时间输入框：

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

G、颜色选择框：

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

H、图像控件：

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

I、文件控件：

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

J、隐藏控件：

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

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

K、按钮：

(a)提交按钮：

单击该按钮后，会将表单信息(表单域中所有控件的值)提交给服务器(action指定的服务器)

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

(b)重置按钮：

单击该按钮后，会将表单信息(表单域中所有控件的值)回复到初始状态

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

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

(2)select控件：

  <select>
     <option value="值">选项</option>
	 <option value="值">选项</option>
	 <option value="值">选项</option>
   </select>

(3)textarea控件：

 <textarea name="名称" cols="列数" rows="行数"></textarea>