硬件转行之路——自学Web前端开发（二）

2021.8.6
一个半硬半软工程师的学习之路
开始走上Web开发的自学道路，希望能坚持下去，借助这里作为学习笔记的地方，同时也分享学习路上遇到的各种各样的”坑“。
可以加群共同分享、探讨问题：826470121

在此感谢【尚硅谷】 的教学课程

HTML标签

语义化标签

布局标签（结构化语义标签）
header 表示网页的头部（上）
main   表示网页的主题部分（一个页面中只有一个main）（中）
footer 表示网页的底部（下）
nav    表示网页中的导航
aside  和主题相关的其他内容（侧边栏）
section 表示一个独立的区块，上边的标签都不能表示时用section
div     没有语义，用来表示一个区块，目前来讲还是主流布局元素
span    行内元素，没有任何语义，一般用于网页中选中文字

列表（list）

在htlm中，列表一共有三种
1、有序列表
2、无序列表
3、定义列表
无序列表，使用ul标签来创建无序列表
         使用Li来表示列表项
有序列表，使用ol标签创建有序列表
定义列表，使用dl标签来创建一个定义列表
         使用dt来表示定义的内容
         使用dd来对内容进行解释说明
列表之间可以互相嵌套
无序列表：
<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>
有序列表：
<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>
定义列表：
<dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
    <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

超链接

        超链接可以从一个页面跳转到其他页面，或者是当前页面的其他的位置
        或者是当前页面的其他的位置 
        使用a标签来定义超链接
        href属性
        href指定跳转的目标路径（写超链接必须要写一个href属性）
                    - 值可以是一个外部网站的地址
                    - 也可以写一个内部页面的地址
        Alt+shift+下方向键 向下复制
        Alt+shift+上方向键 向上复制
        超链接是行内元素，在a标签中可以嵌套除a以外的任何元素
        <a href="https://www.baidu.com">百度</a>
        target属性 用来指定超链接打开的位置（看项目以及个人习惯）
        可选值：
                _self 默认值 在当前页面中打开超链接  可以有效避免打开很多多余的页面
                _blank 在一个新的页面中打开超链接
        <a href="07.超链接简介.html" target="_self">超链接简介</a>
        <a href="07.超链接简介.html" target="_blank ">超链接简介</a>    
        
        在开发中可以将#作为超链接的路径的占位符使用
        <a href="#">这是一个超链接</a>

        可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生
        <a href="javascript:;">这是一个超链接</a>  


        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而是转到当前页面的顶部的位置
        可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
        id属性（唯一不重复的）
            -每一个标签都可以添加一个id属性
            -id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
            -不能数字开头 只能字母开头      
        <a id="bottom" href="#top">回到顶部</a>      
        <a id="top" href="#">去底部</a> or<a id="top" href="#bottom">去底部</a>               

图片标签

        图片标签用于向当前页面中引入一个外部图片
        使用img标签来引入外部图片，img标签是一个自结束标签
        img这种元素属于替换元素（基于块和行内元素之间,具有两种元素的特点）
        属性：
            src   属性指定的时外部图片的路径
            alt   图片的描述，这个描述默认情况下不会显示，有些浏览器图片无法加载时显示
                  搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎收录
            
            width 图片的宽度（单位是像素）
            height 图片的高度
                -宽度和高度中如果只修改了一个，则另一个会等比例缩放      
            title 

            注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
            但是在移动端，经常需要对图片进行缩放（大图缩小）
            <img src="./images/firefox2.png" alt="橘子" title="橘子">
            <img width="500" height="500" src="./images/firefox2.png" alt="橘子" title="橘子">
            图片的格式：
            jpeg（jpg）
                -支持的颜色比较丰富，不支持透明效果，不支持动图
                -一般用来显示照片
            gif
                -支持的颜色比较少，支持简单透明，支持动图
                -颜色单一的图片。动图
            png
                -支持的颜色丰富，支持复杂透明，不支持动图
                -颜色丰富，复杂透明图片（专为网页而生）
            webp
                -这种格式是谷歌新推出的专门用来标识网页中的图片的一种格式
                -它具备了其他图片格式的所有优点，而且文件还特别的小
                -缺点：兼容性不好
            base64
                -将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
                -一般都是一些要和网页一起加载的图片才会使用base64
            搜索Base64图片在线编码解码
            base64图片在线编码解码网站
            https://base64.us/
            效果一样，用小的
            效果不一样，用效果好的

内联标签

        内联框架，用于向当前页面中引入一个其他页面
            src 指定要引入的网页的路径
            frameborder 边框 0：无边框 1：有边框
            <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe> 

音视频

        audio 标签用来向页面中引入一个外部的音频文件的
            音频文件引入是，默认情况下不允许自己用户控制播放停止   
        属性：
            controls 是否允许用户控制播放 
            autoplay 音频文件是否自动播放
                -如果设置了autoplay则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐尽心那个播放
            loop 音频循环播放
        <audio src="./source/0003 钢铁侠.mp3"  controls loop></audio>
      
        除了通过src来指定外部文件的路径以外，还可以通过source来指定文件  为了兼容老版本的浏览器，通过下述标签
           <audio controls>
         对不起，您的浏览器不支持播放音频！请升级浏览器！
         <source src="./source/0003 钢铁侠.mp3" >
         <source src="./source/0003 钢铁侠.mp3">
         <!-- IE8建议使用 -->
         <embed src="./source/0003 钢铁侠.mp3" type="audio/mp3" width="300" height="100" >
     </audio>  

        使用video标签来向网页中引入一个视频
     <video src="./source/naitang.mp4" controls  loop></video>

CSS

Zeal下载更新CSS指南

    <!-- 
        网页分为三个部分：
            结构（HTML）
            表现（CSS）
            行为（JavaScript）
        CSS
            层叠样式表
            页面实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
              而最终我们只能看到网页的最上边一层
            总之一句话，CSS用来设置网页中的元素样式
     -->
     <!-- 
         使用CSS来修改元素的样式

         第一种方法（内联样式，也称行内样式）：
            在标签内通过添加style样式来设置元素的眼视光hi
            一个内联样式只能对一个标签生效
            并且当样式发生变化时，需要一个一个修改，非常不方便
        注意：开发时绝对不要使用内联样式
      -->
      <p style="color:red">少小离家老大回，乡音无改鬓毛衰</p>

    <!-- 
        第二种方式<内部样式表>
            将样式写道head中的style标签
            通过CSS选择器来选择元素，并为其设置各种样式
            同时为多个标签设置样式，并且修改时只需要修改移除，即可全部应用
            内部样式更加方便对样式进行复用
            内部样式表只能对一个网页起作用
            里面的样式不能跨页面进行赋予
     -->
     <head>
     <style>

        p{
            color:yellowgreen;
            font-size: 60px;    
        }         
     </style>
     </head>

     <!-- 
         第三种方式（外部样式表）最佳使用方式
            可以将CSS样式编写到一个外部的CSS文件中
            外部样式表需要通过link标签进行引入，意味着只要想使用样式的网页进行引用
            使样式可以在不同页面之间进行复用     
            将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制
            从而加快网页的加载速度，提高用户的体验       
      -->
      <link rel="stylesheet" href="./style.css">
      
          <style>
        /*
        
        CSS中的注释，注释中的内容会自动被浏览器所忽略
        
        CSS的基本语法
            选择器 声明块

            选择器：通过选择器可以选中页面中的指定元素
                    比如p的作用就是选中页面中所有的p元素
            声明块：通过成名快来指定腰围元素设置的样式
                    声明块由一个一个的声明组成
                    声明是一个名值对结构
                    一个样式名对应一个样式值，名和值之间以：连接，以；结尾
        */

        p{
            color: red;
            font-size: 40px;
        }

        h1{
            color: green;
        }

        </style>

元素选择器

作用：根据标签名选中指定的元素
语法：标签名
例子：p{} h1{} div{}

        p{
            color:red;
        }

        h1{
            color:green;
        }

ID选择器

作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

    <p id="red">儿童相见不相识</p>
    
	ID选择器
    #red{
            color:yellowgreen
        }

类选择器

类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值

        class是一个标签的属性，他和id类似，不同的是class可以重复使用
        可以通过class属性来作为元素分组
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>
		可以同时为一个元素指定多个class属性
	<p class="blue abc">落霞与孤鹜齐飞</p>
	
    .blue{
          color: blue;
          }
    .abc{
    	  font-size:40px;	
    	  }      

通配选择器

通配选择器
作用：选中网页中的所有元素
语法：*

        *{
            color:red;
        }

复合选择器

交集选择器

交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器如果有元素选择器，必须使用元素选择器开头

    <div class="red">我是div</div>
    
    <p class="red">我是p元素</p>

    div.red{
            font-size: 30px;
            }

选择器分组（并集选择器）

选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器4{}

        h1,span{
            color:green;
        }

    <h1>标题</h1>
    <span>哈哈</span>

关系选择器

    <!-- 
        父元素
            -直接包含子元素的元素称作父元素
        子元素
            -直接被父元素包含的元素是子元素
        祖先元素
            -直接或间接包含后代元素的元素叫做祖先元素
            -一个元素的父元素也是它的祖先元素
        后代元素
            -直接或间接被祖先元素包含的元素叫做后代元素
            -子元素也是后代元素
        兄弟元素
            -拥有相同父元素的元素是兄弟元素
     -->
    <div>
        我是一个div

        <p>
            我是div中的元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
    </div>

        为div的子元素span设置一个字体颜色为红色
            （为div直接包含的span设置一个字体颜色）

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素>子元素

         div>span{
            color: red;
        }

后代选择器

作用：选择指定元素内的指定后代元素
语法：祖先 后代

        div span{
            color:skyblue
        }

兄弟选择器

选择下一个兄弟
语法：前一个+下一个
选择下面左右兄弟
语法：兄~弟

        p + span{
            color: red;
        }
        p ~ span{
            color: red;
        }