前端学习杂记（持续更新）

学习网站

菜鸟：https://www.runoob.com/html/html-tutorial.html
jQuery：https://jquery.cuishifeng.cn/
源码之家：https://www.mycodes.net/
飞冰：https://ice.work/docs/guide/about
图标：https://www.iconfont.cn
渐变色：https://www.grabient.com/
Ant-design：https://1x.ant.design/docs/spec/introduce
Element-UI：https://element.eleme.cn/#/zh-CN/component/installation

HTML5

• 实现在线咨询很简单，只需要一个<a>标签。需要到QQ推广 生成相应代码。

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=869570209&site=qq&menu=yes">
   <img border="0" src="http://wpa.qq.com/pa?p=2:869570209:53" alt="你好加我" title="你好加我"/>
</a>

具体操作如下截图：

• 视频、音频元素也非常简单，只需要使用<video>和<audio>标签即可。

    <h1>视频元素</h1>
    <!--视频元素
        src: 视频路径
        controls: 显示控制栏
        loop: 控制视频循环播放
        autoplay: 自动播放
        muted:设置静音播放
        width: 视频播放器的宽度
        height: 视频播放器的高度
        poster: 视频缩略图
        preload:视频在页面加载时进行加载，并预备播放。
    -->
    <video src="../resources/videos/test.mp4" poster="../resources/images/1.jpg" controls height="300"></video>
    <h1>音频元素</h1>
    <!--音频元素
        src: 要播放的音频的 URL
        controls: 显示控制栏
        loop: 控制视频循环播放
        autoplay: 自动播放
        preload: 页面加载时进行加载，并预备播放
        muted:设置静音播放
    -->
    <audio src="../resources/audios/test.m4a" controls autoplay></audio>

• 内联框架
  在页面中需要嵌入别人的页面，只需要加入标签<iframe>即可。

<iframe name="hello" src="https://www.baidu.com" frameborder="0" height="400" width="1200"></iframe>

CSS3

• 盒子模型
  CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
  盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
  下面的图片说明了盒子模型(Box Model)：
  

CSS box-model不同部分的说明：

Margin(外边距) : 清除边框外的区域，外边距是透明的。
Border(边框) : 围绕在内边距和内容外的边框。
Padding(内边距) : 清除内容周围的区域，内边距是透明的。
Content(内容) : 盒子的内容，显示文本和图像。

• css样式的导入方式

1. 行内样式
2. 内部样式
3. 外部样式 (链接式、导入式（不常用）)
4. 多种方式同用时，优先级采用：就近原则

• 基础选择器

1. 标签选择器：标签名{} ，会选择页面上所有的标签元素
2. 类选择器： .class的名称{}，可以多个标签，同一个class；归类、复用
3. id选择器： #id名称{} ， id全局唯一

• 层次选择器

1. 后代选择器: 某个元素的后面所有层级元素
2. 子选择器: 某个元素的后面第一层级子元素
3. 相邻兄弟选择器: 只有一个，相邻（向下）
4. 通用选择器: 当前选中元素向下的所有兄弟元素

• 结构伪类选择器（:）

1. 选中元素的第一个子元素
2. 选中元素的最后一个子元素
3. 选中元素的父级元素的第几个子元素

• 属性选择器

语法：标签名[]{} ，[ ]内写法如下：
属性名 = 属性值（正则）
= 全匹配
*= 包含
^= 以开头
$= 以结尾

• 背景

1. 背景颜色： {background-color:数值}
2. 背景图片： {background-image: url(url)|none}
3. 背景重复： {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4. 背景固定： {background-attachment:fixed|scroll}
5. 背景定位： {background-position:数值|top|bottom|left|right|center}
6. 背景简写样式： {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

• 定位