Web前端学习03
程序员文章站
2022-05-10 22:59:33
...
一、图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面引入一个外部图片
使用img标签引入外部图片，img是一个自结束图片
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src属性指定是外部图片的路径（路径规则和超链接一样）
alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性图片不会被搜索引擎所收录
width图片的宽度（单位是像素）
height图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：一般情况下在pc端，不建议修改图片大小
但是在移动端，经常需要对图片进行缩放
图片的格式：
jpeg（jpg）
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（转为网页而生）
webp
-这是谷歌推出的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有特点，而且文件还特别小
缺点：兼容性不好
base64
-将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用
效果一样，用小的，效果不一样，用效果好的
-->
<img src="./img/tu.jpg" alt="图片">
<img width="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599643665393&di=13b1bdfe86a6b6cfffa329a8d35a1126&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg"
</body>
</html>
二、内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
内联框架，用于向当前页面引入一个其他页面
src 指定要引入的网页路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>
三、音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1.audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
-如果设置了autoplay则音乐再打开页面时会自动播放
-但目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环
-->
<!--
<audio src="./resouces/光点.mp3" controls autoplay></audio>
-->
<!--
2.除了通过src来制定文件的路径以外，还可以通过source来指定文件
这里三条解决一些老的浏览器兼容问题
embed在ie8中也可以使用
-->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频 -->
<source src="./resouces/光点.mp3">
<source src="./resouces/光点.ogg">
<embed src="./resouces/光点.mp3" type="audio/mp3" width="300" height="300">
</audio>
<!--
使用video标签来向网页中引入一个视频
-使用方式和audio基本上是一致的
-->
<video controls>
<source src="./resouces/flower.webm">
<source src="./resouces/flower.mp4">
<embed src="./resouces/光点.mp4" type="video/mp4" width="300" height="300">
</video>
</body>
</html>
四、css简介，语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
2.第二种方式（内部样式表）：
-将样式编写到head中的style标签里
然后通过css选择器来选中并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
-内部样式表更加方便对样式进行复用
问题：只能对一个网页起作用，不能跨页复用
-->
<!--
<style>
p{
color:green;
font-size:50px;
}
</style>
-->
<!--
3.第三种方式（外部样式表）
-可以将css样式编写到一个外部css文件中
然后通过link标签来引入外部的css文件
-外部样式表需要通过link标签引入
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
-将样式编写到外部的css文件中，可以使用浏览器的缓存机制
从而加快网页的加载速度，提高用户体验
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页分成三个部分
结构（HTML）
表现（CSS）
行为（Javascript）
CSS
-层叠样式表
-网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式
而最终我们能看到只是网页的最上边一层
总之一句话 css用来设置网页中的元素的样式
-->
<!--
使用css修改元素的样式
第一种方式（内联样式，行内样式）：
-在标签内部通过style属性来设置元素的样式
问题：
-使用内联样式，样式只能对一个标签生效
如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意：
-开发时绝对不要使用内联样式
-->
<!--
<p style="color:red; font-size:60px;">少小离家老大回</p>
-->
<p>少小离家老大回</p>
</body>
</html>
五、常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
css中的注释，注释中内容会被浏览器自动忽略
css基本语法：
选择器 声明器
选择器，通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中的所有p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个个声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以：连接，以；结尾
*/
p{
color:red;
font-size:40px;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<p>今天天气真不错</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/*
1. 将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
*/
/* p{
color:red;
}
h1{
color:royalblue;
} */
/*
2. 将乡音无改鬓毛衰设置为黄色（字体）
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
*/
/*
#yellow{
color:yellow;
}
*/
/*
3.将少小..和儿童..
类选择器
作用：根据元素的class属性值选中一组元素
语法：class属性值
*/
/*
.blue{
color:blue;
}
*/
/*
4.通配选择器
作用：选中页面中的所有元素
语法:*
*/
*{
color:red;
}
</style>
<body>
<h1>我是标题</h1>
<p class="blue">少小离家老大回</p>
<p id="yellow">乡音无改鬓毛衰</p>
<p class="blue">儿童相见不相识</p>
<!--
class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性 多个class之间用空格隔开
-->
</body>
</html>