HTML基础标签(二)【列表标签、表格标签、块级标签、表单标签】

一、列表

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>
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页