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>

二、心得体会

​ 今天进行的内容开始提升了一点难度,学了很多内容,比如进行了网页表格的设计与样式的改变,网页插入图片与视频,网页图标的设计与形式的改变。虽然看上去很简单,但是当自己手写的时候发现其实不简单,要不是这里出错就是那里少写东西,还是得多看看完整程序,加强一下印象。

标签

评论

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