前端知识整理

代码千万行，安全第一行；前端不规范，运营两行泪

*HTML

HTML 语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构，比如需要强调的内容可以放在 <strong> 标签中，而不是通过样式设置 <span> 标签去做。不同浏览器对 HTML 元素的解析可能有差异，HTML 语义化便是在抛开样式之后，页面能有一个友好的展示效果。我们力求让页面有良好的结构，让页面的元素有含义，同时利于被搜索引擎解析，利于 SEO。HTML 语义化的建议：

少使用无意义的 <div>、<span> 标签；
在 <label> 标签中设置 for 属性和对应的 <input> 关联起来；
设置 <img> 标签的 alt 属性，给 <a> 标签设置 title 属性，利于 SEO；
在页面的标题部分使用 <h1>~<h6> 标签，不需要给它们加多余的样式；
与表单、有序列表、无序列表相关的标签不要单独使用。

HTML5 也新增了一些语义化的元素，我们通过标签名就能判断标签内容。使用语义元素的页面大致结构如下：

较长的的HTML文件，请在板块之间加入注释，使得结构更清晰

*CSS

css中的块级元素与行级元素

最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。

先从概念上来看：

块级元素

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　

　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

行级元素

特点：1.可以和其他元素处于一行，不用必须另起一行。

　　　2.元素的高度、宽度及顶部和底部边距不可设置。

　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

常见的块级元素：heda meat title lable span br a style em b i strong

行内块元素常见的有： img input td

行级元素与块级元素的转换

如果想将块级元素与行级元素相互转换，该怎么办呢？

　　可以在css样式中用display:inline将块级元素设为行级元素

　　同样，也可以用display:block将行级元素设为块级元素

行级-块级元素

如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？

此时就可以用display:inline-block将元素设置为行级-块级元素。（IE8不支持）

flex布局

在传统的方式中，我们通常会设置盒模型的 display、position、float 等属性来进行布局，对于一些特殊布局运用起来不是很方便，比如垂直居中水平居中，如果运用了浮动特性的话，就需要清除浮动，不但比较麻烦，一不小心还会出现意料之外的布局，最后呈现的结果往往不尽人意。

Flexbox（全称 Flexible Box）布局，也叫 Flex 布局，意为“弹性布局”，顾名思义，Flex 布局中的元素具有可伸缩性，是的，通过设置父元素的 display 属性为 display: flex | inline-flex; 其子元素便有了伸缩性，即使在子元素的宽高不确定的情况下，也能通过设置相关 css 属性来决定子元素的对齐方式、所占比例和空间分布。

目前的浏览器支持程度： IE10+，chrome21+，opera12.1+，Firefox22+，safari6.1+等;
如上浏览器的支持程度，我们可以把此元素使用在移动端很方便。

flex的弹性布局有如下优势：
1.独立的高度控制与对齐。
2.独立的元素顺序。
3.指定元素之间的关系。
4.灵活的尺寸与对齐方式。

一些概念

在开始学习Flex 布局前，我们先来熟悉下有关 Flex 布局的几个概念，这些概念可以帮助对后文的理解。

上图便是一个 Flex 布局的大致架构了，图中的囊括概念有几点：

Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目；
Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的；
主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end；
子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。

在上面的相关概念中，比较重要的是主轴、交叉轴，和它们的开始位置、结束位置。子元素在父元素中会沿着主轴从 main start 到 main end 排列，沿着交叉轴从 cross start 到 cross end 排列。在常规的布局中，浏览器是从左到右排列，挤不下了就换行，在这种情况下，主轴是水平方向，交叉轴是垂直方向，主轴是从左到右，交叉轴是从上到下。

在 Flex 布局中，默认的主轴方向也是水平的，交叉轴是垂直的，通过改变 flex-direction 和 flex-wrap 的属性值可以分别改变两个轴的方向和它们的开始位置、起始位置，这就让布局更加灵活多变了。

了解完 Flex 布局相关的抽象概念，接下来我们来看看有关 Flex 布局的属性部分，这里分为两部分介绍，一是作用于父元素（容器）的，二是作用于子元素（项目）的。

容器属性

display 属性用来将父元素定义为 Flex 布局的容器，设置 display 值为 display: flex; 容器对外表现为块级元素；display: inline-flex; 容器对外表现为行内元素，对内两者表现是一样的。

<div class="container"></div>

.container {
    display: flex | inline-flex;
}

上面的代码就定义了一个 Flex 布局的容器，我们有以下六个属性可以设置的容器上：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-direction 定义了主轴的方向，即项目的排列方向。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
row-reverse：主轴在水平方向，起点在右侧；
column：主轴在垂直方向，起点在上沿；
column-reverse: 主轴在垂直方向，起点在下沿。

（flex-direction 为 row）

（flex-direction 为 row-reverse）

（flex-direction 为 column）

（flex-direction 为 column-reverse）

flex-wrap

默认情况下，项目是排成一行显示的，flex-wrap 用来定义当一行放不下时，项目如何换行。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

假设此时主轴是从左到右的水平方向：

nowrap（默认）：不换行；
wrap：换行，第一行在上面；
wrap-reverse：换行，第一行在下面。

（默认情况，flex-wrap 为 nowrap，不换行，即使设置了项目的宽度，项目也会根据屏幕的大小被压缩）

（flex-wrap 为 wrap）

（flex-wrap 为 wrap-reverse）

将 flex-wrap 设置为 wrap-reverse 可以看做是调换了交叉轴的开始位置（cross start）和结束位置（cross end）。

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content 定义了项目在主轴上的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认）：与主轴的起点对齐；
flex-end：与主轴的终点对齐；
center：项目居中；
space-between：两端对齐，项目之间的距离都相等；
space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。

假设此时主轴是从左到右的水平方向，下面给出了不同属性值的效果图。

（justify-content 为 flex-start）

（justify-content 为 flex-end）

（justify-content 为 center）

（justify-content 为 space-between）

（justify-content 为 space-around）

align-items

align-items 定义了项目在交叉轴上如何对齐。

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：与交叉轴的起点对齐；

flex-end：与交叉轴的终点对齐；

center：居中对齐；

baseline：项目第一行文字的基线对齐；

stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。

假设交叉轴是从上到下的垂直方向，下面给出了不同属性值的效果图。

（align-items 为 flex-start）

（align-items 为 flex-end）

（align-items 为 center）

（align-items 为 baseline）

（align-items 为 stretch）

align-content

align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起作用。

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐；

flex-end：与交叉轴的终点对齐；

center：居中对齐；

space-bteween：与交叉轴两端对齐，轴线之间的距离相等；

space-around：每根轴线两侧的间隔都相等，所以轴线与轴线之间的间隔是轴线与边框之间间隔的两倍；
stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。

（align-content 为 flex-start）

（align-contet 为 flex-end）

（align-content 为 center）

（align-content 为 space-between）

（align-content 为 space-around）

（align-content 为 stretch）

项目属性

对项目设置属性，可以更灵活地控制 Flex 布局。以下六种属性可以设置在项目上：

order

flex-grow

flex-shrink

flex-basis

flex
align-self

order

order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。

.item {
    order: <integer>;
}

（给第三个项目设置了 order: -1; 后，该项目排到了最前面）

flex-grow

flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。

如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。

.item {
    flex-grow: <number>;  
}

（所有项目的 flex-grow 都为 1，平分剩余空间）

（flex-grow 属性值越大，所占剩余空间越大）

flex-shrink

flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。

如果所有项目的 flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。

负值对该属性无效。

.item {
    flex-shrink: <number>；
}

（空间不足时，默认等比缩小）

（flex-shrink 为 0 的不缩小）

flex-basis

flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。

flex-basis 的设置跟 width 或 height 一样，可以是像素，也可以是百分比。设置了 flex-basis 之后，它的优先级比 width 或 height 高。

.item {
    flex-basis: <length> | auto;
}

（不同的 flex-basis 值效果展示）

flex

flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 0 1 auto，后两个属性可选。

该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的时候可以拉伸也可以收缩，none 表示既不能拉伸也不能收缩。

.item {
    flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

align-self 用来定义单个项目与其他项目不一样的对齐方式，可以覆盖 align-items 属性。默认属性值是 auto，即继承父元素的 align-items 属性值。当没有父元素时，它的表现等同于 stretch。

align-self 的六个可能属性值，除了 auto 之外，其他的表现和 align-items 一样。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

（第三个项目的对齐方式与其他不同）

浏览器兼容性及其他

设置为 Flex 布局后，子元素的 float、clear、vertical-align 属性都将失效。

因为历史原因，W3C 对 flex 做了多次更新，也就导致了各浏览器支持度参差不齐。到目前为止，Flex 布局有一下几种写法：

display: box;                   /* 2009 version 老语法 */
display: flexbox;               /* 2011 version 过渡语法 */      
display: flex | inline-flex;    /* 2012 version 新语法 */

从 Can I Use 上可以看出目前 Flex 布局对浏览器的支持情况。从中我们可以总结出新语法目前的支持情况：

Chrome 29+

Firefox 28+

Safari 9+

iOS Safari 9+

Android 4.4+

IE Mobile 11+

更低的版本需要加上前缀进行支持，不同版本所在时期不同也会导致属性值不同，这里有一个推荐的兼容性写法：

.page-wrap {
    display: -webkit-box;      /* 老语法 iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* 老语法 Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* 过渡语法 IE 10 */
    display: -webkit-flex;     /* 新语法 Chrome */
    display: flex;             /* 新语法, Spec - Opera 12.1, Firefox 20+ */
 }

CSS 响应式布局示例

什么是响应式布局

在日常生活中，我们可以使用电脑，手机，平板来浏览网页。这些不同的媒介的屏幕大小是不一样的，那么我们如何保证自己设计的网页在任何大小的屏幕上都能有一个完美的布局呢，这里就要用到我们这一节要讲的响应式布局的知识啦。所谓响应式布局，就是页面的布局能够随着屏幕大小的变化而变化，从而实现在任何大小的屏幕上都能以最完美的布局来展示我们的内容。本文将以示例的形式讲解如何利用原生的 CSS 来实现页面的响应式布局，知识点都非常基础但同时也非常重要，适合新手学习。

示例一：响应式图片

（图片大小随显示区域的变化而变化）

从上图中我们可以看出，图片在随着显示区域的变小而变小，这是怎么实现的呢，我们先来看一下相应的 HTML 和 CSS 代码：

//HTML代码
<body>
  <img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" />
</body>

//CSS代码
  img {
    width: 1200px;
    max-width: 100%;
  }

width: 1200px; 规定了图片的宽度。这里我们只规定了宽度而没有规定高度是因为，对于 img 标签而言，如果我们只规定高度和宽度中的一个的话，没有规定的那一个会根据图片本身的比例进行自适应，也就是说可以保证图片的比例不变。

max-width: 100% 才是实现响应式的关键。这句代码的意思是，图片的最大宽度不能超过 100% 。这个 100% 是相对于其父元素来说的。在本例中， img 标签的父元素是 body 标签，所以它的意思其实是 img 的宽度不能超过 body 的宽度，而body 的宽度实际上就是浏览器窗口可见区域的宽度啦。这个时候我们可以分两种情况来讨论：

当浏览器的宽度大于或等于1200px 时，因为图片的宽度为 1200px ，满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片保持宽度 1200px 不变。
当浏览器的宽度小于 1200px 时，此时不满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片会缩小到满足条件为止，最后的结果就是图片的宽度会等于浏览器的宽度。这就是为什么图片会随着窗口的变窄而变小了。

类似的 CSS 属性还有 min-width 、max-height 、min-height ，原理都是一样的。

示例二：首屏内容始终填充整个窗口

（淡绿色的首屏始终填满了整个窗口，稍稍拉动下拉条，就会进入白色的第二屏）

在上图中我们可以看到，谈绿色的首屏始终填满了整个窗口，我们稍稍拉动下拉条，就会进入白色的第二屏。这种技术经常被展示产品的网站所采用：产品的概念图放在首屏，详细的产品描述放在首屏之后，这样的首屏看起来干净简洁，重点突出。这种首屏内容填满整个窗口的技术是怎么实现的呢，我们来看代码：

//HTML代码
<div class="intro">
  <h1>语雀-前端九部</h1>
</div>

//CSS代码
.intro {
  background: #e0ebe8;
  text-align: center;
  height: 55vh;
  padding-top: 45vh;
}

这其中就用到了 css3 的新增单位 vh 。vh 是一个表示浏览器视窗高度的单位，所谓视窗，就是浏览器用来真正显示内容的区域，不包括工具栏等。 1vh 表示视窗高度的百分之一，100vh 表示整个视窗的高度。注意，我们这里虽然是使用了百分号的机制，但是书写的时候不用写百分号，只用写数字就好了。在上段代码中，height 和 padding-top 加起来正好是100vh，所以首屏内容恰好占据整个视窗的大小。

的新增单位还有vw、vmin、vmax。大家可以通过这篇文章了解一下。

示例三：媒体查询(@media)

（利用媒体查询在特定情况下改变标签样式）

在上图中我们可以看到，带有“语雀”字样的圆形图标在窗口缩窄到一定程度之后改变了其样式，由圆形变为了长方形。这里就使用到了所谓的媒体查询方法。媒体查询简单用法如下：

@media (max-width: 480px) {
  background-color: lightgreen;;
}

媒体查询的标识符是 @media 。上面这段代码的含义是：如果视窗的宽度小于 480px 时，将背景色变为淡绿色。下面我们再来看一下实现上图效果的代码：

//HTML代码
<div>
    <a href="#">语雀</a>
    <a href="#">语雀</a>
    <a href="#">语雀</a>
    <a href="#">语雀</a>
    <a href="#">语雀</a>
  </div>

//CSS代码
  div {
    text-align: center;
    padding-top: 20vh;
  }
  a {
    display: inline-block;
    margin: 0 35px 45px 35px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #e0ebe8;
    color: #008080;
  }
  @media (max-width: 367px) {
    a {
      border-radius: 0;
      height: 20px;
      padding: 10px;
      line-height: normal;
    }
  }

当视窗宽度小于 367px 时，写在 @media 内部的样式会被启用。比如@media 中，a 标签被设置了的 border-radius：0 ，这个时候 border-radius: 0 就会覆盖之前的 border-radius: 50% ，a 标签就从圆形变成了长方形。@media 中的某个样式，如果在这之前已经被设置了，那么就会覆盖之前的值，如果之前没有被设置过，就会添加进去。所谓“存在即覆盖，不存在则添加”。

关于媒体查询的用法还有很多，我们这里只是介绍了其中的一种，关于更多媒体查询的用法大家可以参考这个网站。

*Webpack

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
...

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

*代码规范

css规范

1.使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

2.去掉小数点前的“0”

.box{
 margin-top: .5px;
}

3.不要随意使用！important 样式，这样会给后续维护代码的人员造成困扰

3.简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

4.连字符CSS选择器命名规范

1）.长名称或词组可以使用中横线来为选择器命名。

2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）

5.不要随意使用id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

6.为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了

7.CSS命名规范（规则）
常用的CSS命名规则

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

注释的写法:

/* Header */
内容区
/* End Header */

id的命名:

1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

注意事项:

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词

CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

js规范

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格

代码缩进

通常使用 4 个空格符号来缩进代码块：

不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

语句规则

简单语句的通用规则:

一条语句通常以分号作为结束符。

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

短的对象代码可以直接写成一行:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

命名规则

一般很多代码语言的命名规则都是类似的，例如:

变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )

使用小写文件名

posted @ 2019-03-06 19:00 小红帽子阅读(313) 评论(0) 编辑收藏举报

小红帽子