20201222王秀花
知识点总结
1. 常见的标签
一：列表
有序列表
<ol type="">
<li> li 是 list item 的首字母缩写 </li>
<li> li 表示列表项目(列表条目) </li>
</ol>
type="1" 数字风格表示列表顺序
type="a" 小写字母风格表示列表顺序
type="i" 罗马数字风格表示列表顺序
无序列表
<ul type="">
<li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li>
<li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li>
</ul>
type="disc" 实心圆表示列表顺序
type="square" 矩形表示列表顺序
type="circle" 空心圆表示列表顺序
定义列表
<dl>
<dt>标题</dt>
<dd>对标题的描述</dd>
</dl>
二：表格
表格由标签来定义，每个表格由若干行，每行被分割为若干单元格
<table border="1px">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
三：表单
| <caption> | 定义表格标题 |
| --------- | -------------- |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
rowspan 合并行 colspan 合并列
## 四：echarts配置参数
<head>
<meta charset="utf-8">
<title>echarts</title>
<!-- css 样式 -->
<style>
/* css选择器中的 id选择器 */
#echarts{
width: 800px;
height: 800px;
}
</style>
<!-- 1.引入echarts的js -->
<script src="js/echarts.min.js"></script>
<!-- 引入 echarts 主题-->
<script src="js/macarons.js"></script>
</head>
<body>
<!-- 2.容器 -->
<div id="echarts"></div>
<!-- 自定义的 js -->
<script>
/*
echarts 使用：
1. 引入 echarts.js 文件
2. 设置 echarts 容器
3. 自定 echarts 配置
4. 设置 echarts 配置
*/
// 获取到 echarts 容器
var div = document.querySelector("#echarts");
// 初始化 echarts
var myChart = echarts.init(div,'macarons');
// 3. echarts 配置
// 指定图表的配置项和数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'pie'
}]
};
// 4. 设置 option
myChart.setOption(option);
</script>
</body>
# 实训心得
今天实训内容讲了很多，上课也有做一些练习，做完之厚有点难度的部分实训老师也有带领我们做练习题，感觉还挺好的，现学现用，做了一个表格，还有一些内容，感觉上课还挺好的，没有那么枯燥。
点赞
评论