MooN Code Note

常用参考文档

W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/

emmet 语法

简介

Emmet 语法的前身是 Zen coding，它使用缩写，来提高 html/css 的编写速度，Vscode 内部已经集成该语法。
快速生成 HTML 结构语法
快速生成 CSS 样式语法

快速生成HTML结构语法

html 初始结构

输入!，再按 tab 键。这样可以快速生成基础的结构

生成元素

生成标签，直接输入标签名，按 tab/enter 键即可。比如输入div然后按 tab 键，就可以生成<div></div>

带 id 属性的元素

id的指令：#。输入元素名#id名，再按tab/enther键。

html

<!-- div#test -->
<div id="test"></div>

带 class 属性的元素

class的指令：.。输入元素名.class名，再按tab/enther键。

html

<!-- div.test -->
<div class="test"></div>

父子节点元素

生成父子节点关系元素的指令：>。输入父元素名>子元素名，再按tab/enther键。比如ul > li即可

html

<!-- div>ul>li>p -->
<div>
    <ul>
        <li>
            <p></p>
        </li>
    </ul>
</div>

兄弟节点元素

生成带兄弟节点元素的指令：+。输入元素名+兄弟元素名，再按tab/enther键。比如div+p

html

<!-- div+ul+p -->
<div></div>
<ul></ul>
<p></p>

上级节点元素

生成带上级节点元素的指令：^。输入元素名^上级元素名，再按tab/enther键。

html

<!-- div>ul>li^div
    这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系，当然两个^^就是上上级
-->
<div>
    <ul>
        <li></li>
    </ul>
    <div></div>
</div>

重复元素

生成重复元素的指令：*。输入元素名*个数，再按tab/enther键。

html

<!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

分组元素

生成多个相同标签的指令：()。输入元素名>(分组元素..)>元素名，再按tab/enther键。比如输入div*3就可以快速生成3个div

html

<!-- 分组分成元素 div>(ul>li>a)+div>p
    （)括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关
-->
<div>
    <ul>
        <li><a href=""></a></li>
    </ul>
    <div>
        <p></p>
    </div>
</div>

带属性元素

生成带属性元素的指令：[attr=xxx]。输入元素名[属性1=xxx ... 属性n=xxx]，再按tab/enther键。

注：中括号内填写属性键值对的形式，并且空格隔开

html

<!-- a[href='###' name='xiaoA']
    中括号内填写属性键值对的形式，并且空格隔开
-->
<a href="###" name="xiaoA"></a>

属性名自增编号

如果生成的元素类名是有顺序的，可以用自增符号$，如输入.demo$*5再按tab键，生成5个div，类名分别叫demo1，demo2，...demo5

html

<!-- ul>li.test$*3 -->
<ul>
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
</ul>

值得注意：一个$代表一位数。如果需要自定义从某个数值开始递增的话可以：元素名$@数字*元素个数。例如：ul>li.test$@3*3

html

<!-- ul>li.test$@3*3 -->
<ul>
    <li class="test3"></li>
    <li class="test4"></li>
    <li class="test5"></li>
</ul>

带文本的元素

生成带文本元素指令：{}，输入元素名{标签体文本内容}，再按tab/enther键。

html

<!-- ul>li.test$*3{测试$} -->
<ul>
    <li class="test1">测试1</li>
    <li class="test2">测试2</li>
    <li class="test3">测试3</li>
</ul>

隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，默认生成<div>标签例如：.test。直接输入指令，即可识别父类标签。如下

可在 ul 和 ol 中使用
可在select中使用
tr：可在 table、tbody、thead 和 tfoot 中使用
td：可在 tr 中使用

html

<!-- .test -->
<div class="test"></div>
<!-- li： 可在ul 和 ol 中使用 例如：ul>.test$*3 -->
<ul>
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
</ul>
<!-- option：可在select中使用例如：select>.test$*5 -->
<select name="" id="">
    <option class="test1"></option>
    <option class="test2"></option>
    <option class="test3"></option>
    <option class="test4"></option>
    <option class="test5"></option>
</select>

快速生成CSS样式语法

CSS 基本采取简写形式即可

比如w200按tab可以生成width: 200px;
比如lh26px按tab可以生成line-height: 26px;

快速格式化代码（vsCode）

VSCode 快速格式化代码：shift+alt+f

也可以设置保存页面的时候自动格式化代码:

【文件】-->【首选项】-->【设置】
搜索emmet.include
在settings.json下的【工作区设置】中添加以下语句：

json

"editor.formatOnType": true,
"editor.formatOnSave": true

百度地图测试示例

html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#allmap {width:100%;height:500px;}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
	<title>逆地址解析</title>
</head>
<body>
	<!-- 地图渲染 -->
	<div id="allmap"></div>
	<p>点击地图展示详细地址</p>
	<!-- 渲染结果搜索列表 -->
	<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,17);
	// 创建地址解析器实例
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint("广东省广州市西华新村北", function(point){
		if (point) {
			map.centerAndZoom(point, 17);
			map.addOverlay(new BMap.Marker(point));
			myGeo.getLocation(point, function(rs){
				var address = rs.address;
				var addComp = rs.addressComponents;
				var list = rs.surroundingPois;

				console.log("当前搜索的地址描述address ==> ",address);
				console.log("相关的地址信息 ==> ",addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

				// 将当前的地址加到集合中
				list.unshift({point:point, title: address});

				list.forEach(e => {
					// 将列表中的所有POI打上标记
					map.addOverlay(new BMap.Marker(e.point));
					console.log("title ==> ", e.title);
					console.log("point ==> ", "point:lng=" + e.point.lng + ",lat=" + e.point.lat);
					console.log("address ==> ", e.address);
				});
			});

			// 关键字搜索
			// var myKeys = ["车陂南"];
			// var local = new BMap.LocalSearch(map, {
			// 	renderOptions:{map: map, panel:"r-result"},
			// 	pageCapacity:5
			// });
			// local.searchInBounds(myKeys, map.getBounds());
		}else{
			alert("您选择地址没有解析到结果!");
		}
	}, "广州市");
</script>

常用参考文档 ​

emmet 语法 ​

简介 ​

快速生成HTML结构语法 ​

html 初始结构 ​

生成元素 ​

带 id 属性的元素 ​

带 class 属性的元素 ​

父子节点元素 ​

兄弟节点元素 ​

上级节点元素 ​

重复元素 ​

分组元素 ​

带属性元素 ​

属性名自增编号 ​

带文本的元素 ​

隐式标签 ​

快速生成CSS样式语法 ​

快速格式化代码（vsCode） ​

百度地图测试示例 ​

常用参考文档

emmet 语法

简介

快速生成HTML结构语法

html 初始结构

生成元素

带 id 属性的元素

带 class 属性的元素

父子节点元素

兄弟节点元素

上级节点元素

重复元素

分组元素

带属性元素

属性名自增编号

带文本的元素

隐式标签

快速生成CSS样式语法

快速格式化代码（vsCode）

百度地图测试示例