王庆召_20210111 王庆召
一、学习总结
1. 复习HTML+CSS+JavaScript
<!-- 标准的网页结构 -->
<!-- 文档声明，用于声明网页的类型 -->
<!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 !
</body>
</html>
1.2 网页标签
成对出现的标签 <span></span>
有开始标记(标签) <span>
有结束标记(标签) </span>
自结束/自封闭标签 <meta /> <hr />
注意： 网页的标签不区分大小写，但是通常建议使用小写:
1.3 元素之间的关系 dom树
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
...
</html>
title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素
title 和 meta元素有共同的直接父元素，
title 和 meta 就是兄弟关系（同级元素）
head 是 html 元素的直接子元素
那么 title以及 meta 和 html 的关系是什么？
后代元素, 只要是 当前元素内的标签都是它的 后代元素
1.4 根据元素的特点分类
内联(行)元素: 内联（行）元素 块元素
span a input strong em button img u i s b
默认情况下，不能独立占父元素一行空间的元素
块元素：
p div ul ol dl hn form table hr
默认情况下，能够独立占父元素一行空间的元素
1.5 音频标签
<audio id="audio" controls autoplay muted preload="none" loop>
<source src="others/zhuiguangzhe.mp3"></source>
<source src="others/chuanqi.mp3"></source>
不支持 audio 标签
</audio>
// 音频播放实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video id="video" src="http://lc-0OwJ6sYh.cn-e1.lcfile.com/7b9889fa93941ad0bee1/%E6%88%91%E7%9A%84%E4%B8%89%E4%BD%93.mp4" controls style="height: 250px;" poster="https://gitee.com/wqzsky/IpcCloud/raw/master/W}Z}16LI3N_D$SKXNZV2}49.jpg"></video>
<button id="btn" onclick="play()">播放</button>
</body>
<script type="text/javascript">
var btn = document.querySelector("#btn");
var video = document.querySelector("#video");
function play() {
console.log(video);
var videoStatus = video.paused;
if (videoStatus) {
video.play();
btn.innerText = "暂停";
} else {
video.pause();
btn.innerText = "播放";
}
}
function listen(e) {
var code = e.keyCode;
if (code == 32 || code == 13) {
if (videoStatus) {
video.play();
btn.innerText = "暂停";
} else {
video.pause();
btn.innerText = "播放";
}
}
}
window.addEventListener("keydown",listen,false);
</script>
</html>
audio 音频标签
controls 控制按钮
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
muted 静音
preload 加载
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放
1.6 视频控件
<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
不支持 video 标签
</video>
video 视频控件
controls 控制按钮
poster 视频封面
（其他 audio 标签属性也生效）
1.7 img
<!-- 本地图片 -->
<img src="img/kedaya.jpeg" title="这是只可达鸭"/>
<!-- 在线图片 -->
<imgsrc="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />
<!-- 加密后的图片， Base64 编码过后的图片 -->
<img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>
图片, 使用 src 属性 设置其图片源地址
图片格式支持： jpg/jpeg png gif bmp
jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
png 支持背景透明
gif 动图
bmp 位图 几乎不进行压缩
title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
alt 如果图片不能正常显示时，显示其值
1.8 属性选择器用法实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
[type]{
color: red;
}
[class~=wrapper]{
color: blue;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
<div class="wrapper first odd">wrapper first odd</div>
<div class="wrapper second even">wrapper second even</div>
<div class="wrapper">wrapper</div>
</body>
</html>
1.9 CSS 定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表语言，
用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
###### 1.10 网页三要素:
HTML标签决定页面上元素的基本结构
CSS 用于设置HTML元素的样式
JavaScript 用于控制页面上的行为
1.11 CSS语法
1.12 @import
import 'custom.css';
@import url("fineprint.css") print;
1.13 样式优先级
内联样式 > 内部样式 > 外部样
1.14 属性选择器
1.15 内联样式、内部样式、外部样式
<style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>
<head>
...
<style type="text/css">
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
二、心得体会
- 学习的道路上要经常回顾，要学以致用，坚持就是胜利！
- 对于之前HTML+CSS+JavaScript上的学习还是有一定的缺陷，希望自己能够及时补充
点赞
评论留言