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

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