Blogger Information
Blog 42
fans 5
comment 0
visits 38592
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML元素标签等
张浩刚
Original
685 people have browsed it

HTML是超文本标记语言。

HTTP是超文本传输协议。

1、导航列表,链接,图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1、2部分内容</title>
</head>
<body>
    <!--网站头部-->
    <header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">html/css</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">laravel</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <h1>HTML:超文本标记语言</h1>
        <h1>HTTP:超文本传输协议</h1>
    </article>

    <aside>
        <!--图片链接-->
        <a href="#"><img src="https://img.php.cn/upload/course/000/000/001/5d9f0b79ad447136.jpg" alt=""></a>
    </aside>

    <!--网站底部-->
    <footer>
        <dl>
            <dt>标题</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>
        <dl>
            <dt>标题</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>
    </footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、商品信息表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3内容</title>
</head>
<body>
    <article>
        <!--无序 快捷方式 ul>li*3>a (如果有超链,下同)-->
        <ul>
            <li>华为mate30 手机 1个 4000元</li>
            <li>苹果11 手机 1个 5000元</li>
            <li>小米9 手机 1个 2888元</li>
        </ul>
        <!--有序-->
        <ol>
            <li>华为mate30 手机 1个 4000元</li>
            <li>苹果11 手机 1个 5000元</li>
            <li>小米9 手机 1个 2888元</li>   
        </ol>
        <!--table-->
        <table border="1" cellpadding='5' cellspacing='0'>
            <caption>商品表单</caption>
            <thead>
                <tr bgcolor='yellow'>
                    <td>品牌</td>
                    <td>类型</td>
                    <td>数量</td>
                    <td>价格</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>华为mate30</td>
                    <td>手机</td>
                    <td>1</td>
                    <td>4000</td>
                </tr>
                <tr>
                    <td>苹果11</td>
                    <td>手机</td>
                    <td>1</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>小米9</td>
                    <td>手机</td>
                    <td>1</td>
                    <td>2888</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">合计:</td>
                    <td>3</td>
                    <td>12125</td>
                </tr>
            </tfoot>
        </table>
    </article>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、用户注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<body>
    <header>注册页面</header>
    <article>
        <form action="login.php" method="POST" name="">
            <p>
                <label for="name">用户名:</label>
                <input type="text" name="name" id="name" placeholder="请输入名字">
            </p>
            <p>
                <label for="password">登陆密码:</label>
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </p>
            <p>
                <label for="confirm_password">确认密码:</label>
                <input type="password" name="confirm_password" id="confirm_password" placeholder="请输入密码">
            </p>
            <p>
                <label for="email">邮箱:</label>
                <input type="email" name="email" id="email" placeholder="邮箱">
            </p>
            <p>
                <label for="tel">手机号码:</label>
                <input type="tel" name="tel" id="tel">
            </p>
            <p>
                <label for="male">性别:</label>
                <input type="radio" name="gender" id="male" checked><label for="male">男</label>
                <input type="radio" name="gender" id="female"><label for="female">女</label>
            </p>
            <p>
                <label for="clause">协议内容:</label>
                <input type="checkbox" name="clause" id="xuzhi"><label for="xuzhi">本站须知</label>
                <input type="checkbox" name="clause" id="clause"><label for="clause">法律条款</label>
            </p>
            <p>
                <label for="photo">头像上传:</label>
                <input type="file" name="photo" id="photo">
            </p>
            <p>
                <label for="">语言选择</label>
                <select name="" id="">
                    <optgroup label="前端">
                        <option value="">javascript</option>
                        <option value="">vue</option>
                        <option value="">laravel</option>
                    </optgroup>
                    <optgroup label="后端">
                        <option value="">java</option>
                        <option value="">php</option>
                        <option value="">python</option>
                    </optgroup>
                </select>
            </p>
            <p>
                <button type="reset">重置</button>
                <button>提交</button>
            </p>
        </form>
    </article>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、iframe内联框架实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe内联框架</title>
</head>
<body>
    <article style="float: left;">
        <a href="demo1.html" target="content">作业1、2部分内容</a><br>
        <a href="demo2.html" target="content">商品表单</a><br>
        <a href="demo3.html" target="content">注册页面</a>
    </article>
    <aside>
        <iframe srcdoc="<h2>iframe显示</h2>" frameborder="1" width="400" height="400" name="content"></iframe>
    </aside>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5、为什么推荐使用语义化的标签

a、nav标签,header标签,footer标签等,这些都是常用的语义化的标签,能让网页结构更清晰。

b、HTML5的语义元素在所有的最新版本的浏览器都支持,是趋势

c、有利于百度等搜索引擎收录。

6、手写记录

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