<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ement 学习</title>
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
<script class="javascript" src="Scripts/jquery.js"></script>
<script class="javascript" src="Scripts/shCore.js"></script>
<style type="text/css">
body{ margin: 0;padding: 0;font-family: "微软雅黑";overflow: hidden;}
body,html{ 100%;height: 100%;}
ul,li,dl,dd,dt,p,ol,h1,h2,h3,h4,h5{font-size: 12px;font-weight: 100;padding: 0;margin: 0;}
*{text-decoration: none;list-style: none;}
img{border: 0px;}
.ement-title{
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-content: flex-start;
background-color: #E7E5DC;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
border-bottom: 3px solid #6CE26C;
}
.ement-title em{
font-style: normal;
line-height: 30px;
}
.article_content{
height: 100%;
overflow: auto;
}
.article_content .dp-highlighter{
margin-top: 0 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".article_content pre").each(function () {
var $this = $(this);
if ($this.attr("class").indexOf("") != -1) {
var lang = $this.attr("class").split(';')[0].split(':')[1];
$this.attr('name', 'code');
$this.attr('class', lang);
}
});
dp.SyntaxHighlighter.HighlightAll('code');
});
</script>
</head>
<body>
<div class="article_content">
<blockquote class="ement-title"><em>后代：></em><em>缩写：nav>ul>li</em></blockquote>
<pre name="code" class="html" >
<nav>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
</pre>
<blockquote class="ement-title"><em>兄弟：+</em><em>缩写div+p+bq</em></blockquote>
<pre name="code" class="html">
<div></div>
<p></p>
<blockquote></blockquote>
</pre>
<blockquote class="ement-title"><em>上级：^</em><em>缩写：div+div>p>span+em^bq</em></blockquote>
<pre name="code" class="html">
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
</pre>
<blockquote class="ement-title"><em></em><em>缩写：div+div>p>span+em^^bq</em></blockquote>
<pre name="code" class="html">
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
</pre>
<blockquote class="ement-title"><em>分组：( )</em><em>缩写：div>(header>ul>li*2>a)+footer>p</em></blockquote>
<pre name="code" class="html">
<div>
<header>
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
</pre>
<pre name="code" class="html">
<div>
<dl>
<dt>003</dt>
<dd>001</dd>
<dt>004</dt>
<dd>002</dd>
<dt>005</dt>
<dd>003</dd>
</dl>
</div>
<foot>
<p></p>
</foot>
</pre>
<blockquote class="ement-title"><em>乘法：*</em><em>缩写：ul>li*5</em></blockquote>
<pre name="code" class="html">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</pre>
<blockquote class="ement-title"><em>自增符号：$</em><em>缩写：ul>li.item$*5</em></blockquote>
<pre name="code" class="html">
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
</pre>
<blockquote class="ement-title"><em>缩写：h$[title=item$]{Header $}*3</em></blockquote>
<pre name="code" class="html">
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
</pre>
<blockquote class="ement-title"><em>缩写：ul>li.item$$$*5</em></blockquote>
<pre name="code" class="html">
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
</pre>
<blockquote class="ement-title"><em>缩写：ul>>li.item$@-*5</em></blockquote>
<pre name="code" class="html">
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
</pre>
<blockquote class="ement-title"><em>缩写：ul>li.item$@3*5</em></blockquote>
<pre name="code" class="html">
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
</pre>
<blockquote class="ement-title"><em>ID和类属性</em><em>缩写：#header .title form#search.wide p.class1.class2.class3</em></blockquote>
<pre name="code" class="html">
<div id="header"></div>
<div class="title"></div>
<form action="" id="search" class="wide"></form>
<p class="class1 class2 class3"></p>
</pre>
<blockquote class="ement-title"><em>自定义属性</em><em>缩写：p[title="hello world"] td[rowspan=2 colspan=3] [a='value1' b='value2']</em></blockquote>
<pre name="code" class="html">
<p title="hello world"></p>
<table>
<tr>
<td rowspan="2" colspan="3"></td>
</tr>
</table>
<div a="value1" b="value2"></div>
</pre>
<blockquote class="ement-title"><em>文本：{ }</em><em>缩写：a{Click me} p>{click}+a{here}+{to continue}</em></blockquote>
<pre name="code" class="html">
<a href="">Click me</a>
<p>Click<a href="">Here</a>To Continue</p>
</pre>
<blockquote class="ement-title"><em>隐式标签</em><em>缩写：.class</em><em>ul>.class</em><em>table>.row>.col</em></blockquote>
<pre name="code" class="html">
<em><span class="cls"></span></em>
<ul>
<li class="cls"></li>
</ul>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
</pre>
<blockquote class="ement-title"><em>常见的标签</em></blockquote>
<pre name="code" class="html">
<br>
<hr>
<a href=""></a>
<a href="http://"></a>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<meta>
<style></style>
<script></script>
<script src=""></script>
<img src="" alt="">
<form action=""></form>
<form action="" method="get"></form>
<form action="" method="post"></form>
<lable></lable>
<input type="text">
<input type="hidden" name="">
<input type="checkbox" name="" id="">
<input type="radio" name="" id="">
<input type="file" name="" id="">
<input type="button" value="">
<select name="" id=""></select>
<textare></textare>
<btn:b></btn:b>
<button type="reset"></button>
<button type="submit"></button>
</pre>
</div>
</body>
</html>