2020.12.22.李永平

一、知识点总结

1.列表

(1) 有序列表

<ol type=""> 
<li> li 是 list item 的首字母缩写 
</li> <li> li 表示列表项目(列表条目)
</li> </ol>

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>

2.表格

表格由标签来定义

tr 表示行

td 表示列/单元格

border 表格边框

width 宽度

cellspacing单元格之间的空隙

cellpadding 单元格内边距/内填充

colspan 合并列

rowspan 合并行

3 .表单

用于为用户输入创建haml表单密码框

<form name="表单名称" method="表单提交方式" action="规定当提交表单时 向何处发送表单数据"> <

        文本框:<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="重置按钮" />

### 4.多媒体

(音乐/视频)

audio表示音频  src指定音频源

controls播放器控制按钮

autoplay 自动播放

chrome  浏览器

muted 静音

### 5.图标

css  样式 

/* css 选择器中的 id选择器 */

<head>
    <meta charset="utf-8">
    <title>echarts</title>
    <!-- css 样式 -->
    <style>
        /* css选择器中的 id选择器 */
        #echarts{width: 800px;
            height: 800px;
        }

    </style>

    <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>

二、心得体会

通过今天的学习受益良多。边听课在自己动手操作,效率很高。也出现了很多问题,这些问题在老师和同学的帮助下都解决了。我相信在这种实训中学习其他的技能,有很多课本之外的知识,让我更上一层楼。

标签

评论

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