重庆网站推广入口,无锡网站设计系统,重庆汽车网站建设,电商网站备案目录
一#xff0c;列表-无序和有序的定义列表
二#xff0c;表格-基本使用与表格结构标签
三#xff0c;合并单元格
四#xff0c;表单-input标签
五#xff0c;表单-下拉菜单
六#xff0c;表单-文本域
七#xff0c;表单-label标签
八#xff0c;表单-按钮 …目录
一列表-无序和有序的定义列表
二表格-基本使用与表格结构标签
三合并单元格
四表单-input标签
五表单-下拉菜单
六表单-文本域
七表单-label标签
八表单-按钮 一列表-无序和有序的定义列表
列表作用:布局内容排列整齐的区域
1.无序列表布局排列整齐的不需要规定顺序的区域
标签ul嵌套li ul是无序列表li是列表条目 注意ul标签里面只能包裹li标签 li标签里面可以包裹任何内容 2.有序列表布局排列整齐的需要规定顺序的区域
标签ol 嵌套 li ,ol是无序列表li是列表条目 注意ol标签里面只能包裹li标签 li标签里面可以包裹任何内容 3.定义列表一般用于网页底部
标签dl 嵌套 dtdd ,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 typefile multiple 写入multiple属性可以实现多个文件选择没有写时只能选择一个 5.多选框-checkbox
默认选中:checked可以实现多选的功能 input typecheckbox checked 敲前端代码 练习在浏览器中查看按钮可以进行点击选择多个兴趣爱好 五表单-下拉菜单
标签select 嵌套optionselect是下拉菜单整体option是下拉菜单的每一项
selected——默认选中功能 select option北京/option option上海/option option深圳/option option甘肃/option /select 就是类似这种效果 练习菜单可以进行下拉选择城市其中selected是默认属性在这里默认甘肃 六表单-文本域
文本域多行输入文本的表单控件。
标签textarea 双标签 textarea默认提示文字/textarea 七表单-label标签
label标签在网页中某个标签的说明文本 写法一label标签只包裹内容不包括表单控件
设置label标签的for属性值和表单控件的id属性值相同 input typeradio idman label forman男/label 写法二使用label标签包裹文字和表单控件不需要属性 labelinput typeradio女/label 在浏览器中查看第一个标签和最后一个标签都可以通过点击汉字或者圈圈进行选中只有中间的女选项只能点击圈圈才能选中。 用label标签绑定文字和表单控件的关系增大表单控件的点击范围
提示支持label标签增大点击范围的表单控件文本框密码框上传文件单选框多选框下拉菜单文本域等等。
八表单-按钮 button type按钮/button type属性值 练习在浏览器中查看这里可以演示reset重置按钮
注意这里想要重置按钮起作用就得将这一区域代码放入form表单区域里面 点击重置按钮所有信息会清空
