随笔分类 - 7-web前端
说明：本系列笔记为个人学习记录，学习课程为尚学堂系列课程。https://www.bilibili.com/video/BV1oz421q7BB?spm_id_from=333.788.videopod.episodes&vd_source=a8188b9378385ae3de36009c7a1ed1a5&p=58，
摘要：一、字符串 1.定义 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。 单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。 字符串默认只能一
阅读全文
摘要：一、数据类型 JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型，当前课程暂不涉及)。 1.1 数据类型分类 1）原始类型（基础类型） 2）合成类型（复合类型）：对象:因为
阅读全文
摘要：一、引入JS文件的方式 1.1 嵌入到HTML文件中 放在body或者head中，用<script></script>包起来。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
阅读全文
摘要：一、JS语句 JavaScript程序的单位是行(line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。 语句以分号结尾，一个分号就表示一个语句结束。 <body> <script> var name = "张三" </script> </body> html中，JS是写在<script
阅读全文
摘要：前端3件套：HTML CSS JS 一、JS简介 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。 JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多。 1.为什么学
阅读全文
摘要：一、字体图标 我们会经常用到一些图标，但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。 1.常用的字体图标库 阿里字体图标库：https://www.iconfont.c
阅读全文
摘要：一、雪碧图 CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。 1.1优点 减少图片的字节 减少网页的http请求，从而大大的提高页面的性能 1.2原理 通过background-image引入背景图片 通过b
阅读全文
摘要：主要内容： 圆角 阴影 动画 一、圆角（border-radius） <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen
阅读全文
摘要：一、定义 position属性指定了元素的定位类型。 其中，绝对定位和固定定位会脱离文档流. 设置定位之后:可以使用四个方向值进行调整位置:Ieft、top、right、bottom. 二、相对定位 <head> <meta charset="UTF-8"> <meta name="viewport
阅读全文
摘要：1.浮动的定义 通过float属性定义元素在哪个方向浮动，任何元素都可以浮动。 需要的时候才用。 只有两个方向： left 元素向左浮动 right 元素向右浮动 2.浮动的原理 浮动以后使元素脱离了文档流。 只有左右浮动，没有上下浮动。 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。
阅读全文
摘要：一、定义 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、CSS3弹性盒内容 弹性盒子由弹性容器(
阅读全文
摘要：一、概念 所有HTML元素可以看作盒子，在CSS中，"box model”这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素， 它包括:外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。 1.margin marg
阅读全文
摘要：一、关系选择器分类 后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器 1.1 后代选择器（E F{ }） ol标签下的所有li标签 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要：1. 表格边框（border属性） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：1. text-align 指定元素文本的水平对齐方式。 默认left; center right 2. text-decoration 添加到文本的修饰，下划线、删除线等。 text-decoration: underline; 定义下划线。 text-decoration: line-throu
阅读全文
摘要：一、CSS常见的背景属性 background-color: aqua; 设置背景颜色 background-image: none; 设置背景图片 background-position: 0%; 设置背景图片位置 background-repeat: no-repeat; 设置背景图片如何重复填
阅读全文
摘要：一、color 四种方式： color: aquamarine; color: #ff0000; color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); #最后一个代表透明度 二、font-size font-size: 45px; 注：px可写可不写
阅读全文
摘要：一、全局选择器(*) 可以与任何元素匹配，优先级最低，一般做样式的初始化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
阅读全文
摘要：一、CSS 1.1概念 CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表。 CSS文件后缀名为 .css。 CSS用于HTML文档中元素样式的定义。 1.2 作用 使用css的目的就是让网页具有美观一致的页面。 1.3 语法 CSS 规则由两个主要的部分构
阅读全文
摘要：一、HTML5和HTML HTML5是 HTML 最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。 在 HTML5出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清浙，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HT
阅读全文
