HTML列表标签、表格标签、表单标签

文章目录

1.列表标签

有序列表

无序列表

自定义列表

2.表格标签

基本结构

完整结构

3.表单标签

form标签

input系列标签

下拉列表

文本域

label标签


1.列表标签

有序列表

  1. 列表项
  2. 列表项
  3. 列表项

ol,即ordered list(有序列表)。

type属性(定义列表项符号)

  • 列表项
  • 列表项
  • 列表项

HTML列表标签、表格标签、表单标签_第1张图片

无序列表

  • 列表项
  • 列表项
  • 列表项

ul,即unordered list(无序列表)。

type属性(定义列表项符号)

  • 列表项
  • 列表项
  • 列表项

HTML列表标签、表格标签、表单标签_第2张图片

实际开发中用到有序列表挺少,无序列表用的多,注意两个特点:

(1)ul元素的子元素只能是li,不能是其他元素。

(2)ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。

自定义列表

名词
描述

dl即definition list(定义列表),dt即definition term(定义名词),而dd即definition description(定义描述)。

案例展示:




    
    
    
    Document


    
    
  1. 小李 100
  2. 小明 99
  3. 小红 88
  1. 小李 100
  2. 小明 99
  3. 小红 88
  • 香蕉
  • 苹果
  • 雪梨
  • 香蕉
  • 苹果
  • 雪梨
HTML
控制网页的结构
CSS
控制网页的样式
JavaScript
控制网页的行为

HTML列表标签、表格标签、表单标签_第3张图片

2.表格标签

基本结构

表格标签有三部分组成

(1)表格:table标签

(2)行:tr标签

(3)单元格:td标签

单元格1 单元格2
单元格3 单元格4

tr,指的是table row(表格行),td,指的是table data cell(表格单元格)。

表格属性

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

完整结构

表格标题(caption)

一个表格只能有一个标题,位于整个表格内的第一行。

表头单元格(th)

th,指的是table header cell(表头单元格)。

表格语义化

thead、tbody和tfoot标签。分别表示:表头、表身、表脚。显示效果没区别,但是代码结构更清晰,更有可读性和有利于后期的维护。

此外还方便分块来控制表格的CSS样式。

合并行

合并列

合并行和合并列内容默认的是前面一个,后面那些需要删去。

案例演示:




    
    
    
    Document


    
表格
姓名 成绩 身份
小李 99 学生
底部 底部 底部
表格
姓名 成绩 身份
姓名 成绩 身份
小李 学生
底部 底部

HTML列表标签、表格标签、表单标签_第4张图片

3.表单标签

前面学的都是静态页面,下面终于接触到动态页面了。简单来说,如果一个页面仅仅供用户浏览,那就是静态页面。如果这个页面还能实现与服务器进行数据交互(像注册登录、话费充值、评论交流),那就是动态页面。

form标签

//各种表单标签

创建表单需要把所有表单标签放在form标签内部。

HTML列表标签、表格标签、表单标签_第5张图片

name属性(给表单进行命名)

method属性(指定表单数据使用哪一种http提交方法)

method属性取值有两个:一个是“get”,一个是“post”。get的安全性较差,而post的安全性较好。实际开发中,使用post比较多。

action属性(指定表单数据提交到哪一个地址进行处理)

target属性(指定窗口的打开方式)

enctype(指定表单数据提交的编码方式)

一般不用自己设置

input系列标签

HTML列表标签、表格标签、表单标签_第6张图片

 文本框

文本框常用属性

HTML列表标签、表格标签、表单标签_第7张图片

 密码文本框(输入字符不可见)

单选框

name属性能让单选框分为一组,这样就能几个之只能选一个,实现“单选”。

value属性取值跟后面的文本是相同的。加上value属性,是为了方便JavaScript或者服务器操作数据用的。

checked属性设置默认选中的框。

多选框

与单选框的name相同,列为一组,不过多选设定为多选,系统会自动识别。

文件选择框

multiple属性能选择多个文件上传。

提交按钮

给服务器提交数据。

重置按钮

清除用户在表单中输入的内容。

普通按钮

配合JavaScript来进行各种操作的。

下拉列表

跟无序列表很像,其中无序列表是由ul和li这两个标签配合使用。

HTML列表标签、表格标签、表单标签_第8张图片

 HTML列表标签、表格标签、表单标签_第9张图片

 selected设置默认选择,即开头选中的。

文本域

label标签

绑定内容与表格标签的关系,如单选框的时候可以鼠标点击文字(内容)来选定选项。

使用方法1:label标签把内容包裹起来,在表格标签中添加id属性,在label标签for属性中设置对应的id属性值

使用方法2:label标签直接把内容包裹起来,删去for属性。

案例演示:




    
    
    
    Document


    
文本框:

密码框:

性别:

爱好:编程熬夜

文件选择:

提交按钮:

重置按钮:

普通按钮:




HTML列表标签、表格标签、表单标签_第10张图片

你可能感兴趣的:(html,css基础篇,html,前端)