李莎_20210111-李莎
知识点总结
### 标准的网页结构
@TOC
1.1 文档声明，用于声明网页的类型
<!DOCTYPE html>
1.2 网页根节点
<html></html>
head标签 :网页信息,比如：标题、图标、编码
网页编码
- utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1
- 属性 attribute，标签属性用来描述标签特性。格式： 属性名="属性值"
- 多个属性间用 空格 隔开
html
<meta charset="utf-8" />
##### 网页标题
html
<title>标题</title>
##### 网页图标
在线制作网址：https://tool.lu/favicon/
html
<link rel="shortcut icon" href="img/favicon.ico" />
##### 引入外部样式
html
<link href="#" type="text/css"/>
##### 内部样式
```html##### 引入外部js ```html <script src="#"></script>内部 js
<script type="text/javascript"> </script>1.3 SEO
网页作者
<meta name="author" content="云创动力"/>关键字
<meta name="keywords" content="" />网页描述
<meta name="description" content="" />1.4 网页中显示的内容
- 网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
- 成对出现的标签
<span></span> - 有开始标记(标签)
<span> - 有结束标记(标签)
</span> - 自结束/自封闭标签
<meta /> <hr />
注意： 网页的标签不区分大小写，但是通常建议使用小写
- 成对出现的标签
-
元素： 标签以及标签中的内容
- 例如：
<p>这是一个段落</p> - 元素间的关系： dom 树
html
<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
- 默认情况下，能够独立占父元素一行空间的元素
html
<hr />
<p>你就站在这不要动，我去给你买橘子</p>
<nav></nav>
<div></div>
<aside></aside>
<section></section>
#### 1.5 跨页面锚点
html
<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>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.6 iframe
<iframe src="03.html"></iframe>1.7 音/视频
audio 音频标签
-
controls 控制按钮
-
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
-
muted 静音
-
preload 加载
-
auto 自动 默认
-
none 不预加载
-
metadata 预加载
-
loop 循环播放
<button onclick="play()" id="btn">播放</button> <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>滚动字幕
<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.8 图片
-
图片, 使用 src 属性 设置其图片源地址
- 图片格式支持： jpg/jpeg png gif bmp
- jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
- png 支持背景透明
- gif 动图
- bmp 位图 几乎不进行压缩
- title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
- alt 如果图片不能正常显示时，显示其值
##### 本地图片
html
<img src="img/kedaya.jpeg" title="这是只可达鸭"/>
##### 在线图片
html
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />
##### 加密后的图片， Base64 编码过后的图片
html
<img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>
#### 1.9 class 选择器
内部样式
html
<style type="text/css">
/* class 选择器， 区分大小写 */
.success{
color: red; /* 文字颜色 */
}
</style>
html
<div class="success">
在 div 元素的 class 属性中仅使用单个 className
</div>
<p class="first success">
在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
在 span 元素的 class 属性中指定三个 className
</span>
#### 1.10 属性选择器
```html```html <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学习
1.1 定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表语言，用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:- HTML标签决定页面上元素的基本结构
- CSS 用于设置HTML元素的样式
- JavaScript 用于控制页面上的行为
#### 1.2 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
css
s1elector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号
分开。
css
s1elector {property: value;}
例如：
css
h11 {color:red; font-size:14px;}
h1 是选择器，color 和 font-size 是属性，red 和 14px 是值
作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素
提示：使用花括号 {} 来包围声明
1.3 用法
在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。
1.3.1 内联样式
直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作 行内样式 )。
比如:<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > </div>说的更直接些，就是在 开始标签 中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意，这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的)。1.3.2 内部样式
所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。
<style type="text/css"> </style>这里需要特别注意， style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。
而在之间书写的内容才属于 CSS 代码。
通常建议将 style 元素 添加到 head 元素内部:
<head> ... <style type="text/css"> </style> </head>也可以根据实际情况来确定 style 元素的位置。
内部样式使用范围是当前页面(html文件)1.3.3 外部样式表
单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用
<link>标签链接到样式表。<link>标签在（文档的）头部：<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：hr {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 ; ... }其作用是选择页面上所有匹配于该 tagName 的元素
<html> <head> <style type="text/css"> html {color:black;} h1 {color:blue;} h2 {color:silver;} </style> </head> <body> <h1>这是 heading 1</h1> <h2>这是 heading 2</h2> <p>这是一段普通的段落。</p> </body> <html>该选择器不区分大小写
1.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加class属性，值就是Class选择器名称
class 选择器 也称作 class 选择符，英文中称作 class selector ，其基本用法为:
className { }其作用是选择页面上元素 class 属性（attribute）中 包含 指定 className 的元素。
因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个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 元素:
.success { color : red ; }另外注意:
将 这里的 class selector 翻译成 类选择器 ，将 className 翻译成 类名 是及其不合适的。1.4.3 属性选择器
属性选择器 也称作 属性选择符，英文中称作 attribute selector 。其基本用法为:
[attributeName] { }其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
我们仅学习较为常用的三种:[attributeName]、[attributeName=value]、[attributeName~=value]。1.4.3.1 [attributeName]
[attributeName] 形式的属性选择器用于选择 拥有 attributeName 属性 的 HTML 元素。
比如对于以下HTML元素来说:<form action="http://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="百度一下"> </form>- [type] 可以选择两个 input 元素，因为它们都拥有了 type 属性
- [type] 无法选择 form 元素，因为 form 元素不拥有 type 属性
- 使用 [attributeName] 形式的属性选择器选择元素时需注意:
- 仅关注元素是否拥有指定 attributeName 对应的属性
- 与属性的属性值无关 ( 即不考虑该属性的属性值 )
###### 1.4.3.2 [attributeName=value]
[attributeName=value]形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的HTML 元素。
比如对于以下 HTML 元素来说:
<div class="wrapper first odd"></div> <div class="wrapper second even"></div> <div class="wrapper"></div>使用
[class=wrapper]可以选择以上三个 div 元素中的最后一个元素，而不能选择前两个元素。
因为只有最后一个div元素的class属性取值等于wrapper，另外两个div元素的class属性中只能说是包含wrapper。
所以这里要注意:
采用[attributeName=value]形式的属性选择器选择HTML元素时，元素的属性值必须是等于指定值。1.4.3.3 [attributeName~=value]
[attributeName~=value]形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的HTML 元素。
比如对于以下 HTML 元素来说:<div class="wrapper first odd"></div> <div class="wrapper second even"></div> <div class="wrapper"></div>使用
[class~=wrapper]选择以上三个div，此时的[class~=wrapper]作用与.wrapper是相同的。心得体会
今天是我们到西安云创动力学习的第一天，首先是复习Html以及CSS的知识，之前已经学习过前端的知识，这次再加深印象。老师从html的各种标签开始让我们复习，学习各种元素：内联(行)元素以及块元素；然后又复习了CSS的各种样式，收获颇丰。
点赞
- 网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
评论