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

Home > List of blog posts > Ement常用语法使用学习记录

Blogger Information

Blog 14

fans 0

comment 0

visits 8286

Special Recommendation

More>

Related recommendations

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>

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

Correcting teacher：

autoload

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Ement常用语法使用学习记录

2021-12-22 18:32:21