贺佳磊_20210111贺佳磊
课程内容
1、网页的框架结构
标准的网页结构 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
文档声明，用于声明网页的类型:
<!DOCTYPE html>
网页根节点:
<html>
</html>
网页中显示信息,比如：标题、图标、编码 :
<head>
</head>
网页标题：
<title></title>
网页中显示内容:
<body>
</body>
2、跨页面锚点
锚点,可以使用 name 或者 id属性定义其名称
<a name="top"></a>
<a href="https://www.baidu.com">百度</a>
<a href="a.html">01.html</a>
<div style="height: 800px;"></div>
底部
<a name="bottom"></a>
<a href="#top">回到顶部</a>
3、a标签
| 类型 | |
|---|---|
| _blank | 新窗口打开链接 |
| _parent | 父页面打开链接 |
| _self | 本页面打开链接(默认) |
| _top | 最外层页面打开 |
| download | 下载,值是下载文件的名称_ |
新窗口
本页面
父页面
最外层页面
4、音频
audio 音频标签
| 属性 | |
|---|---|
| controls | 控制按钮 |
| autoplay | 自动播放 chrome 在65之后禁止音/视频自动播放 |
| muted | 静音 |
| preload | 加载 |
| auto | 自动 默认 |
| none | 不预加载 |
| metadata | 预加载 |
| loop | 循环播放 |
<audio src="others/情人.mp3" controls></audio>
video 视频控件
| 属性 | |
|---|---|
| controls | 控制按钮 |
| poster | 视频封面 |
<marquee >弹幕</marquee>
<video id="video" src="others/情人.mp4" controls poster="img/1.jpg" style="height: 200px;width: 500px;"></video>
<button onclick="play()" id="btn">播放</button>
<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 = '暂停';
}else{
video.pause();
btn.innerText = '播放';
}
}
function listen(e){
var code = e.keyCode;
if (code == 32 || code == 13) {
play();
}
}
window.addEventListener("keydown", listen, false);
</script>
5、图片
图片, 使用 src 属性 设置其图片源地址
图片格式：
| 格式 | |
|---|---|
| jpg/jpeg | 它支持极高的压缩率，因此JPEG图像的下载速度大大加快 |
| png | 支持背景透明 |
| gif | 动图 |
| bmp | 位图 几乎不进行压缩 |
| alt | 如果图片不能正常显示时，显示其值 |
| title | 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值 |
6、CSS
（1）定义：层叠样式表 ，是一种 样式表语言，用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
（2）语法
（3）用法：内联样式，内部样式，外部样式，@import，样式优先级
（4）选择器：四类十七种。标记(标签)选择器: 网页标签名与选择器同名、Class选择器:网页哪个标签使用Class选择器,就在标签添加class属性，值就是Class选择器名称、属性选择器：[attributeName]（用于选取带有指定元素的属性）、[attributeName=value]（用于选取带有指定属性和值的元素）、[attributeName~=value] （用于选取属性值中包含指定词汇的元素）
学习心得
今天是冬令营的第一天，在陌生的环境还不太适应，今天一天脑子都有点懵懵的，老师讲的很多自己都没有听过，看到旁边的同学都很认真并且老师问的问题都能回答上来，突然感觉自己了解的太少了，自己的基础太差，虽然在学校有接触HTML，但都很零碎。在以后的半个多月，我需要不断复习之前学习的知识，巩固自己的基础，增长自己的见识，提高自己的专业能力，我知道学习是一个长期的过程，在以后学习中我要严格要求自己，为了自己的未来，当下的我需要更加努力，加油！
评论