2020年12月22日胡锡鑫 –
知识点总结
实训第二天，由实训指导老师马浩老师带领我们学习了数据分析思路及可视化的相关内容。1.6标签到数据库mysql安装流程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1.5" length="100" width="500">
<tr >
<th colspan ="4"style="font-size: 1.875rem; text-align:left"height="100">商品类目</th>
</tr>
<tr>
<td rowspan="3"> 虚拟</td>
<td> 移动</td>
<td> 联通</td>
<td> 小灵通</td>
</tr>
<tr>
<td> 充值卡</td>
<td> 彩票</td>
<td> 双色球</td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
<td>游戏币</td>
</tr>
<tr>
<td rowspan="3"> 护肤</td>
<td>美容护肤</td>
<td>美体</td>
<td> 精油</td>
</tr>
<tr>
<td> 彩妆</td>
<td>香水</td>
<td> 保健</td>
</tr>
<tr>
<td> 个人护理</td>
<td>保健</td>
<td> 按摩器械</td>
</tr>
</table>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20171113/a478da20999e428d8d97922c96668099.jpeg"/>
<img src="01.jpg"></img> <br />
<audio src="02.mp3" controls></audio> <br />
<video src="03.MP4" controls="controls"></video>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts</title>
<style>
#echarts{
width: 800px;
height: 800px;
}
</style>
<script src="../js/echarts.min.js"></script>
<script src="../js/macarons.js"></script>
</head>
<body>
<div id="echarts"></div>
<script>
var div = document.querySelector("#echarts");
var myChart = echarts.init(div,'macarons');
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'a'},
{value: 310, name: 'b'},
{value: 234, name: 'c'},
{value: 135, name: 'd'},
{value: 1548, name: 'e'}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
上述今天联系的表格、及圆饼图程序。
1.6常见的标签
1.6.0.5 列表
有序列表
type用来指定有序列表的序列的类型,默认为数字
a,A使用小写/大写 英文字母做首写
i/I使用罗马数字
<ol type="xx">
<li>li 是 1ist item 的首字母缩写</li>
<li>li 是 表示列表项目（列表条目）</li>
</ol>
无序列表
<ui>
<li>吃饭</li>
<li>睡觉</li>
</ui>
描述列表
<dl>
<dt>女神<dt>
<dd>美<dd>
</dl>
表格
表格由<table>标签定义
由<tr>行<tr>
<td>列<td>
border 边框
<th><th>表头 默认加粗居中
length 长度
width 宽度
cellspacing 单元格之间的间隙
cellpadding 单元格之间的/内填充
colspan合并列
rowspan 合并行
表单：用户输入的东西（块元素）
<form></form>
form name=“表单名称”
input 输入框
input type ="text"输入类型 文本框
readonly 属性表示只读、disabled禁用
input type ="password" 密码框
required 属性表示必填 placholder 属性表示提示文字
input type ="color" 颜色
input type ="radio" name=“gender”checked=“checked” 单选框
input type ="radio"
<input type ="checkbox " name=“hobby”/> 多选框
<input type ="checkbox " name=“hobby”/>
<input type ="checkbox " name=“hobby”/>
<option></option> 下拉列表
<textarea></textarea> 文本域
<button></button> 按钮
<button type=“button”></button> 普通按钮
<button type=“submit”></button> 提交按钮
<button type=“reset”></button> 重置按钮
用 input type="button" value=“xx按钮” 代替
value 用于指定值
图片
<img src="xxxx"/> 插入图片 src位置
title=“xxxx”鼠标悬停显示的文字
alt=“xxxx” 图片未加载出来
width="宽"
height=“高”
音频/视频
<audio src=“”controls ></audio>
src 表示音频源
autoplay 自动播放
muted 静音
marquee 弹幕
script src 引入
div id=“echarts” 容器
样式
style
#echarts { 宽、高、}
自定义的js
<script src=""> </script >引入echarts 的js
<script src=""></script >引入 echarts 主题
最后讲解mysql安装
以上代码及解释是今日学习的html的内容。
心得体会
今天的实训，讲解常见的标签/列表：有序列表、无序列表、描述列表，表格的制作，表格由
评论留言