前端学习笔记，查漏补缺

·····7.9·····

1）浏览器图片显示 //
2）圆角矩形div+css //border-radius:
3)画一条竖线 //border-right:1px solid #dddddd
4)渐变色 // background:linear-gradient(#4abbf9,#2fa5e6);

·····7.10·····

1）拉伸变形问题
// white-space:nowrap 控制强制字符不准换行

2）超链接
//链接 :悬停，点击后效果
// link : hover: visited:

3）div投影
//直接使用box-shadow:5px 5px 10px black inset;（水平偏移量，垂直偏移量，模糊距离，颜色，默认外部/inset内部）；
属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，
负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。

4）记住密码
//<input name="save" id="save" type="checkbox" onClick="save_ck(this);">记住密码

5）外联样式

//<link href="login.css" rel="stylesheet" type="text/css" />

·····7.11·····

1）colgroup 表格列组 span

2)链接，在新窗口打开 target="_blank"
<a href="//www.w3cschool.cn/" target="_blank">访问W3CSchool教程!</a>
//作为标签
<a id="tips">Useful Tips Section</a>

3）base 定义页面中所有链接默认的链接目标地址。
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
在base中定义了之后 <img src="logo.png"> 类似图片链接便可以使用相对位置
链接中不需要再定义target="_blank"链接依然会在新的页面打开

4）meta
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

5）元数据：描述数据的数据，对数据及信息资源的描述性信息（中介数据）

6）css :Cascading Style Sheet (级联样式表，层叠样式表）
w3c html：网页结构 css：网页样式 javascript ;行为

7）img 图像属性 alt （预备的可替换的文本）用于图片加载较慢，或者防止图片出错时加载文字出来
<img src="url" alt="some_text">
//为页面上的图像都加上替换文本属性是个好习惯，

TIPS: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。
如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

8)定义图像映射 img map area
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

shape 形状 rect矩形 circle圆 poly 多边形
coords 坐标：rect（x1,y1,x2,y2)左上，右下坐标 circle(x,y,radius) 原点坐标半径 poly(x1,y1,x2,y2...xn,yn)
写了个例子链接https://pan.baidu.com/s/1-6GX6zNUxodhSWzSMjcqSA

9)mark 突出显示（高亮显示）默认加一个黄底色。

10）<span> 用于对文档中的行内元素进行组合

11）iframe 一个页面显示在框框里，可以是一个链接点击后显示在iframe里
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

12） noscript 不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。

PhotoShop切图

1）常规操作快捷键
ctrl+r :标尺.右击标尺任意位置切换为像素以像素为单位
空格+鼠标单击，定位到某位置，拖动查看细节
alt+shift+鼠标滚轮，放大缩小；
ctrl+z可以撤回一次，ctrl+alt+z可以最多撤回20次
吸取颜色，单击前景色

2）选择整张图层、

选择整张图层
/位图：ctrl+单击缩略图
/矢量图：先栅格化，然后ctrl+单击

选择图层的一部分
/位图 ctrl+c ctrl+n (背景内容选透明），ctrl+v 粘贴
/形状路径，单击选中的只是轮廓，需要在前后新建一个图层，然后，CTRL+E合并图层

3）合并图层
ctrl+e :合并选中图层
有需要的合并图层，选中需要合并的图层，ctrl不连续选择图层，shift连续

4）选中图层delete删除

5）保存图片
/整张图右击另存为
/图的一部分，选中图层中区域，ctrl+c ,ctrl+n ,ctrl+v ,ctrl+shift+alt+s 保存为网页格式，命名保存
ctrl+j 复制一层，快速导出为png或存储为

6）运行脚本，快速保存切好的所有图层

·····7.12·····

1)注释

2)font-family ：字体 Monospace 、Serif 和 Sans-Serif，
//字体降级 font-family: A,B 字体A不能使用时降为字体B
3）引入goole字体
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
4）可以应用多个class到一个元素，在多个class之间用空格分开即可。
eg:<img class="class1 class2">
5)border-radius: 设置为50%。会呈现一个圆框
6）a元素：anchor(锚点）
7)input 中预定义文本：placeholder
<input type="text" placeholder="cat photo URL">
文本输入框设置为必填项，可以在 input 元素中加上 required 属性，（safari浏览器中不起作用）
8）单选框复选框
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

<label><input type="checkbox" name="personality"> Loving</label>
9）margin 设置为负值，元素横向填充

margin ：上右下左 padding：上右下左
10）继承，比如 body中设置字体颜色为green，则元素h1中文字也继承绿色

11）class="class1 class2" class2会覆盖class1的属性
使用CSS库。可能会意外覆盖您自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用 !important
eg:color: pink !important;

12）id属性始终是具有更高的优先级
内联>id>class

13)hex code :十六进制 #000000=black rgb(0,0,0)
#ffa500橙色

14）JavaScript提供七种不同的data types(数据类型)，undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。
Variables var
Variable （变量）的名字可以由数字、字母、$ 或者 _组成，但是不能包含空格或者以数字为首。

15)“＋ ”连接字符串

16)驼峰命名法设置Javascript 变量
变量名的第一个单词的首写字母小写，后面的单词的第一个字母均为大写。
eg: var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong

17) % 求余数

18）转义字符\ eg:需要输出" 需写成 str=" \" "
常见转义字符
\' 单引号
\" 双引号
\\ 反斜杠符
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

19）获取字符串的倒数第N个字符。 xx的倒数第n个字符 = xx [xx.length-n]

EG: var secondToLastLetterOfLastName = lastName[lastName.length-2]

20)定义数组
eg: var myArray = ["ca",0];

数组注意点:index起始数值为 0 ;

21) .push(),函数追加数组数据 arr.push(xx);把xx追加到arr数组中

22).pop()函数抛出数组末尾的值 x=arr.pop(); //把数组最后一个值抛出赋值给x ,数组arr中数据减少一个.

23).shift(index) 移出数组中的值 x= arr.shift(n-1)//把数组第n个值抛出赋值给x,数组arr中数据少一个.

24).unshift(xx数据) 移入一个元素到数据头部. arr.unshift(xx)//移入元素xx到数组的头部.

25)console.log("xx");打印输出xx.

26)函数内部不使用var声明变量

27)局部变量优先于全局变量

推荐一个学习前端超好的网址 https://www.w3cschool.cn/codecamp/

···7.13···

1)Switch 语句 tips: num参数为字母是需要加“”
switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
default:
defaultStatement;
}

2）function isLess(a,b){
return a<b;
}
3)创建一个对象
var myDog = {
"name":"Whiskers",

"legs": 4,

"tails":1,

"friends":["Water","Dogs"]

};
4）使用点操作符读取对象属性的例子：
var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

5)个使用中括号操作符([])读取对象属性的例子：

var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock

6)用变量来访问一个属性。当你需要遍历对象的属性列表或查表时，这种方式极为有用。
var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"

7)创建了一个对象后，你可以用点操作符或中括号操作符来更新对象的属性
eg: xx.name= "new name";
xx["name"]="new name";

8)为对象添加新属性

eg: xx对象.新属性xx1= "新属性的值xx2";
xx["新属性xx1"]="新属性的值xx2";

9)JavaScript 使用对象进行查找值

function phoneticLookup(val) {

var result = "";

var lookUp = {

"alpha":"Adams",

"bravo":"Boston",

"charlie":"Chicago",

"delta":"Denver",

"echo":"Easy",

"foxtrot":"Frank"

}
result = lookUp[val];

return result;

}

phoneticLookup("charlie");

10）JavaScript 检查对象属性 .hasOwnProperty(propname)

eg:
var myObj = {

gift: "pony",

pet: "kitten",

bed: "sleigh"

};

function checkObj(checkProp) {

if( myObj.hasOwnProperty(checkProp)){

return myObj[checkProp];

}else{

return "Not Found";

}

checkObj("gift");

11)javaScipt JSON 操作 JSON:JavaScript Object Notation
使用JavaScript对象的格式来存储数据。JSON是灵活的，允许数据结构是字符串，数字，布尔值，字符串，和对象的任意组合。
JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据

{"employees":[

{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

12）javascript 获取对象数组值
eg:获取 pine
var myPlants = [
{

type: "flowers",

list: [
"rose",
"tulip",
"dandelion"
]

{
type: "trees",

list: [
"fir",
"pine",
"birch"
]

}
];

var secondTree = myPlants[1].list[1] ;

···7.14···

posted @ 2018-07-10 16:36 第101次弃游 Views(250) Comments(0) Edit 收藏举报

刷新页面返回顶部

浮生若梦_carrie

前端学习笔记，查漏补缺

公告