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

最新推荐文章于 2024-04-15 08:33:14 发布

im୧

最新推荐文章于 2024-04-15 08:33:14 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/weixin_53568450/article/details/115832993

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

列表标签、表格标签、块级标签、表单标签

一、列表
二、表格标签
三、块级标签
四、网页的布局
五、表单

一、列表

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>

im୧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签（二）【列表标签、表格标签、块级标签、表单标签】

列表标签、表格标签、块级标签、表单标签一、列表1、无序列表2、有序列表3、定义列表(项目列表)4、列表的嵌套二、表格标签三、块级标签四、网页的布局一、列表1、无序列表列表项没有先后顺序 <ul type="disc"> <li>列表项</i> <li>列表项</i> <li>列表项</i> <li>列表项</i> ...... </ul>t
复制链接

扫一扫