学习笔记

一、部分常用标签标签及其属性

1、a元素：超链接

属性：

target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
download 下载,值是下载文件的名称
href:链接地址（可以是本地资源也可以是在线资源）
锚点链接：可以用id 或者 name属性来定义其名称

2、audio 元素（音频元素）

属性:

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

3、video（视频元素）

属性：

           controls     控制按钮
           poster       视频封面
           （其他属性与audio相同）

4、marquee（滚动字幕）

属性

（1）onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动
（2）onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续
（3）align设定标签内容的对齐方式
absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐
（4）behavior设定滚动的方式：
alternate： 表示在两端之间来回滚动。
scroll： 表示由一端滚动到另一端，会重复。
slide： 表示由一端滚动到另一端，不会重复。
（5）height：设定活动字幕的高度，
（6）width：设定活动字幕的宽度，代码如下:
（7）hspace：设定活动字幕里所在的位置距离父容器水平边框的距离
（8）vspace: 设定活动字幕里所在的位置距离父容器垂直边框的距离
(9) loop：设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1
（10）scrollamount：设定活动字幕的滚动速度，单位pixels

二、用js控制媒体元素

1、获取到媒体元素

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

2、获取到按钮

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

3、写出判断媒体元素是否播放的函数（并且改变button内容）

function play(){
var audioStatus = audio.paused;
if(audioStatus){
audio.play();
btn.innerText = '暂停';
}else{
audio.pause();
btn.innerText = '播放';
}
}

4、添加键盘监听

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

5、判断如果是空格或者回车，便调用play()函数

function listen(e){
var code = e.keyCode;
// 判断 如果是 空格或者 回车按钮 调用 play()
if (code == 32 || code == 13) {
play();
}

        }

三、CSS（层叠样式表）

1、语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
注: 选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

2、用法

内联样式

直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作 行内样式 )。

内部样式

所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式（通常写在head标签中）。

外部样式表

单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部

样式优先级

内联样式 > 内部样式 > 外部样式
注：可以在属性值的后面添加 !important 提升样式的优先级

3、选择器

选择器是用来决定要改变谁的样式，选择器可以分为四类十七种，我们将其简化。我们接下来要介绍几
种，标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择
器。

3.1标记(标签)选择器: 网页标签名与选择器同名

tagName { propertyName : propertyValue ; ..
其作用是选择页面上所有匹配于该 tagName 的元素,该选择器不区分大小写

3.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加class属性，值就是Class选择器名称

其作用是选择页面上元素 class 属性（attribute）中 包含 指定 className 的元素。
因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个 className
另外注意: 将 这里的 class selector 翻译成 类选择器 ，将 className 翻译成 类名 是及其不合适的。

3.3属性选择器

其作用是根据 HTML 元素的属性来选择相应的元素。
我们仅学习较为常用的三种:
[attributeName]
[attributeName=value]
[attributeName~=value] 。

3.3.1 [attributeName]

[attributeName] 形式的属性选择器用于选择 拥有 attributeName 属性 的 HTML 元素。
比如对于以下HTML元素来说:
form action="http://www.baidu.com/s">
input type="text" name="wd">
input type="submit" value="百度一下">
[type] 可以选择两个 input 元素，因为它们都拥有了 type 属性
[type] 无法选择 form 元素，因为 form 元素不拥有 type 属性
使用 [attributeName] 形式的属性选择器选择元素时需注意:
仅关注元素是否拥有指定 attributeName 对应的属性
与属性的属性值无关 ( 即不考虑该属性的属性值 )

3.3.2 [attributeName=value]

[attributeName=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的
HTML 元素。
比如对于以下 HTML 元素来说:
div class="wrapper first odd">