简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第二课-HTML5常用标签
Blogger Information
Blog 10
fans 1
comment 0
visits 9800
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第二课-HTML5常用标签
弋兮
Original
698 people have browsed it

本次课程主要学习了html5的基本构造以及常用标签的使用方法。

一、HTML与HTTP

HTML是超文本标记语言，HTTP是超文本传输协议，是一套客户端和服务器端都必须遵守的请求和响应的标准或规范。

二、导航栏的制作

实例

<!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>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <!-- 在新窗口打开 -->
                <li> <a href="" target="_balnk">首页</a> </li>
                <!-- 在父级窗口打开 -->
                <li><a href="" target="_parent"><img src="1.jpg" alt=""></a></li>
                <!-- 在框架中打开 -->
                <li><a href="" target="content">css3</a></li>
                <!-- 在顶层窗口打开 -->
                <li><a href="" target="_top">PHP</a></li>
                <!-- 在当前页面打开 -->
                <li><a href="" target="_self">登录</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

运行实例 »

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

手抄：

1.jpg

三、表格的制作

实例

<!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>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5">
    <caption>
    <h2>购物车</h2>
    </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>价格</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mechrevo Z1</td>
                <td>1</td>
                <td>7300</td>
                <td>7300</td>
            </tr>
            <tr>
                    <td>2</td>
                    <td>Mechrevo Z2</td>
                    <td>1</td>
                    <td>7500</td>
                    <td>7500</td>
                </tr>
                <tr>
                        <td>3</td>
                        <td>Mechrevo X1</td>
                        <td>1</td>
                        <td>7000</td>
                        <td>7000</td>
                    </tr>
                    <tr>
                            <td rowspan="2">4</td>
                            <td>Mechrevo X2</td>
                            <td>1</td>
                            <td>7600</td>
                            <td>7600</td>
                        </tr>
                        <tr>
                                
                                <td>Mechrevo X2</td>
                                <td>1</td>
                                <td>7600</td>
                                <td>7600</td>
                            </tr>


        </tbody>
        <tfoot>
            <tr>
                <td  colspan=4 align="center">合计</td>
        
                <td>29400</td>

            </tr>

        </tfoot>
    </table>
</body>
</html>

运行实例 »

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

手抄：




2.2.jpg

四、注册表单的制作

实例

<!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>
    <h2>注册</h2>
    <form action="reg.php" method="post">
        <p>
            <label for="user">用户名:</label>
            <!-- lable是控件标题，它的for属性与控件的id绑定，使点击标题时自动获取控件焦点 -->
            <input type="text" id="user" name="user" value="liu">
        </p>
        <p>
            <label for="pwd">密    码:</label>
            <input type="password" id="pwd" name="pwd">
        </p>
        <p>
            <label for="email">邮    箱:</label>
            <input type="email" id="email" name="email" placeholder="email@xx">
        </p>
        <p>
            <label for="age">年    龄:</label>
            <input type="number" min="16" max="80" id="age" name="age">
        </p>
        <p>
            <label for="course">课    程:</label>
            <select name="course" id="course">
             <!-- 下拉选项 -->
                <optgroup label="前端"> <!--用optgroup来分类，lable为类名-->
                    <option value="html5">html5</option>
                    <option value="css3">css3</option>
                    <option value="JavaScript">JavaScript</option>
                </optgroup>
           
             <!-- 下拉选项 -->
             <optgroup label="后端"> <!--用optgroup来分类，lable为类名-->
                <option value="php">php</option>
                <option value="mysql">mysql</option>
                <option value="laravel">laravel</option>
            </optgroup>
        </select>
        </p>
        <p>
            <!-- 复选项 -->
            <label for="">爱好:</label>
            <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label>
            <input type="checkbox" name="hobby[]" id="program" value="program"><label for="program">撸代码</label>
            <input type="checkbox" name="hobby[]" id="movies" value="movies"><label for="movies">看电影</label>
            
        </p>
        <p>
                <!-- 单选项 -->
                <label for="male">性别:</label>
                <input type="radio" name="gender" id="male" ><label for="male">男</label>
                <input type="radio" name="gender" id="female"><label for="female">女</label>
                <input type="radio" name="gender" id="secret" checked><label for="secret">保密</label>
                
            </p>
            <p>
                <label for="photo">头像上传:</label>
                <input type="file" name="photo" id="photo">
            </p>
            <p>
                <label for="">提交</label>
                <input type="submit" name="submit" id="submit" value="提交">
                <input type="reset" name="res" id="res" value="重提">
                <input type="button" name="btn" id="btn" value="按钮">
                <button>提交</button>
            </p>
    </form>
</body>
</html>

运行实例 »

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

手抄：

3.1.jpg

3.2.jpg

五、用内联框架实现网站后端

实例

<!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>
    <!-- 用target="_content"来实现打开到框架中 -->
    <ul style="float: left;">
        <li> <a href="demo2" target="content">商品</a></li>
        <li> <a href="demo3" target="content">注册</a></li>
        <li> <a href="1" target="content">首页</a></li>
    </ul>
    <!-- content很重要，它是链接到该框架的入口 -->
    <!-- srcdoc可以直接写html代码，实现网站后台 -->
    <iframe srcdoc="<h2>欢迎来到首页</h2>" name="content" id="content" frameborder="1" width="600" height="800"></iframe>
</body>
</html>

运行实例 »

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

手抄：

4.jpg

六、总结

为什么推荐使用语义化标签？

  1. 语句结构规范清晰，利于后期维护

  2. 使用语义化标签有利于SEO优化。



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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！