标签：color 快乐 元素 第二天 HTML red 选择器 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。