权文哲_20200111-权文哲 – 副本

学习笔记

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

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

div class="wrapper second even">

div class="wrapper">

使用 [class=wrapper] 可以选择以上三个 div 元素中的最后一个元素,而不能选择前两个元素。
因为只有最后一个 div 元素的 class 属性取值等于 wrapper ,
另外两个 div 元素的 class 属性中只能说是包含 wrapper 。
所以这里要注意: form action="http://www.baidu.com/s">
input type="text" name="wd">
input type="submit" value="百度一下">
div class="wrapper first odd">

div class="wrapper second even">

div class="wrapper">

123
采用 [attributeName=value] 形式的属性选择器选择HTML元素时,元素的属性值必须是等于指定值。

3.3.3 [attributeName~=value]

[attributeName~=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的HTML 元素。
比如对于以下 HTML 元素来说:
使用 [class~=wrapper] 选择以上三个 div ,此时的 [class~=wrapper] 作用与 .wrapper 是相同
的。
div class="wrapper first odd">

div class="wrapper second even">

div class="wrapper">

123
使用 [class~=wrapper] 选择以上三个 div ,此时的 [class~=wrapper] 作用与 .wrapper 是相的。

学习心得

通过今天对HTML&CSS的复习,不仅加深了我对前面所学知识的印象,同时也学习到了以前所没有接触到的知识盲区,晚上写学习日志的时候我又将今天所学知识回顾了一遍,这也使我探索到了一个新的学习方式,坚持写学习日志会让我们对所学知识进行系统的梳理,从而达到更好的学习效果。

标签

IT特种兵 云创动力前端开发工程师 云创动力后端开发工程师 云创集训 冬令营 开发喵 教育生态服务商

评论

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