Ement常用语法使用学习记录 -

1. 实例演示Ement常用语法

使用HTML:5 或直接使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
</html>

div>ui>li 套嵌关系

<div>
    <ui>
        <li></li>
    </ui>
</div>

div+sap+i 兄弟关系

<div></div>
<sap></sap>
<i></i>

div{文本} 文本方式

<div>文本</div>

div*5 重复方法

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

div+(div>ul>li)+div 组合方法

<div></div>
<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

2. 实例演示元素四类属性

class 和 id 的使用

div.header 生成

<div class="header"></div>

div#header 生成

<div id="header"></div>

a href属性生成

<a href="http://a"></a>

3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <!-- 当前语法使用 .top-header>div.top-hover-menu*3>a{顶部$}-->
    <div class="top-header">
        <div class="top-hover-menu"><a href="">顶部1</a></div>
        <div class="top-hover-menu"><a href="">顶部2</a></div>
        <div class="top-hover-menu"><a href="">顶部3</a></div>
    </div>
    <!-- 当前语法使用 div.left-nav>ui.Nav_menu>li#id.active*6>p{左侧菜单$} -->
    <div class="left-nav">
        <ui class="Nav_menu">
            <li id="id" class="active">
                <p>左侧菜单1</p>
            </li>
            <li id="id" class="active">
                <p>左侧菜单2</p>
            </li>
            <li id="id" class="active">
                <p>左侧菜单3</p>
            </li>
            <li id="id" class="active">
                <p>左侧菜单4</p>
            </li>
            <li id="id" class="active">
                <p>左侧菜单5</p>
            </li>
            <li id="id" class="active">
                <p>左侧菜单6</p>
            </li>
        </ui>
    </div>
    <!-- 当前语法使用 div.center>(div.search>div{搜索})+div.main>(div.item>div>p{内容$})*3 -->
    <div class="center">
        <div class="search">
            <div>搜索</div>
        </div>
        <div class="main">
            <div class="item">
                <div>
                    <p>内容1</p>
                </div>
            </div>
            <div class="item">
                <div>
                    <p>内容2</p>
                </div>
            </div>
            <div class="item">
                <div>
                    <p>内容3</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 当前语法使用 div.footer>ui>li*5{底部} -->
    <div class="footer">
        <ui>
            <li>底部</li>
            <li>底部</li>
            <li>底部</li>
            <li>底部</li>
            <li>底部</li>
        </ui>
    </div>
</body>
</html>

Ement常用语法使用学习记录

1. 实例演示Ement常用语法

2. 实例演示元素四类属性

class 和 id 的使用

3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点

总结：HTML5语义化标签结构清晰、阅读简单