冯佳丽_20210111冯佳丽
1、学习总结
1.1、标准的网页结构
<!-- 标准的网页结构 -->
<!-- 文档声明，用于声明网页的类型 -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
<!-- 网页信息,比如：标题、图标、编码 -->
<head>
<!-- 网页编码， utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
<meta charset="utf-8">
<!-- 网页标题 -->
<title>标题</title>
<!-- 引入外部样式 -->
<link href="#" type="text/css"/>
<!-- 内部样式 -->
<style type="text/css">
.....
</style>
<!-- SEO -->
<!-- 网页作者 -->
<meta name="author" content="云创动力"/>
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 网页描述 -->
<meta name="description" content="" />
</head>
<body>
</body>
</html>
1.2、关于网页图标的制作
制作图标的网址：
制作好之后把图片保存在需要的路径
<link rel="shortcut icon" href="aaa.ico" />
注：href可以引用在线图片路径
1.3、元素之间的关系
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
...
</html>
title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素title 和 meta元素有共同的直接父元素，
title 和 meta 就是兄弟关系（同级元素）元素根据特点分为 两大类： 内联（行）元素 块元素
内联(行)元素: span a input strong em button img
u i s b
默认情况下，不能独立占父元素一行空间的元素
块元素： p div ul ol dl hn form table hr nav div aside scetion
默认情况下，能够独立占父元素一行空间的元素
1.4、a标签
1.4.1、a标签的属性——target
target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
download 下载,值是下载文件的名称
<a href="http://www.baidu.com/" target="_self">本页面</a>
<a href="http://www.baidu.com/" target="_blank">新页面</a>
<a href="http://www.baidu.com/" target="_parent">父页面</a>
<a href="http://www.baidu.com/" target="_top">最外层页面</a>
1.4.2、锚点链接
本页锚点
<a name="top">顶部</a>
<!-- 锚点标记 -->
<div style="margin-top: 1500px;">
底部
<a href="#top">回到顶部</a>
</div>
跨页锚点：href="页面路径#其他页面的name值 "
<!-- 跨页锚点 -->
<a href="a.html#top">123</a>
1.5、audio 音频标签
audio 音频标签：
controls 控制按钮（必须写上，否则无法显示）
autoplay 自动播放 chrome65之后禁止音/视频自动播放
muted 静音
preload 加载：
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放
一种写法：(利用source标签，可以写多个src，但是只最当前的显示一个)
<audio controls="controls" autoplay="autoplay" preload="none" loop="loop">
<source src="others/zhuiguangzhe.mp3"></source>
<source src="others/zhuiguangzhe.mp3"></source>
当前浏览器不支持audio
</audio>
另一种写法（只能写一个）：
<audio src="others/zhuiguangzhe.mp3" controls="controls" autoplay="autoplay" preload="none" loop="loop">
当前浏览器不支持audio
</audio>
1.6、video 视频标签
video 视频控件
controls 控制按钮(必须写上，否则无法显示)
poster 视频封面
（其他 audio 标签属性也生效）
1.7、关于video的js部分和事件监听部分
<button onclick="dj()" id="btn">播放</button>
<video id="video" src="others/tb.mp4" controls="controls" poster="kedaya.jpeg">
不支持 video 标签
</video>
var btn=document.querySelector("#btn")
var video=document.querySelector("#video")
function dj(){
// console.log(video)
//获取视频的状态
var videoStatus=video.paused;
if(videoStatus){
//播放
video.play();
btn.innerText="暂停"
video.volume=0.5;
}else{
//暂停
video.pause();
btn.innerText="播放";
video.volume=0;
}
}
//添加监听事件
function listen(e){
// console.log(e)
var code = e.keyCode;
// 判断 如果是 空格或者 回车按钮 调用 dj()
if (code == 32 || code == 13) {
dj();
}
}
//document.addEventListener(event, function, useCapture)
//event:查阅菜鸟HTML DOM事件对象
//function:定义的函数
/*
useCapture:
可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
可能值：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
*/
window.addEventListener("keydown",listen,false);
1.8、img图片标签
img图片:
使用 src 属性 设置其图片源地址
图片格式支持： jpg/jpeg png gif bmp
jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
png 支持背景透明
gif 动图
bmp 位图 几乎不进行压缩
title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
alt 如果图片不能正常显示时，显示其值
三大类：
<!-- 本地图片 -->
<img src="img/kedaya.jpeg" title="这是只可达鸭"/>
<!-- 在线图片 -->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />
<!-- 加密后的图片， Base64 编码过后的图片 -->
<img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>
2、学习感受
老师讲的很思路清晰，是平时容易忽略的点。js部分依旧是难点重点。
近期评论