1.知识内容总结
1.列表
1.有序列表
type属性用来指定有序列表的序列类型
1 表示序号使用 阿拉伯数字
a/A使用小写/大写 英文字母做序号
<ol type="1"></ol>
2.无序列表
type 列表前序号类型
square 方形
disc 实心圆
circle 空心原点
<ul type="circle"></ul>
3.描述列表/定义列表
标题
对标题的描述
<dl>
<dt></dt>
<dd></dd>
</dl>
2.表格
表格由
标签来定义。
每个表格均有若干行（由
标签定义），每行被分割为若干单元格（由
| 标签定义）。
|
表示行 < td>表示列/单元格 < border>表示表格边框 < width>表示宽度
定义表格标题
表示表格的页眉
表示表格主题
表示表格页脚
标签中的内容默认加粗，居中显示
表示合并列 表示合并行
<table border="1" width="800px" cellspacing="0" cellpadding="0">
<!--
表格中 tr 表示行 td 表示列/单元格
border 表格边框
width 宽度
cellspacing 单元格之间的空隙
cellpadding 单元格内边距/内填充
-->
<th></th><!-- 标签中的th会默认加粗居中-->
<td></td><!-- 比较常用
合并单元格
colspan 合并列
rowspan 合并行-->
3.表单
form name="表单名称" method=表单提交方式" action="规定当提交单时向何处发送表单数据"
<!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.心得体会
今天的学习中收获还可以，老师讲的基本上能跟上，在遇到不会的问题时通过老师和同学们的帮助问题也得到了解决，今天学的内容还是特别感兴趣的，比如在网页中放入图片、音频、视频、表格，果然相信光的男人学啥都有收获！尤其饼状图的那个设计真的好看，勾起了我满满的兴趣，期待明天的学习内容。
© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1
|
近期评论