目录
一,列表-无序和有序的定义列表
列表作用:布局内容排列整齐的区域
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表单区域里面
点击重置按钮,所有信息会清空