白文学_20210111-白文学
HTML复习
1.网页结构
1.1首部
<!-- 文档声明，用于声明网页的类型 -->
<!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>
<!-- 网页中显示的内容 -->
1.2 body部
<body>
Hello Wrold !
<!--
网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
成对出现的标签 <span></span>
有开始标记(标签) <span>
有结束标记(标签) </span>
自结束/自封闭标签
<meta /> <hr />
注意： 网页的标签不区分大小写，但是通常建议使用小写
元素： 标签以及标签中的内容
例如： <p>这是一个段落</p>
元素间的关系： dom 树
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
...
</html>
title 元素是 head元素的 直接子元素
head 元素是 title 元素的 直接父元素
title 和 meta元素有共同的直接父元素，
title 和 meta 就是兄弟关系（同级元素）
head 是 html 元素的直接子元素
那么 title以及 meta 和 html 的关系是什么？
后代元素, 只要是 当前元素内的标签都是它的 后代元素
元素根据特点分为 两大类： 内联（行）元素 块元素
内联(行)元素: span a input strong em button img
u i s b
默认情况下，不能独立占父元素一行空间的元素
块元素： p div ul ol dl hn form table hr
默认情况下，能够独立占父元素一行空间的元素
-->
<hr />
<p>你就站在这不要动，我去给你买橘子</p>
<nav></nav>
<div></div>
<aside></aside>
<section></section>
</body>
1.3 a标签
<body>
<!-- 锚点,可以使用 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>
<!--
target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_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>
</body>
1.4 音/视频标签
<body>
<button onclick="play()" id="btn">播放</button>
<!--
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>
<!--
video 视频控件
controls 控制按钮
poster 视频封面
（其他 audio 标签属性也生效）
-->
<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
不支持 video 标签
</video>
1.4.1 js脚本
<!-- 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>
css 复习
1.1 定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表语言， 用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。 CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:
HTML标签决定页面上元素的基本结构
CSS 用于设置HTML元素的样式
JavaScript 用于控制页面上的行为
1.2 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
ector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。
ector {property: value;}
每个属性有一个值。属性和值被冒号 分开。
{color:red; font-size:14px;}
h1 是选择器，color 和 font-size 是属性
提示：使用花括号 {} 来包围声明
1.3 用法
在 HTML 文档中使用 CSS 有四种不同的用法，
1.3.1 内联样式
直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作 行内样式 )。
就是在 开始标签 中通过标签的 style 属性(attribute)来指定元素的样式。
- 必须注意，这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的）
1.3.2 内部样式
所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。
style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。 而在
之间书写的内容才属于 CSS 代码。
通常建议将 style 元素 添加到 head 元素内部:
1.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;}
1.3.4 @import
@import 用于从其他样式表导入样式规则
@import url;
url 表示要引入资源位置
import 'custom.css';
@import url("fineprint.css") print;
1.3.5 样式优先级
内联样式 > 内部样式 > 外部样式
- 可以在属性值的后面添加 !important 提升样式的优先级
1.4 选择器
选择器是用来决定要改变谁的样式
标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择 器。
1.4.1 标记(标签)选择器:
网页标签名与选择器同名 标记选择器 也称作 标签选择器 ，英文中写作 tag selector ，其基本用法为:
tagName {
propertyName : propertyValue ;
...
}
1.4.2 Class选择器:
网页哪个标签使用Class选择器,就在标签添加 class属性，值就是Class选择器名称
1.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加 class属性，值就是Class选择器名称
class 选择器 也称作 class 选择符，英文中称作 class selector ，其基本用法为
className { }
<div class="success">
在 div 元素的 class 属性中仅使用单个 className
</div>
<p class="first success">
在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
在 span 元素的 class 属性中指定三个 className
</span>
因此通过 .success 就可以选择以上代码中的 div 、p、span 元素
ccess {
color : red ;
}
1.4.3 属性选择器
属性选择器 也称作 属性选择符，英文中称作 attribute selector 。其基本用法为:
attributeName] {}
我们仅学习较为常用的三种: [attributeName] 、 [attributeName=value] 、 [attributeName~=value] 。
1.4.3.1 [attributeName]
[attributeName] 形式的属性选择器用于选择 拥有 attributeName 属性 的 HTML 元素。
-
[type] 可以选择两个 input 元素，因为它们都拥有了 type 属性
-
[type] 无法选择 form 元素，因为 form 元素不拥有 type 属性
使用 [attributeName] 形式的属性选择器选择元素时需注意:
仅关注元素是否拥有指定 attributeName 对应的属性 与属性的属性值无关 ( 即不考虑该属性的属性值 )
1.4.3.2 [attributeName=value]
[attributeName=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的 HTML 元素。
1.4.3.3 [attributeName~=value]
[attributeName~=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的 HTML 元素。
心得体会
今天是对HTML内容的复习，感觉一切顺利，希望再接再厉！
近期评论