从零开始的前端生活( •̀ ω •́ )y ————HTML篇（下）从零开始的前端生活( •̀ ω •́ )y ————

从零开始的前端生活( •̀ ω •́ )y ————HTML篇（下）

书接上回，我们来继续讲讲HTML的一些基础知识以及应用

HTML的一些基本应用

网页制作思路：从上到下，先整体再局部，逐步分析制作
分析内容 -> 写代码 -> 保存 -> 刷新浏览器看效果

列表

作用：布局内容排列整齐的区域。
列表分类：
- 无序列表（不需要规定顺序，使用最多）
- 有序列表（需要规定顺序）
- 定义列表（一个标题下多个小分类）。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。
标签：ul（无序列别整体）嵌套li（列表里条目），ul是无序列表，li是列表条目。（有父子级关系）

效果：

第一项
第二项
第三项

注意事项

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。
标签：ol嵌套li，ol是有序列表，li是列表条目。

效果：

HTML
CSS
JavaScript

注意事项

ol标签里面只能包裹li标签
li标签里面可以包裹任何内容

定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

效果：

列表的标题: 列表的描述/详情; 列表的描述/详情; 列表的描述/详情; 列表的描述/详情; 列表的描述/详情

注意事项

dl里边只能包含dt和dd
dt和dd里面可以包含任何内容（里面可以放其他标签）

表格-基本用法

网页中的表格和Excel表格类似，用来展示数据。
表格标签：table嵌套tr，tr嵌套td/th。

标签名	说明
table	表格
tr	行
th	表头单元格（字加粗、剧中）
td	内容单元格

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

演示加border属性添加边框线之前：

加border属性添加边框线之后：

说明：1表示边框粗细为1像素

表格结构标签（了解）

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

由于表格结构标签是针对浏览器，加了并未会有视觉效果变化，所以很多人习惯省略

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息
可以跨行合并也可跨列合并
合并单元格步骤：
- 1.明确合并的目标
- 2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
  - 跨行合并，保留最上单元格，添加属性rowspan
  - 跨列合并，保留最左单元格，添加属性colspan
- 3.删除其他单元格

演示 这里有点乱，为了演示把之前的代码改了一部分（绝不是因为我懒(〃＞目＜)）

跨行合并，明确目标为“男”

跨列合并，明确目标为“大家都是大佬” 效果

表单

作用：收集用户信息
使用场景：
- 登陆页面
- 注册页面
- 搜索区域

input标签的基本使用

input标签（单标签）type属性值不同，则功能不同
<input type="...">

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

text

特点：输入什么就显示什么，输入的为单行文本，不会换行

密码框

特点：输入内容都以*来显示

单选框

多选框

上传文件

input标签占位文本

占位文本：提示信息
input type="..."placeholder="提示信息">
文本框和密码框都可以使用

单选框radio

常用属性

属性名	作用	特殊说明
name	控件名称	控件分组，同组中只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
(name="gender是为了实现单选功能，checked在哪个里哪个性别默认选择性)

这里我们默认选男性

上传文件-file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>

多选框展开学习-checkbox

多选框也叫复选框。
默认选中：checked（单选多选均这么用）。

表单-下拉菜单

标签：select双标签嵌套option，select是下拉菜单整体，option是下拉菜单的每一项下拉菜单也支持默认属性，用selected属性实现

分类:
<select>
    <option>请选择</option>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>
</select>

如果想要默认选项为HTML可以把 <option>HTML</option>前边的option后加上selected

文本域

作用：多行输入文本的表单控件。
标签：textarea 双标签。

label标签（双标签）

作用：网页中，某个标签的说明文本。
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
写法一：
- label标签只包裹内容，不包裹表单控件。
- 设置label标签的for属性值和表单控件的id属性值相同。

写法二：
- 使用label标签包裹文字和表单控件，不需要属性

提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

按钮 - button（双标签）

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合javaScript使用

想要这些功能可以实现，需要将其都放到form标签内