HTML第二天+CSS
作者：互联网
图片
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!-- img标签
引入外部图片路径
路劲规则和超链接一样
img可以算是一个行内元素，是替换元素
既有块元素也有行内元素的特点
alt图片的描述，默认情况不会显示
如果显示不出来，有的浏览器会显示描述，不写alt属性则不会背
搜索引擎所查到
width 图片宽度单位是像素
height
宽高只修改一个，则另一个会等比例缩放
一般在pc端不建议修改图片的大小，需要多大裁剪多大
移动端经常缩放（大图缩小）
-->
<img src="./p1.jpg" alt="冰墩墩">
<!--
图片的格式
jpg
支持的颜色丰富，不支持透明效果，不支持动图
一般用来显示照片
gif
颜色单一，动图
png
颜色丰富，复杂透明图片都支持（专为网页而生）
webp
具备其他格式所有优点，也支持动图
致命缺点，兼容性不好
base64
将图片使用base64进行编码，将图片转换成字符
一般用于和网页一起加载图片时使用
效果一样，用小的
不一样用效果好的
-->
</body>
</html>有图片转成base64的工具，自行百度
内联框架
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
内联框架，用于相当页面中引入一个其他页面
frameborder内联框架的边框，一般设置为0
-->
<iframe src="https://www.baidu.com" width="500" height="500" frameborder="0"></iframe>
</body>
</html>
音视频
音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
音频audio向页面中引入外部音频
音视频文件默认不允许用户控制
需要加controls 加上允许用户控制
autoplay 自动播放
但是大部分浏览器都不会自动对音乐进行播放
loop循环播放
-->
<audio src="./王贰浪 - 谁.mp3" controls></audio>
<!--
不支持的浏览器会有提示
使用以下方法如果第一种不支持就会往下选择支持的
-->
<audio controls>
对不起，您的浏览器不支持播放，请升级浏览器
<source src="./王贰浪 - 谁.mp3">
<embed src="./王贰浪 - 谁.mp3" type="">
</audio>
<!--
老版本浏览器支持音乐播放
但是会自动播放
type
-->
<!--
引用视频文件
使用方式和audio基本一样
-->
<video src=""></video>
<!--
如果不支持webm格式往下有mp4
-->
<video controls>
<source src="./王贰浪 - 谁.webm">
<source src="./王贰浪 - 谁.mp4">
<!--
老版本以上都不支持就使用embed
-->
<embed src="./王贰浪 - 谁.mp4" type="video/mp4">
</video>
<iframe src="https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=2c2c87cdd2a22a49a045ae7d5f87cb3c&tvId=7222400481724500&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--
第二种方法(内部样式表)
将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一次
内部样式更加方便复用
问题
内部样式只能对一个网页起作用
它里边的样式不能跨页面进行复用
-->
<!--
第三种方式（外部样式表）
可以将CSS样式编写到一个外部CSS文件中
然后通过link标签来引入外部的CSS文件,使样式可以在不同网页页面之间进行复用
将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
-->
<link rel="stylesheet" href="./CSS/style.css">
<style>
p{
color: violet;
font-size: 45px;
}
</style>
</head>
<body>
<!--
网页分为三个结构
结构
表现
行为
CSS
层叠样式表
网页实际是一个多层结构，通过CSS可以为网页的每一层设置样式
而最终我们能看到的只是网页最边上的一层
-->
<!--
使用CSS来修改元素的样式
第一种方式（内联样式、行内样式）
在标签内部通过style属性来设置元素的样式
问题：
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素
中都复制一遍，并且样式发生变化时还要一个一个的修改，很不方便
所以开发时绝对不要使用内联样式
-->
<p style="color: aqua; font-size: 60px;">少小离家老大回</p>
<p style="color: rebeccapurple; font-size: 20px;">今天天气真不错</p>
<p>秋水共长天一次</p>
</body>
</html>
常用选择器
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--
如果要给单一p元素设置样式，以下则不太实用，考虑
使用id添加标识
-->
<style>
/* p{
color: aqua;
} */
/*
id选择器
语法： #id属性值（）
例子： #red()
id不能重复，容易出现问题
*/
/* #red{
color: brown;
} */
/*
类选择器
根据元素的class属性值选中一组元素
语法.class属性值
*/
/* .blue{
color: blue;
}
.yellow{
color: yellow;
} */
/*
通配选择器
选择页面中所有元素
语法 *
*/
*{
color:red;
}
</style>
</head>
<body>
<p>学习使我快乐</p>
<p>学习使我快乐</p>
<p id="red">学习使我快乐</p>
<p>学习使我快乐</p>
<p>学习使我快乐</p>
<!--
class是一个标签的属性，和id类似，可以重复使用
可以通过class属性对元素进行分组
是用空格隔开可以给class取多个值
-->
<p class="blue yellow">学习使我快乐</p>
<p class="blue">学习使我快乐</p>
</body>
</html>
复合选择器
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.red{
color: red;
}
/* 需求，将class为red的div设置为30px */
/*
交集选择器
选中同时符合多个条件的元素
语法：选择器1选择器2选择器n{}
注意
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
font-size: 40px;
}
/* 同时选中h1和span
并集选择器
选择多个选择器对应的元素
*/
h1,span{
color: blue;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red a b c">我是p元素</p>
<h1>hahaha</h1>
<span>eeeee</span>
</body>
</html>标签：color,快乐,元素,第二天,HTML,red,选择器,CSS 来源： https://www.cnblogs.com/evelei/p/16120602.html