方茜_20210111方茜
课程内容
1.HTML
（1）网页头部
<head>
<meta charset="utf-8" />
<title>标题</title>
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
注： 网页图标 在线制作网址：https://tool.lu/favicon/
（2）标签
<body>
<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>
target属性
| 类型 | 作用 |
|---|---|
| _blank | 新窗口打开链接 |
| _parent | 父页面打开链接 |
| _self | 本页面打开链接(默认) |
| _top | 最外层页面打开 |
download属性
<a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>
注：download 下载,值是下载文件的名称
锚点a标签的使用
在代码中，使用了锚点来直接定位至所需要看的内容。锚点链接使用方法如下。
<a href="#a1">公司简介</a>
这是正常的一个a标签。点击它需要定位到公司简介的位置。只需要给所需要定位到的位置前加一个锚点a标签。这个锚点a标签没有href属性，也不需要内容。只需要name属性。如：
<a name="a1"></a>
关键点是链接的href属性值是"#"加上锚点的name值.
（3）audio 音频标签
<audio id="audio" controls autoplay muted preload="none" loop>
<source src="[others/zhuiguangzhe.mp3](others/zhuiguangzhe.mp3)"></source>
<source src="[others/chuanqi.mp3](others/chuanqi.mp3)"></source>
不支持 audio 标签
</audio>
| 属性 | 作用 |
|---|---|
| controls | 控制按钮 |
| autoplay | 自动播放 chrome 在65之后禁止音/视频自动播放 |
| muted | 静音 |
| preload | 加载 |
| auto | 自动 默认 |
| none | 不预加载 |
| metadata | 预加载 |
| loop | 循环播放 |
（4）video 音频标签
<video id="video" src="[others/tb.mp4](others/tb.mp4)" controls poster="img/kedaya.jpeg">
不支持 video 标签
</video>
| 属性 | 作用 |
|---|---|
| controls | 控制按钮 |
| poster | 视频封面 |
| 其他 | （其他 audio 标签属性也生效） |
2.JavaScript
| 示例 | 作用 |
|---|---|
| var video = document.querySelector("#video"); | 获取 视频 元素 |
| var btn = document.querySelector("#btn"); | 获取到 播放 按钮 |
| console.log(video); | 向控制台输出 |
| var videoStatus = video.paused; | 获取视频是否暂停 |
| btn.innerText = '暂停'; | 修改按钮文字 |
| video.muted = true; | 静音 |
| video.volume = (0~1) | 音量 |
3.CSS
（1）三种引入方式
1：内联样式，在标签中直接通过元素的style属性来指定元素的样式
<div style="height:100px;width:100px;"></div>
2：内部样式，在HTML文档中，通过Style元素写入CSS样式，通常写在head元素的内部。
<head>
<style type="text/css"></style>
</head>
3：外部样式，通过link标签引入外部.css文件来应用其样式，也可以使用@import从其他样式表导入样式规则。
<head>
<link rel="stylesheet" type=text/css href="style.css" />
</head>
三种优先级顺序是 ：内联样式 > 内部样式 >外部样式
（2）Class选择器
| 在 div 元素的 class 属性中仅使用单个 className | |
|---|---|
|
|
在 p 元素的 class 属性中指定两个 className |
| 在 span 元素的 class 属性中指定三个 className |
注：在 span 元素的 class 属性中指定三个 className
.success{
color: red;
}
注：.success 可以选择以上代码中的 div 、p、span 元素。
（3）属性选择器
[type]{
color: red;
}
注：所以含有type属性的字体变为红色。
（4）元素选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
心得体会
课程的开始先介绍了我们课程针对的方向和就业前景，然后开始了今天的内容，对HTML的一些相关的标签和属性用法进行了复习，本以为是一些基础不会有什么新的东西了，但是后面的讲解到video标签的时候用的了JavaScript调用函数，补充了我在学校课堂上的漏洞。边学操作，遇到问题然后解决问题，加深了印象增加了经验，使得课程没有停留在理论阶段。第一次课程收获满满。
近期评论