2020.12.22 胡炎帅
一、知识点总结
1、type属性用来指定有序列表的序列类型
1 表示序号使用 阿拉伯数字 默认值
a/A 使用小写/大写 英文字母做序号
i/I 使用小写/大写 罗马数字
例如：<dl>
<dt>女神</dt>
<dd>王祖贤</dd>
<dd>迪丽热巴</dd>
<dd>古力娜扎</dd>
<dt>男神</dt>
<dd>薛之谦</dd>
<dd>蔡徐坤</dd>
<dd>迪迦</dd>
</dl>
2、type 列表前序号类型
square 方形
disc 实心圆 默认值
circle 圆
3、表格中 tr 表示行 td 表示列/单元格
border 表格边框
width 宽度
cellspacing 单元格之间的空隙
cellpadding 单元格内边距/内填充
4、th标签中的内容 默认会加粗，居中显示
colspan 合并列
rowspan 合并行
5、input 输入框， type用来指定其类型
value 用于指定其值 readonly 属性表示只读 disabled禁用
required 必填 placeholder 默认提示文字
6、src 属性用于定义图片的源 title 鼠标悬停显示的文字 alt 图片加载不出来，显示的文字
width/height 指定图片的宽/高,如果只指定一个 图片会等比例进行适应
7、audio表示音频 src 指定音频源 controls播放器控制按钮
autoplay 自动播放 muted 静音
8、网页echarts的设计
<!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: [129, 1000, 150, 80, 70, 110,130],
type: 'bar'
}]
};
// 4. 设置 option
myChart.setOption(option);
</script>
</body>
</html>
二、心得体会
今天进行的内容开始提升了一点难度，学了很多内容，比如进行了网页表格的设计与样式的改变，网页插入图片与视频，网页图标的设计与形式的改变。虽然看上去很简单，但是当自己手写的时候发现其实不简单，要不是这里出错就是那里少写东西，还是得多看看完整程序，加强一下印象。
评论留言