移动端工程师学习javascrip的笔记和归纳，内容非常基础。
- 列表标签：布局内容排列整齐的区域
- 表格标签：内容分格子
- 表单标签：用户输入
列表标签
作用：布局内容排列整齐的区域
列表分类：无需列表、有序列表、定义列表
无需列表 unordered list
作用：布局排列整齐的，不需要规定顺序的区域
标签：ul嵌套li
ul是无需列表li是列表条目
<ul>
<li>第一项<li>
<li>第二项<li>
<li>第三项<li>
</ul>
注意事项：
ul标签只能包裹li标签- li标签可以包裹任何内容
有序列表 ordered list
作用：布局排列整齐的，需要规定顺序的区域
标签：ol嵌套li
ol是有序列表li是列表条目
<ol>
<li>第一项<li>
<li>第二项<li>
<li>第三项<li>
</ol>
定义列表
作用：布局排列整齐的，一个标题对应多个内容的区域
标签：dl嵌套dt和dd
dl是定义列表dt是定义列表的标题dd是定义列表的表述/详情
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情1</dd>
<dd>列表描述/详情2</dd>
</dl>
注意事项：
dl标签只能包含dt和dd- dl和dt可以包含任何内容
表格标签 table
网页中的表格与Excel类似，用于展示数据
标签：table嵌套tr，tr嵌套td/th
- table：整个表格
- tr：行，需要几行写几个tr
- th：表头单元格，默认加粗
- td：内容单元格
提示：在网页中，表格默认没有边框，使用border属性可以添加边框
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>109</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>109</td>
<td>198</td>
</tr>
</table>
表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语音更清晰
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>109</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>109</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
步骤：
- 明确合并的目标
- 保留
最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量） - 跨行合并，保留
最上单元格，添加属性rowspan - 跨列合并，保留
最左单元格，添加属性colspan - 删除其他单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<th>98</th>
<th rowspan="2">100</th>
<th>198</th>
</tr>
<tr>
<th>李四</th>
<th>97</th>
<!-- <th>100</th> -->
<th>197</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>总结</th>
<th colspan="3">全市第一</th>
<!-- <th>全市第一</th>
<th>全市第一</th> -->
</tr>
</tfoot>
</table>
表单
作用：收集用户信息
使用场景：登录、注册、搜索
input标签
type
<input type = " placeholder="提示信息">
- input标签
type不同，功能不同 - placeholer：站位文本
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于单行输入 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
单选框 radio
常用属性
- name：控件名称；空间分组，同组只能选中一个（单选）
- checked：默认选中；属性名和属性值相同，省略属性值
性别：
<input type="radio" title="性别" name="gender">男
<input type="radio" title="性别" name="gend2er" checked>女
上次文件 file
常用属性
- multiple：文件多选，多文件上传
<input type="file" multiple>
下拉菜单 select
标签：select嵌套option
select是下拉菜单整体option是下拉菜单的每一项selected默认选中
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>广州</option>
</select>
文本域 textarea
作用：多行输入文本的表单控件
提示： 右下角有拖拽功能，未来都要禁用
label标签
作用：网页中，某个标签的说明文本
label标签绑定文字和表单控件的关系，增大表单控件的点击范围- 支持
label标签增大点击范围的表单控件：输入框input、下拉菜单select、文本域textarea
写法一：
- label标签只包裹内容，不包裹表单控件
- 设置label标签的for属性，与表单控件的id属性值相同
写法二：
- label标签包裹文字和表单控件，不需要属性
性别：
<input type="radio" title="性别" name="gender" id="man">
<label for="man">男</label>
<label><input type="radio" title="性别" name="gender" checked>女</label>
按钮标签 button
- type属性：
| 标题 | |
|---|---|
| submit | 提交按钮（默认） |
| reset | 重置按钮，表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，配合JavaScript使用 |
<!-- form表单区域 -->
<!-- action发送数据的地址 -->
<form action="">用户名:<input type="text">
<br><br>
密码:<input type="password">
<br><br>
<button type="reset">重置</button>
</form>
无语义的布局标签
作用：布局网页（划分网页区域，摆放位置）
- div：独占一行
- span：不占一行
<body>
<!-- div：大盒子 -->
<div>这是div标签</div>
<div>这是div标签</div>
<!-- span：小盒子 -->
<span>这是span标签</span>
<span>这是span标签</span>
</body>
字符实体
作用：在网页中显示预留字符
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |   ; | |
| < | 小于号 | < ; |
| > | 大于号 | > ; |
