王庆召_20210111 王庆召

一、学习总结

1. 复习HTML+CSS+JavaScript
<!-- 标准的网页结构 -->
<!-- 文档声明,用于声明网页的类型  -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
    <!-- 网页信息,比如:标题、图标、编码 -->
    <head>
        <!-- 网页编码, utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 ->
        <!-- 
            属性 attribute,标签属性用来描述标签特性。格式: 属性名="属性值"
            多个属性间用 空格 隔开
         -->
        <meta charset="utf-8" />
        <!-- 网页标题 -->
        <title>标题</title>
        
        <!-- 网页图标  在线制作网址:https://tool.lu/favicon/ -->
        <link rel="shortcut icon" href="img/favicon.ico" />
        
        <!-- 引入外部样式 -->
        <link href="#" type="text/css"/>
        
        <!-- 内部样式 -->
        <style type="text/css">
            
        </style>
        
        <!-- 引入外部js -->
        <script src="#"></script>
        
        <!-- 内部 js -->
        <script type="text/javascript">
        </script>
        
        <!-- SEO -->
        <!-- 网页作者 -->
        <meta name="author" content="云创动力"/>
        
        <!-- 关键字 -->
        <meta name="keywords" content="" />
        <!-- 网页描述 -->
        <meta name="description" content="" />
    </head>
    <!-- 网页中显示的内容 -->
    <body>
        Hello Wrold !
    </body>
</html>
1.2 网页标签
成对出现的标签    <span></span>
有开始标记(标签)  <span>
有结束标记(标签)  </span>
自结束/自封闭标签  <meta />  <hr />    

注意: 网页的标签不区分大小写,但是通常建议使用小写:

1.3 元素之间的关系 dom树
<html>
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
    </head>
    ...
</html>  
title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素

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

head 是 html 元素的直接子元素
那么 title以及 meta 和 html 的关系是什么?
后代元素, 只要是 当前元素内的标签都是它的 后代元素
1.4 根据元素的特点分类
内联(行)元素: 内联(行)元素   块元素  
    span  a  input strong em button img  u i s b
    默认情况下,不能独立占父元素一行空间的元素
块元素:     
    p div ul ol dl hn form table hr
    默认情况下,能够独立占父元素一行空间的元素
1.5 音频标签
<audio id="audio"  controls autoplay muted preload="none" loop>
    <source src="others/zhuiguangzhe.mp3"></source>
    <source src="others/chuanqi.mp3"></source>
    不支持 audio 标签
</audio>
// 音频播放实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    
    <body>
        <video id="video" src="http://lc-0OwJ6sYh.cn-e1.lcfile.com/7b9889fa93941ad0bee1/%E6%88%91%E7%9A%84%E4%B8%89%E4%BD%93.mp4" controls style="height: 250px;" poster="https://gitee.com/wqzsky/IpcCloud/raw/master/W}Z}16LI3N_D$SKXNZV2}49.jpg"></video>
        <button id="btn" onclick="play()">播放</button>
    </body>
    <script type="text/javascript">
        var btn = document.querySelector("#btn");
        var video = document.querySelector("#video");
        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) {
                if (videoStatus) {
                    video.play();
                    btn.innerText = "暂停";
                } else {
                    video.pause();
                    btn.innerText = "播放";
                }
            } 
        }
        window.addEventListener("keydown",listen,false);
    </script>
</html>
audio       音频标签
controls    控制按钮
autoplay    自动播放 chrome 在65之后禁止音/视频自动播放
muted       静音
preload     加载
auto        自动 默认
none        不预加载
metadata    预加载
loop        循环播放
1.6 视频控件
<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
    不支持 video 标签
</video>
video 视频控件
controls    控制按钮
poster      视频封面
(其他 audio 标签属性也生效)
1.7 img
<!-- 本地图片 -->
<img src="img/kedaya.jpeg" title="这是只可达鸭"/>

<!-- 在线图片 -->
<imgsrc="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />


<!-- 加密后的图片, Base64 编码过后的图片 -->
<img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>
图片, 使用 src 属性 设置其图片源地址
图片格式支持: jpg/jpeg png  gif  bmp
jpg/jpeg 它支持极高的压缩率,因此JPEG图像的下载速度大大加快
png      支持背景透明
gif      动图
bmp      位图 几乎不进行压缩
title    几乎所有的html标签都有此属性,当鼠标悬停在标签上时显示其值
alt      如果图片不能正常显示时,显示其值
1.8 属性选择器用法实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            [type]{
                color: red;
            }
            
            [class~=wrapper]{
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <form action="http://www.baidu.com/s">
            <input type="text" name="wd">
            <input type="submit" value="百度一下">
        </form>
        
        
        <div class="wrapper first odd">wrapper first odd</div>
        <div class="wrapper second even">wrapper second even</div>
        <div class="wrapper">wrapper</div>
    </body>
</html>

1.9 CSS 定义
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表语言,
用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

###### 1.10 网页三要素:

HTML标签决定页面上元素的基本结构
CSS 用于设置HTML元素的样式
JavaScript 用于控制页面上的行为
1.11 CSS语法

1.12 @import
import 'custom.css';
@import url("fineprint.css") print;
1.13 样式优先级
内联样式 > 内部样式 > 外部样
1.14 属性选择器

1.15 内联样式、内部样式、外部样式
<style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>
<head>
    ...
    <style type="text/css">
    </style>
</head>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

二、心得体会

  1. 学习的道路上要经常回顾,要学以致用,坚持就是胜利!
  2. 对于之前HTML+CSS+JavaScript上的学习还是有一定的缺陷,希望自己能够及时补充

标签

评论


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