HTML元素标签等 - html/css

Home > List of blog posts > HTML元素标签等

Blogger Information

Blog 42

fans 5

comment 0

visits 38203

Special Recommendation

More>

Related recommendations

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

flex grid 两种布局，一个页面

2019-11-10 20:51:26

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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

2、商品信息表

3、用户注册表单

4、iframe内联框架实例

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

6、手写记录