2020.12.22_杨白龙

一、知识点总结

常用的标签

1、有序列表

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

type=“ ” 可以写入“1” 、“ a ”、“ i ”表示列表顺序

1)1表示序号使用(阿拉伯数字、默认值)

2)a/A 使用小写/大写 英文字母做序号

3)i/I 使用小写/大写 罗马数字

2、无序列表

 <ul type="">    <li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li>    <li> 无序列表 和 有序列表内部的 列表项目 都使用 li 元素来表示 </li> </ul>

type 列表前序号类型

square 方形
disc 实心圆 默认值
circle 圆

type=“ ” 可以写入“ disc”、“ squre”、“circle ”

<ul type="disc">
            <li>吃饭</li>
</ul>
<ul type="squre">
            <li>睡觉</li>
</ul>
<ul type="circle">
            <li>吃饭</li>
</ul>

二、表格

描述列表、定义列表

<dl>
<dt>标题</dt>
<dd>对标题描述</dd>
</dl>

表格由< table>标签定义

每个表格均有若干个< tr>表示行标签,每行被分割为若干个单元格< td>表示列标签

<table border="1" width="800px" cellspacing="0" cellpadding="0">
<tr>
<!-- th标签中的内容 默认会加粗,居中显示 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>

< thead>——定义表格页眉

< tboday>——主体

< tfoot>——定义表格的页脚

三、关于form

input 输入框, type用来指定其类型

<form action="#" method="get">
文本框:<input type="text"/> 
<br />

value 用于指定其值 readonly 属性表示只读 disabled禁用

文本框:<input type="text" value="123" readonly="readonly" disabled="disabled"/>   <br />

required 必填 placeholder 默认提示文字

密码框:<input type="password" required="required" placeholder="请输入密码"/> <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="重置按钮" />

五、网页中插入图片

图片的类型(jpg/jpeg png gif bmp)
src 属性用于定义图片的源 title 鼠标悬停显示的文字 alt 图片加载不出来,显示的文字width/height 指定图片的宽/高,如果只指定一个 图片会等比例进行适应

<img src="kedaya.jpeg" title="可达鸭啊" alt="这是只可达鸭" width="200px" height="500px"/>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2907558350,3984484335&fm=26&gp=0.jpg" />
<img src="data:image/png;base64,(省略)" />    

六、网页中插入视频

1、audio表示音频 src 指定音频源 controls播放器控制按钮
2、autoplay 自动播放 chrome浏览器在新的版本中禁用了网页自动播放
3、muted 静音

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>音/视频</title>
        <style>
            marquee{
                font-size: 30px;
                font-weight: bold;
                color: red;
            }
        </style>
    </head>
    <body>
        
        <audio src="zhuiguangzhe.mp3" controls autoplay="autoplay" muted="muted">
            当前浏览器不支持此标签
        </audio>
        
        
        <video src="01.mp4" controls="controls"></video>
        
        <marquee>弹幕</marquee>
        
    </body>
</html>

七、关于echarts

echarts 使用:

1、引入 echarts.js 文件

2、设置 echarts 容器

3、自定 echarts 配置

4、设置 echarts 配置

八、数据库配置环境变量

二、心得体会

今天实训所学的内容有点多,网页的列表、表格、文本框、按钮插入图片、视频以及echarts的使用,没接触过,有点吃力,尤其时在做练习时,第一个题目还好,但到了第二个表格的题目时有点吃力,不过在马老师带我们做了一遍之后,稍微能有所进步,今天的实训内容多但很有意义,让我了解传统的网页、音乐播放器是如何形成的,原来我们也能动手制作,收获蛮大的,为下一步学习打下基础。

标签

评论

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