2020.12.22马海龙
1.知识内容总结
1.列表
1.有序列表
<ol type="1"></ol>
2.无序列表
<ul type="circle"></ul>
3.描述列表/定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
2.表格
<table border="1" width="800px" cellspacing="0" cellpadding="0">
<!--
表格中 tr 表示行 td 表示列/单元格
border 表格边框
width 宽度
cellspacing 单元格之间的空隙
cellpadding 单元格内边距/内填充
-->
<th></th><!-- 标签中的th会默认加粗居中-->
<td></td><!-- 比较常用
合并单元格
colspan 合并列
rowspan 合并行-->
3.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="#" method="get">
<!-- input 输入框, type用来指定其类型
value 用于指定其值 readonly 属性表示只读 disabled禁用
required 必填 placeholder 默认提示文字
-->
文本框:<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="重置按钮" />
</form>
</body>
</html>
4.图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<!--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,(省略)" />
</body>
</html>
5.音/视频
<!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 指定音频源 controls播放器控制按钮
autoplay 自动播放 chrome浏览器在新的版本中禁用了网页自动播放
muted 静音
-->
<audio src="zhuiguangzhe.mp3" controls autoplay="autoplay" muted="muted">
当前浏览器不支持此标签
</audio>
<video src="01.mp4" controls="controls"></video>
<marquee>弹幕</marquee>
</body>
</html>
2.心得体会
今天又是哇塞的一天,跟以前学的课程一比更加有趣,而且老师讲的也不算太快,基本都能跟得上,练习的时候也基本能做出来,更加能激发出我们学习的兴趣,现在对制作网页有了更多的兴趣了。就是今天练习的时候自己弄的有点慢,以至于老师再将后面的内容我听得有点跟不上,下午的时候老师讲Examplesg感觉是听懂了,练习的时候个别能弄出来,复杂的那种还是不会弄,而且还不知道问题出在哪了,所以就很烦。
近期评论