【原】12個HTML超文本標記語言經驗-開發(fā)技巧

桃花源士 2021-12-05

展開全文

HTML 開發(fā)技巧

HTML編碼原則

1. 結構分離：使用HTML 增加結構，而不是樣式內容。

2. 保持整潔：為工作流添加代碼驗證工具；使用工具或樣式向導維護代碼結構和格式。

3. 學習新語言：獲取元素結構和語義標記。

4. 確?？稍L問：使用ARIA 屬性和Fallback 屬性等。

5. 測試：使網站在多種設備中能夠良好運行，可使用emulators和性能工具。

標簽選擇技巧

1. 使用<h1>(<h2>,<h3>…)表示標題，<ul>或<ol>實現(xiàn)列表。

2. 注意使用<article> 標簽之前應添加<h1>標簽。

3. 選擇合適的HTML5語義元素如<header>，<footer>,<nav>,<aside>。

4. 使用<p>描述Body 文本，HTML5 語義元素可以形成內容，反之不成立。

5. 使用<em>和<strong>標簽替代<i>和<b>標簽。

6. 使用<label>元素，輸入類型，占位符及其他屬性來強制驗證。

7. 將文本和元素混合，并作為另一元素的子元素，會導致布局錯誤，

標簽編碼技巧

1. 使用 <p> 元素修飾文本，而不是布局。

2. 避免使用 <br> 分行，可以使用block元素或CSS顯示屬性來代替。

3. 避免使用 <hr> 來添加水平線，可使用CSS的border-bottom 來代替。

4. 不到關鍵時刻不要使用div標簽。

5. 盡量少用Tables來布局。

6. 可以多使用Flex Box

7. 使用CSS 來調整邊距等。

CSS 開發(fā)技巧

使用padding代替margin

頁面布局中， padding 和 margin 兩個是常用的屬性，但如果 margin 使用的過于頻繁的時候，盒模型的垂直距離可能就會發(fā)生重疊。原因是，所有相鄰的兩個或多個盒元素的 margin 將會合并為一個 margin 共享。相鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內容、 Padding 或 Border 分隔。所以就可以在首位元素使用 padding 來替代 margin 。

水平居中的布局技巧

水平居中布局是開發(fā)中比較常見的布局形式，在標題和內容區(qū)域中經常出現(xiàn)。下面介紹四種實現(xiàn)水平居中的方法。（注：下面各個實例中實現(xiàn)的是son元素的對齊操作，son元素的父容器是father元素）

使用inline-block和text-align實現(xiàn)

.father{text-align: center;}

.son{display: inline-block;}

使用margin:0 auto實現(xiàn)

.son{width:200px;margin:0 auto;}

使用table實現(xiàn)

.son{display:table;margin:0 auto;}

使用絕對定位實現(xiàn)

.father{position:relative;}

.son{position:absolute;left:50%;transform:translate(-50%);}

常用CSS框架

在實際編碼過程中，經常使用第三方開源免費的CSS框架，可以快速完成項目。下面就介紹3個常見的CSS框架。

mini.css

min.css是一個輕量級的css框架，壓縮后的大小是10kb，同時擁有相當多的UI元素和布局。官網地址是：https:///。如下圖所示。

pure.css

pure.css壓縮后僅為3.8KB，適配移動端，它是模塊化開發(fā)，按需求導入相關的模塊包即可。官網地址是：https:///。如下圖所示。

mobi.css

mobi.css非常?。▔嚎s后僅 2.6KB），主要針對移動用戶。但是其內置主題和插件系統(tǒng)還有很大的增長空間。如果基本樣式不能滿足你的要求，可以在框架之上以模塊化的方式進行構建。官網地址是：https://。如下圖所示。

JavaScript 開發(fā)技巧

代碼編寫技巧

在實際編程過程中，JavaScript中也有很多實用的代碼編寫技巧。下面介紹常見的4個小技巧。

將數組去重。

使用Set和擴展運算符即可實現(xiàn)。

var j = [...new Set([1, 2, 3, 3])]

>> [1, 2, 3]

過濾數組中的false值

將Boolean傳遞給filter函數，就可以過濾掉數組中的所有假值。

myArray.map(item => {

// 編寫邏輯代碼

}).filter(Boolean);

創(chuàng)建空對象

用下面的方法創(chuàng)建的對象，不包含任何屬性或方法。

let dict = Object.create(null);

對象合并

使用擴展運算符（…），可以方便地合并對象。

const person = { name: 'David Walsh', gender: 'Male' };

const tools = { computer: 'Mac', editor: 'Atom' };

const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};

數據類型檢測

Typeof

typeof操作符返回一個字符串，表示未經計算的操作數的類型；該運算符數據類型（返回字符串，對應列表如下圖）。

instanceof

instanceof運算符用于測試構造函數的prototype屬性是否出現(xiàn)在對象的原型鏈中的任何位置；觀察下列代碼，字面量產出的原始數據類型無法使用instanceof判斷。

var str = "This is a simple string";

var num = 1111;

var boolean = true;

var und = undefined;

var nl = null;

var sb = Symbol('1111');

var obj = {}; // 非原始類型數據字面量定義

console.log(str instanceof String); // false

console.log(num instanceof Number); // false

console.log(boolean instanceof Boolean); // false

console.log(nl instanceof Object); // false

console.log(sb instanceof Symbol); // false

console.log(obj instanceof Object); // true

var strN = new String("This is a simple string");

var numN = new Number(1111);

var booleanN = new Boolean(true);

var objN = new Object();

console.log(strN instanceof String); // true

console.log(numN instanceof Number); // true

console.log(booleanN instanceof Boolean); // true

console.log(objN instanceof Object); // true

數組常用操作

多維數組一行代碼實現(xiàn)一維轉換

var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];

var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr);

統(tǒng)計字符串中相同字符出現(xiàn)的次數

var str = 'aaabbbccc66aabbc6';

var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});

console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}

將類數組對象轉成數組

var likeArrObj = {

0: 1,

1: 2,

2: 3,

length: 3

}

var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);

console.log(arr1); // [1, 2, 3]

調試技巧

' debugger'

除了console.log , debugger是快速友好的調試工具。一旦執(zhí)行到這行代碼，Chrome瀏覽器會在執(zhí)行時自動停止。

if(thisThing) {

debugger;

}

將objects顯示為表格

可以使用 console.log 查看并滾動瀏覽該對象，或者使用console.table展開，更容易看到正在處理的內容。

varanimals = [

{animal:'Horse',name:'Henry',age:43},

{animal:'Dog',name:'Fred',age:13},

{animal:'Cat',name:'Frodo',age:18}

];

console.table(animals);

在谷歌瀏覽器中顯示的界面如下圖所示。

使用 console.time() 和 console.timeEnd() 來標記循環(huán)耗時

要想確切知道某段代碼需要執(zhí)行多長時間，尤其是在調試慢循環(huán)時，該技巧代碼會非常有用。

console.time('Timer1');

varitems = [];

for(vari =0; i <100000; i++){

items.push({index: i});

}

console.timeEnd('Timer1');

WebStorm 開發(fā)技巧

常用快捷鍵（Windows）

快捷鍵	含義
Ctrl+/ 或 Ctrl+Shift+/	注釋（// 或者/…/ ）
Shift+F6	重構-重命名
Ctrl+X	刪除行
Ctrl+D	復制行
Ctrl+G	查找行
Ctrl+Shift+Up/Down	代碼向上/下移動
F2 或Shift+F2	高亮錯誤或警告快速定位
寫代碼，按Tab	生成代碼
Ctrl+E	最近打開的文件
Alt+F1	查找代碼所在位置