前端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表单区域里面
点击重置按钮，所有信息会清空
