金小刚_2021111金小刚

一:html head元素

<head> 定义了文档信息   
<title>定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的联系
<mate>定义了html文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了html文档的样式文件

html
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
html
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
html
定义网页作者:
<meta name="author" content="Runoob">
html
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
html
<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

二:HTML 链接语法

html
<a href="https://www.baidu.com/">访问百度</a>

HTML 链接 - target 属性

html
<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问百度教程!</a>

HTML 音频/视频 DOM

方法 描述
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。

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

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

监听事件
window.addEventListener("keydown", listen, false);

标签定义 HTML 页面中的图像。

标签有两个必需的属性:src 和 alt。

注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。

提示:通过在 标签中嵌套 标签,给图像添加到另一个文档的链接。

三:样式

内联样式

直接通过元素的 style 属性(attribute)来指定的样式被称作内联样式 (也有人称作 行内样式 )。说的更直接些,就是在 开始标签 中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意,这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的)。

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

这里需要特别注意, style 是一个 HTML 标签,属于HTML范畴,不属于CSS代码。
而在 之间书写的内容才属于 CSS 代码。

外部样式表

单独的 CSS (后缀是 .css )文件,当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用
外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链
接到样式表。 标签在(文档的)头部

@import

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

import 'custom.css';
@import url("fineprint.css") print;

样式优先级

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

可以在属性值的后面添加 !important 提升样式的优先级

Class选择器:网页哪个标签使用Class选择器,就在标签添加
class属性,值就是Class选择器名称

属性选择器

属性选择器 也称作 属性选择符,英文中称作 attribute selector 。

四:CSS 属性选择器 ~=, |=, =, $=, *= 的区别

先上总结:

"value 是完整单词"类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, =, $=

1.attribute 属性中包含 value:

[attribute~=value] 属性中包含独立的单词为 value,例如:

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[

attribute=value] 属性的前几个字母是 value 就可以,例如:

[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以,例如:
a[src$=".pdf"]

标签

评论


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