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的使用，没接触过，有点吃力，尤其时在做练习时，第一个题目还好，但到了第二个表格的题目时有点吃力，不过在马老师带我们做了一遍之后，稍微能有所进步，今天的实训内容多但很有意义，让我了解传统的网页、音乐播放器是如何形成的，原来我们也能动手制作，收获蛮大的，为下一步学习打下基础。
近期评论