Web前端学习03

最新推荐文章于 2023-03-30 21:09:09 发布

qq_43101834

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量182

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_43101834/article/details/108503447

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、图片标签

<!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>