Blogger Information
Blog 37
fans 1
comment 0
visits 27106
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基本标签的使用 九期第二课
叮叮当当
Original
835 people have browsed it

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

HTML:超文本标记语言

HTTP:   超文本传输协议

两者联系:HTML文档存储在服务端供客户端访问,当用户访问网页时,用户客户端(如浏览器)通过HTTP协议访问服务端指定端口 ,服务端同样通过HTTP协议响应返回这些HTML文档,客户端(如浏览器)接收解析后再展示给用户。


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php中文网简易导航</title>
</head>

<body>
    <!--ul:无序列表-->
    <ul>
        <li><a href="https://www.php.cn" target="_blank">首页</a></li>
        <li>
            <a href="https://www.php.cn/map/dugu.html" target="_blank" >
                <img src="https://www.php.cn/static/dugu/images/ztop-bg.png" alt="独孤九贱系列" width="500">
            </a>
        </li>
        <li>
            <a href="https://www.php.cn/k.html" target="_blank">
                <img src="https://www.php.cn/static/images/index_banner.png?1" alt="第九期线上直播班入口" width="500">
            </a>
        </li>
    </ul>
</body>
</html>

运行实例 »

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

屏幕快照 2019-10-31 上午12.06.03.png


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
</head>

<body>
    <!--table:表格-->
    <!--caption:表格标题-->
    <!--thead:表格页眉-->
    <!--tbody:表格主题-->
    <!--tfoot:表格页脚-->
    <table border="1" cellspacing="0" cellpadding="10">
        <!--cellspacing:单元格之间的空间-->
        <!--cellpadding:单元边沿与其内容之间的空白-->
        <caption>商品信息表</caption>
        <thead>
            <tr bgcolor="#add8e6">
                <th>编号</th>
                <th>名称</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>铅笔</td>
                <td >1</td>
                <td rowspan="2">3</td>
                <td rowspan="2">3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>橡皮</td>
                <td>1</td>
            </tr>
            <tr>
                <td>3</td>
                <td>文具盒</td>
                <td>10</td>
                <td>1</td>
                <td>10</td>
            </tr>
            <tr>
                <td>4</td>
                <td>涂改液</td>
                <td>5</td>
                <td>1</td>
                <td>5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="center">合计:</td>
                <td align="center">5</td>
                <td align="center">18</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行实例 »

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

屏幕快照 2019-10-31 上午12.07.05.png


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>

<body>
    <h3>用户登录</h3>
    <form action="login.php" method="post">
        <p>
            <!--label: 控件标题, 点击标题自动获取控件焦点,它的for属性与控件id属性须一致-->
            <label for="username">用户:</label>
            <input type="text" name="username" id="username" value="" >
        </p>
        <p>
            <label for="psd">密码:</label>
            <input type="password" name="psd" id="psd" placeholder="请输入密码">
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" placeholder="example@email.com">
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="18" max="60">
        </p>
        <p>
            <label for="city">城市:</label>
            <select name="city" id="city">
                <!--分组-->
                <optgroup label="江苏省">
                    <option value="">南京市</option>
                    <option value="" selected>苏州市</option>
                    <option value="">徐州市</option>
                </optgroup>
                <optgroup label="安徽省">
                    <option value="">合肥市</option>
                    <option value="">六安市</option>
                    <option value="">阜阳市</option>
                </optgroup>
            </select>
        </p>
        <p>
            <!--点击性别,自动选中未知,secrecy-->
            <label for="secrecy">性别:</label>
            <input type="radio" name="sex" id="male" checked><label for="male">男</label>
            <input type="radio" name="sex" id="female"><label for="female">女</label>
            <input type="radio" name="sex" id="secrecy"><label for="secrecy">未知</label>
        </p>
        <p>
            <!--点击爱好,自动选中跑步,running-->
            <label for="running">爱好:</label>
            <input type="checkbox" name="hobby[]" value="running" id="running"><label for="running">跑步</label>
            <input type="checkbox" name="hobby[]" value="play" id="music"><label for="music">音乐</label>
            <input type="checkbox" name="hobby[]" value="eat" id="eat"><label for="eat">吃</label>
        </p>
        <p>
            <label for="photo">头像上传:</label>
            <input type="file" name="photo" id="photo">
        </p>
        <p>
            <input type="reset" name="reset" value="重填">
            <button>提交</button>
        </p>
    </form>
</body>
</html>

运行实例 »

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

屏幕快照 2019-10-31 上午12.07.45.png

屏幕快照 2019-10-31 上午12.08.21.png


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理后台</title>
</head>

<body>
    <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画-->
    <!--将当前页面显示到内联框架中,需将a标签与内联框架的name属性值绑定-->
    <ul style="float: left;margin-right: 15px;">
        <!--左浮动,右边距15像素-->
        <li><a href="demo6.html" target="content">商品列表</a></li>
        <li><a href="demo7.html" target="content">添加用户</a></li>
        <li><a href="demo1.html" target="content">系统设置</a></li>
    </ul>
    
    <!--想让src支持html代码,改成srcdoc属性就好-->
    <iframe srcdoc="<h2 style='color:red;'>欢迎使用后台管理</h2>" frameborder="1" name="content" 
        width="530" height="450">
    </iframe>
</body>
</html>

运行实例 »

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

屏幕快照 2019-10-31 上午12.08.38.png


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

(1). 有利于SEO优化,搜索引擎只要看到标签就能知道里面的内容,有利于网页被收录,符合w3c标准。

(2). 网页显示效果好,在没有css的情况下也能有清晰的网页结构,同时增强了可读性。

(3). 便于团队的开发和维护, 提高团队的效率。

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