Making use of a simple HTML interface (tool HBuilder)

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-8" >
 <-! Title, which fill the content will be displayed in a small box, top of the browser ->
         < title > </ title > 

    </ head > 
    < body > 
<-! web pages into three parts, head -> 

            < header > 
        < h1 of > < A the href = "#" > < IMG the src = "../ IMG / 163logo.gif " Alt =" logo " /> </ A ></h1>
        <p>
            <a href="#">免费邮</a>
            <a href="#"> 企业邮</a>
            <a href="#">VIP邮箱</a>
            <a href="#">帮助</a>
        </p>
    </header>
<!--中部-->

    <section>
        <div>
            <img src="../img/imap.jpg" alt= "" /> 
            < Ul > 
                < li > 163/126 / yeah three free e-mail are open by default </ li > 
                < li > Full support for iPhone / iPad and Android systems </ li > 
                < li > client, mobile and web pages, send realize, reading mail </ li > 
            </ ul > 
            < A href = "#" > < img src = "../ img / loginIcon.gif" > common login </ A > 
        </ div > 
        <form action="#" method="get">
            <p>
                用户名：
                <input type="text" name="userName"/>
                @163.com
            </p>
            <p>
                密码：
                <input type="password" name="psw"/>
            </p>
            <p>
                版本：
                <select name=""version id="">
                    <option value="">默认</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                </select>
            </p>
            <p>
                <input type="checkbox" value="autoLogin"/>自动登录
                <input type="checkbox" value="ssl" checked/>SSL
            </p>
            <input type="submit" value="登录"/>
            <input type="submit" value="注册"/>
        </form>
    </section>
<!--尾部-->

    <footer>
        <img src="../img/netease_logo.gif" alt=""/>
        < A href = "#" > About NetEase </ A > 
        < A href = "#" > Free Mail </ A > 
        < A href = "#" > official blog </ A > 
        < A href = "#" > customer service </ A > 
        < A href = "#" > Privacy policy </ A > |
         < A href = "#" >Netease company Copyright   & Copy; 2015-2018</a>
    </footer>
    </body>
</html>

The above chart shows the effect, save the picture Location: Right-click the file img current web project folder, open the file directory (p)

These four maps have into it. <-! ******* -> as a comment <ul> </ ul> unordered list.