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的内容。

心得体会

今天的实训,讲解常见的标签/列表:有序列表、无序列表、描述列表,表格的制作,表格由

标签定义,设置表格属性由行、列组成加入表头默认为加粗居中,设置表格的长度、宽度,单元格之间的间隙、单元格之间的/内填充,还有表格的合并行、列。给了一个小时的时间,制作一个表格,其中训练到了我们对表格属性的掌握,其中就有表格合并行、列。还有表头文字的大小、高度、宽度的设置等。接下里讲到表单,输入框、 文本框,设置表单的属性:单选框、多选框、下拉列表、文本域、按钮等。图片内容介绍了三种插入方式,及图片的属性:鼠标悬停显示的文字、图片未加载出来、宽、高和图片是按照比例进行自适应改变。接下来讲音频/视频的插入及属性:自动播放、静音、弹幕。之后介绍echarts网站及其内容的介绍,1. 引入 echarts.js 文件、设置 echarts 容器、自定 echarts 配置、设置 echarts 配置等内容,最后讲解数据库,安装了mysql软件,学会安装的方式方法,经过一天的学习,我认为只要一步一步按照老师讲解的方法,学习起来是事半功倍的,越学越觉得自己的思维,想法活跃,期待明天上课。

2022年6月
« 11月    
 12345
6789101112
13141516171819
20212223242526
27282930  

近期文章

标签

分类目录

近期评论

标签

IT特种兵 云创动力前端开发工程师 云创动力后端开发工程师 云创集训 开发喵 教育生态服务商

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1