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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1