常正慧_20200111-常正慧

学员日志 656 2021年1月11日 0 云创动力

知识点

HTML 5

头部信息

网页标题
- > > <title> 标题 <title> >
网页图标
- ```
<link rel="shortcut icon" href="img/图片名"/>
```
- 网页图标制作网址：https://tool.lu/favicon
引入外部样式
- > > <link href="#" type="text/css"/> >
内部样式
- > > <style type="text/css"> </style> >
引入外部 js
- > > <script src="#"></script> >
内部js
- > > <script type="text/javascript"> > </script> >
网页作者
- <meta name="author" content="云创动力"/>

关键字
- > > <meta name="keywords" content="" /> >
网页描述
- > > <meta name="description" content="" > >

网页中显示的内容

网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
- > 1. 成对出现的标签
  > 2. 有开始标记(标签)
  > 有结束标记(标签)
  > 3. 自结束/自封闭标签
  > 4. 注意：网页的标签不区分大小写，但是通常建议使用小写
元素：标签以及标签中的内容
- 元素间的关系： dom树
- 1. title 元素是 head元素的直接子元素
    head 元素是 title 元素的直接父元素
  2. title 和 meta元素有共同的直接父元素，
    title 和 meta 就是兄弟关系（同级元素）
  3. head 是 html 元素的直接子元素
    后代元素, 只要是当前元素内的标签都是它的后代元素
- 元素根据特点分为两大类：内联（行）元素块元素
- 内联(行)元素:
- ```
span  a  input strong em button im u i s b
```
  默认情况下，不能独立占父元素一行空间的元素
- 块元素：
- ```
p div ul ol dl hn form table hr
```
  默认情况下，能够独立占父元素一行空间的元素

超链接

锚点：可以使用 name 或者 id属性定义其名称
例如
- > > <a name="top"></a> > <a href="https://www.baidu.com">百度一下，你啥都不知道</a> > <a href="01.html">01.html</a> > > <div style="height: 1000px;"></div> > > 底部 > <a name="bottom"></a> > <a href="#top">回到顶部</a> >

超链接

类别
1. _blank 新窗口打开链接
2. _parent 父页面打开链接
3. _self 本页面打开链接(默认)
4. _top 最外层页面打开

<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>

download 下载,值是下载文件的名称

<a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>

音/视频

音频标签：audio

1. controls 控制按钮
2. autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
3. muted 静音
4. preload 加载
  
  auto 自动默认
  
  none 不预加载
  
  metadata 预加载
5. loop 循环播放
示例

<audio id="audio"  controls autoplay muted preload="none" loop>
            <source src="others/zhuiguangzhe.mp3"></source>

            <source src="others/chuanqi.mp3"></source>

            不支持 audio 标签

        </audio>

视频标签：video

1. controls 控制按钮
2. poster 视频封面
  
  （其他 audio 标签属性也生效）
代码示例

<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
            不支持 video 标签

        </video>

滚动字幕
- <marquee>冲冲冲</marquee>

js脚本

代码示例

<script type="text/javascript">
          // 获取 视频 元素

          var video = document.querySelector("#video");

          // 获取到 播放 按钮

          var btn = document.querySelector("#btn");

          // 定义一个函数

          function play(){

              // 向控制台输出

              // console.log(video);

              // 获取视频是否暂停

              var videoStatus = video.paused;

              

              if(videoStatus){

                  // 如果是暂停的,就播放

                  video.play();

                  // 修改按钮文字

                  btn.innerText = '暂停';

                  

                  // video.muted = true; 静音 video.volume = (0~1) 音量

              }else{

                  // 如果是暂停的,就暂停

                  video.pause();

                  // 修改按钮文字

                  btn.innerText = '播放';

              }

          }

          function listen(e){

              var code = e.keyCode;

              // 判断 如果是 空格或者 回车按钮 调用 play()

              if (code == 32 || code == 13) {

                  play();

              }

          }

          // 添加监听事件

          window.addEventListener("keydown", listen, false);

      </script>

图片

图片格式支持
- 1. jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
  2. png 支持背景透明
  3. gif 动图
  4. bmp 位图几乎不进行压缩
- 1. title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
  2. alt 如果图片不能正常显示时，显示其值
本地图片
- <img src="img/kedaya.jpeg" title="这是只可达鸭"/>

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

加密后的图片
- <img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>

内部样式

代码示例
- <style type="text/css"> /* class 选择器，区分大小写 */ .success{ color: red; /* 文字颜色 */ } </style>

> 1. > <div class="success"> > 在 div 元素的 class 属性中仅使用单个 className > </div> >
>
> 2. > <p class="first success"> > 在 p 元素的 class 属性中指定两个 className > </p> >
>
> 3. > <span class="flag success test"> > 在 span 元素的 class 属性中指定三个 className > </span> >

属性选择器

代码示例

<style type="text/css">
            [type]{

                color: red;

            }

            

            [class~=wrapper]{

                color: blue;

            }

        </style>

<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>

CSS

定义

层得样式表
- 用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
- CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素
1. HTML标签决定页面上元素的基本结构
2. CSS 用于设置HTML元素的样式
3. JavaScript 用于控制页面上的行为

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
- ector {declaration; declaration; ... declarationN}

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号分开
- ector { property; value;}
- {color:red; font-size:14px;}
h1 是选择器，color 和 font-size 是属性，red 和 14px 是值
- 作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素

用法

内联样式

直接通过元素的 style 属性（attribute）来指定的样式被称作内部样式(也有人称作行内样式 )
- <1div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > <2/div>

说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意，这里的 style 属性(attribute)是属于当前元素的 (即当前标签的)。

内部样式

所谓内部样式，就是在HTML文档中，通过style元素来嵌入CSS样式
- <style type="text/css"> </style>

style是一个HTML标签，属于HTML范畴，不属于CSS代码

而在

之间书写的内容才属于CSS代码。
建议将