首页  思维导图  详情

前端基础知识整理

2018-10-29 17:36:36   0  举报





AI智能生成

前端基础,新手必看

前端基础整理

作者其他创作

大纲/内容

HTML4

html标签

head标签

title标签 : 显示网站的标题

meta标签 : 提供有关页面的原信息

style标签 : 定义内部样式表

link标签 : 链接css资源文件,网站图标

script标签 : 链接脚本 js 文件

body标签

h1~h6标题标签

p段落标签

只能放文字,图片 ,表单元素

ul无序列表标签

ol有序列表标签

div盒子标签

table表格标签

th 定义表头

tr 定义表行

td 定义表单元格数据

form表单标签

action

定义表单被提交时发生的动作
提交给服务器处理程序的地址

method

作用 : 定义表单提交数据时的方式

取值

get

默认值,明文提交,所提交的数据可以显示在地址上,安全性低

提交数据有大小限制,最大为2KB

post

隐式提交-所提交的内容不会显示到地址栏上,安全性高

无大小限制

enctype

编码类型,即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器

取值 :
1 . application/x-www-form-urlencoded
默认, 允许将普通字符,特殊字符,都提交给服务器,不允许提交文件.

2 . multipart/form-data,允许将文件提交给服务器

3 . text/plain,只允许提交普通字符,特殊字符,文件等都无法提交

注意 : 如果有文件需要提交给服务器,method必须为POST,enctype必须为multipart/form-data

表单控件分类

textarea文本域

作用 : 允许用户录入多行数据到表单控件中

属性

cols 指定文本区域的列数,变相设置当前元素宽度

rows 指定文本区域的行数,变相设置当前元素的高度

select和option选项框

select属性

size 取值大于1 滚动列表
取值小于1 下拉框选项

multiple 设置多选,该属性出现在<select>中,
那么久允许多选(针对滚动列表)

option属性

value 选项的值

selected 预选中
注意 : 如果不设置selected属性的话,那么选框中的第一项会默认被选中

input组元素

type

button

普通按钮,和form表单没有关系

text 明文显示油耗输入的数据

password 密文显示用户输入的数据

radio 单选按钮 , checkbox 复选框

checked 设置值后被选中

submit 功能固定化,负责将表中的表单控件提交给服务端

file 上传文件所用

value 控件的值即要提交给服务器的数据

name 控件的名称,服务端用

disabled 该属性只要出现在标签中,表示的是禁用该控件

lable 功能 : 关联文本域表单元素的,点击文本时,如同点击表单元素一样

for 属性,表示与该labe 相关联的表单控件元素的ID值

img标签

br 换行标签,hr 分割标签

&nbsp :空格字符

a 超链接标签

span 标签

button 按钮

行内标签

特点

1.在一行内显示

2.不能设置宽高,默认是内容的宽高

span , a, i , em ,strong ,b , label

行内块属于行内标签

特点

1.在一行内显示

2.可以设置宽高

img , input

行内标签只能放文字,图片,表单元素

块级标签

特点

1.独占一行

2.可以设置宽高,如果不设置宽高,那么是父级的100%宽高

h1~h6 ,div, ul ,li ol ,dt , dl , form , table

可以放任何东西

p标签是特殊的块级标签,里面只能放文字,图片,表单元素

定义:超文本标记语言

标准文档流

文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

CSS

css 引入方式

内嵌式 <h1 style="font-size: 10px;color: yellow">帅帅</h1>

内联式
<style type="text/css">
h1{
font-size: 30px;
color: red;
}
</style>

外链式 <link rel="stylesheet" type="text/css" href="./css/index.css">

导入式 @import url("./css/index.css");

选择器

基础选择器

* 通配符选择器

匹配所有的标签
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

# warp id选择器

匹配以唯一标识符id属性等于wrap的对象作为选择符，唯一的只有一个

div 标签选择器

匹配div标签的选择器

. 类选择器

以class属性包含myclass的E对象作为选择符
不同于ID选择符的唯一性，类选择符可以同时定义多个

高级选择器

ul>li 子代选择器

只能命中子元素,不能命中子孙辈元素

ul a 后代选择器

选择符将会命中所有符合条件的后代,包括儿子,孙子,重孙子....

li+a 相邻选择器

选择紧贴在li元素之后a元素

li a 兄弟选择器

选择li元素后面的所有兄弟元素a

伪类选择器

E:link

设置超链接a在未被访问前的样式

E:visited

设置超链接a在其连接地址已被访问过时的样式

E:hover

设置元素在其鼠标悬停时的样式

E:active

设置元素在被用户激活(鼠标点击与释放之间发生的事情)时的样式

E:focus

设置元素在成为输入焦点(该元素的 onfocus 事件发生)时的样式

属性选择器

E[att]

选择具有att属性的E元素

E[att="val"]

选择具有att属性且属性值等于 val 的E元素

E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素

E[att$="val"]

选择att属性且属性值为以val结尾的字符串的E元素

E[att*="val"]

选择具有att属性且属性值为包含val的字符串的E元素

伪元素选择器

E:before

设置对象前(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性

E:after

设置在对象后(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性

选择器的权重

行内样式1000>ID选择器100>类选择器10>标签选择器1

字体 font

font-size

指定文本字体大小

font-style

指定文本的样式

normal

正常字体

italic

斜体字体

oblique

倾斜字体

font-weight

指定文本字体的粗细

normal

正常的字体,相当于数字值400

bold

粗体,相当于数字值700

bolder

定义比bold更重的值

lighter

定义比normal更轻的值

用数字表示文本字体粗细.取值范围: 100|200|300|400|500|600|700|800|900

font-family

指定文本使用某个字体

颜色 color

Color Name

16个基础颜色关键字

红 red

黄 yellow

蓝 blue

黑 black

绿 green

......

扩展颜色关键字

十六进制

#RRGGBB或#RGB

RGB

RGB(R,G,B)

RGB记法

以上三个参数,正整数值得取值范围为 : 0~255. 百分数值得取值范围为:0.0%~100.0%

超出范围的数值将被截至其最接近的取值极限,如 : rgb(300,0,0)会被解析为rgb(255,0,0)

正整树值255对应百分比数值100%,如 : rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF

RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的

RGBA

文本 text

text-align

left 内容左对齐

center 内容居中对齐

right 内容右对齐

justify 内容两端对齐

text-index 文本的缩进

text-decoration

none 文字无装饰

underline 下划线

overline 上划线

line-through 删除线

line-height

指定文本字体的行高,字体最底端与字体内部顶端之间的距离,设置行高=盒子的高度,是文本垂直居中

背景 background

background

none 无背景图

background-image: url(./1.jpg)

background-position

设置或检索对象的背景图像位置,必须先指定background-image属性

background-repeat

repeat

背景图像在横向和纵向平铺默认

repeat-x

背景图像横向平铺

repeat-y

背景图像纵向平铺

no-repeat

背景图像不平铺

background-attachment

scroll

背景图像相对于元素固定,也就是说当元素内容滚动的时候背景图像不会跟着滚动
因为背景图像总是要跟着元素本身.但会随元素的祖先元素或窗体一起滚动

fixed

背景图像相对于窗体固定

background-color

transparent 默认透明

盒模型 *****

width

盒子内容的宽度

height

盒子内容的高度

border 边框

border-width

使用说明: 分别设置四个边框宽度

如果提供全部四个参数值: 分别是上,右,下,左的顺序作用于四边(顺时针方向)

如果只提供一个,将作用于全部的四边

如果提供两个,第一个作用于上,下, 第二个作用于左右

如果提供三个 : 第一个作用于上; 第二个作用于左右 ; 第三个作用于下

border-style

none 默认无轮廓

dotted 点状轮廓

dashed 虚线轮廓

solid 实现轮廓

double 双线轮廓

用法:于border-width 一样

border-color

用法与 border-width一样

border-left

border-left-width

border-left-style

border-left-color

border-left: 1px solid red

border-right

border-right-width

border-right-style

border-right-color

border-right: 1px solid yellow

border-bottom

与border-left 和 border-right 用法相似

border-top

与border-left和border-right用法雷同

border-radius

常用

border-radius:50% 园

border-radius:

border-shadow

用法 : border: 2px solid red 解释 : 设置四个边的边框宽度为2px,边框为实线,边框颜色为红色

padding 内边距

内容区域(content)到边框(border)的距离 (父子之间)

内边距会扩大元素所在的区域

一些padding的属性和border类似

margin 内边距

外边距四个方向值 (兄弟之间)

注意 : 外边距合并的情况

1 . 外边距合并只会发生在上下两个方向上,并且只有块级元素

2 . 当两个垂直外边距相遇时,会形成一个外边距,称为外边距合并
所有毗邻的两个或者更多盒元素的margin将会合并为一个margin共享之.
毗邻的定义 : 同级或者嵌套的盒元素,并且他们之间没有非空内容,padding或border分隔

3 . 父子嵌套设置垂直外边距之后,会形成外边距合并,影响页面布局

解决方法 :

1.父级或子元素使用浮动或者绝对定位absolute

2.父级 overflow:hidden;

3.父级设置padding(破坏空白折叠现象)

4.父级设置border

浮动 ******

浮动效果

float: left

左浮动左边为起始,从左往右一次排列

float: right

右浮动右侧为起始。从右往左依次排列

float: none

默认,不浮动

文档流的概念：可见元素在文档中的显示位置

浮动产生的效果

浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止

浮动特性

1.浮动可以是元素脱离标准文档流,不占位置

2.浮动会使元素提升层级,不建议

3.浮动可以使块级元素在一行排列,不设置宽高的时候,可以使元素适应内容

4.浮动可以使行内元素支持宽高

浮动可以是元素脱离文档流，它可以是元素并排显示，1.有贴边现象 2.有收缩现象（块元素转换成行内元素）3.只要盒子浮动了不区分行内还是块级标签，可以任意的设置宽高。但是大家记住，要浮动一起浮动，要不一起不浮动

浮动产生的问题

在页面布局中，一般情况父元素的高度是不设置的，通过子元素来填充它的高度。
但是子元素设置浮动之后，不会撑开父元素的高度。因为子元素不占位置

浮动解决方案

1.给父盒子设置固定高度

缺点:不灵活

2.给浮动元素最后一个子元素后面添加一个空的块级元素，且该元素不浮动，设置clear:both

缺点：结构冗余，无缘无故添加了一个块级元素

3.官方写法：建议大家这样去写给父盒子设置： .clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}

4.给父元素添加overflow:hidden 推荐使用

定位 ******

static

默认没有定位

relative

相对定位:相对于自身进行定位

1.不设置偏移量的时候,对元素没有任何影响

2.可以提升层级关系

3.微调元素

absolute

绝对定位

1.无父级元素定位时,以浏览器的左上角为基准

2.有父元素的情况下,父元素设置相对定位,子元素设置绝对定位,是以父盒子为基准进行定位

这就是"父相子绝"

1.提高层级

2.脱离标准流

fixed

固定定位:设置固定定位之后,当前元素不会发生改变,可以做小广告

页面布局小技巧：通常情况下，浮动和定位要结合去用，大家也能看出来，一般盒子的排列，要横排盒子了我们用浮动，调成盒子中小元素的位置偏移量我们尽量用定位

z-index *****

1.z-index属性设置元素的堆叠顺序(层级关系)，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

2.对于同级元素，默认或position:static情况下文档流后面的元素会覆盖前面的

3.对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，及z-index越大优先级越高

4.记得从父原则

所谓从父元素子级的永远大于父级的

display ******

定义 : 层叠样式表,修饰 html 结构,
作用 : 让结构好看

Javascript

基础语法

var 声明变量

测试语句

console.log(变量名)

控制台输出内容,测试

alert(变量名)

弹出框测试

数据类型

基本数据类型

number

var a = 123;
// typeod 检查当前变量是什么数据类型
console.log(typeof a)
//特殊情况
var a1 = 5/0;
console.log(typeof a1)
// lnfinity 无限大 ,number类型

string

var str = "123";
console.log(typeof str)

字符串拼接使用 +

boolean

var b1 = false;
console.log(typeof b1)

null

var c1 = null;
// 空对象 ,object
console.log(c1)

undefined

var d1;
// 表示变量未定义
console.log(typeof d1)

引用数据类型

Function

Object

Array

Data

运算符

赋值运算符

算数运算符

比较运算符

等于比较的是值

===

等同于比较值和类型均相等

!==

<,>,>=,<=

数据类型转换

将数值类型转化成字符串类型

var n1 = 123;
var n2 = "123";
var n3 = n1+n2;
//隐式转换
console.log(typeof n3);

//强制类型转换
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString());

字符串类型转换成数值类型

var stringNum = "123.123wskdi";
var num = Number(stringNum);

//parseInt()可以解析一个字符串,并且返回一个整数
console.log(parseInt(stringNum));
console.log(parseFloat(stringNum));

任何类型都可以转化成为boolean类型

var b1 = "123"; //true
var b2 = 0; //false
var b3 = -123; //true

var b4 = Infinity; //true
var b5 = NaN; //false

var b6; //false
var b7 = null; //false

//非0即真
console.log(Boolean(b7))

流程控制

if-else

逻辑与&& 逻辑或||

switch

while

do-while

for

常用内置对象

数组Array

concat()

把几个数组合并成一个数组

join()