默默前行，勿喜、勿悲、一切随缘！

Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希

当form表单中只有一个输入框时，焦点在此输入框中，按回车键将自动将表单提交。 即使不写action，页面也会自动刷新，有时这并不是我们需要的。如果再次添加一个input框，会怎样？ 焦点在输入框中，按回车键没有提交表单。如果表单中添加一个submit类型的按钮呢，会怎样？

问题因最近尝试实现客户端与服务端分离，服务端只提供接口，客户端用html+js实现，分成两个独立的项目部署，因项目是个人项目，客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现，于是全部使用静态页面实现，请求数据用ajax，在开发的过程中，就遇到了页面之间传值的问题。解决方法post提交表单跳转的方式肯定不行了，因服务端并不处理这些请求参数，连到达客户端的机会都

模式修饰符的可选参数参数含义i忽略大小写g全局匹配m多行匹配 举例：/test/ig 字符类：单个字符和数字元字符/元符号匹配情况.匹配除换行符外的任意字符

段落标签标题标签强调标签 但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用表示强调。标签没有语义的，它的作用就是为了设置单独样式用的。短文本引用,使用此标签会自动对文本加上双引号，语义表示引用别人的话。长文本引用，使用此标签会自动加上缩进样式。分行显示文本 

CSS全称为“层叠样式表 (CascadingStyle Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{ font-size:12px; color:red; font-weight:bold;}使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

问题 浮动 div{ width:100px; height:100px; } #box1{ background-color:red; } #box2{ background-color:green; float:left; } #box3{ background-color:yel

什么是浮动？使元素脱离文档流（标准流），按照指定方式发生移动，遇到父级边界或者相邻的浮动元素就停下来的一种现象。float:left|right|inherit|initial|none;下面看一个例子： 浮动 #box{ width:400px; border:1px solid blue; } .float{ wi

在工作中，大家应该都遇到过ajax跨域问题，浏览器的错误如下：XMLHttpRequest cannot load http://目标地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页面地址' is therefore not allowed a

水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。这里我们又得分两种情况：行内元素还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。我们先来了解一下行内元素怎么进行水平居中？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/通常有下面三种缩写方法:1、如果top、

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）流动模型流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都

元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、块级元素什么是块级元素？在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素

文字排版字体body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{

事件兼容function myfn(e){ var evt = e ? e:window.event; }js停止冒泡function myfn(e){window.event? window.event.cancelBubble = true : e.stopPropagation();}js阻止默认行为function myfn(e){window.event? window