自我总结（前端开发）

致力于学习前端

已于 2022-02-17 10:28:49 修改

阅读量1k

点赞数 3

分类专栏：前端开发学习文章标签： javascript css html html5 jquery

于 2020-05-22 22:06:31 首次发布

本文链接：https://blog.csdn.net/qq_44657834/article/details/106291596

版权

前端开发学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

学习就是形成自己的知识体系，而总结是形成个人对知识理解的不可或缺的方法。

还有重要的遗忘曲线：

一、关于HTML总结（定义了网页的内容）

1.命名：

定义文档的主体：<body>

标题：<title>

定义元素的位移id：<id>

id属性只能单独设置id=” ”（只能填写一个，多个无效）

为html元素定义一个或多个类名（classname）：<class>

class属性可以多用class=” ”（引号里面可以填入多个class）

规定元素的行内样式：<style>

标签：<label>

搜索：<search>

搜索框：<searchBox>

标签页：<tab>

定义段落：<p>

定义客户端脚本：<script>

定义文档中的节：<div>

定义html文档：<html>

定义html标题：<h1>to<h6>

定义一个按钮：<button>

定义文档中的节：<span>

定义居中文本：<center>

定义图像：<img>

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

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

定义文档的样式信息：<style>

定义html的表单：<form>

定义关于文档的信息：<head>

定义文本背景：<background>

定义文本对齐方式：<text-align:left>或<text-algin:right>

左右中：left right center

举实例有：

单选（或多选）按钮：

创建提交按钮：

页面结构：

容器：container

页头：header

内容：content/container

左右中：left right center

导航：nav

功能：

标题：title

状态：status

按钮：button

图标：icon

搜索：search

友情链接：link

2.行内元素与块级元素

1）行内元素（display:line）

和其他元素都在一行上，高和行高以及外边距和内边距大小不变，宽度就是它的文字或图片的宽度，不可改变，内联元素只能容纳文本或者其他内联元素

常见的行内元素

a -- 锚点

br -- 换行

Font -- 字体设定

Img -- 图片

Input -- 输入框

Label -- 表格标签

Select -- 选择

Small -- 小字体文本

Span -- 常用内联容器

Sub -- 下标

Sup -- 上标

Textarea -- 多行文本输入框

2）块级元素（dispaly:block）

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。

常见的块级元素：

div -- 目录列表，也是CSS Layout的主要标签

H1 -- 大标题

H2 -- 副标题

H3 -- 3级标题

H4 -- 4级标题

H5 -- 5级标题

H6 -- 6级标题

P -- 段落

二、CSS（定义了网页的布局）

1.选择器（几种常见的）

2.颜色（几种主要颜色）

3.属性

设置背景颜色：background-color

设置所有填充属性：padding

设置元素高度：height

设置元素的宽度：width

设置所有字体属性：font

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

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

规定文体的字体样式：font-style

规定字体的粗细：font-weight

与：before以及：after伪元素配合使用，来插入生成内容：content

设置外边距属性：margin

规定框是否浮动：float

设置定位元素下边距边界与其包含块下边界之间的偏移：bottom

规定元素的定位类型：position

设置定位元素左外边距边界与其包含块左边界之间的偏移：left

设置定位元素右外边距边界与其包含块右边界之间的偏移：right

设置定位元素的上外边距边界与其包含块上边界之间的偏移：top

设置文本的颜色：color

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

三、JavaScript（定义了网页的行为）

1.用法：

操纵html元素：

如需从JavaScript访问某个html元素，你可以使用 document.getElementById(id) 方法

使用id属性来表示html元素，例如：

!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

2.语法：

字符串（String）字面量可以使用单引号或双引号，例如：

"John Doe"
'John Doe'

数组（Array）字面量定义一个数组，例如：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量定义一个对象，例如：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量定义一个函数，例如：

function myFunction(a, b) { return a * b;}

变量：

JavaScript中使用关键字var来定义变量

数据类型：

数字，字符串，数组，对象等等

函数：

函数可以重复引用，function用于定义一个函数

字母大小写：

JavaScript对字母大小写是敏感的，区分大小写

3.JavaScript JSON

四、jQuery

1.选择器

jQuery 中所有选择器都以美元符号开头：$()

2.语法：

3.文件就绪事件（函数）

$(function(){ // 开始写 jQuery 代码... });

4.jQuery操作CSS

五、jQuery组件（具体例子网站查询）

1）基础组件：

（1）九宫格 weui_grids

weui_grid	是一个一个的宫格
weui_grid_icon	一个宫格的图标
weui_grid_label	图标下面的字

（2）页面底部的导航 weui_tabbar

通过点击按钮切换页面的主体内容,一般嵌套在weui_tab内

自动切换

在正确的HTML结构前提下，给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。但是请自行确保初始状态的一致。

（3）按钮 weui-btn

按钮可以使用 a 或者 button 标签。

按钮常见的操作场景：确定、取消、警示，分别对应class：weui-btn_primary、weui-btn_default、weui-btn_warn，每种场景都有自己的置灰态 weui-btn_disabled，除此外还有一种镂空按钮 weui-btn_plain-xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：

.weui-btn_loading 可以使按钮变为loading状态

（4）列表 weui-cells

cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成

效果如下：

带链接的列表：

只有weui-cell__bd和weui-cell__ft，没有weui-cell__hd。另外，整个weui-cell_**被标签a包围

效果如下：

单选列表/复选列表

weui-cells_radio	单选列表
weui-cells_checkbox	复选列表
weui-icon-checked	列表项默认选中
weui-check	一个列表项
weui-cell_link	文字显示为链接状态

（5）滑动删除（ swipeout ） weui-cell_swiped

Swipeout 可以在列表的某一项中向左滑动出现操作按钮，类似微信聊天列表中的滑动功能。

默认情况下，当页面加载完成后，会自动初始化带有 .weui-cell_swiped 类的列表条目，此时不需要做任何手动初始化。

如果你是动态生成的DOM，或者在JS加载之后的DOM，那么这样初始化:

$('.weui-cell_swiped').swipeout()

你可以手动调用方法来打开或者关闭

$('.weui-cell__swiped').swipeout('open') //打开

$('.weui-cell__swiped').swipeout('close') //关闭

（6）表单 weui-cells__form

表单是基于列表的布局实现的.包括很多常用的表单控件：

weui-select	下拉列表
weui-agree__checkbox	同意条款的小方框
weui-btn-area	weui-btn-area { margin: 1.17647059em 15px .3em;}内部用来放置按钮
weui-btn	提交按钮样式

（7）文件上传：

目前文件上传仅有CSS样式，并没有对应的JS插件。

（8）ActionSheet

用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。

ActionSheet 只能通过 JavaScript 进行调用:

通过 $.actions(params) 方法打开 ActionSheet。可用参数如下：

参数名	说明
actions	菜单项，关于每一个菜单项的配置请参见下文
title	可以给弹层设置一个标题，如果不设置则不会显示标题
onClose	关闭弹层的回调函数

actions 参数是一个数组，数组中的每一项都是一个菜单。

对每一个菜单的可用配置如下:

参数名	说明
text	菜单显示的文案
className	菜单上额外追加的class
onClick	点击之后的回调函数

（9）导航栏

因为微信本身就有一个顶部的标题栏，所以这个导航栏其实是在标题栏之下的二级导航栏，因此它实际上就是一个放在页面顶部的 tabbar 而已。

自动切换

在正确的HTML结构前提下，给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。

初识状态显示的标签，需要自行添加 .weui-bar__item--on 和 .weui-tab__bd-item--active.

weui-navbar	放置选项卡
weui-navbar__item	选项卡样式
weui-bar__item--on	默认active 的选项卡
weui-tab__bd-item--active	默认active的页面
weui-tab__bd-item	放置页面内容

2）拓展组件

（1）Picker

picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。

picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层

picker 会自动读取 input 的value作为初始值。对于有多个cols的情况，可能初始值无法正确解析，因为picker并不知道该如何进行分割。默认的规则是：多列模式下，会把input中的值以空格分隔作为每一列的值。如果你有多列并且不是以空格分隔的，那么你需要自己通过参数传入这个初始值，而不能通过 input 元素的 value属性设置。

关闭picker

在任何元素上加上一个 .close-picker 类，点击它就会关闭 Picker。

你也可以通过调用 $.closePicker() 或者 $("#input").picker("close")来关闭当前弹出的 Picker。

Picker参数

参数名	默认值	说明
title	"请选择"	Picker 的标题
toolbarCloseText	完成	关闭按钮的文案
toolbarTemplate	请参见源码	工具栏的模板，可以自己定义。
value		Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set.
rotateEffect	false	是否启用3D效果，启用3D可能会影响性能
toolbar	true	是否显示工具栏
inputReadOnly	true	是否会在input上添加一个 readonly 属性
cssClass	undefined	为 picker 容器增加额外的类，可以用来自定义样式
onChange	undefined	当选择值改变的时候触发
onClose	undefined	当picker被关闭时触发

（2）地址选择器

地址选择器是一个定制的picker，所以其用法和picker是一样的

地址选择器需要引入额外的js文件

参数

参数名	默认值	说明
showDistrict	true	是否显示地区

当参数值设置为false时，只能选择省市

（3）Select

Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件，只能通过JS方法来调用.

当增加一个mulit:true参数时，可以设置为多选

关于select的参数

参数名	默认值	说明
input	undefined	输入框的初始值，如果设置了这个值，那么他会覆盖 input 本身的 value 值。从 V0.7.0 开始支持此配置。
autoClose	true	自动关闭，只有在单选模式下才可用，选择完成之后自动关闭弹窗
closeText	"关闭"	关闭按钮的文案
multi	false	是否多选
max	undefined	多选模式下，最多可选个数, V0.7.2
min	undefined	多选模式下，最少可选个数, V0.7.2
split	","	分隔符
title	"请选择"	弹窗的标题
onChange	undefined	用户选择之后的回调，注意从 V0.6.1 版本之后才支持。你也可以在 input 上监听 `change` 事件。
onOpen	undefined	弹层打开之后执行此回调函数。 V0.7.0 开始支持此配置
onClose	undefined	弹层关闭之后执行此回调函数。 V0.7.0 开始支持此配置
beforeClose	undefined	弹层关闭之前执行此回调函数，如果返回 false 则可以阻止关闭。 V0.7.2

（4）Popup

Popup 是一个覆盖式的弹出层，可以完全盖住当前页面。（默认）

可以设置一个链接，当点击这个链接就会打开这个模板，例如：

<a href="javascript:;" class="open-popup" data-target="">About</a>

其中 class='open-popup' 和 data-target="" 两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器

当然，也可以通过调用js方法打开：

$("#about").popup();

还有一个种是非全屏模式，在容器上增加以个类popup-bottom即可

关闭popup

给任何链接加上class='close-popup' 则点击之后就可以关闭当前打开的popup,你也可以通过 $.closePopup() 来关闭。

前端开发的一般流程

交与设计审核，过后交给开发人员，进行动态数据的添加。添加完之后，发布测试环境，产品测试领导审核，成功后，直接发布产品环境。或进行版本迭代。这是整个的一个设计，开发，部署的流程。

进行需求分析，画出用例图，经过再三讨论和确认之后，拟好需求规格说明书和数据库设计说明书，然后与甲方进行确认和沟通
制作前端静态页面（拿到的数据为假数据），在这个之前，需要做好市场调研，并结合需求规格说明书和数据库设计说明书进行合理设计，做出来的页面也需要简洁明了，然后与甲方进行沟通和确认
过后交给开发人员，进行数据动态添加（过程：浏览器向服务器发出请求，服务器向数据库拿到数据，服务器将数据返回给浏览器，浏览器进行显示）
添加完之后，发布测试环境

致力于学习前端

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
自我总结（前端开发）

学习就是形成自己的知识体系，而总结是形成个人对知识理解的不可或缺的方法。还有重要的遗忘曲线：一、关于HTML总结（定义了网页的内容）命名：定义文档的主体：<body>标题：<title>定义元素的位移id：<id>id属性只能单独设置id=””（只能填写一个，多个无效）为html元素定义一个或多个类名（classname）：<class>class属性可以多用class=””（引号里面可以填入多个class）...
复制链接

扫一扫

专栏目录