前端web开发HTML+CSS3+移动web(0基础,超详细)——第3天

目录

一,列表-无序和有序的定义列表

二,表格-基本使用与表格结构标签

三,合并单元格

四,表单-input标签

五,表单-下拉菜单

六,表单-文本域

七,表单-label标签

八,表单-按钮


一,列表-无序和有序的定义列表

列表作用:布局内容排列整齐的区域

1.无序列表:布局排列整齐的不需要规定顺序的区域

标签:ul嵌套li ,ul是无序列表,li是列表条目

注意:ul标签里面只能包裹li标签

li标签里面可以包裹任何内容

2.有序列表:布局排列整齐的需要规定顺序的区域

标签:ol 嵌套 li ,ol是无序列表,li是列表条目

注意:ol标签里面只能包裹li标签

li标签里面可以包裹任何内容

3.定义列表:一般用于网页底部

标签:dl 嵌套 dt,dd ,dl 是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

注意:dl里面只能包含dt和dd

dt 和dd里面可以包含任何内容

可以看到第二行文字自动缩进了,这是默认的。之后我们在学习了css之后就可以将空格放大放小甚至消除。

二,表格-基本使用与表格结构标签

1.表格-基本使用

网页中的表格与excel表格类似,用来展示数据

标签:table 嵌套 tr ,tr 嵌套 td /th

提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线

2.表格结构标签--了解

加入其他的表格属性,thead,tbody,tfoot。记得对齐格式,使用tab键,可以选中想要对齐的一部分代码,再使用tab键进行缩进

三,合并单元格

作用:将多个单元格合并成一个单元格,以合并同类信息

合并单元格的步骤:

1、明确合并的目标

2、保留最左最上的单元格,添加属性(取值是数字,表示是需要合并的单元格数量)

------跨行合并,保留最上单元格,添加属性rowspan

------跨列合并,保留最左单元格,添加属性colspan

3、删除其他单元格

四,表单-input标签

作用:收集用户信息

使用场景:登录页面,注册页面,搜索区域

1.input标签基本使用:type属性值不同,则功能不同

<input type="...">

先练习相应属性,后面会系统学习每个属性值

可以看见图片中的单选框,多选框以及上传文件按钮可以选择

2.input标签占位文本

占位文本:提示信息

浏览器查看,可以输入用户名和密码,相应的框的颜色会变黑,框中的文字会消失,密码框里面的密码输入会显示黑点。

3.单选框radio

在没有加入name属性时,男女两个选项可以同时选择,但是加入name属性后只能选择一种选项

如果想要打开浏览器时直接默认选择一个性别,就在要选择性别的那行代码中加入checked

4.上传多个文件-file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能

<input type="file multiple">

写入multiple属性可以实现多个文件选择,没有写时只能选择一个

5.多选框-checkbox

默认选中:checked(可以实现多选的功能)

<input type="checkbox" checked> 敲前端代码

练习,在浏览器中查看,按钮可以进行点击,选择多个兴趣爱好,

五,表单-下拉菜单

标签:select 嵌套option,select是下拉菜单整体,option是下拉菜单的每一项

selected------默认选中功能

<select>

<option>北京</option>

<option>上海</option>

<option>深圳</option>

<option>甘肃</option>

</select>

就是类似这种效果

练习,菜单可以进行下拉选择城市,其中selected是默认属性,在这里默认甘肃

六,表单-文本域

文本域:多行输入文本的表单控件。

标签:textarea ,双标签

<textarea>默认提示文字</textarea>

七,表单-label标签

label标签:在网页中,某个标签的说明文本

写法一:label标签只包裹内容,不包括表单控件

设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man">

<label for="man">男</label>

写法二:使用label标签包裹文字和表单控件,不需要属性

<label><input type="radio">女</label>

在浏览器中查看,第一个标签和最后一个标签都可以通过点击汉字或者圈圈进行选中,只有中间的女选项只能点击圈圈才能选中。

用label标签绑定文字和表单控件的关系,增大表单控件的点击范围

提示:支持label标签增大点击范围的表单控件:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域等等。

八,表单-按钮

<button type="">按钮</button>

type属性值:

练习,在浏览器中查看,这里可以演示reset重置按钮

注意:这里想要重置按钮起作用,就得将这一区域代码放入form表单区域里面

点击重置按钮,所有信息会清空

相关推荐
崔庆才丨静觅14 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606115 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了15 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅15 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅15 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅16 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment16 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅16 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊16 小时前
jwt介绍
前端
爱敲代码的小鱼16 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax