简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 10月29日作业
Blogger Information
Blog 8
fans 0
comment 0
visits 5054
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
10月29日作业
elva
Original
558 people have browsed it

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

html:超文本标记语言。html是万维网文档，在各种主机上显示出来，这种文档专供浏览器上为浏览器用户提供统一的界面呈现的统一规约，且具备结构化的特征。

http：超文本传输协议。http是一个客户端到服务器请求和应答地标准tcp，用于www服务器传输超文本到本地浏览器的传输协议，可以是浏览器更加高效，减少网络传输。

html是通过http协议将html文档从服务器传输到本地浏览器，经过浏览器解析显示出来。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一个导航</title>
</head>
<body>
    <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1>
    <nav>
        <ul>
            <li><a href=""><img src="static/images/ni1.jpg" alt="星闻"></a></li>
            <li><a href=""><img src="static/images/ni2.jpg" alt="图吧"></a></li>
            <li><a href=""><img src="static/images/ni3.jpg" alt="明星库"></a></li>
            <li><a href=""><img src="static/images/ni4.jpg" alt="排行榜"></a></li>
        </ul>
    </nav>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一张商品信息表</title>
</head>
<body>
    <h1>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h1>
    <section>
        <table width="500" border="1" bordercolor="black" cellspcing="2" cellpadding="0" style="text-align: center;">
            <caption><h1>商品信息表</h1></caption>
            <thead style="background-color:lightgreen;">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>单品总价</th>
                    <th>合计</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>小米手机</td>
                <td>3699</td>
                <td>2</td>
                <td>7398</td>
                <td rowspan="5">26492</td>
            </tr>
            <tr>
                <td>2</td>
                <td>笔记本</td>
                <td>4700</td>
                <td>3</td>
                <td>14100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>红米电视</td>
                <td>2600</td>
                <td>1</td>
                <td>2600</td>
            </tr>
            <tr>
                <td>4</td>
                <td>路由器</td>
                <td>399</td>
                <td>6</td>
                <td>2394</td>
            </tr>
            </tbody>
            <tfooter>
                <tr>
                    <td colspan="4">出纳</td>
                    <td colspan="2">葛丽</td>
                </tr>
            </tfooter>
        </table>
    </section>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一张完整的用户注册表单</title>
</head>
<body>
    <h1>
        制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
    </h1>
    <section>
        <h3>用户注册</h3>
        <form action="register.php" method="post">
            <p>
                <label for="username">用户名:</label>
                <input type="text" name="username" id="username">
            </p>
            <p>
                <label for="pwd">密码：</label>
               <input type="password" name="pwd" id="pwd">
            </p>
            <p>
                <label for="email">邮箱:</label>
                <input type="email" placeholder="请输入您的邮箱" name="email" id="email">
            </p>
            <p>
                <label for="sex">性别：</label>
                <input type="radio" name="sex"  checked><label for="">女</label>
                <input type="radio" name="sex"><label for="">男</label>
                <input type="radio" name="sex"><label for="">密码</label>
            </p>
            <p>
                <label for="hobby">爱好:</label>
                <input type="checkbox" name="hobby[]">旅游
                <input type="checkbox" name="hobby[]">跳舞
                <input type="checkbox" name="hobby[]">健身
                <input type="checkbox" name="hobby[]">书法
            </p>
            <p>
                <label for="city">所在城市:</label>
                
                <select name="city" id="city">
                    <option value="0">请选择</option>
                    <option value="1">北京</option>
                    <option value="2">天津</option>
                    <option value="3">上海</option>
                    <option value="4">重庆</option>
                </select>
            </p>
            <p>
                <label for="avatar">头像上传::</label>
                <input type="file" name="avatar" id="avatar">
            </p>
            <p>
                <button>注册</button>
            </p>
    </section>
</body>
</html>

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

<div class="side" style="float: left;margin-right: 260px;">
<ul>
    <li><a href="demo1.html" target="content">商品添加</a></li>
    <li><a href="demo2.html" target="content">商品属性</a></li>
    <li><a href="demo3.html" target="content">***管理</a></li>
</ul>
</div>
<iframe srcdoc="<h2>欢迎使用***后台管理系统</h2>" frameborder="0" width="600" height="500" name="content"></iframe>

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

语义化的html结构是html发展的趋势， html本身没有表现的，语义化标签让页面呈现清晰的结构。

使用语义化标签，可以使页面具有更好的搜索引擎优化。因为搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。使用语义化标签，让浏览器或者网络爬虫能够快速解析，更好的让网络爬虫分析页面中的内容。

 

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！