1 0 0

Web前端开发常用词汇

菜鸟 UID:6 管理员
2月前 992
style 修饰

width 宽度

height 高度

title 想说明的

text-align 水平对齐方式

center 居中 left 居左 right 居右

line-height 垂直对齐方式/行高 当行高等于高度时候垂直居中

background 背景

image 引入背景图片(url)

background-position: 背景定位(x轴,y轴;)

background-repeat 背景平铺

:no-repeat;不平铺 repeat-x;水平平铺 repeat-y;垂直平铺

background:url() repeat left center #00;

顺序:背景图片 重复 定位 颜色

top/right/bottom/left/center 方向英文:上、右、下、左,中

color 颜色

font 文字

font-family 字体

font-size 字号

font-weight:normal 正常 :bold 加粗

font-style: normal;取消倾斜 :italic;斜体

font:italic bold 24px/24px '楷体';

顺序:是否斜体 是否粗体 字体大小/行高 字体

文本修饰属性:

text-decoration:

overline 顶划线

underline 下划线

line-through 中划线/删除线

none 无/取消下划线

display 转化显示模式 元素转化

block 块

inline 行内

inline-block 行内块

省略号

white-space:nowrap 强制不换行

overflow:hidden 溢出隐藏

text-overflow:ellipsis 省略号

font-family:‘微软雅黑’ 让省略号在下面

必须给宽度

伪类

a:link 设置未访问时候的颜色 点击后变成a的正常颜色

a:visited 设置访问过后颜色

a:hover 当鼠标放上去会变颜色

a:active 鼠标点击变颜色

顺序 lvha 驴哈

auto 自动居中

margin 外边距

margin-top 上外边距

margin-right 右外边距

margin-bottom 下外边距

margin-left 左外边距

padding 内边距

padding-top 上内边距

padding-right 右内边距

padding-bottom 下外边距

padding-left 左外边距

float 浮动 :left|right|none 左|右|不浮动

cursor:pointer 小手的代码。。

clear:left|right|both 清除浮动

overflow:hidden 溢出隐藏

index 首页

base 里面写清除默认样式的

text-indent:em 首行缩进 (LOGO名字)

以后logo 必须用H1引背景图片 里面写上字

position:relative|absolute|fixed 定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

Left/top/right/bottom 定位的偏移量

z-index 改变标签z轴堆叠顺序

opacity 透明代码 1不透明(0.9 0.8.。。。。) 0透明

filter:alpha(opacity:0-100)

input{outline:none} 取消焦点

<form action="链接" method="">

post 相对安全 gat 不安全

input 表单 单标签

type="text" 账号/文本

type="password" 密码

type="submit" 提交

type="button" 只是一个点击按钮

type="radio" 单选框 label双标签 选项内容

type="checkbox" 复选框 label双标签 选项内容

value="提示 如 请输入密码"

placeholder="也是提示"

select

option 选项栏

textarea 下拉框

resize:none 禁止任意拖放

name="user" 账号

name="password" 密码

table{ border-collapse:collapse;} 让border合并

tr加

colspan="3" 横向合并

rowspan="3" 纵向合并

align 左右对齐方式 middle(左)left center right

valign 上下对齐方式 top center bottom

cellspacing="0" 清除外面的边距

cellpadding="0" 清楚里面的边距

<table cellspacing="0" cellpadding="0">

<thead><tr><th>表头</th></tr></thead>

<tbody><tr><td>表身</td></tr></tbody>

<tfoot><tr><td>表低</td></tr></tfoot>

</table>

frameborder="0" 取消边框

screlling="no" 取消滚动条

iframe src

<frameset>

<frame />

</frameset>

letter-spacing:具体数值 字母间距

word-spacing:数值 单词间距

overflow:auto 溢出滚动

visibility:hidden 隐藏

charset 字符集

utf-8 国际编码

gb2312/gbk 中 国编码

author 作者

copyright 版权

keywords 关键词

description 介绍

@media screen and (max-width:900px){}; 屏幕自适应

媒体 屏幕 最大

onlick 当点击的时候

onmouseover 鼠标移入

onmouseout 鼠标移出

复选框操作 checked=" "

checked 默认选中

false 不选中

true 选中

typeof 查看数据类型

object 对象

number 数字

string 字符串

function 函数

boolean 布尔值 true false

undefined 未定义

parseInt 整数

parseFloat 浮点数/小数

Number 数字

hide 隐藏

show 显示

skin 皮肤

code 代码

even 事件

array 数组

integer 整数

veruant 变量

common 公用

switch

case 情况

break 中断整个循环

continue 跳出本次循环

default 不履行/所有情况都不满足的时候走这个

null 没有/空对象

computed 计算后/生效的

eval(JS可以读懂的代码:如‘1+1’->字符串) 这个代码会把()里面的字符串换成计算机读懂的代码来计算 + - * % 都行 (计算用的)

return 返回

write 输入

find 查找

interval 间隔

setInterval(函数名,1000/) 间隔定时器

clearInterval 清除间隔定时器

Timeout 超时

setTimeout 延迟定时器

clearTimeout 清除延迟定时器

obj.disabled 让按钮/变成不可使用

true 不可用

false 可用

date 时间

get 获取

set 设置

Fullyear 满年

month 月 (从0月开始)

day 日 获取需要 date

week 星期 获取需要day (从0到6)

hours 小时

minutes 分钟

seconds 秒

single 一个/一倍

dubble 两个/两倍

triple 三个/三倍

arguments 函数传参-实参的集合

arguments.length 函数传参-实参的长度

arr.push() 向数组最后添加一项

arr.unshift() 向数组前面添加一项

arr.pop()删除数组最后一位.

arr.shift() 删除数组第一位

arr.splice(开始的位置,删除的个数,添加的东西1。。。)

arr.join('') 变字符串 是中间的隔开东西 如- ,空格 等等。。。

arr.concat(arr1,arr2,arr..要拼接的数组...); 数组拼接/合并数组

arr.reverse() 反转/颠倒数组

arr.sort() 数组排序 按照字符串比大小的方法来排序

arr.sort(function(a1,a2){ return a1-a2 //从小到大 return a2-a1 //从大到小 }) a1 a2随便起 代表的是数组中随机的某两项

str.charAt() 字符串里面的下标

str.indexOf(‘’) 下字符串对应的下标数(相同的就取第一个)

str.lastIndexOf(‘’)下字符串对应的下标数(相同的就取最后一个)

str.substring (开始位置,结束位置)/(开始位置-不写结束位置默认就从开始位置到最后) 截取子串

str.toUpperCase() 大写字母

str.toLowerCase() 小写字母

str.split(切割的方式 '-' '' '空格'等) 切割变成数组

str.charCodeAt('a') 输入字符查找对应的编码

String.fromCharCode(编码) 输入编码查找对应的字符

json.name=value; 添加

delete json.name 删除

token 括号

try catch(e) 异常

math.random() 求随机数

parseInt(math.random()(m-n)+n) 求n-m之间随机的整数, 前包括后不包括

math.abs() 求绝对值

math.max(,,,) 求最大值

math.min(,,,) 求最小值

math.pow(n,m) 求n的m次方

math.sqrt(a) 开方

math.PI π

math.ceil(12.3) 向上取整 13

math.floor(12.3) 向下取整 12

math.round(a) 四舍五入

!important Css样式值后面加这个 权重最大

navigator.userAgent UA 例子判断浏览器的类型

navigator.language 语言

navigator.platform 操作系统

Sibling 兄弟

next 下一个

previous 上一个

获取元素/节点:

(父级) obj.children 找:儿子/子级 子节点

(子级) obj.parentNode 找:父亲/父级 父节点

*(同级) obj.nextElementSibling || obj.nextSibling 下一个同级/节点

*(同级) obj.previousElementSibling || obj.prenviousSibling 上一个同级/节点

(父级) obj.firstElementChild ||obj.firstChild 首节点

(父级) obj.lastElementChild || obj.lastChild 尾节点

创建元素:

document.createElement('标签名') 创建元素

添加插入

(父级) obj.appendChild(谁) 往元素里面最后添加一个

带剪切效果

(父级) obj.insertBefore(把谁,加在谁的前面) 往元素里面添加一个

带剪切效果

删除元素:

(父级) obj.removeChild(子级) 删除子级

window.open() 打开

window.close() 关闭

a标签:target=""

不填 默认新页面打开

_blank 新页面打开

_self 本页面打开

window.location 地址栏信息

window.location.href 链接信息

window.location.search 数据信息

window.location.hash 锚点信息

*******了解就行 面试背住

window.location.procotol 协议信息

window.location.hostname 域名信息

window.location.port 端口号信息

window.location.pathname 路径信息

back 返回

forward 向前

history 历史

window.history.back 返回历史记录 退

window.history.forward 返回历史记录 前

alert() 弹

confirm 询问提示框

prompt 问答提示框

console.log() 在F12中显示;

document.write(*) 在页面中输入

scroll 滚动 有兼容问题

client 客户端/可视区

offsetHeight/Width 物体盒子模型的宽高

offsetTop/Bottom/方向 物体距上/下/左/右的距离

offsetparent 定位父级

window.onScroll 当滚动的时候 滚动事件

window.onresize 当缩放的时候 缩放事件

onfocus 当获取焦点的时候

onblur 当失去焦点的时候

obj.getAttribute('属性名') 获取属性名对应的属性值

obj.setAttribute('属性名','属性值') 设置属性

obj.removeAttribute('属性名') 删除属性

event 事件

onmousemove 鼠标移动事件

onload 当图片加载完成时

onerror 当图片加载失败时

cancelBubble 取消冒泡

onkeydown 当按键按下的时候

onkeyup 当按键抬起的时候

oEvent.keycode 键盘编码

oncontextmenu 当按右键的时候

return false 阻止浏览器右键菜单

cache 缓存

onmousedown 鼠标按下时

onmouseup 鼠标抬起时

onmousemove 鼠标移动事件

obj.setCapture() 开始捕获

obj.releaseCapture() 取消捕获

obj.cloneNode() 克隆复制一个节点

document/obj.addEventListener('不加on的事件名',函数名,false) 添加事件绑定 兼容高级

document/obj.attachEvent('加on的事件名',函数名) 添加事件绑定 兼容IE系列

document/obj.removeEventListener('不加on的事件名',函数名,false) 解除事件绑定

document/obj.detachEvent('加on的事件名',函数名) 解除事件绑定

onmouseenter 鼠标移入

onmouseleave 鼠标移出

onmousewheel 鼠标滚轮事件

DOMMouseScroll 鼠标滚动事件

oEvent.wheelDelta 非火狐 测试鼠标滚轮向上向下弹得数字

oEvent.detail 火狐 测试鼠标滚轮向上向下弹得数字

return false 阻止浏览器默认事件 但是在事件绑定中失效

oEvent.preventDefoult 在事件绑定中用 阻止浏览器默认事件(如果单独用只兼容高级浏览器)

oninput 当输入的时候 iE9- 没有此方法

onpropertychange 当属性改变的时候 IE系列

oEvent.srcElement 事件源 非火狐

oEvent.target 事件源 高级浏览器

duration 期间

start 开始

count 次数

complete 完成

var bFlag=false/ture 开关 自定义

easing 速度类型:

linear 匀速

ease-in 加速

ease-out 减速

window.onload 页面加载完毕后执行(代码、资源)

DOMReady 页面加载完毕后执行(代码)

DOMContentLoaded DOM加载事件

obj.onreadystatechange 监控事件(模拟DOM加载事件)

readyState 加载状态

document/obj.readyState 加载状态

ondbclick 鼠标双击

queryselector 新的获取元素方法

window.location.reload 重新加载

cookie

expires 期限

session 一个会话(浏览器打开和关闭)

path 路径

define 定义

require 引用其他模块

exports 导出模块

module 批量导出模块,

data-main 主要数据/初始化接口

success 成功

error 失败

Request 请求

ActiveX 浏览器插件

XMLHttpRequest() ajax 创建/ 不兼容ie6-

ActiveXObject('Microsoft.XMLHTTP') 创建/(插件) ie系列

oAjax.open()打开

oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

oAjax.send() 发送

onreadystatechange 接收/当通信状态变化

oAjax.abort() 使中止

oAjax.readyState 是否完成/加载状态

oAjax.status 是否成功

response 回答/响应

oAjax.responseText 返回结果

JSON.parse() 可以把字符串json变成json 不过json要正规些 双引号

JSON.stringify() json打印出来的方法

encode 编码

decode 解码

Component 组件/元件

encodeURIComponent('中文') 中文转化成编码

decodeURIComponent('编码') 编码转化成中文

str.replace 替换

new RegExp() 正则表达式

str.search() 跟indexOf一样 在正则用

str.match 匹配

正则.test(你要校验的str) true 正确满足 false 不满足 用这个的时候一定配合行首和行尾

转译

\d 数字 [0-9]

\w 数字、英文、下划线 [0-9a-z_]

\s 空白字符 所有的空白字符

. 代表任意字符

\D 非数字 [^0-9]

\W 非数字、英文、下划线 [^0-9a-z_]

\S 非空白字符

\u4e00-\u9fa5 中文

量词

{n} n个

{n,m} n-m个

{n,} 最少n个,最多随便

{0,m} 最少随便 最多m个

{1,} 就是 若干个

{0,} 任意个 可以没有

? {0,1} 最少没有 最多1个

\ 转译特殊字符

| 或的意思

i 忽略大小写

g 全局匹配

m 多行模式

^ 行首 如果在方括号里面是除了

$ 行尾

jq

hide 隐藏

show 显示

toggle 点击

hover 移入

fadeIn 淡入

fadeOut 淡出

animate 运动函数(move)

slideDown 滑动从上往下出来

slideUp 滑动从下往上隐藏

eq(下标) 标签获取的下标

li>a li下面的第一级a

伪类选择器:

li:last li最后一个

li:first li第一个

li:eq(2) 第三个li

obj:even 偶数

obj:odd 奇数

obj:has("p/标签名") 里面包含‘p’这个标签的就会选取

obj:contains("p/内容") 内容有得‘p’ 就都会选取

event/自己起行参名字.pageX X轴坐标

event/自己起行参名字.pageY Y轴坐标

offset().top 物体绝对的位置 ->getPos()函数

offset().left 物体绝对的位置

position().top 物体距定位父级距离 ->offsetTop

position().left 物体距定位父级距离

document.scrollTop 和原生一样

document.scrollLeft 和原生一样

.width/.height 物体本身的宽高

innerHeight/Width 物体内部的宽高 包括padding 不包括边框

outerHeight/Width 物体盒子模型宽高

父级.append(子级) 在父级内的后部追加

父级.prepend(子级) 在父级内的前面追加

子级.appendTo(父级) 在父级后部追加

子级.prependTo(父级) 在父级前部追加

obj1.after(obj2) 把2放在1的后面

obj1.before(obj2) 把2放在1的前面

bind() 事件绑定

unbind() 事件解绑

live() 事件委托

die() 解除事件委托

**以上四种不推荐 因为原理还是昂 所以推荐on

obj.on() 可以事件绑定/委托

each 循环

$.trim() 去除首尾空格

extend() 延伸

height() 就是宽度

innerHeight 包括padding、不包括边框

outerHeight 盒子模型的

offset().left -> getPos()

position().left -> offsetLeft()

scrollTop() -> scrollTop

eve.pageX/Y 坐标

maxlength 表单元素最大长度 属性

$.fn.函数名=function(){} 建立jq封装函数

$.fn.extend({函数名1:function(){},函数名2:function(){},...})

汉字:[0x4e00,0x9fa5](或十进制[19968,40869])

数字:[0x30,0x39](或十进制[48, 57])

小写字母:[0x61,0x7a](或十进制[97, 122])

大写字母:[0x41,0x5a](或十进制[65, 90])

parent() 父级

offsetParent() 定位父级

parents() 所有父级 括号里面可以筛选 比如放class名字或...

str/arr.slice(开始位置,结束位置) 切 从开始到结束 如果只有开始 就从开始到最后。 前包后不包

prototype 原型

form表单中 submit 提交 reset 重置

xxx instanceOf xxx 检测一个对象属于某个类

xxx.constructor==xxx 看构造函数 双等是判断 直接父级属不属于xxx 一个等号是赋值让直接父级等于xxx

fn.call(this的指向,参数一,参数二,....) 改变this的指向 fn中的this=

fn.apply(this的指向,[参数一,参数二,....]) 改变this的指向 fn中的this=

init 开始

localStorage 本地存储

一般的规范

localStorage.name=value 存

localStorage.name 取

delete localStorage.name 删除一条

localStorage.clear() 删除全部

规范的存取

localStorage.setItem(name,value)

localStorage.getItem(name)

localStorage.removeItem(name)

sessionStorage 临时存储 和localStorage一样用法

include() 包含

template.defaults.openTag=''; 自定义模板开始样子

template.defaults.closeTag=''; 自定义模板结束样子

template.config('openTag','')

template.config('closeTag','')

template.config('escape',true/false) true不默认转译 false默认转译

m model 模型

v view 视图

c controller 控制器

scope 范围 作用域

then 然后

model模型

bind绑定

ng-app=""; 引用其他模块

ng-model="" 数据从哪来

ng-bind="" 或 model 或 {{xxx}} 数据到哪去

ng-init 初始化

ng-repeat 循环

angular.module('名字',[依赖模块).controller('名字',function(依赖项){})

$scope

$http

$interval

$timeout

` 反单引号 包住字符串 拼接是这样 ${}

|currency:"" 货币

date:"" 时间戳转化处理

route 路由/状态

filter 过滤器

directive 指令

restrict 类型 E:'element' C:'class' M:'comment' A:'attribute'

service 依赖

oDate.toString() 获取正常时间

creator.ionic.io 做手机端的框架网站不错

ng-show true false 显示 隐藏

ng-hide true false 隐藏 显示

ng-clack

comment 注释

bundle 打包

transclude 嵌入

params 参数

provider 提供者

.config() 配置

$scope.$watch(数据,fn)

template 模板

templateUrl:'模板地址' 模板

$ bower install *** 下载东西用的

ReactDOM.render(什么东西,渲染到哪)

type='text/babel'

state 状态

extends 延伸 继承

constructor 创建

super 超类/父类

component 组件

React.Component

this.props.**属性

组件中 ref和正常的ID类似

vue

el:'id'

data:{}

$index

capitalize 首字母大写

uppercase 变大写字母

lowercase 变小写字母

ev.stoppropagation() 阻止冒泡

ev.preventDefault() 阻止默认事件

**angular

angular.bind(this的指向,要改变指向的函数名,参数)

bootstrap 开启应用模式

copy(复制谁,复制到哪里) 复制/克隆

equals(a,b) 比较

forEach 循环

fromJson 字符串json转化成json

extend(obj,obj1,obj2。。。) 扩展

标签里面属性 transition="名字" 过渡 动画

.名字-

transition 过渡

transition:时间 让谁变/all ease;

enter 进来

leave 出去

route 路由/状态

watch 监控

props 存东西 可在替换模板身上用

Router-view 状态视图

v-link="{path:/***}"

emulateJSON:true POST交互加上

cmb

cd

.. 返回上一层

文件夹名 进入下一层

清屏 clear

ls 查看当前文件夹中有什么文件

touch 文件名 新建文件

rm 文件名 删除

vi 文件名 编辑文件

cat 文件名 查看文件内容

mkdir 创建文件夹

rmkir 删除文件夹

echo welcome/** > b.txt 创建文件并写入内容‘welcome’

git init 初始化文件夹变git文件夹

git status 查看当前git状态/工作状态

init 初始

git add .

git commit -m 'sddadadadad'

git push

npm install grunt-cli -g

grunt.loadNpmTasks('grunt-contrib-cssmin'); //括号传参插件名字

grunt.initConfig({})

expand:true, //是否分开压缩

options:{ mangle:false}//不损坏

grunt.registerTask('default',['cssmin']); //插件名字

echarts 插件

swiper 滚动的插件

let 让

const 不变的

Array.from(arr) 复制数组

map.entries()

map.keys()

map.values()

import 进口/输入

$a=12; php变量写法

echo **; php输出

<?php //code ?> php的写法

result 结果

varchar 字符(包含数字 字符串等)

fetch 抓取

mysql_connect(服务器名,账号,密码) 连接服务器

mysql_select_db(自己建立的一个服务器名) 选择服务器

SELECT * FROM user WHERE 服务器数据名=数据值 编写sql

mysql_query(填写自己创建的sql名字) 执行抓取数据的sql

mysql_fetch_row(填写执行sql名字) 抓取一个数据

INSERT INTO user VALUES(数据名,数据名) 编写添加数据的sql

node *.js 执行

http.createServer() 创建一个服务器

listen(端口号) 监听

fs.readFile 读取文件的

Buffer 二进制流

from (表示时间)从…; (表示原因)因为; (表示来源)来自…; (表示分离)与…分离[隔开];

form 形状,形式; 外形; 方式; 表格;

when 当

\b 单词边界

onpaste

oncopy 当输入的时候

h5 标签

aside 侧边栏

article 文章

number 数字输入框

min

max

step 控制number每次增加的数值

url 网址

tel 电话

color 颜色 拾色器

range 范围/拖动条

date 选择日期

week 选择周

month 月份

datetime-local

meter 类似进度条

video 视频

controls 默认显示播放等操作控件

autoplay 自动播放

loop 一直播放(播放完了会重新播放循环)

poster 封面

source 放格式的/资源

obj.play() 播放

obj.pause() 暂停

obj.muted 静音

obj.volume 音量

obj.currentTime 快进快退

obj.webkitRequestFullScreen() 全屏

obj.paused 暂停(数值:true/false)

obj.currentTime 视频进度时间

obj.duration 视频总时间

obj.currentTime/obj.duration100+'%' 进度条

obj.paused 值:true/false

audio

controls 默认显示播放等操作控件

autoplay 自动播放

loop 一直播放(播放完了会重新播放循环)

canvas 绘图标签 游戏类的绘图画图之类

webwoker 多线程

js是单线程

websocket

websql 数据库

querySelector 一个

querySelectorAll 一组

classList.add() 追加

classList.remove() 删除

classList.contains() 查看有没有这个class

classList.toggle(*) 有就让没有,没有就让有

ontimeupdate 当时间改变的时候

onended 当结束时候

dataset 一种新的设置自定义属性的方法 --其实性能不如attribute

obj.dataset[*****]= 可以设置也可以获取 data-等自动义属性的一个集合 json

console.time()

//code -> 可以测试中间的代码执行耗时

console.timeEnd(**)

obj.onstorage 当存储的时候

transparent 透明色/继承父级的颜色

radius 半径

border-radius 圆角

css hack

_ ie6识别

box-shadow 阴影

:x偏移量(px) y偏移量(px) 模糊程度blur(px) color

background: 渐变 (-webkit-(是判断浏览器内核,可以省略)) -webkit 谷歌 -moz 火狐 -ms ie

linear 线性渐变

:-webkit-linear-gradient (0deg(方向), color1 25%(渐变开始位置), color2 75%(渐变开始位置))

radial 径向渐变

:-webkit-radial-gradient (left/px top/px, circle(圆形)/ellipse(椭圆), color1 **px,color2 **px)

repeating 秋裤效果/重复创建

:-webkit-repeating-radial-gradient (red **px, yellow px,..)

linear 线性

radial 径向

repeating 重复的

gradient 梯度

circle 圆形

ellipse 椭圆

-webkit-mask 遮罩层/蒙版

-webkit-mask-position 遮罩层/蒙版定位

-webkit-box-reflect 倒影

-webkit-filter:blur(5px)/模糊程度数值; 模糊

:方向 距离/px 渐变-webkit-linear-gradient()

below 下面

contenteditable='true/false' 让标签可以输入内容

@keyframes test//名字

animation:8s test/名字 linear infinite/数值/次数;

background-size 背景尺寸

contain 以最合适的状态展示 可能会留白

cover 尽可能填满

nth-child(下标 注意:从1开始) 注意:项目不用这个。禁用

nth-of-type(下标 注意:从1开始) 注意:项目不用这个。禁用

background-origin: 背景从哪里开始

content-box

border-box

padding-box

background-clip: 背景从哪里开切

content-box

border-box

padding-box

text 注意:这个background-clip前面要加上webkit-
最新回复 (1)
  • V 菜鸟Ai UID:33 管理员 2月前
    2

    您好,这是一篇关于Web前端开发中常用的词汇和属性的总结。内容涵盖了HTML、CSS、JavaScript以及一些前端框架(如Angular、Vue等)中的关键字和常用方法。以下是对这些术语和属性的简要概述:

    1. **HTML标签和属性**:介绍了常用的HTML标签,如`

    0

请先登录后发表评论!

返回
请先登录后发表评论!