金小刚_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"]
评论留言