初级前端要掌握哪些知识点才能找到一个20k的工作？（一）

时间：2021-03-06 14:41:45 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：弹性盒 ips http 单选大小 range upload board 选择

技术图片

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

如果这篇文章有帮助到你，给个关注，点赞，鼓励一下作者，接收好挑战了吗？

Web模块

html基本结构

html标签是由<>包围的关键词。
html标签通常成对出现，分为标签开头和标签结尾。
有部分标签是没有结束标签的，为单标签，单标签必须使用/结尾。
页面所有的内容，都在html标签中。
html标签分为三部分：标签名称，标签内容，标签属性。
html标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。
标签的内容是在一对标签内部的内容。
标签的内容可以是其他标签。

标签属性

class属性：用于定义元素的类名
id属性：用于指定元素的唯一id，该属性的值在整个html文档中具有唯一性
style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定
title属性：用于指定元素的额外信息
accesskey属性：用于指定激活元素的快捷键
tabindex属性：用于指定元素在tab键下的次序
dir属性：用于指定元素中内容的文本方向，属性只有ltr或rtl两种
lang属性：用于指定元素内容的语言

事件属性

window窗口事件，onload，在网页加载结束之后触发，onunload，在用户从网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
form表单事件，onblur，当元素失去焦点时触发，onchange，在元素的值被改变时触发，onfocus，当元素获得焦点时触发，onreset，当表单中的重置按钮被点击时触发，onselect，在元素中文本被选中后触发，onsubmit，在提交表单时触发
keyboard键盘事件，onkeydown，在用户按下按键时触发，onkeypress，在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有，alt,ctrl,shift,esc
mouse鼠标事件，onclick，当在元素上发生鼠标点击时触发，onblclick，当在元素上发生鼠标双击时触发，onmousedown，当元素上按下鼠标按钮时触发，onmousemove，当鼠标指针移动到元素上时触发，onmouseout，当元素指针移出元素时触发，onmouseup，当元素上释放鼠标按钮时触发。Media媒体事件，onabort，当退出时触发，onwaiting，当媒体已停止播放但打算继续播放时触发。

文本标签

段落标签<p></p>，段落标签用来描述一段文字
标题标签<hx></hx>，标题标签用来描述一个标题，标题标签总共有六个级别，<h1></h1>标签在每个页面中通常只出现一次
强调语句标签，<em></em>，用于强调某些文字的重要性
更加强调标签，<strong></strong>和<em>标签一样，用于强调文本，但它强调的程度更强一些
无语义标签<span></span>，标签是没有语义的
短文本引用标签<q></q>，简短文字的引用
长文本引用标签<blockquote></blockquote>，定义长的文本引用
换行标签<br/>

多媒体标签

链接标签，<a></a>
图片标签，<img/>
视频标签，<video></video>
音频标签，<audio></audio>

列表

无序列表标签，ul,li，<ul></ul>列表定义一个无序列表，<li></li>代表无需列表中的每一个元素
有序列表，ol,li
定义列表，<dl></dl>，定义列表通常和<dt></dt>和<dd></dd>标签一起使用

表格

表格标签<table></table>
表格的一行<tr></tr>
表格的表头<th></th>
单元格<td></td>
表格合并，同一行内，合并几列colspan="2"，同一列内，合并几行rowspan="3"

表单标签

表单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件">

action，浏览者输入的数据被传送到的地方

method，数据传送的方式

输入标签<input/>

name：为文本框命名，用于提交表单，后台接收数据用。

value：为文本输入框设置默认值。

type：通过定义不同的type类型，input的功能有所不同。

text	单行文本输入框
password	密码输入框（密码显示为***)
radio	单选框 （checked属性用于显示选中状态）
checkbox	复选框（checked属性用于显示选中状态）
file	上传文件
button	普通按钮
reset	重置按钮（点击按钮，会触发form表单的reset事件）
submit	提交按钮（点击按钮，会吃饭form表单的submit事件）
email	专门用于输入 e-mail
url	专门用于输入 url
number	专门用于number
range	显示为滑动条，用于输入一定范围内的值
date	选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color	选取颜色

button按钮，下拉选择框<select></select>

<option value="提交值">选项</option>是下拉选择框里面的每一个选项

文本域：<textarea></textarea>，当用户想输入大量文字的时候，使用文本域。cols，多行输入域的列数，rows，多行输入域的行数。

其他语义化标签

盒子<div></div>
网页头部<header></header>，html5新增语义化标签，定义网页的头部，主要用于布局，分割页面的结构
底部信息<footer></footer>，html5新增语义化标签，定义网页的底部，主要用于布局，分割页面的结构
导航<nav></nav>，html5新增语义化标签，定义一个导航，主要用于布局，分割页面的结构
文章<article></article>，html5新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构
侧边栏<aside></aside>，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。
时间标签<time></time>，语义化标签，定义一个时间

网页结构

<!DOCTYPE html> 定义文档类型，告知浏览器用哪一种标准解释HTML
<html></html>可告知浏览器其自身是一个 HTML 文档
<body></body>标签之间的内容是网页的主要内容
<head></head>标签用于定义文档的头部，它是所有头部元素的容器
<title></title>元素可定义文档的标题
<link>标签将css样式文件链接到HTML文件内
<meta>定义文档的元数据

模块划分

常见的企业网站，多由头部区，展示图片区域，主题区域，底部信息区域组成
网页拆分原则: – 由上到下 - 由内到外

CSS代码语法

CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
css代码通常存放在<style></style>标签内
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符{属性:值}
选择符：又称选择器，指明网页中要应用样式规则的元素

CSS 放置位置

行内样式，不建议使用
内联式样式表
外联样式表

CSS的继承

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

选择器的种类

标签选择器:通过标签的名字，修改css样式
通配符选择器:选择页面中所有的元素
属性选择器
后代选择器:选择某个父元素下面所有的元素
一级子元素选则器:选择某个父元素的直接子元素，后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
id选择器：通过id查找页面中唯一的标签
class选择器:通过特定的class（类）来查找页面中对应的标签，以 .class名称
伪类选择器::hover鼠标移入某个元素;:before在某个元素的前面插入内容;:after在某个元素的后面插入内容
群组选择器:可以对多个不同的选择器设置相同的样式

选择器的优先级

当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
通过测算那个选择器的权重值最高，应用哪一个选择器的样式
权重计算方式:

标签选择器：1

class选择器：10

id选择器：100

行内样式：1000

!important 最高级别，提高样式权重，拥有最高级别

背景样式

背景颜色background-color
背景图片background-image

background-image:url(bg01.jpg);

背景图片位置background-position

background-position:10px 100px;

// 代表坐标x，y轴

背景图片重复background-repeat

background-repeat:no-repeat

// no-repeat 设置图像不重复，常用

// round 自动缩放直到适应并填充满整个容器

// space 以相同的间距平铺且填充满整个容器

背景图片定位background-attachment

background-attachment:fixed

// 背景图像是否固定或者随着页面的其余部分滚动

// background-attachment的值可以是scroll（跟随滚动），fixed（固定）

background缩写

background:#ff0000 url(bg01.jpg) no-repeat fixed center

字体样式

字体族font-family

font-family:"微软雅黑","黑体";

font-size:12px;

网页默认字体大小是16px

字体粗细font-weight

font-weight:400;

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

字体颜色color

颜色的英文单词color:red;

十六进制色：color: #FFFF00;

RGB(红绿蓝)color:rgb(255,255,0)

RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)

字体斜体font-style

font-style:italic

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

文本属性

行高line-height

line-height:50px;

可以将父元素的高度撑起来

文本水平对齐方式text-align

left 左对齐
center 文字居中
right 右对齐

文本所在行高的垂直对齐方式vertical-align

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

文本缩进text-indent

text-indent:2em;

通常用在段落开始位置的首行缩进

字母之间的间距letter-spacing
单词之间间距word-spacing
文本的大小写text-transform

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义仅有小写字母。

文本的装饰text-decoration

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

自动换行word-wrap

word-wrap: break-word;

基本样式

宽度width

width:200px;
定义元素的宽度

高度height

height:300px
元素默认没有高度
需要设置高度
可以不定义高度，让元素的内容将元素撑高

鼠标样式cursor

定义鼠标的样式cursor:pointer

default默认
pointer小手形状
move移动形状

透明度opacity

opacity:0.3

透明度的值0~1之间的数字，0代表透明，1代表完全不透明

透明的元素，只是看不到了，但是还占据着文档流

可见性visibility

visibility:hidden;

visible 元素可见

hidden 元素不可见

collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏 overflow

设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

边框颜色outline

input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框

outline:1px solid #ccc;

outline:none清除边框

样式重置

早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。

清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线

盒模型样式

块状元素、内联元素和内联块状元素。

块级元素:

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

行内元素:

和其他元素都在一行上
元素的高度、宽度、行高及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素:

和其他元素都在一行上
元素的高度、宽度、行高以及顶和底边距都可设置。

元素分类转换display

block：将元素转换为块级元素

inline：将元素装换为行级元素

inline-block：将元素转换为内联块元素

none: 将元素隐藏

描边border

border:2px solid #f00;

线条的样式：

dashed（虚线）| dotted（点线）| solid（实线）。

css样式中允许只为一个方向的边框设置样式：

下描边border-bottom:1px solid red;

上描边border-top:1px solid red;

右描边border-right:1px solid red;

左描边border-left:1px solid red;

间距margin

div{margin:20px 10px 15px 30px;}

内填充padding

padding:10px

浮动float

浮动原理

浮动使元素脱离文档普通流，漂浮在普通流之上的。
浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

清除浮动带来的影响

clear 清除浮动：

none : 不清除（默认值）。

left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

利用伪类实现清除浮动

.clearFix {
  	content="";
  	display:block;
  	width:0;
  	height:0;
  	clear:both;
}

定位position

定位功能可以让布局变的更加自由。
层模型--绝对定位（相对于父类）

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示：

技术图片

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

层模型--相对定位（相对于原位置）

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示：

技术图片

如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

层模型--固定定位（相对于网页窗口）

position:fixed

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。

浏览器默认样式

页边距

IE默认为10px，通过body的margin属性设置

要清除页边距一定要清除这两个属性值

body { margin:0; padding:0;}
复制代码

段间距

IE默认为19px，通过p的margin-top属性设置

p默认为块状显示，要清除段间距，一般可以设置

p { margin-top:0; margin-bottom:0;}

html5

HTML5 的优势

解决跨浏览器，跨平台问题
增强了 web 的应用程序

HTML5 废弃元素

frame frameset noframes
acronym applet dir
basefont big center font strike tt

HTML5 新增元素

<header>	用于定义文档或节的页眉

<footer>	用于定义文档或节的页脚

<article>	用于定义文档内的文章

<section>	用于定义文档中的一个区域（或节）

<aside>	用于定义与当前页面或当前文章的内容几乎无关的附属信息

<figure>	用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。

<figcaption>	用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。

<hgroup>	用于对多个<h1>~<h6>元素进行组合

<nav>	用于定义页面上的导航链接部分

<mark>	用于定义高亮文本

<time>	用于显示被标注的内容是日期或时间（24小时制）

<meter>	用于表示一个已知最大值和最小值的计数器

<progress>	用于表示一个进度条

<audio>	定义声音，比如音乐或其他音频流

<video>	定义视频，比如电影片段或其他视频流
复制代码

HTML5 表单相关元素和属性

input新增type类型

color	用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域

time	生成一个时间选择器

datetime	生成一个 UTC 的日期时间选择器

datetime-local	生成一个本地化的日期时间选择器

date	显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。

month	生成一个月份选择器，它结果值包括年份和月份， 但不包括日期

week	生成一个选择的几周的选择器

email	生成一个 E-mail 输入框

number	生成一个只能输入数字的输入框

range	生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值

search	生成一个专门用于输入搜索关键字的文本框

tel	生成一个只能输入电话号码的文本框

url	生成一个 URL 输入框

HTML5 input新增属性

placeholder	主要用在文本框，规定可描述输入字段预期值的简短的提示信息

autocomplete	为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择

autofocus	当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点

list	为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择

pattern	用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效

novalidate	当提交表单时不对其进行验证

required	必需在提交之前填写输入字段

spellcheck	拼写检查，为<input>、<textarea>等元素新增属性

formenctype	规定在发送到服务器之前应该如何对表单数据进行编码

formtarget	带有两个提交按钮的表单，会提交到不同的目标窗口

multiple	一次上传多个文件

maxlength wrap	<textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）

css3

CSS3 新增选择器

兄弟选择器

元素 1 ~ 元素 2 第1个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。

属性选择器

E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
E[attribute$=value] 用于选取属性值以指定值结尾的元素
E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词

伪类选择器

:root 选择文档的根元素，HTML 里，永远是<html>元素
:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子元素
:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元素
:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个元素
:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元素
:nth-last-of-type(n) 向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty 向没有子元素（包括文本内容）的元素添加样式

伪元素选择器

:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:checked 向当前处于选中状态的元素添加样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式
::selection 向用户当前选取内容所在的元素添加样式

CSS3 新增属性

新增背景属性

background-clip 设置背景覆盖范围 border-box/paddingbox/content-box
background-origin 设置背景覆盖的起点 border-box/paddingbox/content-box
background-size 设置背景的大小 cover/contain/长度/百分比

新增的字体文本相关属性

text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis
word-wrap 规定单词的换行方式 normal/break-word
word-break 规定自动换行的方式 normal/break-all/keep-all

新增盒模型属性

box-shadow 阴影 h-shadow v-shadow <br />blur spread color inset
resize 调整尺寸 none/both/horizontal
outline-offset 轮廓的偏移量 length/inherit

新增变形动画属性

transform

translate(x,y)
rotate(angle)
scale(x,y)
skew(angleX ,angleY)

transform-origin

表示元素旋转的中心点，默认值为 50% 50%。

第一个值表示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比
第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。

3D 变形属性

transform 3D函数

transform 增加了三个变形函数：

rotateX：表示元素沿着 x 轴旋转。
rotateY：表示元素沿着 y 轴旋转。
rotateZ：表示元素沿着 z 轴旋转。

transform-style用来设置嵌套的子元素在 3D 空间中显示效果。
perspective设置成透视效果，透视效果为近大远小。
perspective-origin设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同 transform-origin，默认值为 50% 50%。
backface-visibility用来设置当元素背面面向屏幕时是否可见，通常用于设置不希望用户看到旋转元素的背面。