「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」
P32～36-表单-input基本使用
场景：在网页中显示手机用户信息的表单效果，如注册页，登陆页
标签名：input
input标签可以通过type属性值的不同，展示不同效果
type属性值：
vscode快捷键：input:，提示多种type的类型
注意：默认不换行
type属性对应不同类型input：
- text：单行文本，属性：placeholder，占位符，输入提示文本
- password：密码，属性：placeholder，占位符，输入提示文本；属性checked：默认选中；一组同时只能有一个选中
- radio：多选一表单组件，属性：name分组，相同name属性为一组
- checkbox：多选框，同样是用name分组
- file：默认只能上传单个文件，如果要上传多个，属性：multiple
- 3种按钮
-
- submit：提交给服务器，默认按钮文字为提交，可通过value设置按钮文字
- reset：重置回复表单默认值，默认按钮文字为：重置，可设置value属性更改按钮文字
-
- button：普通按钮，配合js添加功能，默认没有文字，通过属性value设置按钮文字
提交什么，重置什么？要有个范围，表单域标签：form，action属性：方法吗还是啥
<p>表单input的不同类型</p>
<!-- 写什么显示什么 -->
1.输入框,输入什么显示什么:<input type="text" placeholder="请输入文本"><br>
2.密码框,输入内容会转化为点:<input type="password" placeholder="请输入密码"><br>
3.1单选框: <input type="radio" name="sex" checked>男
3.2单选框: <input type="radio" name="sex">女 <br>
4.1多选框: <input type="checkbox" name="ck" checked>多选1<br>
4.2多选框: <input type="checkbox" name="ck">多选2<br>
4.3多选框: <input type="checkbox" name="ck">多选3<br>
4.4多选框: <input type="checkbox" name="ck">多选4<br>
5.文件选择: <input type="file" multiple> <br>
<br>
<br>
<form action="/">
<!-- action要填什么？ -->
用户名：<input type="text"><br>
密码：<input type="password"><br>
6.1提交按钮: <input type="submit" value="免费注册"><br>
6.2.重置按钮: <input type="reset"><br>
6.3普通按钮: <input type="button" value="按钮文字"><br>
</form>
<br>
色彩选择器：<input type="color"><br>
<!-- 能选择具体的年月日 -->
日期选择器：<input type="date" name="" id=""><br>
<!-- 看起来同普通输入框 -->
时间选择器：<input type="datetime" name="" id=""><br>
<!-- 看起来同普通输入框 -->
邮件输入框：<input type="email" name="" id=""><br>
<hr>
P37-表单-按钮button
场景：网页中显示用户点击的按钮
标签名：button
type属性值（同input按钮系列）：
注意点：
- chrome中button默认是提交按钮，type属性值默认为submit
- button标签是双标签，更便于包裹其它内容：文字，图片等
- 按钮文字，是在标签内文本，不是放在value属性
- 配合js实现功能
<button>提交按钮</button><br>
<button type="reset">重置按钮</button><br>
<button type="button">普通按钮</button><br>
P38-表单-下拉菜单
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
所在城市:
<select>
<option value="1">上海</option>
<option value="2" selected>北京</option>
<option value="3">广州</option>
</select>
单选内容在option里的文本，selected是option的属性
P39-表单-文本域
场景：输入多行文本的表单控件
标签名：textarea
常见属性：
- cols：文本域可见宽度
- rows：文本域可见行数
注意点：
- 右下角可拖拽改变大小
- 实际开发针对样式推荐使用css设置，不用cols和rows
文本：
<textarea cols="30" rows="10">在这里</textarea>
P40-表单-label标签
场景：常用于绑定内容与表单标签的关系
标签：label
使用方法：
属性：
- for
注意点：
下面的例子里，点击文本，也会选中单选框
水果: <br>
<input type="radio" name="fruit" id="apple"><label for="apple">苹果</label><br>
<label> <input type="radio" name="fruit">橘子</label>
P41-语义化标签
没有语义的布局标签：div，span
场景：用于网页布局
div标签：一行只显示一个，独占一行
span标签：一行可以显示多个
<div>这是div标签</div>
<div>这是div标签2</div>
<span>这是span标签</span>
<span>span第二</span>
有语义的布局标签：
场景：html5新增，手机端开发使用
标签：
- header：网页头部
- nav：网页导航
- footer：网页底部
- aside：网页侧边栏
- section：网页区块
- article：网页文章
特点：特点同div，但多了语义
手机端开发，有专门的标签
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
P42-19-字符实体
通过字符实体在网页显示特殊字符
场景：在网页中展示特殊字符号效果时，需要使用字符实体替代
结构：&英文;
常见字符实体：
<p>源码里有5 个空格</p>
<p>使用字符实体放 5个字符实体</p>
P43-20-综合案例-学生信息表
<table border="1" height="400" width="450">
<caption>
<strong>优秀学生信息表格</strong>
</caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
注意表格标题要加粗，表格的尺寸设置
P44-21-综合案例-表单
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
昵称: <input type="text" placeholder="请输入昵称"><br><br>
性别: <label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label><br><br>
所在城市: <select>
<option selected>上海</option>
<option>北京</option>
<option>广州</option>
</select> <br><br>
婚姻状况:
<label><input type="radio" name="marry" checked>未婚</label>
<label><input type="radio" name="marry">已婚</label>
<label><input type="radio" name="marry">保密</label><br><br>
喜欢的类型:
<input type="checkbox" name="like" checked>可爱
<input type="checkbox" name="like" checked>性感
<input type="checkbox" name="like">御姐
<input type="checkbox" name="like">萝莉
<input type="checkbox" name="like">小鲜肉
<input type="checkbox" name="like">大叔
<br><br>
个人介绍: <br><br>
<textarea cols="80" rows="20"></textarea>
<h2>我承诺</h2>
<ul>
<li>未满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所有条款<br><br>
<button type="submit">免费注册</button>
<button type="reset">重置</button>
</form>
注意：
- 用form标签将表单括起来使之生效；
- 多选是input里type设置为checkbox
- 单选按钮，需要配合label使用，使点击文字可被选中
- 提交按钮可用input，type设置为submit
- 换行用两个br，不会太拥挤
