赵新宇_2021.1.11 赵新宇
一、知识总结
复习
1、HTML
-
<!-- 标准的网页结构 --> <!-- 文档声明，用于声明网页的类型 -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
<!-- 网页信息,比如：标题、图标、编码 -->
<head>
<!-- 网页编码， utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
<!--
属性 attribute，标签属性用来描述标签特性。格式： 属性名="属性值"
多个属性间用 空格 隔开
-->
<meta charset="utf-8" />
<!-- 网页标题 -->
<title>标题</title>
<!-- 网页图标 在线制作网址：https://tool.lu/favicon/ -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- 引入外部样式 -->
<link href="#" type="text/css"/>
<!-- 内联样式 -->
<style type="text/css">
</style>
<!-- 引入外部js -->
<script src="#"></script>
<!-- 内部 js -->
<script type="text/javascript">
</script>
<!-- SEO -->
<!-- 网页作者 -->
<meta name="author" content="云创动力"/>
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 网页描述 -->
<meta name="description" content="" />
</head>
<!-- 网页中显示的内容 -->
<body>
Hello Wrold !
<!--
网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
成对出现的标签 <span></span>
有开始标记(标签) <span>
有结束标记(标签) </span>
自结束/自封闭标签
<meta /> <hr />
注意： 网页的标签不区分大小写，但是通常建议使用小写
元素： 标签以及标签中的内容
例如： <p>这是一个段落</p>
元素间的关系： dom 树
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
...
</html>
title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素
title 和 meta元素有共同的直接父元素，
title 和 meta 就是兄弟关系（同级元素）
head 是 html 元素的直接子元素
那么 title以及 meta 和 html 的关系是什么？
后代元素, 只要是 当前元素内的标签都是它的 后代元素
元素根据特点分为 两大类： 内联（行）元素 块元素
内联(行)元素: span a input strong em button img
u i s b
默认情况下，不能独立占父元素一行空间的元素
块元素： p div ul ol dl hn form table hr
默认情况下，能够独立占父元素一行空间的元素
-->
<hr />
<p>你就站在这不要动，我去给你买橘子</p>
<nav></nav>
<div></div>
<aside></aside>
<section></section>
</body>
</html>
-
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>html</title>
</head>
<body>
<!-- 锚点,可以使用 name 或者 id属性定义其名称 -->
<a name="top"></a>
<a href="https://www.baidu.com">百度一下，你就知道</a>
<a href="03.html">03.html</a>
<div style="height: 1000px;"></div>
底部
<a name="bottom"></a>
<a href="#top">回到顶部</a>
<!--
a标签里的target属性的用法:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
-->
<a href="https://www.baidu.com" target="_blank">新窗口</a>
<a href="https://www.baidu.com" target="_self">本页面</a>
<a href="https://www.baidu.com" target="_parent">父页面</a>
<a href="https://www.baidu.com" target="_top">最外层页面</a>
</body>
</html>
-
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>音乐视频播放器</title>
</head>
<body>
<button onclick="play()" id="btn">播放</button>
<!--
audio 音频标签
controls 控制按钮
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
muted 静音
preload 加载
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放
-->
<audio id="audio" controls loop>
<source src="video/blame.mp3"></source>
<source src="video/"></source>
不支持 audio 标签
</audio>
<!--
video 视频控件
controls 控制按钮
poster 视频封面
（其他 audio 标签属性也生效）
-->
<video id="video" controls poster="img/01.jpg" >
<source src="video/留在身边MV.mp4"></source>
</video>
<!-- 滚动字幕 -->
<marquee bgcolor="aqua" behavior="slide">音视频播放器</marquee>
<!-- js 脚本 -->
<script type="text/javascript">
// 获取 视频 元素
var video = document.querySelector("#video");
// 获取到 播放 按钮
var btn = document.querySelector("#btn");
// 定义一个函数
function play(){
// 向控制台输出
// console.log(video);
// 获取视频是否暂停
var videoStatus = video.paused;
// 添加监听事件
window.addEventListener("click", listen, false);
</script>
</body>
</html>
二、心得体会
今天是我来第二次来云创动力学习，第一次来还是大一的下半学期，第一次来这里的时候，我就获得了很多关于编程方面的知识，让我从一个神时隔两年，我又来到了这里，感谢孙校长和云创动力给了我这次继续学习的机会，在学校里，孙校长为我们带了SSM企业级开发的实训课，孙校长的课风趣幽默，几个例子就把晦涩难懂的搭建过程讲透彻了，按着他的教案我们一步步的完成了搭建过程。我相信后面的课程会带给我们更多的知识，我也会珍惜这次学习的机会，更加努力的学习！
近期评论