HTML,CSS,JS学习笔记

网页构成：HTML，CSS, JS,

HTML是一种超文本标记语言。

HTML基础

HTML标签：成对出现

HTML文档（也叫网页）：HTML标签+纯文本

基本结构

HTML 标题：HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

HTML 段落：HTML 段落是通过 <p> 标签进行定义的。

HTML 链接：HTML 链接是通过 <a> 标签进行定义的。（在 href 属性中指定链接的地址。）

HTML 图像：HTML 图像是通过 <img> 标签进行定义的。（图像的名称和尺寸是以属性的形式提供的。）

HTML元素

HTML 文档是由 HTML 元素定义的

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML属性

HTML 标签可以拥有属性，属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

HTML标题

浏览器会自动地在标题的前后添加空行。

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。(<p> 是块级元素)

<hr /> 标签在 HTML 页面中创建水平线。

HTML注释：例：<!-- This is a comment -->    <! 内容 >

HTML 折行：

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 标签( 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。)：

<p>This is<br />a para<br />graph with line breaks</p>

HTML输出

无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML样式

style属性

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。

样式实例

background-color 属性为元素定义了背景颜色，font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸，text-align 属性规定了元素中文本的水平对齐方式。pre标签很适合显示计算机代码，可以保留空格和换行。

div span标签(重点)

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

图像标签img（重点）

要想在网页中显示图像就需要使用图像标签，其基本语法格式如下：

<img src="图片路径" width="设置图片宽度" height="设置图片高度" border="边框" alt="图片"/>

<img/>标签常见属性详解

1. src 属性作用：指定我们要加载的图片的路径和图片的名称以及图片格式
2. width 属性作用：指定图片的宽度，单位 px、em、cm、mm
3. height 属性作用：指定图片的高度，单位 px、em、cm、mm
4. border 属性作用：指定图标的边框宽度，单位 px、em、cm、mm
5. alt 属性作用：
6. 当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字作用
7. 如果图像没有下载或者加载失败，会用文字来代替图像显示作用
8. 搜索引擎可以通过这个属性的文字来抓取图片

链接标签（重点）

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点

有时我们在浏览网页时会发现，会有点击返回顶部的按键。这样的效果用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。

<a href="#位置名"> </a>

<a name="位置名"> </a> 

如代码例子：

<a href="#map">跳转</a>

 <p id="map">代码代码</p>

HTML表格

HTML表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

HTML表单

<form> 标签用于为用户输入创建 HTML 表单。

表单元素:

<input type=""/> 根据不同的 type 属性，可以变化为多种形态。
<select></select> 定义下拉列表。
<textarea></textarea> 定义多行输入字段（文本域）。
<button></button> 定义可点击的按钮。

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.使父容器形成BFC

BFC是指块级格式化上下文，决定了元素如何对其内容进行定位、以及与其他元素的关系和相互作用。可以用来解决子元素浮动，父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况

块级元素与行内元素：

         常用的块级元素：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。

1.Undefined 类型

只有一个值。在使用var 声明变量但未对其加初始化时，这个变量就是undefined。

2.Null 类型

只有一个值。null是表示一个空对象指针。

3.Boolean 类型

使用最多的一个类型，有两个字面值，分别是true、false。true不一定等于1,false不一定等于0。

4.Number 类型

数字类型，表示数据的整数和浮点数。某些语言中也称为“双精度值”。

5.String 类型

字符串可以有单引号、双引号表示。字符串是不可变的，一旦创建，值就不能改变。要改变某个 变量保存的字符串，首先要销毁原来的字符串，然后于用另一个包含的字符串填充该变量。

运算符

在相等运算中，应注意以下几个问题：

• 如果操作数是布尔值，则先转换为数值，其中 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）Null

Null转成数字0。

4）Undefined

Undefined转成数字NaN。

对象：

对象也是变量。但是对象包含很多值。

对象属性

（JavaScript 对象中的）名称:值对被称为属性。

对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

函数实际上是对象， 每个函数都是Function类型的实例， 而Function也有属性和方法。因为函数是对象， 所以函数名就是指向函数对象的指针

函数名作为指向函数对象的指针，可以有多个指向函数对象的指针

函数参数

1.参数的个数自由

类数组实现 arguments

2.函数重载

函数通过参数的个数和类型不同来创建不同的函数签名，通过调用函数时传入的参数个数和参数类型来进行命名参数的验证

但是 ， 在js中后声明的同名函数会对前面声明的函数进行一个覆盖

3.默认函数值 es6

在es6之前, 实现默认参数需要检测一个参数是否等于 undefined

4.将函数当做参数

函数声明和函数表达式的区别

JavaScript引擎加载时对它们是区别对待的，JavaScript引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。