layui：https://www.layui.com/
bootstrap：https://v3.bootcss.com/
HTML基础
<sup></sup>上标
<sub></sub>下标
<mark></mark>突出显示
1、网页基本信息
<!DOCTYPE html> 告诉浏览器要使用什么规范
<head> 代表网页的头部
<meta> 用来描述网站的一些信息
<title> 网页的标题
<body> 网页的主题
2、网页的基本标签
<h1></h1> 标题标签
<p></p> 段落标签
<br/> 换行标签
<hr> 水平标签
<strong></strong> 粗体
<em></em> 斜体
空格
© 版权
3、图像标签
<img src="path" alert="text" title="text" width="x" height="y" />
- src：图像地址【相对路径；绝对路径。】
- alert：当图像不显示，显示文字
- title：鼠标悬停提示文字
- width：图像宽度
- height：图像高度
4、连接标签
<a href="path" target="目标窗口位置">l文字描述或者图片</a>
- href：链接路径
- target：链接在哪个窗口打开【_blank：新窗口。_selg：在自己的网页打开】
4.1 超链接
从一个页面跳转到另外一个页面
4.1 锚点链接
实现同一个页面内的跳转。
实现：
- 1、需要一个标记
<a name="top">顶部</a> - 2、跳转到标记
<a href="#top>返回顶部</a>
5、块元素和行内元素
5.1 块元素
- 无论内容多少，该元素只占一行
- p h 标签
5.2 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- strong em span 标签
6、列表标签
6.1 有序列表(order list)
<ol>
<li>...</li>
<li>...</li>
...
</ol>
6.2 无序列表（unorder lsit）
<ull>
<li>...</li>
<li>...</li>
...
</ul>
6.3 自定义列表
- dl：标签
- dt：列表名称（名词）
- dd：列表内容（名词解释）
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dd>...</dd>
...
</dl>
7、表格标签
table：表格
- thead：头部区域
- tbody：身体部分
- tfoot：尾部
- th：一般是猎头（代表列，自动居中）
- tr：代表行
- td：代表列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px solid black">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小黑</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
合并行或者列
<td colspan="2">合并两列</td>
<td rowspan="2">合并两行</td>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px solid red">
<tr>
<th>名称</th>
<th>价格</th>
<th>数量</th>
</tr>
<tr>
<td colspan="2">合并列</td>
<td>8</td>
</tr>
<tr>
<td>香蕉</td>
<td>12</td>
<td>8</td>
</tr>
<tr>
<td>苹果</td>
<td rowspan="2">合并行</td>
<td>9</td>
</tr>
<tr>
<td>橘子</td>
<td>34</td>
</tr>
</table>
</body>
</html>
8、媒体元素
src:资源路径
controls：控制条
autoplay：自动播放
- 视频元素 ：viedo
<viedo src="path" controls autoplay></viedo>
- 音频元素：audio
<audio src="path" controls autoplay></viedo>
9、页面结构分析
header：标题头部区域的内容
- footer：标记脚部区域的内容
- section：web页面中的一块独立区域
- article：独立的文章内容
- aside：相关内容或应用
- nav：导航类辅助内容
10、iframe内联框架
src：引用页面地址，开始加载的时候
mainFrame：框架标识符
<iframe src="path" name="mainFrame"></iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="" name="myPath" frameborder="0" width="500px" height="800px"></iframe>
<a href="https://www.baidu.com" target="myPath">百度</a>
</body>
</html>
11、form表单
method：post/get 提交数据的方式
action:将数据提交到哪里
11.1 文本框和单选框
- type：指定元素的类型（text、password、CheckBox、radio、submit、reset、file、button、image。默认text）
- name ：指定表单元素的名称
- 用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
- value：元素的初始值
- size：指定表单元素的初始宽度
- maxlength：type为text、password时，输入的最大字符
- checked：type为radio、CheckBox时，指定按钮选中
姓名：<input type="text" value="猪佩琪" name="username" maxlength="8" /><br />
密码：<input type="password" value="123" name="pwd" maxlength="8" />
单选框
- radio:指定为单选框
- name：指定选择项为统一组
<input type="radio" name="gender" value="boy" checked />男
<input type="radio" name="gender" value="girl" />女
11.2 按钮和多选框
多选框
- CheckBox:指定为多选框
- name：指定选择项为统一组
<input type="checkbox" name="sport" value="baseball" checked/>篮球
<input type="checkbox" name="sport" value="football" />足球
<input type="checkbox" name="sport" value="pingpangball" checked/>乒乓球
按钮
- 普通按钮
- 提交按钮（submit）
- 重置按钮（reset）
<input type="button" name="bt1" value="按钮1" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
11.3 列表框文本和文件域
列表框：
<select name="列表名称">
<option value="选项的值">西瓜</option>
<option value="选项的值">苦瓜</option>
<option value="选项的值">哈密瓜</option>
</select>
文本域
<textarea name="textarea" cols="5" rows="5">66666666666666666666</textarea>
12、搜索滑块和简单验证
- max：最大值
- min：最小值
- step：每次变化的量
数值变化
<input type="number" name="num" max="100" min="0" step="10" />
滑块
<input type="range" name="voice" min="0" max="50" step="5" />
