李天龙_20210111李天龙

一、学习总结

1.复习HTML

1.1 文档声明,用于声明网页的类型
!DOCTYPE html
1.2 引入外部样式
<link href="#" type="text/css"/>
1.3 内部样式
<style type="text/css"></style>
1.4 引入外部js
<script src="#"></script>
1.5 内部 js
<script type="text/javascript"></script>
1.6 网页作者
<meta name="author" content="李天龙"/>
1.7 关键字
<meta name="keywords" content="" />
1.8 网页描述
<meta name="description" content="" />
1.9 元素根据特点分为 两大类:内联(行)元素 块元素

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

1.10 跨页面锚点
<a href="03.html#bottom">03.html#bottom</a>

锚点,可以使用 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.11 target:

​ _blank 新窗口打开链接
​ _parent 父页面打开链接
​ _self 本页面打开链接(默认)
​ _top 最外层页面打开
​ download 下载,值是下载文件的名称

<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>
<a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>
1.12 iframe框架
<iframe src="03.html"></iframe>
1.13 audio 音频标签

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

<audio id="audio"  controls autoplay muted preload="none" loop>
<source src="others/zhuiguangzhe.mp3"></source>
<source src="others/chuanqi.mp3"></source>
不支持 audio 标签
</audio>
1.14 video 视频控件

​ controls 控制按钮
​ poster 视频封面
​ (其他 audio 标签属性也生效)

<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
不支持 video 标签
</video>
1.15 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);
1.16 图片, 使用 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.css

2.1 定义

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表语言, 用来描述 HTML 或 XML(包括 如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。

​ CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

​ 网页三要素:

​ HTML标签决定页面上元素的基本结构

​ CSS 用于设置HTML元素的样式

​ JavaScript 用于控制页面上的行为

2.2 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

ector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和值组成。

属性(property)是您希望设置的样式属性(style property)。每个属性有一个值。属性和值被冒号

ector {property: value;}

分开。

例如:

{color:red; font-size:14px;}

h1 是选择器,color 和 font-size 是属性,red 和 14px 是值

作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素

提示:使用花括号 {} 来包围声明

2.3 用法

在 HTML 文档中使用 CSS 有四种不同的用法,这里分别予以简单介绍。

2.3.1 内联样式

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

v style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > </div>

说的更直接些,就是在 开始标签 中通过标签的 style 属性(attribute)来指定元素的样式。

必须注意,这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的)。

2.3.2 内部样式

所谓内部样式,就是在 HTML 文档中,通过 style 元素来嵌入CSS样式。

<style type="text/css"> </style>

这里需要特别注意, style 是一个 HTML 标签,属于HTML范畴,不属于CSS代码。

而在

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

通常建议将 style 元素 添加到 head 元素内部:

ead>... <style type="text/css"> </style> </head>
2.3.3 外部样式表

单独的 CSS (后缀是 .css )文件,当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用

外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链

接到样式表。 标签在(文档的)头部:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩

展名进行保存。下面是一个样式表文件的例子:

{color: sienna;} p {margin-left: 20px;} body {background-color: #ccc;}
2.3.4 @import

@import 用于从其他样式表导入样式规则

import url;

url 表示要引入资源位置

import 'custom.css';
@import url("fineprint.css") print;
2.3.5 样式优先级

内联样式>内部样式>外部样式

2.4选择器

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

2.4.1 标记(标签)选择器,英文中写作tag selector,其基本用法为

gName { propertyName : propertyValue ; ...

2.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加

class属性,值就是Class选择器名称

class 选择器 也称作 class 选择符,英文中称作 class selector ,其基本用法为:

className {

2.4.3属性选择器

属性选择器 也称作 属性选择符,英文中称作 attribute selector 。其基本用法为:

attributeName] {

其作用是根据 HTML 元素的属性来选择相应的元素。

属性选择器的用法比较多,以下表格中列举了部分属性选择的用法和作用。

s8T7lD.md.png

我们仅学习较为常用的三种: [attributeName] 、 [attributeName=value] 、

[attributeName~=value] 。

二、心得体会

今天复习了HTML和CSS,对之前的知识进行了总结复习,巩固了之前学过的知识,也学到了新的知识,今天收获了满满的知识,我们要学以致用,每天进步一小步,明天更加努力 !​?​

标签

评论


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