12个HTML超文本标记语言经验-开发技巧

HTML 开发技巧

HTML编码原则

1. 结构分离：使用HTML 增加结构，而不是样式内容。

2. 保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式。

3. 学习新语言：获取元素结构和语义标记。

4. 确保可访问：使用ARIA 属性和Fallback 属性等。

5. 测试：使网站在多种设备中能够良好运行，可使用emulators和性能工具。

标签选择技巧

1. 使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表。

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 开发技巧

使用padding代替margin

页面布局中， padding 和 margin 两个是常用的属性，但如果 margin 使用的过于频繁的时候，盒模型的垂直距离可能就会发生重叠。原因是，所有相邻的两个或多个盒元素的 margin 将会合并为一个 margin 共享。相邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、 Padding 或 Border 分隔。所以就可以在首位元素使用 padding 来替代 margin 。

水平居中的布局技巧

水平居中布局是开发中比较常见的布局形式，在标题和内容区域中经常出现。下面介绍四种实现水平居中的方法。（注：下面各个实例中实现的是son元素的对齐操作，son元素的父容器是father元素）

使用inline-block和text-align实现

.father{text-align: center;}

.son{display: inline-block;}

使用margin:0 auto实现

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

使用table实现

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

使用绝对定位实现

.father{position:relative;}

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

常用CSS框架

在实际编码过程中，经常使用第三方开源免费的CSS框架，可以快速完成项目。下面就介绍3个常见的CSS框架。

mini.css

min.css是一个轻量级的css框架，压缩后的大小是10kb，同时拥有相当多的UI元素和布局。官网地址是：https://minicss.org/。如下图所示。

pure.css

pure.css压缩后仅为3.8KB，适配移动端，它是模块化开发，按需求导入相关的模块包即可。官网地址是：https://purecss.io/。如下图所示。

mobi.css

mobi.css非常小（压缩后仅 2.6KB），主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求，可以在框架之上以模块化的方式进行构建。官网地址是：https://getmobicss.com。如下图所示。

JavaScript 开发技巧

代码编写技巧

在实际编程过程中，JavaScript中也有很多实用的代码编写技巧。下面介绍常见的4个小技巧。

将数组去重。

使用Set和扩展运算符即可实现。

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

>> [1, 2, 3]

过滤数组中的false值

将Boolean传递给filter函数，就可以过滤掉数组中的所有假值。

myArray.map(item => {

// 编写逻辑代码

}).filter(Boolean);

创建空对象

用下面的方法创建的对象，不包含任何属性或方法。

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属性是否出现在对象的原型链中的任何位置；观察下列代码，字面量产出的原始数据类型无法使用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

数组常用操作

多维数组一行代码实现一维转换

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);

统计字符串中相同字符出现的次数

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是快速友好的调试工具。一旦执行到这行代码，Chrome浏览器会在执行时自动停止。

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() 来标记循环耗时

要想确切知道某段代码需要执行多长时间，尤其是在调试慢循环时，该技巧代码会非常有用。

console.time('Timer1');

varitems = [];

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

items.push({index: i});

}

console.timeEnd('Timer1');

WebStorm 开发技巧

常用快捷键（Windows）

快捷键

含义

Ctrl+/ 或 Ctrl+Shift+/

注释（// 或者/*…*/ ）

Shift+F6

重构-重命名

Ctrl+X

删除行

Ctrl+D

复制行

Ctrl+G

查找行

Ctrl+Shift+Up/Down

代码向上/下移动

F2 或Shift+F2

高亮错误或警告快速定位

写代码，按Tab

生成代码

Ctrl+E