聂伟柱_20210111聂伟柱
一 知识点
1 超链接
target属性：
<a href = "https://www.baidu.com" target = "_blank">新页面</a>
<a href = "https://www.baidu.com" target = "_parent">父网页</a>
<a href = "https://www.baidu.com" target = "_top">最外层网页</a>
<a href = "https://www.baidu.com" target = "_self">本网页</a>
2 音/视频标签
2.1 audio 音频标签
controls 控制按钮
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
muted 静音
preload 加载
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放
2.2 video 视频控件
controls 控制按钮
poster 视频封面
(其他 audio 标签属性也生效)
3 图片标签
使用 src 属性 设置其图片源地址
图片格式支持： jpg/jpeg png gif bmp
jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快png 支持背景透明
gif 动图
bmp 位图 几乎不进行压缩
title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
alt 如果图片不能正常显示时，显示其值
4 css
4.1 定义
层叠样式表表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表语言， 用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。 CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:
-
HTML标签决定页面上元素的基本结构
-
CSS 用于设置HTML元素的样式
-
JavaScript 用于控制页面上的行为
4.2 语法
css规则由两个主要的部分构成：选择器，以及一条或多条申明。
ector {declaration1; declartion2; ... declartionN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号 分开。
ector {property:value;}例如：
color:red; font-size:14px;h1是选择器，color和font-size是属性，red和14px是值
作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素
4.3 用法
在 HTML 文档中使用 CSS 有四种不同的用法
4.3.1 内联样式
直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作行内样式 )。
比如：
<div style = "border:1px solid blue; width:50%; height:100px;">
</div>
即在开始标签中通过标签的style属性(attribute)来指定元素的样式。
注意：这里的style属性(attribute)是属于当前元素的(即当前标签的)。
4.3.2 内部样式
所谓内部样式，就是在HTML文档中，通过style元素来嵌入CSS样式。
<style type = "text/css">
</style>
这里需要特别注意， style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。
而在 <style>和</style>之间书写的内容才属于 CSS 代码。
通常建议将 style 元素 添加到 head 元素内部：
<head>
...
<style type = "text/css">
</style>
</head>
也可以根据实际情况来确定 style 元素的位置。
内部样式使用范围是当前页面(html文件)
4.3.3 外部样式表
单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用 外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链 接到样式表。<link>标签在（文档的）头部：
<head>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩 展名进行保存。下面是一个样式表文件的例子：
{color:sienna;}
{margin-left:20px;}
{backgroud-color:#ccc;}
4.3.4 @import
@import用于从其他样式表导入样式规则
import url:
url表示要引入资源的位置
import 'custom.css';
import url("fineprint.css") print;
4.3.5 样式优先级
内联样式 > 内部样式 > 外部样式
- 可以在属性值的后面添加 !important 提升样式的优先级
4.4 选择器
选择器是用来决定要改变谁的样式，选择器可以分为四类十七种，我们将其简化。我们接下来要介绍几 种，标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择 器。
4.4.1 标记(标签)选择器: 网页标签名与选择器同名
标记选择器也称作标签选择器 ，英文中写作tag selector
其作用是选择页面上所有匹配于该 tagName 的元素
4.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加 class属性，值就是Class选择器名称
class 选择器 也称作 class 选择符，英文中称作 class selector
其作用是选择页面上元素 class 属性（attribute）中 包含 指定 className 的元素。
4.4.3 属性选择器
属性选择器 也称作 属性选择符，英文中称作 attribute selector
其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
| 选择器 | 作用(选择哪些元素) |
|---|---|
| [attributeNome] | 用于选取带有指定属性的元素。 |
| [attributeNome = value] | 用于选取带有制定属性和值得元素。 |
| [attributeNome -= value] | 用于选取属性值中包含指定词汇的元素。 |
| [attributeNome \ | = value] |
| [attributeNome = value] | 匹配属性值以指定值开头的每个元素。 |
| [attributeNome $= value] | 匹配属性值以指定值结尾的每个元素。 |
| [attributeNome *= value] | 匹配属性值包含指定值的每个元素。 |
二 学习心得
更加深入的了解到学校所没有接触的知识点，但同样的是要锻炼自己的实操能力，这样才能真正了解运用所学的知识。
评论