方茜_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调用函数,补充了我在学校课堂上的漏洞。边学操作,遇到问题然后解决问题,加深了印象增加了经验,使得课程没有停留在理论阶段。第一次课程收获满满。
近期评论