郭青青_2021.01.11-郭青青
2021/01/11—2021/02/05云创冬令营学习日志
Monday,January,11th.
回顾Html语言与补充学习
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>
Html锚点的学习
跨页面的锚点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
abcdefg
<!-- 跨页面锚点 -->
<a href="03.html#bottom">03.html#bottom</a>
</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="01.html">01.html</a>
<div style="height: 1000px;"></div>
底部
<a name="bottom"></a>
<a href="#top">回到顶部</a>
<!--
target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
download 下载
-->
<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>iframe</title>
</head>
<body>
04.html
<iframe src="03.html"></iframe>
</body>
</html>
音/视频的播放（js 脚本）
<!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 autoplay muted preload="none" loop>
<source src="https://t1.kugou.com/song.html?id=1hW24eaxTV3"></source>
<source src="others/chuanqi.mp3"></source>
不支持 audio 标签
</audio>
<!--
video 视频控件
controls 控制按钮
poster 视频封面
（其他 audio 标签属性也生效）
-->
<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
不支持 video 标签
</video>
<!-- 滚动字幕 -->
<marquee>冲冲冲</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;
if(videoStatus){
// 如果是暂停的,就播放
video.play();
// 修改按钮文字
btn.innerText = '暂停';
// video.muted = true; 静音 video.volume = (0~1) 音量
}else{
// 如果是暂停的,就暂停
video.pause();
// 修改按钮文字
btn.innerText = '播放';
}
}
function listen(e){
var code = e.keyCode;
// 判断 如果是 空格或者 回车按钮 调用 play()
if (code == 32 || code == 13) {
play();
}
}
// 添加监听事件
window.addEventListener("keydown", listen, false);
</script>
</body>
</html>
图片img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<!--
图片, 使用 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="可达鸭"/>
</body>
</html>
回顾CSS与补充内容
定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表语言，
用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:
- HTML标签决定页面上元素的基本结构
- CSS 用于设置HTML元素的样式
- JavaScript 用于控制页面上的行为
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
lector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号
分开。
ector {property: value;}
例如：
{color:red; font-size:14px;}
h1 是选择器，color 和 font-size 是属性，red 和 14px 是值
作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素
提示：使用花括号 {} 来包围声明
用法
在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。
内联样式
直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作 行内样式 )。
比如:
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " ></div>
内部样式
所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。
这里需要特别注意， style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。
而在 之间书写的内容才属于 CSS 代码。
通常建议将 style 元素 添加到 head 元素内部:
也可以根据实际情况来确定 style 元素的位置。
内部样式使用范围是当前页面(html文件)
外部样式表
单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用
外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链
接到样式表。 标签在（文档的）头部：
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩
展名进行保存。
@import
@import 用于从其他样式表导入样式规则
import url;
url 表示要引入资源位置
import 'custom';
import url("fineprint.css") print
样式优先级
内联样式 > 内部样式 > 外部样式
可以在属性值的后面添加 !important 提升样式的优先级
选择器
选择器是用来决定要改变谁的样式，选择器可以分为四类十七种，我们将其简化。我们接下来要介绍几
种，标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择
器。
标记（标签）选择器：网页标签名与选择器同名
标记选择器 也称作 标签选择器 ，英文中写作 tag selector
其作用是选择页面上所有匹配于该 tagName 的元素
该选择器不区分大小写
Class选择器
网页哪个标签使用Class选择器,就在标签添加
class属性，值就是Class选择器名称
其作用是选择页面上元素 class 属性（attribute）中 包含 指定 className 的元素。
因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个 className ，
其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
属性选择器
其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
[attributeName]
[attributeName] 形式的属性选择器用于选择 拥有 attributeName 属性 的 HTML 元素。
- [type] 可以选择两个 input 元素，因为它们都拥有了 type 属性
- [type] 无法选择 form 元素，因为 form 元素不拥有 type 属性
使用 [attributeName] 形式的属性选择器选择元素时需注意:
- 仅关注元素是否拥有指定 attributeName 对应的属性
- 与属性的属性值无关 ( 即不考虑该属性的属性值 ).
[attributeName=value]
[attributeName=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的
HTML 元素。
比如对于以下 HTML 元素来说:
<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>
使用 [class=wrapper] 可以选择以上三个 div 元素中的最后一个元素，而不能选择前两个元素。
因为只有最后一个 div 元素的 class 属性取值等于 wrapper ，
另外两个 div 元素的 class 属性中只能说是包含 wrapper 。
所以这里要注意:
采用 [attributeName=value] 形式的属性选择器选择HTML元素时，元素的属性值必须是等于指定
值
[attributeName~=value]
[attributeName~=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的
HTML 元素。
比如对于以下 HTML 元素来说
<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>
使用 [class~=wrapper] 选择以上三个 div ，此时的 [class~=wrapper] 作用与 .wrapper 是相同
的。
心得体会
从期末考试那种紧张的氛围当中刚平静下来。怀揣着一种对知识的向往之心，携带者一份美好的心情，给自己充满了满满的能量，来参加云创动力2020-2021年度冬令营IT特训活动。
在复习以前学过的知识点的过程中，发现把之前学过的知识点几乎全忘干净了，老师提到的知识点，感觉之前是学过，但是非常含糊。究其原因，当时在学习的过程中，没有把知识点学到举一反三地程度，学过之后也没有回头去巩固与加强，慢慢的，将学过的知识点逐渐遗忘掉了。
希望在以后的学习过程中，能做到上课认真听讲，仔细做好课堂笔记，遇到问题主动请教老师或其他同学，把所学过的知识不断地加强与巩固，力争做到快乐学习，享受学习，时时刻刻都学习。
评论