前端基礎100點

時間 2019-11-17

標籤前端基礎 100點简体版

原文原文鏈接

一、<head>不是頁面的頭，而是配置；html

二、html標記用來體現「是什麼」、CSS管「長成什麼樣」；前端

換句話說，html表達內容和結構，CSS表達樣式；數組

三、<br>沒有結束標記，來自break，<br>用於換行；瀏覽器

四、CSS中屬性聲明的格式是這樣的：編輯器

屬性名：屬性值；函數

background-color:yellow;工具

background-image:url(01.jpg);字體

五、rgba（255，255，0，0.5）中的最後的0.5是一個從0~1的值，能夠當作是透明度；url

六、頁面中常常看到undefined，那麼什麼undefined呢？答：js變量若是未被賦值，那就是undefined；spa

七、文字的高度竟然就是字號的大小；

八、文字的行高是從上一行的下面到本行的下面；

九、關於圖片的格式，修飾性的通常爲png，其中png8由於只有256色，因此更小，內容性的通常爲jpg；

十、ctrl+T自由變化可塗掉按鈕文字；

十一、PS快捷鍵中，ctrl+z進行撤銷反覆，同時按下ctrl+alt+z，能夠不斷向前撤銷；

十二、若是PS中魔棒工具使用不了，極可能是由於你的當前圖層並非你操做的圖層；

1三、<hr>不是人力資源，而是華麗的分割線，且<hr>和<br>同樣；

1四、

<ul></ul>意思是不用數字排序的列表；
<ol></ol>意思是用數字一、二、三、4...排序的列表；
<li></li>意思是列表項的內容；

1五、

<dl></dl>字典
<dt></dt>名詞
<dd></dd>解釋內容

1六、「http://」叫作「協議頭」；

1七、在html中，圖片是一個字，因此和先後的文字會連起來；什麼？在html中，<iframe>竟然也是一個字</iframe>；

1八、width屬性的50%是瀏覽器的50%；

1九、alt的意思是說若是圖片加載不出來，出現的文字；

20、原來以前的點擊哪一個省出什麼效果是用usemap、<map></map>、<area>實現的；

2一、

表格標記<table></table>
<tr>表格的一行
<td></td>表格一行中的格子
</tr>
<th></th>table head是單元格的頭，字體與td有區分
colspan=""，指單元格跨列，橫向。rowspan你懂的，單元格跨行，縱向
<thead>和</thead>是整個表頭，可造成首行懸停
<tbody>和</tbody>以及<tfoot></tfoot>

2二、一旦有style=""就是CSS來了；

2三、%2，常常用於判斷一個數是奇數仍是偶數，%是取模（取餘數）；

2四、result++，即result=result+1；

2五、

==，用來判斷是否相等；
!=，用來判斷是否不相等；

2六、Javascrip中的註釋是//；CSS的註釋方式是：/* */；

2七、在英文中，小寫字母比大寫字母的排序要大，數字比字母要小，空格是最小的；

2八、Javascript裏面alert不是用等於號，而是用()，如alert("hello world");

2九、除了alert，還能夠用doucument.write("");

30、if的{}結束後不能加分號；

3一、全部邏輯運算符的優先級低於關係運算符；

3二、邏輯運算符裏面優先級!>&&>||；

3三、

三元運算符<exp>?<v1>:<v2>能夠被當作：
if(exp)
v1;
else
v2;

3四、Javascript裏面數組用[]，對象用{};

3五、前端代碼中常見的Object是指對象；

3六、

遍歷對象中的全部屬性舉例：
<script>
var ob=new Object();
ob.name="hello kitty";
ob.age=30;
ob.salary=400;
for(var x in ob)
alert("ob."+x+"="+ob[x]);
</script>

3七、想看document裏面的全部成員

3八、html中Javascript放的位置的講究，放在head裏面是定義函數的，放在body裏面是執行動做的；

3九、

在瀏覽器裏面的Javascript：
<p onMouseOver="alert('hello world!');">
一個段落
</p>

40、通配符選擇權，*{color:blue;}

4一、簡單選擇器

tag{}
.className{}
#id{}
*{}
[att]{}
:link{}

4二、

CSS優先級，從高到底：
a、行內樣式
b、ID選擇器的數量
c、類、僞類和屬性選擇器
d、標籤選擇器和僞元素選擇器

4三、font-size，2em至關於200%

4四、text-indent，一個負的極大值，已隱藏文字，經常使用於SEO；

4五、

如下實現的是當單行文字過長時末尾出現「...」
.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

4六、cursor能夠定義鼠標形狀，手形是pointer，{cursor:pointer}；

4七、絕大多數的元素百分比的參照物都是它的父元素；

4八、padding值縮寫的規則：對面相等，後者省略；4面相等，只設一個；

4九、margin：0 auto，即水平居中；

50、border-radius設置圓角矩形，當水平半徑和垂直半徑均是50%時，即爲正圓；

5一、overflow的值outo爲有滾動條；

5二、background-position：50% 50%就是居中；等同於background-position：center center；

5三、background-position的默認位置是padding；調整須要用到background-origin；如background-origin:content-box；

5四、<span>是指行內的一段</span>

5五、

CSS類選擇器
上方定義，全部的
*.important {color:red}
上方定義，某個
p.important {color:red}
下方引用：
<p class="important"></P>

5六、

CSS的ID選擇器
上方定義，
#important {color:red}
下方引用：
<p id="important"></p>

5七、

屬性選擇器
*[title] {color:red}
全部有title屬性的顏色都是red

5八、

後代選擇器是空格
逗號和空格的關係，若是是逗號是都遵循，空格是後代
選擇器，如
p em
若是是緊挨的用P>em

5九、移動工具選取面板的「【】自動選擇」要勾選上

60、

矩形選框工具操做

添加到選區：按住Shift
從選區減去：按住Alt
與選區交叉：按住Shift+Alt

6一、巧用矩形選區工具測量一個大圖片的寬度，以下圖所示，按住Shift鍵，左右邊緣各畫一個矩形選區，則右側的總寬度即爲大圖片的寬度：

6二、圖標、logo屬於修飾性的圖片，通常不是用img標籤，而是用background屬性來實現。

6三、

如何處理有紋理的圖片的隱藏文字？
矩形選框選中>使用移動工具+Alt鍵+shift鍵

6四、

切圖的第一步：隱藏文字，只留背景，由於文字通常在html裏面手打；

切圖的第二步：選中後在圖層處右鍵>複製圖層，以下圖：

6五、在扣一個不規則的小圖標時，能夠先用矩形選框工具選擇圖標區域，再用魔棒工具同時按住Alt鍵來去除多餘部分

6六、如何切活動頁？

（1）拉參考線；
（2）選擇切片工具；
（3）點擊「基於參考線的切片」按鈕，選擇切片從新命名；
（4）保存，全選切片，統一設置存儲格式。

6七、png8保存的時候，雜邊:無；無仿色。png8默認是索引顏色模式，要修改的時候要把顏色模式由「索引模式」改成「RGB模式」

6八、圖片有半透明要求時，保存png24格式

6九、更改畫布大小的方法，是在「圖像」>「畫布大小」中更改；如何縮小畫布？裁剪（矩形選框>圖像>裁剪）

70、PS中如何拆圖層？先選中，再Ctrl+X剪切，而後Ctrl+V粘貼，便可

7一、

（1）Sprite拼圖中注意圖片必定要有空隙；

（2）把同屬於一個模塊的圖片進行合併；

（3）把色彩相近的圖片進行合併（圖片質量較小）；

（4）只本頁用到的圖片合併；

（5）有狀態的圖標合併；

7二、

html全局屬性有：
ID、class、style、title、

7三、html標籤表：

7四、html中強調能夠用strong和em，strong默認粗體，em默認斜體；

7五、div可視爲其它標籤的容器；

7六、<pre>標籤可保留空格、換行等編輯器內格式，所見即所得；

7七、由於多個瀏覽器對視頻支持的格式不一樣，因此要在網頁中插入視頻，須要準備多種格式的視頻文件；

7八、html中經常使用實體字符：

7九、

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。