前端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表单区域里面

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

相关推荐
理想不理想v几秒前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云10 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058712 分钟前
web端手机录音
前端
齐 飞18 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹35 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint