前端总结

最新推荐文章于 2023-06-24 22:26:25 发布

MannMann

最新推荐文章于 2023-06-24 22:26:25 发布

阅读量340

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/MannMann/article/details/114172196

版权

1.html

1.<!DOCTYPE html> 表示文档类型是html

2.<a> 定义超链接

href 链接地址

target:规定在何处打开链接文档。

_blank

_parent

_self

_top

framename

3.<button> 按钮

type：规定按钮的类型。

button

reset

submit

按钮的类型决定了按钮的默认行为，为了程序可以更加的灵活，通常设置成type="button",

然后按钮的行为由程序决定。

4.<div> 块标签块标签相当于万能元素，块标签没有自己的特性，因此可以彻底的使用css ,js 来决定块标签的样式和内容。

5.<form> 表单元素，可以容纳表单项，input,label.

6.<iframe> 内联框架，网页内部可以嵌入网页。嵌入的网页彼此之间是独立的。

src 网页地址

width 宽度

height 高度

7.<input> 输入控件

type:

checkbox 复选框

file 文件

hidden 隐藏框

password 密码

radio 单选框

text 文本

value:值

placeholder:规定帮助用户填写输入字段的提示

readonly：规定输入字段为只读。

checked:选中（针对checkbox）

disabled:禁用

autofocus：规定输入字段在页面加载时是否获得焦点

accept：规定通过文件上传来提交的文件的类型。(针对file)

autocomplete:自动完成规定是否使用输入字段的自动完成功能

8.<li> 列表项

9.<option> 定义选择列表中的选项

10.<script>定义客户端脚本。

11.<select> 定义选择列表（下拉列表）

12.<span> 行内文本

13.<style> 定义文档的样式信息。

14.<table> 定义表格。

15.<tbody> 定义表格中的主体内容。

16.<td> 定义表格中的单元。

17.<textarea> 定义多行的文本输入控件

18.<th> 定义表格中的表头单元格。

19.<thead> 定义表格中的表头内容。

20.<video> 定义视频。

21.<img> 定义图片

总结：

跟输入有关的：form,input,select,option,textarea（5项）

跟表格有关的: table,thead,tbody,th,td(5项)

跟显示有关的：iframe(内部html)，div（块元素）,span(文本),script（脚本）,style(样式),video(视频),<img>(图片),li(列表项)(7项)

最常用的标签：input,select,div,span,button,table,script,style,link,html,title,meta,head,body

2.css

1.常用CSS属性

1.定位

display：规定元素应该生成的框的类型

float：规定框是否应该浮动

overflow：规定当内容溢出元素框时发生的事情

position：规定元素的定位类型

vertical-align：设置元素的垂直对齐方式

visibility：规定元素是否可见

z-index：设置元素的堆叠顺序

2.box-sizing

允许您以确切的方式定义适应某个区域的具体内容。

3.可伸缩框属性（Flexible Box）

box-align 规定如何对齐框的子元素。

box-direction 规定框的子元素的显示方向。

box-flex 规定框的子元素是否可伸缩。

box-flex-group 将可伸缩元素分配到柔性分组。

box-lines 规定当超出父元素框的空间时，是否换行显示。

box-ordinal-group 规定框的子元素的显示次序。

box-orient 规定框的子元素是否应水平或垂直排列。

box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。

4.尺寸

width height max-width max-height min-width min-height

5.内边距 padding

padidng-bottom,padidng-top,padidng-left,padidng-right

6.外边距 margin

margin-bottom,margin-top，margin-left,margin-right

7.边框 Border

border-bottom,border-top，border-left，border-right.

7.背景 background

background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。

background-color 设置或检索对象的背景颜色。

background-image 设置或检索对象的背景图像。

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

background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。

background-clip 指定对象的背景图像向外裁剪的区域。

background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。

background-size 检索或设置对象的背景图像的尺寸大小。

8.文本

color 设置文本的颜色。

line-height 设置行高

text-align 规定文本的水平对齐方式

word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

9.字体

font-family 规定文本的字体系列

font-size 规定文本的字体尺寸

font-weight 规定字体的粗细

2.兼容性

Chrome 浏览器私有属性以-webkit-开始。

Firefox 浏览器私有属性以-moz-开始。

IE浏览器私有属性以-ms-开始。

3.伪类和伪元素的使用

:hover

:focus

:before

:after

伪元素的使用：定义图标。

许多流行的图标框架使用了伪元素作为主要实现的技术。

比如FontAwesome。

首先定义了一个自定义的字体，

i元素是个空元素，

.fa 设置使用的字体

.fa-lock 设置:before 插入一个文字，这个文字是unicode,比如

.fa-lock:before {

content: "\f023";

}

因为使用了字体这样图标就是无线缩放的矢量图，

因为使用了伪元素，做一个插入图标的动作，所以可以不使用Javascript做效果，因此框架也不需要依赖Javascript

可以说，使用字体和使用伪元素使框架得到了最大的系统兼容性。

3.CSS 选择器

选择器很重要，Jquery 的选择器也是以CSS的选择器为标准。

div,p 逗号，表示所有的div和所有的p, div和p的并集。

div p 空格，div 内部所有的p元素，所有的意思是后代，也许P元素里还有p元素。

div>p 大于号，选择父元素为div的p元素。和div p相比，这里是div 的子元素中的p元素。

div+p 加号,div 后面紧跟的p元素

a:hover 经过a元素时

input:focus 获取获取焦点的input元素

p:before 在每个p元素之前插入内容

[name=p] [] 代表属性,属性name=p 的所有元素

4.弹性盒子

flex 适应多种尺寸的屏幕

CSS3 弹性盒子属性

display 指定 HTML 元素盒子类型。

flex-direction 指定了弹性容器中子元素的排列方式

justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。

5.常见问题分析

5.1 2个并排的div不能仅仅贴在一起的原因？

当两个inline-block元素在一起的时候，中间间隙：两个标签之间的换行符导致；

<div>

</div>

</div>

div元素的换行被浏览器解释成空格。

解决办法：

1.去除换行

2.设置浮动：把div都设置成float:left

5.2 2个并排的div顶部不能对齐的原因？

因为默认元素的垂直方向对齐是vertical-align:basline;

修改vertical-align: top;可以实现顶部对齐

修改vertical-align: middle;可以实现中间对齐

5.3 如何设置列表滚动效果？

</div><div style="display: inline-block;width: 200px;height: 200px;background-color: red;">

</div>

5.4 焦点图如何设计？

</div><div style="display: inline-block;width: 200px;height: 200px;background-color: red;">

</div><div style="display: inline-block;width: 200px;height: 200px;background-color: blue;">

</div><div style="display: inline-block;width: 200px;height: 200px;background-color: gray;">

</div>

0-200

200-400

400-0

0-200

setInterval(function(){

var width = 200;//单个图片宽度

var count = 4;//图片数量

var maxWidth = width*(count-1);//图片最大偏移位置

var ret = $("#dv").css('left');

var left = parseInt(ret)<0?-parseInt(ret):0;

if(left==maxWidth){

left=0;

}else{

left+=width;

}

left = left>0?(-left)+'px':'0px';

$("#dv").css('left',left);

},2000);

</script>

5.5.对齐问题

元素左右对齐

A元素含有B元素，

方法1：B设置 margin: 0 auto;

方法2：A设置 position: relative;B 设置position:absolute;left: 0;right: 0;

这里的对齐指的是B元素显示在A元素的水平中间。

文本左右对齐

文本设置 text-align: center;

这里的对齐指的的文本显示在父元素水平中间。

元素上下居中

A元素含有B元素，

A设置 position: relative;B 设置position:absolute;top: 0;top: 0;

并排元素对齐

A和B在一行上，高度不同，

设置A和B的vertical-align 属性即可。

并排元素对齐2

A和B在同一行，都设置了display:inline-block;高度一样，但是对不齐，

A和B高度不同对不齐还正常，但是明确设置相同的高度之后还是对不齐，就很奇怪了。

经过测试

A无内容，B无内容，AB不设置vertical-align也可以对齐。

A无内容，B有内容, AB不设置vertical-align就不对齐

A有内容，B无内容, AB不设置vertical-align就不对齐

A有内容，B有内容,而且内容行数相同， AB不设置vertical-align也对齐

A有内容，B有内容,而且内容行数不相同， AB不设置vertical-align就对齐

总之，为了保证并列的div可以对齐，使用vertical-align，不管AB是否有内容以及内容是否行数相同，都可以保证div对齐。

6.练习

61.首页设计 CSS练习1

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body{

margin: 0;

padding: 0;

}

.item:hover{

background-color: #545759;

}

</style>

</head>

<body>

<div >

<h4 style="text-align: center;">XX电子厂</h4>

</div>

<div>

<span style="margin-left: 30px;line-height: 30px;">我的工作台</span>

</div>

</div>

</div>

</div>

<div style="padding-left: 27px;height: 30px;line-height: 30px;" class="item">关于xx平台</div>

</div>

</div><div style="width: 85%;height:100%;background-color: #F6F6F6;display: inline-block;vertical-align: top;">

<div style="display: inline-block;font-size: 20px;border-right:1px solid #C7C7C7 ;padding-right: 20px;padding-top: 5px;">我的工作台</div>

</div>

<div>

筛选器

</div>

用户

</div>

</div><div style="box-sizing: border-box; width: 100%; background-color: #F7F7F7;padding: 10px;" id="content">

我负责的工作项目|我关注的工作项目

</div>

var topHeight = 50;

var height = $(window).height();

$("#root").height(height);

$("#top").height(topHeight);

$("#content").height(height-(topHeight+20));

</script>

</body>

</html>

效果图：

CSS练习2：

Index.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body{

margin: 0;

padding: 0;

}

ul{

list-style-type: none;

}

li{

cursor:pointer;

font-size: 14px;

height: 35px;

line-height: 35px;

}

.item:hover{

background-color: #3B86FF;

}

</style>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div><div id="content" style="display: inline-block;width:85%;height: 100%;background-color: white;vertical-align: top;">

</li>

</ul>

</div>

</div>

var height = $(window).height();

var topHeight = 50;

$("#root").height(height);

$("#top").height(topHeight);

$("#bottom").height(height-topHeight);

$("li").click(function(event){

var count = $(this).children('ul').length;

if(count==0){

alert('跳转链接'+$(this).html());

}else{

var ul = $($(this).children('ul').get(0));

var display = ul.css('display')=='none'?'block':'none';

//所有后代的display都要设置

ul.find('ul').each(function(index,elem){

if(display=='none'){

$(elem).css('display','none');

}

});

if(display=='block'){

ul.children('li').each(function(index,elem){

$(elem).addClass('open').removeClass('close');

});

}else{

ul.find('li').each(function(index,elem){

$(elem).addClass('close').removeClass('open');

});

}

ul.css('display',display);

var top = ul.parents('.topli');

var topHeight = 35*(1+top.find('li.open').length);

top.css('height',topHeight);

}

//防止事件冒泡

event.stopPropagation();

return false;

});

var itemHeight = 35;

</script>

</body>

</html>

Test.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</script>

</body>

</html>

效果图2：

3.js

1.基本语法(ECMA)

1.原型

Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象（原型链上面的）

原型可以干什么？

String.prototype.format = function () {

if (this == null || this=='') {

return this;

}

if (arguments == undefined || arguments == null || arguments.length < 1) {

return this;

}

var str = this;

for (var i = 0; i < arguments.length; i++) {

str = str.replace("{"+i+"}", arguments[i]);

}

return str;

}

var str = 'MyName is {0}';

var ret = str.format('小明');

console.log(ret);

原型类似于c#的扩展方法

2.函数参数

JS 时脚本语言，参数的传入非常灵活，可以传入数量不限，类型不同的参数。

而且在定义的时候可以不声明。

arguments 代表一个函数的内部的参数数组，传入的参数都会进入

这个数组，这个数组不为空，则arguments就有参数。

参数的类型不限，可以是简单数据，比如数字，可以是引用类型，比如object,

也可以是一个函数。

function test(){

var ret = '';

if(arguments.length>0){

ret = 'My Name is '+arguments[0];

}

return ret;

}

var ret = test('小明');

console.log(ret);

3.字符串函数

在任何大多数编程语言中，字符串函数都是有的。

length

charAt()

concat()

indexOf()

lastIndexOf()

match()

replace()

slice()

split()

substr()

substring()

console.log('aa'.length);//2 字符串的长度

console.log('abcde'.charAt('2'));//c 返回在指定位置的字符。

console.log('aa'.concat('bb'));//aabb 连接字符串。

console.log('my name is test'.indexOf('is'));//8 检索字符串。

console.log('name:test, year:2019 '.match(/[0-9]/g));//['2','0','1','9'] 返回匹配的字符串

console.log('name:test'.replace('name','Name')); //Name:test 替换与正则表达式匹配的子串。

console.log('name:test'.search('t'));//5 检索与正则表达式相匹配的值。

console.log('name:test'.slice(2,4));//me 提取字符串的片断，并在新的字符串中返回被提取的部分

console.log('name:test'.split(':'));//['name','test'] 把字符串分割为字符串数组

console.log('name:test'.substr(2,4));//me:t 从起始索引号提取字符串中指定数目的字符

console.log('name:test'.substring(2,4));//me 提取字符串中两个指定的索引号之间的字符

console.log('TEST:Tom'.toLowerCase());//test:tom 把字符串转换为小写。

console.log('TEST:Tom'.toUpperCase());//TEST:TOM 把字符串转换为大写

4.日期函数

年，月，日，时，分，秒

getFullYear()

getMonth()

getDate()

getHours()

getMinutes()

getSeconds()

5.回调函数

从表现上看，回调函数类似于c#的委托。

function OpenPage(pam,close){

if(typeof close =='function'){

close(pam);

}

OpenPage('小明',function(){

if(arguments.length>0){

console.log('My Name is '+arguments[0]);

}

});

//My Name is 小明

在c# 中还需要定义委托类，但是在js中万物皆对象，可以传入匿名函数。

6.undefined null

undefined 表示未定义的变量

function test(name){

if(name==undefined){

console.log('not defined');

}else{

console.log(name);

}

test();//not defined

null 表示对象是空的

console.log(null === undefined); //false

console.log(null == undefined); //true

console.log(typeof null ,typeof undefined); //object undefined

null 是对象类型的值，但是undefined 竟然是一种数据类型，因为和null就有点重叠了。

null 和 undefined 严格起来不相等，但是因为数据类型不同，但是数据类型转换之后是相等的。

2.bom 浏览器对象

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

属性：

parent 父窗口

document html 文档对象

方法：

open() 打开一个新的浏览器窗口或查找一个已命名的窗口

close() 关闭浏览器窗口。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

3.dom html 文档对象

element 元素

nodelist 元素集合

元素集合是一个数组，因此有length属性，元素没有length属性。

1.获取元素

getElementsByClassName() 返回元素集合

getElementById()返回元素

getElementsByName()返回元素集合

getElementsByTagName()返回元素集合

2.元素属性

var ret = document.getElementById('test');

console.log(ret.childNodes);//元素子节点

console.log(ret.clientWidth);//元素宽度

console.log(ret.clientHeight);//元素高度

console.log(ret.id);//元素Id

console.log(ret.className);//元素类属性

console.log(ret.tagName);//元素标签名称

console.log(ret.innerHTML);//元素html 内容

console.log(ret.offsetLeft);//元素水平偏移位置

console.log(ret.offsetTop);//元素垂直偏移位置

2.元素方法

var ret = document.getElementById('test');

console.log(ret.getAttribute('id'));//获取属性值

appendChild() 增加一个子节点

总结：js 提供了编程语言的基本语法，对dom的操作和对bom的操作。

4.jquery

4.1选择器

基于CSS 的选择器

4.2操作DOM

1.节点操作

append() 增加节点

remove() 删除节点

empty() 清空节点

children() 获取匹配的子元素

next() 获取下一个邻居元素

prev() 获取前一个邻居元素

siblings() 获取所有邻居元素

parent() 获取父级元素

parents() 获取祖先元素

find() 匹配的元素

3.属性操作

attr() 获取属性-文档属性

removeAttr() 删除属性

prop() 设置属性-对象属性

4.样式操作

addClass() 增加样式

removeClass() 删除样式

toggleClass() 切换样式

hasClass() 判断样式是否存在

5.其他操作

html() 获取html内容

text() 获取文本内容

val() 获取值内容

css() 设置style样式

height() 获取元素实际高度

width() 获取元素实际宽度

position() 获取元素相对于父元素的偏移值

offset() 元素相对于文档的偏移

scrollTop() 获取元素滚动条距离顶端的距离

scrollLeft() 获取元素滚动条距离左端的距离

get() 获取对应的dom元素

data() 获取data-x 的数据

each() 对元素进行迭代循环

hide() 隐藏元素

show() 显示元素

4.3事件绑定

click 点击事件

change 改变事件

blur 失去焦点事件

focus 得到焦点事件

keydown 按键按下事件

jq1.9之后

on(event,[selector],[data],fn)

on 可以实现对动态添加的元素绑定事件

总结：jq有三把大刀，选择器，封装dom,和事件绑定，实现网页动态效果简单粗暴。

5.layui

1.主要元素（侧重于样式）

1.栅格

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

height: 30px;

}

.bgred{

background-color: red;

}

.bgblue{

background-color: blue;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</script>

</body>

</html>

结构：

Lauyui-row>layui-col-md-x

2.表单

</div>

</div>

</div>

</select>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

//Demo

layui.use('form', function(){

var form = layui.form;

//监听提交

form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field));

return false;

});

</script>

结构：

Layui-form

Layui-form-item

Layui-form-label

Layui-form-block

Input

select

textarea

layui-form 是必要的，因为这涉及到表单渲染。

这里注意input[type=text]和textarea 都额外加了样式修饰，layui-input,layui-textarea

但是input[type=checkbox],input[type=radio],select 没有加额外的修饰，也具有一定的样式。

可能是form模块渲染的时候，对input做了一定的处理。

这里说明的是不同表单元素处理的不同，有些只有依靠class,有些完全依赖JS.

3.表格

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

使用了layui-table样式，具有表格的基本样式。

当然表格/表单还有许多功能。

4.选项卡

</ul>

</div>

//注意：选项卡依赖 element 模块，否则无法进行功能性操作

layui.use('element', function(){

var element = layui.element;

//…

});

</script>

结构：

Layui-tab

Layui-title

Layui-content

Layui-tab-item

layui-tab-brief 设置简洁样式

2.模块（侧重于功能）

1.layer 弹窗组件

2.form 表单组件

3.table 表格组件

3.问题集锦

1.修改表单项select的值而引发的问题

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</style>

</head>

<body>

</select>

</div>

layui.use('form',function(){

var form = layui.form;

});

$("#test").click(function(){

$("#select").val('2');

layui.use('form',function(){

var form = layui.form;

form.render();

alert($("#select").val());

});

</script>

</body>

</html>

思路：

开始我设置val(2) ，但是设置之后再使用val() 取值结果却是是2，但是界面并没有变化。

于是我有了其他思路，改变空间的内部结构。

</select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="测试1" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="1" class="layui-this">测试1</dd><dd lay-value="2" class="">测试2</dd><dd lay-value="3" class="">测试3</dd></dl></div>

</div>

Select 被隐藏了，显示在界面的是input元素,改变input元素的值为测试2.

这个思路也可以解决，但是总是感觉方法不对。

后来在设置val() 后面加上了，form.render() 就可以了。

仔细都下面这段话，我发现了问题。

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif）但没有关系，你只需要执行 form.render(type, filter); 方法即可。

可以想象，渲染的时候产生了其他的元素，因此当元素变化了，比如select的option数量变化了，选择也变化了，要想实现界面的正确渲染，就是手动执行render()方法，这样界面就正常了。