HTML入门二（列表，表格与表单）

最新推荐文章于 2024-11-12 23:16:45 发布

二十一块石头

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量670

点赞数 1

分类专栏： HTML5 文章标签： html html5

本文链接：https://blog.csdn.net/qq_44872688/article/details/120634052

版权

HTML5 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中的列表（无序列表、有序列表及嵌套列表）、表格（基本语法、常用标签、合并单元格及填充属性）以及表单（应用、基本结构、各种表单元素的语法特点）相关知识，是HTML入门学习的实用教程。

摘要由CSDN通过智能技术生成

一、列表

1、无序列表

用于页面中没有顺序的列举项
标签格式为

<ul type=''></ul>

type属性设置标号的类型，值可以取：
1、 disc ：实心圆点
2 、circle ：空心圆点
3、square ：实心方块
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <h1>四大名著</h1>
    <ul type='square'>
        <li>红楼梦</li><br/>
        <li>西游记</li><br/>
        <li>水浒传</li><br/>
        <li>三国演义</li><br/>
    </ul>
</body>
</html>

在这里插入图片描述

2、有序列表

用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。

标签格式为

<ol type='' start=''></ol>

type设置标号的类型，值可以取：
1 、1：显示数字
2、 A：显示大写字母
3 、a：显示小写字母
4、 I：显示大写罗马数字
5、 i：显示小写罗马数字
start设置标号的起始值。
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <h1>战国七雄</h1>
    <ol type="A" start="3">
        <li>韩</li>
        <li>赵</li>
        <li>魏</li>
        <li>楚</li>
        <li>燕</li>
        <li>齐</li>
        <li>秦</li>
    </ol>
</body>
</html>

在这里插入图片描述

3、嵌套列表

一个列表作为另一个列表的一部分，即多层列表。
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>你更喜欢吃哪种水果（&nbsp;&nbsp;&nbsp;）</li>
        <br/><br/>
            <ol type="A">
                <li>草莓</li>
                <li>香蕉</li>
                <li>苹果</li>
                <li>西瓜</li>
            </ol>
            <br/><br/>
        <li>你平时休闲经常去的地方在哪里（&nbsp;&nbsp;&nbsp;）</li>
        <br/><br/>
            <ol type="A">
                <li>郊外</li>
                <li>商场</li>
                <li>公园</li>
                <li>酒吧</li>
            </ol>
    </ul>            
</body>
</html>

在这里插入图片描述

二、表格

在 HTML 文档中，广泛使用表格来存放网页上的文本和图像。

1、表格的基本语法

    <table>
        <tr>
            <td></td>
        </tr>
    </table>

2、表格常用标签

A:<table border=‘边框线的宽度’ align=‘表格在页面中的对齐方式’ bgcolor='表格的背景色’background=‘背景图片’>
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
<table border="1" align="center" bgcolor='red'>
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>小红</td>
        <td>001</td>
        <td>12</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>002</td>
        <td>12</td>
    </tr>
    <tr>
        <td>小芳</td>
        <td>003</td>
        <td>13</td>
    </tr>
</table>
</body>
</html>

请添加图片描述
B：语义标签,表示表格的头部

<thead></thead >

C：行的标签

<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'></tr>：表示表格的行,一个tr代表一行

D：列头的标签

<th width='列宽'></th>：表示列头,文字会自动加粗、自动居中,特殊的单元格

E：语义标签,表示表格的主体部分

<tbody></tbody>

F：单元格的标签

<td align='单元格的对齐方式'></td>：表示的表格中的单元格

G：标题标签

<caption></caption>

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
<table border="1" align="center" bgcolor='red'>
    <caption>信息表</caption>
    <tr>
        <th width='150px'>姓名</th>
        <th width='150px'>学号</th>
        <th width='150px'>年龄</th>
    </tr>
    <tr>
        <td align="right">小红</td>
        <td>001</td>
        <td align="right">12</td>
    </tr>
    <tr>
        <td>小明</td>
        <td align="right">002</td>
        <td>12</td>
    </tr>
    <tr>
        <td align="right">小芳</td>
        <td>003</td>
        <td align="right">13</td>
    </tr>
</table>
</body>
</html>

请添加图片描述

3、合并单元格

（1）跨多列的标签

  <td  colspan=""></td>一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数

（2）跨多行的标签

  <td  rowspan=""></td>一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格</title>
</head> 
<body>
<table border="1" align="center">
  <tr>
      <th colspan="3">淘宝</th>
  </tr>
  <tr>
      <td rowspan="2">手机</td>
      <td>vivo</td>
      <td>oppo</td>
  </tr>
  <tr>
      <td>苹果</td>
      <td>华为</td>
  </tr>
</table>
</body>
</html>

请添加图片描述

4、表格填充属性

(1)cellspacing属性

用来设置表格内框宽度

(2)cellpadding属性

用来设置表格内填充距离

三、表单

1、表单的应用

注册用户
收集信息
反馈信息
搜索引擎

2、表单页面基本结构

   <form action=""  method=""></form>

action：设置服务器上处理程序的位置，参数值是一个URL路径。
method：设置表单的运行方式，可以取值get、post。
get的特点是信息暴露、长度不能超过255字节，但是速度快。
post的特点信息隐藏、长度不限，但是速度较慢。

3、表单元素

（1）文本框基本语法

<input type=“text” value="" size="">

text为文本输入框
value为输入元素的默认值
size为文本区的宽度

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <input type=“text” value="小欢" size="20"/>
   </form>
</body>
</html>

请添加图片描述

（2）密码框基本语法

<input type=“password” value=“” size=“”>

password为密码框
value为输入密码的默认值
size为密码区的宽度

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <input type=“password” value='123456' size='10'>
   </form>
</body>
</html>

请添加图片描述

（3）单选按钮基本语法

<input  type="radio" value="男" checked="checked">

value为默认值
size为密码区的宽度
checked默认选中
id定义一个唯一的标识符，链接时标识元素
name为控件名称
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <input type="radio" name="sex" id="1" checked/>
    <label for="1">男</label>
    <input type="radio" name="sex" id="2"/>
    <label for="2">女</label>
   </form>
</body>
</html>

请添加图片描述
ps: label标签可以绑定某个表单元素，用于扩展可以相应点击等事件的区域且label中的for属性值与id值相匹配，可以将文本与单选按钮链接起来，使点击文本时也可以达到单选效果。

（4）复选按钮基本语法

<input type=“checkbox” name="" value="talk">

value为默认值
name为控件名称
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <input type="checkbox" id='1'/>
       <label for="1" >运动</label>
    <input type="checkbox" id='2'/>
       <label for="2">看电影</label>
    <input type="checkbox" id='3'/>
       <label for="3">读书</label>
   </form>
</body>
</html>

请添加图片描述

（5）列表框基本语法

<select size=“”>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
     ……
  </select>

第一个option内填写为默认值
其余option内为选择值
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <select name="#">
        <option value="选择">选择</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>&nbsp;
   </form>
</body>
</html>

请添加图片描述

（6）多行文本框基本语法

<textarea  name=“textarea”   cols=“”   rows=“”>内容</textarea>

name为文本框的名字
cols为文本框的列数
rows为文本框的行数
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <textarea name="textarea" id="1" cols="30" rows="10">好好学习，天天向上</textarea>
   </form>
</body>
</html>

请添加图片描述

（7）按钮基本语法

<input type='' name='' value=''>

type内填写按钮类型可为button（按钮）、submit（提交）、reset（重置）
value为按钮上的标签
name为按钮名称
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head> 
<body>
   <form action="#">
    <p><input type="reset" name="reset" value=" 重填 ">
       <input type='submit' name='submit' value='提交'>
       <input type="button" name="cancel" value="取消">
    </p>
   </form>
</body>
</html>

请添加图片描述

（8）其他语法

          a、数字：<input type='number' />
		  
		  b、日期选择框：<input type='date' />
		  
		  c、时间选择框：<input type='time' />
		  
		  d、隐藏控件：<input type='hidden' />

4、强调内容

(1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复；

(2)所有的表单控件都有value属性,value属性的值会提交给远程服务器；

(3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签；

(4)disabled属性表示input是否可用(置灰)；

(5)readonly属性表示input的值是只读；

(6)单行文本输入框的属性placeholder起提示的作用；

(7)required属性表示input是必须要输入的；

(8)maxlength属性表示input输入的最大长度；

(9)tabIndex属性用于设置表单控件的tab顺序；

(10)title属性用来设置鼠标经过时的提示文字。