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

╰+哭是因爲堅強的太久メ 2022-11-20 11:52 222阅读 0赞

# 学习网站 #

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

# HTML5 #

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

具体操作如下截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 1]

# CSS3 #

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

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

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

*  css样式的导入方式

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 3]

*  基础选择器

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

*  层次选择器

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 4]

*  结构伪类选择器（:）

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 5]

*  属性选择器

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 6]

*  背景

> 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:背景颜色|背景图象|背景重复|背景附件|背景位置\}

*  定位

[https_www.runoob.com_html_html-tutorial.html]: https://www.runoob.com/html/html-tutorial.html
[https_jquery.cuishifeng.cn]: https://jquery.cuishifeng.cn/
[https_www.mycodes.net]: https://www.mycodes.net/
[https_ice.work_docs_guide_about]: https://ice.work/docs/guide/about
[https_www.iconfont.cn]: https://www.iconfont.cn
[https_www.grabient.com]: https://www.grabient.com/
[https_1x.ant.design_docs_spec_introduce]: https://1x.ant.design/docs/spec/introduce
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[QQ]: https://shang.qq.com/v3/widget.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/260354ee0dfd44a4a641d6ed2d3d673d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201103092333401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201103094804204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201103092857176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201103093635246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201103094002374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201103094501364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYTkxZVw==,size_16,color_FFFFFF,t_70#pic_center