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

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

相关推荐
Myli_ing28 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风31 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave38 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟40 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue