2020.12.22 白玛永珍
一、知识点总结
1常见的标签
1.1列表
(1) 有序列表
<ol type="">
<li> li 是 list item 的首字母缩写
</li> <li> li 表示列表项目(列表条目)
</li> </ol>
type属性用来指定有序列表的序列类型
type="1" 数字风格表示列表顺序
type="a" 小写字母风格表示列表顺序
type="i" 罗马数字风格表示列表顺序
(2) 无序列表
<ul type=""> <li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li> <li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li> </ul>
type属性列表前序号类型
type="disc" 实心圆表示列表顺序
type="square" 矩形表示列表顺序
type="circle" 空心圆表示列表顺序
(3) 定义列表
<dl><dt>标题</dt> <dd>对标题的描述</dd> </dl>
1.2 表格
表格由
tr 表示行
td 表示列/单元格
border 表格边框
width 宽度
cellspacing单元格之间的空隙
cellpadding 单元格内边距/内填充
colspan 合并列
rowspan 合并行
1.3 表单
文本框：<input type="text" value="123" readonly="readonly" disabled="disabled"/> <br />
密码框：<input type="password" required="required" placeholder="请输入密码"/> <br />
颜色：<input type="color" /> <br />
<!-- 单选或者多选框，通过名称将多个input 绑定成一组 -->
<!-- checked属性，默认选中 -->
单选框：<input type="radio" name="gender"/>男
<input type="radio" name="gender" checked="checked"/>女
<br/>
多选框：<input type="checkbox" name="hobby"/>看书
<input type="checkbox" name="hobby" />打游戏
<input type="checkbox" name="hobby" checked="checked" />写代码
<br />
下拉列表：<select>
<!-- option 是每一个选项 -->
<option>青海省</option>
<option selected="selected">陕西省</option>
<option>山东省</option>
</select>
<br/>
文本域：<textarea cols="20" rows="5"></textarea>
<br/>
<button type="button">普通按钮</button>
<input type="button" value="普通按钮" />
<br />
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮" />
<br />
<!-- 重置为初始状态，并不是清空 -->
<button type="reset">重置按钮</button>
<input type="reset" value="重置按钮" />
1.4图片
jpg/jpeg png gif bmp
src 属性用于图片的源
title 可达鸭啊
1.5多媒体
（音乐/视频）
audio表示音频 src指定音频源
controls播放器控制按钮
autoplay 自动播放
chrome 浏览器
muted 静音
1.6图标
css 样式
/* css 选择器中的 id选择器 */
<!DOCTYPE html>
<html>
<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: 'bar'
}]
};
// 4. 设置 option
myChart.setOption(option);
</script>
</body>
</html>
二、心得体会
我们兴高采烈的进入到我们实训的教室，打开各自的实训电脑，老师收了我们昨天的实训心得。在课堂上让我们操作，在自己操作中才知道自己只会听得懂老师讲的知识，但是实际自己操作时有点吃力。自己慢慢的从老师发的课件上找，结果不是操作不对就是做的结果不理想，这些问题在老师和同学的帮助下我知道自己的不足之处，并且我改正自己的不足并牢记它。我相信在这种实训中学习其他的技能。不管是现在还是将来每个人应不断地加强学习，不断地给自己"充电”，才能不断的开拓进取，勇于创新，才不至于被社会淘汰。
点赞
评论