2023年6月20日发(作者：)

HTML,CSS,JS学习笔记⽹页构成：HTML，CSS, JS,HTML是⼀种超⽂本标记语⾔。HTML基础HTML标签：成对出现HTML⽂档（也叫⽹页）：HTML标签+纯⽂本基本结构HTML 标题：HTML 标题（Heading）是通过

-

等标签进⾏定义的。HTML 段落：HTML 段落是通过

标签进⾏定义的。HTML 链接：HTML 链接是通过 标签进⾏定义的。（在 href 属性中指定链接的地址。）HTML 图像：HTML 图像是通过 标签进⾏定义的。（图像的名称和尺⼨是以属性的形式提供的。）HTML元素HTML ⽂档是由 HTML 元素定义的HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML属性HTML 标签可以拥有属性，属性总是在 HTML 元素的开始标签中规定。属性值应该始终被包括在引号内。双引号是最常⽤的，不过使⽤单引号也没有问题。在某些个别的情况下，⽐如属性值本⾝就含有双引号，那么您必须使⽤单引号HTML标题浏览器会⾃动地在标题的前后添加空⾏。默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏，⽐如段落、标题元素前后。(

是块级元素)

---

标签在 HTML 页⾯中创建⽔平线。HTML注释：例： HTML 折⾏：如果您希望在不产⽣⼀个新段落的情况下进⾏换⾏（新⾏），请使⽤ 标签( 元素是⼀个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。)：

This is
a para
graph with line breaks

HTML输出⽆法通过在 HTML 代码中添加额外的空格或换⾏来改变输出的效果。当显⽰页⾯时，浏览器会移除源代码中多余的空格和空⾏。所有连续的空格或空⾏都会被算作⼀个空格。需要注意的是，HTML 代码中的所有连续的空⾏（换⾏）也被显⽰为⼀个空格。HTML样式style属性style 属性的作⽤：提供了⼀种改变所有 HTML 元素的样式的通⽤⽅法。样式实例background-color 属性为元素定义了背景颜⾊，font-family、color 以及 font-size 属性分别定义元素中⽂本的字体系列、颜⾊和字体尺⼨，text-align 属性规定了元素中⽂本的⽔平对齐⽅式。pre标签很适合显⽰计算机代码，可以保留空格和换⾏。div span标签(重点)div span 是没有语义的 是我们⽹页布局主要的2个盒⼦ css+divdiv 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合⽹页。 跨度，跨距；范围语法格式：

这是头部

今⽇价格⽂本格式化标签(熟记)在⽹页中，有时需要为⽂字设置粗体、斜体或下划线效果，这时就需要⽤到HTML中的⽂本格式化标签，使⽂字以特殊的⽅式显⽰。b i s u 只有使⽤ 没有 强调的意思 strong em del ins 语义更强烈标签属性使⽤HTML制作⽹页时，如果想让HTML标签提供更多的信息，可以使⽤HTML标签的属性加以设置。其基本语法格式如下：<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 在上⾯的语法中，1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后⾯。2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。3.任何标签的属性都有默认值，省略该属性则取默认值。图像标签img（重点）要想在⽹页中显⽰图像就需要使⽤图像标签，其基本语法格式如下：标签常见属性详解1. src 属性作⽤：指定我们要加载的图⽚的路径和图⽚的名称以及图⽚格式2. width 属性作⽤：指定图⽚的宽度，单位 px、em、cm、mm3. height 属性作⽤：指定图⽚的⾼度，单位 px、em、cm、mm4. border 属性作⽤：指定图标的边框宽度，单位 px、em、cm、mm5. alt 属性作⽤：6. 当⽹页上的图⽚被加载完成后，⿏标移动到上⾯去，会显⽰这个图⽚指定的属性⽂字作⽤7. 如果图像没有下载或者加载失败，会⽤⽂字来代替图像显⽰作⽤8. 搜索引擎可以通过这个属性的⽂字来抓取图⽚链接标签（重点）在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：⽂本或图像href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。注意：2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href=""> ⾸页 3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：⽂本或图像href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。注意：2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href=""> ⾸页 3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。锚点有时我们在浏览⽹页时会发现，会有点击返回顶部的按键。这样的效果⽤锚点标签就能做到。锚点就是点击使⽤户跳到⽂档的某个部分。

如代码例⼦：跳转

代码代码

HTML表格HTML表格由 标签来定义。每个表格均有若⼲⾏（由 标签定义），每⾏被分割为若⼲单元格（由

标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等⽆序列表是⼀个项⽬的列表，此列项⽬使⽤粗体圆点（典型的⼩⿊圆圈）进⾏标记。⽆序列表使⽤ 标签。 列表项1 列表项2 列表项3 ...... 有序列表也是⼀列项⽬，列表项⽬使⽤数字进⾏标记。 有序列表始于 标签。每个列表项始于 标签。列表项使⽤数字来标记。 列表项1 列表项2 列表项3 ...... HTML表单 标签⽤于为⽤户输⼊创建 HTML 表单。表单元素: 根据不同的 type 属性，可以变化为多种形态。 定义下拉列表。 定义多⾏输⼊字段（⽂本域）。 定义可点击的按钮。CSS基础知识CSS选择器1、标签名选择器：如：p{}，即直接使⽤HTML标签作为选择器，在实际的应⽤中，我们习惯⽤它设置标签的⼀些默认属性或者和后代选择器⼀起使⽤。2、类选择器：选择class命名的元素 以.开头，如 .polaris();3、ID选择器：id命名的元素 以 # 开头， 如：#polaris();在同⼀个HTML⽂档中不能出现两个相同的ID名称，也就是说ID具有唯⼀性。4、后代选择器：如 .polaris span img{}，后代选择器实际上是使⽤多个选择器加上中间的空格来找到具体的要控制的标签。 5、群组选择器：.polaris ， span ， img{}，实际上是对CSS的⼀种简化写法，是把具有相同CSS样式的不同选择器放在⼀起，减少代码量。CSS样式在浏览器中被解析的先后顺序：(1) CSS不同引⼊⽅式的优先级：标签内嵌样式 > 头部书写样式 > 外部引⽤样式 > 浏览器默认样式。(2) CSS选择器的优先级：id > class > tagname.(3) 多个选择器混⽤时的优先级：例⼦.a .b c{}和.a c{},它们指向的⽬标都是c，但是前者的优先级⾼于后者⽂本字体设置:color:red; ⽂字颜⾊font-size:12px; ⽂字⼤⼩font-weight:“bold” ⽂字粗细(bold/normal)font-family:“宋体” ⽂字字体font-variant:small-caps⼩写字母以⼤写字母显⽰text-align:center; ⽂本对齐(right/left/center)line-height:10px; ⾏间距(可通过它实现⽂本的垂直居中)text-indent:20px; ⾸⾏缩进text-decoration:none;⽂本线(none/underline/overline/line-through)letter-spacing: 字间距盒模型完整的盒模型是由content（内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。border属性：语法：border-top | left | bottom | right ；padding属性：语法：padding-top | left | bottom | right: px | em |百分⽐；margin属性：语法：margin-Top | right | bottom | left : px或em ;⾏内元素是没有上下外边距的，只有左右外边距，所以尽量不要设置⾏内元素的内外上下边距，设计宽⾼也是⽆效的两个相邻的块级元素⼀个设置了margin-bottom、另⼀个设置margin-top的时候，会发⽣外边距塌陷。两个元素之间的margin值会合并，margin值最终取较⼤值。嵌套块元素垂直边距合并，当⽗级元素没有设置border、padding的情况下，⽗⼦元素的margin边距会合并，其取值为较⼤值float属性：语法： float：left | right | none；任何浮动元素⾃动被设置为⼀个“块级元素”，这表⽰它可以设置宽⾼；清理浮动：清理浮动⼀般有两种思路1.利⽤ clear属性，清除浮动clear属性的值有5个，如下所⽰:Left在左侧不允许浮动元素Right:在右侧不允许浮动元素Both:在左右侧均不允许浮动元素None默认值，允许浮动元素出现在两侧Inherit:规定应该从⽗元素继承clear属性的值，IE浏览器不⽀持，不推推荐使⽤。⼀般⽤于清除浮动时，使⽤both属性值的情况较多,即：Clear:both;2.使⽗容器形成BFCBFC是指块级格式化上下⽂，决定了元素如何对其内容进⾏定位、以及与其他元素的关系和相互作⽤。可以⽤来解决⼦元素浮动，⽗元素的⾼度没有了、两栏布局右栏不⾃适应、垂直⽅向上两元素边距有误等情况块级元素与⾏内元素： 常⽤的块级元素：blockquote、div、fieldset、form、h1-h6、hr、dl、ol、ul、p、pre　 常⽤的⾏内元素：a、b、span、cite、em、i、img、input、label、select、br、strong、textare 块级元素：垂直排列，会开始新的⼀⾏并且尽可能地撑满容器；⾼度、⾏⾼及上下边都可控制；其宽度在默认情况下与其⽗元素的宽度⼀致。可以设置width属性来改变其宽度。 ⾏内元素：⽔平排列，不会打乱段落布局，可以在⼀⾏内显⽰；⾼度及上下边距都不可控制；宽度就是其包含的⽂字或者图⽚的宽度，设置width属性不⽣效。定位： 默认值（positin：static）：在CSS中为元素定义 top、left、right、bottom、z-index 都不会⽣效 相对定位（positon：relative）：指相对于⽂档流中的其他已定义的元素位置进⾏定位，表现和默认值⼀样，只不过可以设置偏移量和z-index 来控制相对于其正常位置进⾏的偏移。但是其他的元素不会调整位置来弥补它偏离后剩下的空隙。 说明：所有元素的定位（position）都默认为 static，什么都不写就是相对定位，⽽使⽤ position:relative 在不设置 top/left/z-index等值的情况下和默认值表现是⼀样的。 绝对定位（position：absolute）：相对上⼀个不为 static 的⽗元素（即被positioned的元素）进⾏绝对定位。如果绝对定位的元素没有“positioned”祖先元素，absolute 将相对于整个 html ⽂档进⾏绝对定位，并且会随着页⾯滚动⽽移动。 绝对定位的元素有以下⼏个特点：块级元素的宽度在未定义时不再为100%，⽽是根据内容⾃动调整在不定义 z-index 的情况下，absolute 元素会覆盖在其他元素之上它会脱离正常的⽂档流，不再占据空间，类似于浮动后的效果 固定定位（position：fixed）：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。即不论⽹页如何滚动，该元素始终停留在屏幕的某个位置上。JS基础变量静态类型：⽤于存放指定类型的值。弱类型/动态类型：允许在任意时刻存放任意类型的值。JavaScript 标识符所有 JavaScript 变量必须以唯⼀的名称的标识。这些唯⼀的名称称为标识符。构造变量名称（唯⼀标识符）的通⽤规则是：名称可包含字母、数字、下划线和美元符号名称也可以 以字母，$ 和 _ 开头名称对⼤⼩写敏感（y 和 Y 是不同的变量）保留字⽆法⽤作变量名称声明（创建） JavaScript 变量在 JavaScript 中创建变量被称为“声明”变量。您可以通过 var 关键词来声明 JavaScript 变量，声明之后，变量是没有值的。（技术上，它的值是 undefined。）数据类型：基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。引⽤类型：object。⾥⾯包含的 function、Array、Date。ned 类型只有⼀个值。在使⽤var 声明变量但未对其加初始化时，这个变量就是undefined。 类型只有⼀个值。null是表⽰⼀个空对象指针。n 类型使⽤最多的⼀个类型，有两个字⾯值，分别是true、false。true不⼀定等于1,false不⼀定等于0。 类型数字类型，表⽰数据的整数和浮点数。某些语⾔中也称为“双精度值”。 类型字符串可以有单引号、双引号表⽰。字符串是不可变的，⼀旦创建，值就不能改变。要改变某个 变量保存的字符串，⾸先要销毁原来的字符串，然后于⽤另⼀个包含的字符串填充该变量。运算符在相等运算中，应注意以下⼏个问题：如果操作数是布尔值，则先转换为数值，其中 false 转为 0，true 转换为 1。如果⼀个操作数是字符串，另⼀个操作数是数字，则先尝试把字符串转换为数字。如果⼀个操作数是字符串，另⼀个操作数是对象，则先尝试把对象转换为字符串。如果⼀个操作数是数字，另⼀个操作数是对象，则先尝试把对象转换为数字。如果两个操作数都是对象，则⽐较引⽤地址。如果引⽤地址相同，则相等；否则不等。NaN与任何值都不相等，包括它⾃⼰。null 和 undefined 值相等，但是它们是不同类型的数据。在相等⽐较中，null 和 undefined 不允许被转换为其他类型的值。强制类型转换强制类型转换指将⼀个数据类型强制转换成另⼀种数据类型。类型转换主要指将其他的数据类型转换成String Number Boolean。（1）将其他数据类型转换成String类型⽅法⼀：调⽤被转换类型的toString()⽅法。该⽅法不会影响到原变量，它会将转换的结构返回。但是注意，Null和Undefined没有toString()⽅法，如果调⽤它们的⽅法，则会报错。⽅法⼆：调⽤String()函数。调⽤String()函数，并将被转换的数据作为参数传递给函数。使⽤String函数做类型强制转换时，对于Number和Boolean就是调⽤toString()⽅法，对于null和undefined，就不会调⽤toString()⽅法，它会将null直接转换成”null”，将undefined转换成”undefined”。（2）将其他的数据类型转换为Number类型转换⽅式⼀：使⽤Number()函数1）字符串如果是纯数字的字符串，则直接将其转换为数字，如果字符串中有⾮数字的内容，则转换为NaN。2）布尔类型布尔类型转换成数字：Ture转成1；False转成0。3）NullNull转成数字0。4）UndefinedUndefined转成数字NaN。对象：对象也是变量。但是对象包含很多值。对象属性（JavaScript 对象中的）名称:值对被称为属性。对象⽅法对象也可以有⽅法。⽅法是在对象上执⾏的动作。⽅法以函数定义被存储在属性中。函数实际上是对象， 每个函数都是Function类型的实例， ⽽Function也有属性和⽅法。因为函数是对象， 所以函数名就是指向函数对象的指针函数名作为指向函数对象的指针，可以有多个指向函数对象的指针函数参数1.参数的个数⾃由类数组实现 arguments2.函数重载函数通过参数的个数和类型不同来创建不同的函数签名，通过调⽤函数时传⼊的参数个数和参数类型来进⾏命名参数的验证但是 ， 在js中后声明的同名函数会对前⾯声明的函数进⾏⼀个覆盖3.默认函数值 es6在es6之前, 实现默认参数需要检测⼀个参数是否等于 undefined4.将函数当做参数函数声明和函数表达式的区别JavaScript引擎加载时对它们是区别对待的，JavaScript引擎在任何代码执⾏之前，会先读取函数声明，并在执⾏上下⽂中⽣成函数定义。⽽函数表达式必须等到代码执⾏到它那⼀⾏，才会在执⾏上下⽂中⽣成函数定义。 2023年6月20日发(作者：) HTML,CSS,JS学习笔记⽹页构成：HTML，CSS, JS,HTML是⼀种超⽂本标记语⾔。HTML基础HTML标签：成对出现HTML⽂档（也叫⽹页）：HTML标签+纯⽂本基本结构HTML 标题：HTML 标题（Heading）是通过 - 等标签进⾏定义的。HTML 段落：HTML 段落是通过 标签进⾏定义的。HTML 链接：HTML 链接是通过 标签进⾏定义的。（在 href 属性中指定链接的地址。）HTML 图像：HTML 图像是通过 标签进⾏定义的。（图像的名称和尺⼨是以属性的形式提供的。）HTML元素HTML ⽂档是由 HTML 元素定义的HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML属性HTML 标签可以拥有属性，属性总是在 HTML 元素的开始标签中规定。属性值应该始终被包括在引号内。双引号是最常⽤的，不过使⽤单引号也没有问题。在某些个别的情况下，⽐如属性值本⾝就含有双引号，那么您必须使⽤单引号HTML标题浏览器会⾃动地在标题的前后添加空⾏。默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏，⽐如段落、标题元素前后。( 是块级元素) 标签在 HTML 页⾯中创建⽔平线。HTML注释：例： HTML 折⾏：如果您希望在不产⽣⼀个新段落的情况下进⾏换⾏（新⾏），请使⽤ 标签( 元素是⼀个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。)： This is a para graph with line breaks HTML输出⽆法通过在 HTML 代码中添加额外的空格或换⾏来改变输出的效果。当显⽰页⾯时，浏览器会移除源代码中多余的空格和空⾏。所有连续的空格或空⾏都会被算作⼀个空格。需要注意的是，HTML 代码中的所有连续的空⾏（换⾏）也被显⽰为⼀个空格。HTML样式style属性style 属性的作⽤：提供了⼀种改变所有 HTML 元素的样式的通⽤⽅法。样式实例background-color 属性为元素定义了背景颜⾊，font-family、color 以及 font-size 属性分别定义元素中⽂本的字体系列、颜⾊和字体尺⼨，text-align 属性规定了元素中⽂本的⽔平对齐⽅式。pre标签很适合显⽰计算机代码，可以保留空格和换⾏。div span标签(重点)div span 是没有语义的 是我们⽹页布局主要的2个盒⼦ css+divdiv 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合⽹页。 跨度，跨距；范围语法格式： 这是头部 今⽇价格⽂本格式化标签(熟记)在⽹页中，有时需要为⽂字设置粗体、斜体或下划线效果，这时就需要⽤到HTML中的⽂本格式化标签，使⽂字以特殊的⽅式显⽰。b i s u 只有使⽤ 没有 强调的意思 strong em del ins 语义更强烈标签属性使⽤HTML制作⽹页时，如果想让HTML标签提供更多的信息，可以使⽤HTML标签的属性加以设置。其基本语法格式如下：<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 在上⾯的语法中，1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后⾯。2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。3.任何标签的属性都有默认值，省略该属性则取默认值。图像标签img（重点）要想在⽹页中显⽰图像就需要使⽤图像标签，其基本语法格式如下：标签常见属性详解1. src 属性作⽤：指定我们要加载的图⽚的路径和图⽚的名称以及图⽚格式2. width 属性作⽤：指定图⽚的宽度，单位 px、em、cm、mm3. height 属性作⽤：指定图⽚的⾼度，单位 px、em、cm、mm4. border 属性作⽤：指定图标的边框宽度，单位 px、em、cm、mm5. alt 属性作⽤：6. 当⽹页上的图⽚被加载完成后，⿏标移动到上⾯去，会显⽰这个图⽚指定的属性⽂字作⽤7. 如果图像没有下载或者加载失败，会⽤⽂字来代替图像显⽰作⽤8. 搜索引擎可以通过这个属性的⽂字来抓取图⽚链接标签（重点）在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：⽂本或图像href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。注意：2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href=""> ⾸页 3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的在HTML中创建超链接⾮常简单，只需⽤标签环绕需要被链接的对象即可，其基本语法格式如下：⽂本或图像href：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤target：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。注意：2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href=""> ⾸页 3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。锚点有时我们在浏览⽹页时会发现，会有点击返回顶部的按键。这样的效果⽤锚点标签就能做到。锚点就是点击使⽤户跳到⽂档的某个部分。 如代码例⼦：跳转 代码代码 HTML表格HTML表格由 标签来定义。每个表格均有若⼲⾏（由 标签定义），每⾏被分割为若⼲单元格（由 标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等⽆序列表是⼀个项⽬的列表，此列项⽬使⽤粗体圆点（典型的⼩⿊圆圈）进⾏标记。⽆序列表使⽤ 标签。 列表项1 列表项2 列表项3 ...... 有序列表也是⼀列项⽬，列表项⽬使⽤数字进⾏标记。 有序列表始于 标签。每个列表项始于 标签。列表项使⽤数字来标记。 列表项1 列表项2 列表项3 ...... HTML表单 标签⽤于为⽤户输⼊创建 HTML 表单。表单元素: 根据不同的 type 属性，可以变化为多种形态。 定义下拉列表。 定义多⾏输⼊字段（⽂本域）。 定义可点击的按钮。CSS基础知识CSS选择器1、标签名选择器：如：p{}，即直接使⽤HTML标签作为选择器，在实际的应⽤中，我们习惯⽤它设置标签的⼀些默认属性或者和后代选择器⼀起使⽤。2、类选择器：选择class命名的元素 以.开头，如 .polaris();3、ID选择器：id命名的元素 以 # 开头， 如：#polaris();在同⼀个HTML⽂档中不能出现两个相同的ID名称，也就是说ID具有唯⼀性。4、后代选择器：如 .polaris span img{}，后代选择器实际上是使⽤多个选择器加上中间的空格来找到具体的要控制的标签。 5、群组选择器：.polaris ， span ， img{}，实际上是对CSS的⼀种简化写法，是把具有相同CSS样式的不同选择器放在⼀起，减少代码量。CSS样式在浏览器中被解析的先后顺序：(1) CSS不同引⼊⽅式的优先级：标签内嵌样式 > 头部书写样式 > 外部引⽤样式 > 浏览器默认样式。(2) CSS选择器的优先级：id > class > tagname.(3) 多个选择器混⽤时的优先级：例⼦.a .b c{}和.a c{},它们指向的⽬标都是c，但是前者的优先级⾼于后者⽂本字体设置:color:red; ⽂字颜⾊font-size:12px; ⽂字⼤⼩font-weight:“bold” ⽂字粗细(bold/normal)font-family:“宋体” ⽂字字体font-variant:small-caps⼩写字母以⼤写字母显⽰text-align:center; ⽂本对齐(right/left/center)line-height:10px; ⾏间距(可通过它实现⽂本的垂直居中)text-indent:20px; ⾸⾏缩进text-decoration:none;⽂本线(none/underline/overline/line-through)letter-spacing: 字间距盒模型完整的盒模型是由content（内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。border属性：语法：border-top | left | bottom | right ；padding属性：语法：padding-top | left | bottom | right: px | em |百分⽐；margin属性：语法：margin-Top | right | bottom | left : px或em ;⾏内元素是没有上下外边距的，只有左右外边距，所以尽量不要设置⾏内元素的内外上下边距，设计宽⾼也是⽆效的两个相邻的块级元素⼀个设置了margin-bottom、另⼀个设置margin-top的时候，会发⽣外边距塌陷。两个元素之间的margin值会合并，margin值最终取较⼤值。嵌套块元素垂直边距合并，当⽗级元素没有设置border、padding的情况下，⽗⼦元素的margin边距会合并，其取值为较⼤值float属性：语法： float：left | right | none；任何浮动元素⾃动被设置为⼀个“块级元素”，这表⽰它可以设置宽⾼；清理浮动：清理浮动⼀般有两种思路1.利⽤ clear属性，清除浮动clear属性的值有5个，如下所⽰:Left在左侧不允许浮动元素Right:在右侧不允许浮动元素Both:在左右侧均不允许浮动元素None默认值，允许浮动元素出现在两侧Inherit:规定应该从⽗元素继承clear属性的值，IE浏览器不⽀持，不推推荐使⽤。⼀般⽤于清除浮动时，使⽤both属性值的情况较多,即：Clear:both;2.使⽗容器形成BFCBFC是指块级格式化上下⽂，决定了元素如何对其内容进⾏定位、以及与其他元素的关系和相互作⽤。可以⽤来解决⼦元素浮动，⽗元素的⾼度没有了、两栏布局右栏不⾃适应、垂直⽅向上两元素边距有误等情况块级元素与⾏内元素： 常⽤的块级元素：blockquote、div、fieldset、form、h1-h6、hr、dl、ol、ul、p、pre　 常⽤的⾏内元素：a、b、span、cite、em、i、img、input、label、select、br、strong、textare 块级元素：垂直排列，会开始新的⼀⾏并且尽可能地撑满容器；⾼度、⾏⾼及上下边都可控制；其宽度在默认情况下与其⽗元素的宽度⼀致。可以设置width属性来改变其宽度。 ⾏内元素：⽔平排列，不会打乱段落布局，可以在⼀⾏内显⽰；⾼度及上下边距都不可控制；宽度就是其包含的⽂字或者图⽚的宽度，设置width属性不⽣效。定位： 默认值（positin：static）：在CSS中为元素定义 top、left、right、bottom、z-index 都不会⽣效 相对定位（positon：relative）：指相对于⽂档流中的其他已定义的元素位置进⾏定位，表现和默认值⼀样，只不过可以设置偏移量和z-index 来控制相对于其正常位置进⾏的偏移。但是其他的元素不会调整位置来弥补它偏离后剩下的空隙。 说明：所有元素的定位（position）都默认为 static，什么都不写就是相对定位，⽽使⽤ position:relative 在不设置 top/left/z-index等值的情况下和默认值表现是⼀样的。 绝对定位（position：absolute）：相对上⼀个不为 static 的⽗元素（即被positioned的元素）进⾏绝对定位。如果绝对定位的元素没有“positioned”祖先元素，absolute 将相对于整个 html ⽂档进⾏绝对定位，并且会随着页⾯滚动⽽移动。 绝对定位的元素有以下⼏个特点：块级元素的宽度在未定义时不再为100%，⽽是根据内容⾃动调整在不定义 z-index 的情况下，absolute 元素会覆盖在其他元素之上它会脱离正常的⽂档流，不再占据空间，类似于浮动后的效果 固定定位（position：fixed）：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。即不论⽹页如何滚动，该元素始终停留在屏幕的某个位置上。JS基础变量静态类型：⽤于存放指定类型的值。弱类型/动态类型：允许在任意时刻存放任意类型的值。JavaScript 标识符所有 JavaScript 变量必须以唯⼀的名称的标识。这些唯⼀的名称称为标识符。构造变量名称（唯⼀标识符）的通⽤规则是：名称可包含字母、数字、下划线和美元符号名称也可以 以字母，$ 和 _ 开头名称对⼤⼩写敏感（y 和 Y 是不同的变量）保留字⽆法⽤作变量名称声明（创建） JavaScript 变量在 JavaScript 中创建变量被称为“声明”变量。您可以通过 var 关键词来声明 JavaScript 变量，声明之后，变量是没有值的。（技术上，它的值是 undefined。）数据类型：基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。引⽤类型：object。⾥⾯包含的 function、Array、Date。ned 类型只有⼀个值。在使⽤var 声明变量但未对其加初始化时，这个变量就是undefined。 类型只有⼀个值。null是表⽰⼀个空对象指针。n 类型使⽤最多的⼀个类型，有两个字⾯值，分别是true、false。true不⼀定等于1,false不⼀定等于0。 类型数字类型，表⽰数据的整数和浮点数。某些语⾔中也称为“双精度值”。 类型字符串可以有单引号、双引号表⽰。字符串是不可变的，⼀旦创建，值就不能改变。要改变某个 变量保存的字符串，⾸先要销毁原来的字符串，然后于⽤另⼀个包含的字符串填充该变量。运算符在相等运算中，应注意以下⼏个问题：如果操作数是布尔值，则先转换为数值，其中 false 转为 0，true 转换为 1。如果⼀个操作数是字符串，另⼀个操作数是数字，则先尝试把字符串转换为数字。如果⼀个操作数是字符串，另⼀个操作数是对象，则先尝试把对象转换为字符串。如果⼀个操作数是数字，另⼀个操作数是对象，则先尝试把对象转换为数字。如果两个操作数都是对象，则⽐较引⽤地址。如果引⽤地址相同，则相等；否则不等。NaN与任何值都不相等，包括它⾃⼰。null 和 undefined 值相等，但是它们是不同类型的数据。在相等⽐较中，null 和 undefined 不允许被转换为其他类型的值。强制类型转换强制类型转换指将⼀个数据类型强制转换成另⼀种数据类型。类型转换主要指将其他的数据类型转换成String Number Boolean。（1）将其他数据类型转换成String类型⽅法⼀：调⽤被转换类型的toString()⽅法。该⽅法不会影响到原变量，它会将转换的结构返回。但是注意，Null和Undefined没有toString()⽅法，如果调⽤它们的⽅法，则会报错。⽅法⼆：调⽤String()函数。调⽤String()函数，并将被转换的数据作为参数传递给函数。使⽤String函数做类型强制转换时，对于Number和Boolean就是调⽤toString()⽅法，对于null和undefined，就不会调⽤toString()⽅法，它会将null直接转换成”null”，将undefined转换成”undefined”。（2）将其他的数据类型转换为Number类型转换⽅式⼀：使⽤Number()函数1）字符串如果是纯数字的字符串，则直接将其转换为数字，如果字符串中有⾮数字的内容，则转换为NaN。2）布尔类型布尔类型转换成数字：Ture转成1；False转成0。3）NullNull转成数字0。4）UndefinedUndefined转成数字NaN。对象：对象也是变量。但是对象包含很多值。对象属性（JavaScript 对象中的）名称:值对被称为属性。对象⽅法对象也可以有⽅法。⽅法是在对象上执⾏的动作。⽅法以函数定义被存储在属性中。函数实际上是对象， 每个函数都是Function类型的实例， ⽽Function也有属性和⽅法。因为函数是对象， 所以函数名就是指向函数对象的指针函数名作为指向函数对象的指针，可以有多个指向函数对象的指针函数参数1.参数的个数⾃由类数组实现 arguments2.函数重载函数通过参数的个数和类型不同来创建不同的函数签名，通过调⽤函数时传⼊的参数个数和参数类型来进⾏命名参数的验证但是 ， 在js中后声明的同名函数会对前⾯声明的函数进⾏⼀个覆盖3.默认函数值 es6在es6之前, 实现默认参数需要检测⼀个参数是否等于 undefined4.将函数当做参数函数声明和函数表达式的区别JavaScript引擎加载时对它们是区别对待的，JavaScript引擎在任何代码执⾏之前，会先读取函数声明，并在执⾏上下⽂中⽣成函数定义。⽽函数表达式必须等到代码执⾏到它那⼀⾏，才会在执⾏上下⽂中⽣成函数定义。 本文发布于:2023-06-20，感谢您对本站的认可！ 本文链接:http://torson.com.cn/news/1687276467a897.html 版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。 本文标签：css加载失败 发布评论 取消回复 评论列表（有0条评论） 最近发表 利用Asp.Net的Identity控制登录权限 浏览器页面滚动条美化(样式) java个人简历范文_java程序员应聘优秀简历 react-hooks:CSSProperties vue-cli脚手架打包静态资源请求出错的原因与解决 Web前端单词大全(html+css+js+vue) win8+win7+Android-x86 安卓WIN7双系统 连接不同LDAP(OpenLDAP,SunOne,AD,Domino) js实现纯前端的图片预览 因素估算法 基于bootstrap表单登录(带验证码) 使用dreamweaver设计常用注册页面表单验证 ...全国职业院校技能大赛山东省选拔赛高职组软件测试赛项规程 【javascript】纯原生js的轻便组织结构图,树状图,支持自定义样式_百 ... 学生信息系统测试报告 手机版网页制作总结 mysql安装使用及.net连接mysql VS中丢失ArcGis控件和模板的解决方法 win7和XP安装SQL Server 2008安装教程,及下载地址 KMP算法图文详解（为什么是next[0]= 拓祥电子编程网 拓祥电子编程提供编程程序员技术分享技术，经验代码。 相关推荐 jQuery实现点击图片简单放大效果 layui动态加载菜单栏 mescroll实现下拉刷新,上拉加载 前端工程师面试题题及答案(全面综合) vue-vue-cli2脚手架搭建build文件夹详解 html。css。js的面试题 js动态创建style节点(js文件中添加css) cssa标签去掉下划线_css react页面开发思路 Flask笔记--如何将网页模板导入Flask Webpack的习题 前端性能优化:雅虎14条优化规则 前端网络和安全相关总结 css代码的书写形式 htmltr行内样式左对齐,探索CSS单行文字居中,多行文字居左的实现方式_百... jquery选择下拉框触发事件的实现 实用的Swiper轮播图配置 Element-UI-Vue项目整合Element-UIIcon图标自定义Icon图标 ant-design实现主题暗黑主题和亮色主题的切换(实现网站黑白皮肤) jquerymobile的两种页面跳转方式 标签列表 服务器4u为什么叫4u 网络服务器做什么用的啊 彩虹六号奇游用什么服务器 求生之路2steam组服务器什么意思 为什么用ftp连接不上服务器失败 乌龟服亚服开的新服务器叫什么 一台网吧服务器都需要什么 服务器cpu8核16线程什么意思 服务器管理员一般称呼为什么 境内和境外网站服务器有什么区别 思迅V9安装在什么服务器上 热血传奇为什么进不了游戏服务器 苹果6s为什么无法关闭定位服务器 罗布乐思捐赠服务器什么时候到账 ipad总是提示连接服务器出错是什么意思 百旺税控盘服务器端口是什么 我的世界爱情的服务器有什么用 自己搭建一个服务器的方法是什么 为什么mn连小服务器都不能用 为什么说小陈的服务器是土豆做的