简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常用标签学习总结——PHP培训第九期线上班
Blogger Information
Blog 19
fans 1
comment 0
visits 13310
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
HTML常用标签学习总结——PHP培训第九期线上班
涤尘
Original
664 people have browsed it

  1. 描述HTML与HTTP是什么,他们之间有什么联系?

html是一种通用的编写超文本的标记语言，http是超文本传输协议，用于传输超文本标记语言编写的文档，用于服务器端与客户端的一套协议。他们之间有相互依存关系！

2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

实例

<!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>
    <nav>
        <ul>
            <li><a href="1.jpg" target="_blank"><img src="https://img.php.cn/upload/course/000/000/001/5d22ad53c4d41933.jpg">首页</a></li>
            <li><a href="1.jpg" target="_blank">简介</a></li>
            <li><a href="1.jpg" target="_blank">新闻</a></li>
            <li><a href="1.jpg" target="_blank">图片</a></li>

        </ul>
    </nav>
</header>
</body>

</html>

运行实例 »

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

3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品表</title>
</head>

<body>
<table border="1" width="600" cellpadding="5" cellspacing="0"">
   <!-- 声明表格 -->
    <caption><h1>商品表</h1></caption>
    <!-- 表格头部 -->
    <thead>
        <tr  bgcolor="green">
            <th>订单编号</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td rowspan="3" align="center">010254</td>
            <td>法拉利</td>
            <td>150万</td>
            <td>1</td>
            <td>150万</td>
        </tr>
        <tr>
            <!--<td></td>-->
            <td>路虎</td>
            <td>200万</td>
            <td>1</td>
            <td>200万</td>
        </tr>
        <tr>
            <!--<td></td>-->
            <td>捷豹</td>
            <td>250万</td>
            <td>1</td>
            <td>250万</td>
        </tr>
    </tbody>
    <!-- 表格底部 -->
    <tfoot>
        <tr>
        <td colspan="3" align="center">合计</td>
        <!--<td></td>
        <td></td>-->
        <td>4</td>
        <td>600万</td>
        </tr>
    </tfoot>
</table>
</body>

</html>

运行实例 »

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

4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   
    <title>表单制作</title>
</head>

<body align="center">
<h2>网站用户注册</h2>
<form>
<p>
    <label for="username">账号：</label>
    <input type="text" name="username" id="username" value="zhangsan">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="必须在8到12位之间">
</p>
<p>
<label>邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</p> 
    <h3>以下内容选填</h3>
    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="16" max="80">
    </p>
    <p>
        <label for="">爱好:</label>
        <input type="checkbox" name="hobby[]" value="Bodybuilding" id="Bodybuilding"><label for="Bodybuilding">健身</label>
        <input type="checkbox" name="hobby[]" value="Cycling" id="Cycling" checked><label
            for="Cycling">骑车</label>
        <input type="checkbox" name="hobby[]" value="read" id="read"><label for="read">阅读</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="secrecy" checked><label for="secrecy">保密</label>
    </p>

    <p>
        <label for="photo">头像上传:</label>
        <input type="file" name="photo" id="photo">

    </p>

    <p>
        <input type="reset" name="reset" value="重填">
        <button type="button">注册</button>
    </p>

</form>


</body>

</html>

运行实例 »

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

5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
<!-- ul列表为后台侧边导航 -->
<ul style="float: left;margin-right: 18px;">
    <li><a href="demo3.html" target="content">商品列表</a></li>
    <li><a href="demo2.html" target="content">会员中心</a></li>
    <li><a href="demo1.html" target="content">促销活动</a></li>
</ul>
<!-- 设置内联边框大小尺寸，以及显示方式 -->
<iframe srcdoc="<h2>欢迎你</h2>" frameborder="1" name="content" width="630px" height="450px"></iframe>
</body>
</html>

运行实例 »

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

6. 总结: 为什么推荐使用语义化的标签?

语义化标签有利于程序员更新维护，便于SEO优化，也是未来发展趋势！

以下为手抄图片，因手指受伤，写的不好，请老师多担待！

第一页

1.jpg

第二页

2.jpg

第三页3.jpg

第四页

4.jpg

第五页5.jpg

第六页6.jpg

第七页7.jpg

第八页8.jpg


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！