冯佳丽_20210111冯佳丽

1、学习总结

1.1、标准的网页结构

<!-- 标准的网页结构 -->
<!-- 文档声明,用于声明网页的类型  -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
    <!-- 网页信息,比如:标题、图标、编码 -->
    <head>
        <!-- 网页编码, utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
        <meta charset="utf-8">
        <!-- 网页标题 -->
        <title>标题</title>
        <!-- 引入外部样式 -->
        <link href="#" type="text/css"/>
        <!-- 内部样式 -->
        <style type="text/css">
            .....
        </style>
        <!-- SEO -->
        <!-- 网页作者 -->
        <meta name="author" content="云创动力"/>
        <!-- 关键字 -->
        <meta name="keywords" content="" />
        <!-- 网页描述 -->
        <meta name="description" content="" />
    </head>
    <body>
    </body>
</html>

1.2、关于网页图标的制作

制作图标的网址:

https://tool.lu/favicon/

制作好之后把图片保存在需要的路径

<link rel="shortcut icon" href="aaa.ico" />

注:href可以引用在线图片路径

1.3、元素之间的关系

<html>
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
    </head>
    ...
</html>  

title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素

title 和 meta元素有共同的直接父元素,
title 和 meta 就是兄弟关系(同级元素)

元素根据特点分为 两大类: 内联(行)元素 块元素

​ 内联(行)元素: span a input strong em button img
​ u i s b
​ 默认情况下,不能独立占父元素一行空间的元素
​ 块元素: p div ul ol dl hn form table hr nav div aside scetion
​ 默认情况下,能够独立占父元素一行空间的元素

1.4、a标签

1.4.1、a标签的属性——target
        target:
            _blank   新窗口打开链接
            _parent  父页面打开链接
            _self    本页面打开链接(默认)
            _top     最外层页面打开
        download 下载,值是下载文件的名称
<a href="http://www.baidu.com/" target="_self">本页面</a>
<a href="http://www.baidu.com/" target="_blank">新页面</a>
<a href="http://www.baidu.com/" target="_parent">父页面</a>
<a href="http://www.baidu.com/" target="_top">最外层页面</a>
1.4.2、锚点链接

本页锚点

<a name="top">顶部</a>
<!-- 锚点标记 -->
<div style="margin-top: 1500px;">
    底部
    <a href="#top">回到顶部</a>
</div>

跨页锚点:href="页面路径#其他页面的name值 "

<!-- 跨页锚点 -->
<a href="a.html#top">123</a>

1.5、audio 音频标签

audio 音频标签:
controls 控制按钮(必须写上,否则无法显示)
autoplay 自动播放 chrome65之后禁止音/视频自动播放
muted 静音
preload 加载:
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放

一种写法:(利用source标签,可以写多个src,但是只最当前的显示一个)

<audio controls="controls" autoplay="autoplay" preload="none" loop="loop">
            <source src="others/zhuiguangzhe.mp3"></source>
            <source src="others/zhuiguangzhe.mp3"></source>
            当前浏览器不支持audio
        </audio>

另一种写法(只能写一个):

<audio src="others/zhuiguangzhe.mp3" controls="controls" autoplay="autoplay" preload="none" loop="loop">
    当前浏览器不支持audio
</audio>

1.6、video 视频标签

video 视频控件
controls 控制按钮(必须写上,否则无法显示)
poster 视频封面
(其他 audio 标签属性也生效)

1.7、关于video的js部分和事件监听部分

<button onclick="dj()" id="btn">播放</button>
<video id="video" src="others/tb.mp4" controls="controls" poster="kedaya.jpeg">
            不支持 video 标签
</video>
var btn=document.querySelector("#btn")
            var video=document.querySelector("#video")
            function dj(){
                // console.log(video)
                //获取视频的状态
                var videoStatus=video.paused;
                if(videoStatus){
                    //播放
                    video.play();
                    btn.innerText="暂停"
                    video.volume=0.5;
                    
                }else{
                    //暂停
                    video.pause();
                    btn.innerText="播放";
                    video.volume=0;
                }
            }
            
            //添加监听事件
            function listen(e){
                // console.log(e)
                var code = e.keyCode;
                // 判断 如果是 空格或者 回车按钮 调用 dj()
                if (code == 32 || code == 13) {
                    dj();
                }
            }

//document.addEventListener(event, function, useCapture)
//event:查阅菜鸟HTML DOM事件对象
//function:定义的函数
/*
useCapture:
   可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。
   可能值:
   true - 事件句柄在捕获阶段执行
   false- 默认。事件句柄在冒泡阶段执行
  */
window.addEventListener("keydown",listen,false);

1.8、img图片标签

img图片:

​ 使用 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="可达鸭"/>

2、学习感受

老师讲的很思路清晰,是平时容易忽略的点。js部分依旧是难点重点。

标签

评论

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