前端三件套知识点小结

前端入门

开发工具：浏览器（Chrom、FireFox、Edge、Safari）

编辑器：VSCode

HTML

1.HTML

HTML：超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。

HTML5：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。

HTML5元素定义:

• 结构性元素：负责web上下文的定义，section、header、footer、nav、article

• 块级性元素：完成web页面区域的划分，确保内容的有效分割，aside、figure

• 行内语义元素：完成web页面具体内容的引用和描述

• 交互性元素：主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础

2.标签

radio:在使用radio标签时，为了只能单选，需要将radio标签的name属性对应的值相同

label:使用label标签绑定元素时，当点击label便签内的文本时，浏览器就会自动聚焦或者选择对应的表单元素上

性别：<label for="man">
            <input type="radio" name="sex" id="man">男
        </label>
        <label for="woman">
            <input type="radio" name="sex" id="woman">女
        </label>

锚点链接:为我们点击链接，可以快速定位到页面中的某个位置

• 在链接文本的href属性中，设置属性值为#名字的形式

• 找到目标位置标签，里面添加一个id属性=刚才的名字

<a href="#two">第二集</a>
<h3 id="two">第二集内容</h3>

select下拉菜单：有多个选项供用户选择

<select>
    <!--加入select="selected"属性为默认选择项-->
    <option select="selected">选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

CSS

1.CSS

css：层叠样式表，用于设计风格和布局

css三个重要特性：

• 层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。样式冲突，执行就近原则，样式不冲突，不会重叠

• 继承性：子标签会继承父标签的某些样式，如字体样式等

• 优先级：当一个元素指定多个选择器，就会有优先级的产生，选择器不同，则根据选择器的权重执行，权重值大小：!important>行内样式>ID选择器>类选择器>元素选择器>继承

2.选择器

• 类型选择器：也叫做"标签名选择器"或者是"元素选择器"，直接为标签加入样式

• 类选择器：以一个句点（.）开头，会选择文档中应用了这个类的所有物件，你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素

• ID选择器：ID选择器开头为#而非句点，不过基本上和类选择器是同种用法

• 伪类选择器：伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候

• 关系选择器：典型用单个空格字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器

<!--类型选择器-->
span {
    background-color: yellow;
}
<span>Type selectors</span>

<!--类选择器-->
.highlight {
    background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>

<!--ID选择器-->
h1#heading {
    color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>

<!--属性选择器-->
<!--
	使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
	li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
	li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。
-->
li[class] {
    font-size: 200%;
}

li[class="a"] {
    background-color: yellow;
}

li[class~="a"] {
    color: red;
}

<h1>Attribute presence and value selectors</h1>
<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

<!--伪类选择器-->
.box::before {
    content: "This should show before the other content."
}   
<p class="box">Content in the box in my HTML page.</p>

<!--后代选择器-->
.box p {
    color: red;
}  
<div class="box">
    <p>Text in .box</p>
</div>

3.文本样式

font：复合字体样式属性，用于定义字体、大小、粗细和文字样式，必须保留font-size和font-family属性，否则font属性将不起作用

body{
	font:font-style font-weight font-size/line-height font-family;
}

text-decoration：给文本添加下划线（underline）、删除线（line-through）、上划线（overline）

4.CSS引入方式

• 内部样式表：在style标签中书写CSS代码，style标签写在head标签中

• 行内样式表：使用style属性引入CSS样式

• 外部样式表：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

 <!--使用行内样式引入CSS-->
 <h1 style="color:red;">使用行内样式引入CSS</h1>

<!--使用内部样式表引入CSS-->
<style type="text/css">
  div{
     
      background: green;
  }
</style>
<div>我是DIV</div>

<!--使用外部样式表引入CSS-->
<!--链接式-->
<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<!--导入式-->
<style type="text/css">
   @import url("css/style.css");
</style>

<!--
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
-->

5.background属性

background-repeat属性用于控制图像的平铺行为。可用的值是：

• no-repeat：不重复

• repeat-x：水平重复

• repeat-y：垂直重复

• repeat：在两个方向上重复

background-size：设置长度或百分比值，来调整图像的大小以适应背景

• cover：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比

• contain：浏览器将使图像的大小适合盒子内

background-position：允许您选择背景图像显示在其应用到的盒子中的位置

• 两个单独的值：一个水平值后面跟着一个垂直值

• 使用长度值和百分比

• 混合使用关键字，长度值以及百分比

background-attachment：设置背景图像是随对象滚动还是固定不动

• scroll：背景图像随对象滚动而滚动，是默认选项

• fixed：背景图像固定在页面不动，只有其他的内容随滚动条滚动

background混合写法：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

.box{
	background-image: url(star.png);
  	background-repeat: no-repeat;
 	background-position: top 20px right 10px;
	background-position: top center;
}

6.盒子模型

盒子模型：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• 标准盒模型（border-box）：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

• 怪异盒模型（content-box）：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）

padding：如果盒子本身没有width/padding属性，加入padding则不会撑开盒子

margin：外边距可以让块级元素水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度width

• 盒子左右的外边距都设置为auto：margin:0 auto

外边距合并：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

清除浮动：父元素高度自适应，子元素float后，造成父元素高度为0，造成高度塌陷

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动本质

• 清除浮动元素造成的影响

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流了

7.定位

相对定位：元素在移动位置的时候，是相对于它原来的位置来说的

• 相对于自己原来的位置移动

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待（不脱标，继续保留原来位置）

• position:relative

绝对定位：元素在移动位置的时候，是相对于它的父元素来说的

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

• 如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位的祖先元素为参考点移动位置

• 绝对定位不再占有原来的位置（脱标）

8.元素的显示与隐藏

display：属性设置为none隐藏元素后，不再占有原来的位置

overflow：让一个元素在页面中隐藏或者显示出来

• visible(默认选项)：不剪切也不添加滚动条

• hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉

• scroll：不管超出与否，总是显示滚动条

• auto：超出自动显示滚动条，不超出不显示滚动条

vertical-align：用于设置图片或者表单和文字垂直对齐

• baseline（默认）：元素放在父元素的基线上

• middle：把此元素放置在父元素的中部

单行文本溢出显示省略句：

• 先强制一行内显示文本：white-space:nowrap

• 超出的部分隐藏：overflow:hidden

• 文字用省略号替代超出的部分：text-overflow:ellipsis

多行文本溢出显示省略号：

calc()函数：让你在生命CSS属性值时执行一些计算，calc(100%-50px)

transition：变化的属性 花费时间 运动曲线 合适开始

• transition：width .5s ease 0s

• 如果想要多个属性都变化，属性写all即可

CSS转换

转换（transform）：可以实现元素的位移、旋转、缩放等效果

• 移动：translate

• 旋转：rotate

• 缩放：scale

Flex布局

flex原理：flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设为flex布局后，子元素的float、clear和vertical align属性将失效

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex常见的父项属性（对父元素设置的）：

• flex-direction：设置主轴的方向

• justify-content：设置主轴上的子元素的排列方式

• flex-wrap：设置子元素是否换行

• align-content：设置侧轴上子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• row（从左向右，沿x轴方向）

• column（从上向下，沿y轴方向）

justify-content：设置主轴上子元素的排列方式

• flex-start：默认值，子元素从头开始依次排列

• flex-end：从尾部开始排列

• center：在主轴居中对齐

• space-around：平分剩余空间

• space-between：先两边贴边，在平分剩余空间（常用）

flex-wrap：设置子元素换行

• flex布局中默认是不换行的，如果子元素超出父盒子宽度，则其子元素会自动缩小

• wrap：子元素超出父盒子则会换行

align-items：设置侧轴上的子元素的排列方式（单行）

• stretch：默认值，拉伸

• center：垂直居中

• flex-start：从上到下

align-content：设置侧轴上子元素的排列方式（多行）

网页开发经验

Iconfont的使用：

• Font class使用时想要对iconfont引入样式，要注意权重

• 对iconfont设置大小、颜色时，利用.iconfont.icon-对齐引入

• 如果上下不对齐可以使用vericle-align属性使其对齐

SEO优化

• title网站标题：是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点，建议：网站名-网页的介绍

• description网站说明：简要说明网站主要是做什么的

• keywords关键字：页面关键词，是搜索引擎的关注点之一

class命名

对于列表页，可以使用ul然后对其使用display布局

服务器

服务器：服务器是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等

远程服务器：通常是别的公司为我们提供的一台电脑，我们只需要把网站项目上传到这台电脑上，任何人就可以利用域名访问我们的网站了

免费的远程服务器：http://free.3v.do

• 去免费空间网站注册账号

• 记录下主机名、用户名、密码、域名

• 利用cutftp软件上传网站到远程服务器

• 在浏览器中输入域名，即可访问网站

JavaScript

介绍

ECMAScript是一种语言标准，JavaScript是对ECMAScript的一种实现

组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM ）

<script>
    /*内部js代码*/
    alert("HELLO,WORLD!");
</script>

<!--外部js代码-->
<script type="text/javascript" src="js/index.js"></script>

1.JS数据类型

1.1基本数据类型

• number数值类型：1，-2，3，4.5

• string字符串类型：‘123’,‘sunx’

• boolean类型：0（假false）和1（真true），例：表达式 3 < 4 为true

• undefined类型：当一个变量没有被定义、只被声明的时候

• null空对象类型：typeof null = object

1.2类型之间的转换

• 数值类型转换为字符串类型的隐式转换：num + “”

• 利用toString()函数将数值类型转换为字符串类型

• 利用Number()将字符串类型转换为数值类型

2.BOM

2.1BOM对象简介

BOM（浏览器对象模型）

• window：alert()、confirm()、prompt()、setInterval()、setTimeout()

• location：href、hash、url、reload()

• srceen

• history：go()

3.DOM

3.1 DOM结点类型

• 元素结点（element node）

• 文本结点（text node）

• 属性结点（attribute node）

3.2 获取结点的方式

• document.getElementById() ：返回值为单个结点对象

• document.getElementByTagName()：返回值为结点对象集合，可以用for遍历

• document.getElementsByClassName()：返回值为结点对象集合

3.3 动态操作节点

• 创建节点：createElement()

• 插入节点：appendChild()、insertBefore(newNode,node)

• 删除节点：removeChild()

• 替换节点：replaceChild(newNode,node)

• 创建文本节点：createTextNode()

4.offset、client、scroll

4.1 Offset

• offsetWidth / offsetHeight : 用来获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth / Height= width + border + padding

• offsetLeft / offsetTop : 获取距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离

• offsetParent : 返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷。如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。

offsetxxx和style.xxx的区别：

• style.left只能获取行内的，而offsetLeft则可以获取到所有的

• offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left

• offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px

• offsetLeft是只读的，而style.left是可读写

• 如果没有给当前元素指定过top样式，