Blogger Information
Blog 11
fans 0
comment 0
visits 7107
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML5的标签使用
手机用户701003573
Original
748 people have browsed it

一、HTML与HTTP是什么,他们之间有什么联系?

    1.HTML:HTML全称Hypertext Markup Language,也就是“超文本链接标示语言”。HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 即平常上网所看到的的网页。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。

    2.HTTP : HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。当你上网浏览网页的时候,浏览器和web服务器之间就会通过HTTP在Internet上进行数据的发送和接收。HTTP是一个基于请求/响应模式的、无状态的协议。

    3.联系:,我们使用HTTP协议打开的一个网站 ,而这个网站显示出来的内容是由HTML这种标签语言编写的。

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

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作导航</title>
</head>
<body>
    <ul>
        <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">首页</a></li>
        <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">头部</a></li>
        <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">内容</a></li>
        <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">底部</a></li>
    </ul>
</body>
</html>

运行实例 »

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


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

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
</head>
<body>
<!--border 简写属性在一个声明设置所有的边框属性-->
<!--cellspacing 属性规定单元格之间的空间-->
<!--cellpadding 属性规定单元边沿与其内容之间的空白。-->
    <table  border="1"   width="500"  cellspacing="0"  cellpadding="5">
                 <caption>
                    <h3>购物车</h3>
                </caption>         
        <!--头部-->
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <!--主体-->
        <tr>
            <td>1</td>
            <td>oppo</td>
            <td>2000</td>
            <td>1</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>vive</td>
            <td>2000</td>
            <td>1</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>华为</td>
            <td>2000</td>
            <td>1</td>
            <td>2000</td>
        </tr>
        <tr>
            <!--colspan 合并单元格-->
            <td colspan="3" align="center">合计:</td>
            <!-- <td>x</td> -->
            <!-- <td>x</td> -->
            <td>3</td>
            <td>6000</td>
        </tr>
    </table>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与控件</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post">
    <p>
        <label for="user_name">账户:</label>
        <input type="text" name="user_name" id="user_name" value="huang">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="6-12位之间">
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" >

    </p>
    <p>
        <label for="ages">年龄:</label>
        <input type="number" name="ages" id="ages" max="80" min="15" style="width: 170px">
    </p>
    <p>
        <label for="">水果:</label>
        <select name="" id="" style="width: 170px">
            <option value="">请选择水果</option>
            <!--optgroup 分组-->
            <optgroup label="树上">
                <option value="">苹果</option>
                <option value="">梨</option>
                <option value="">桃</option>
            </optgroup>
            <optgroup label="地上">
                <option value="">西瓜</option>
                <option value="">哈密瓜</option>
                <option value="">白瓜</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label for="">爱好:</label>
        <input type="checkbox" name="hobby[]" value="Jitter" id="Jitter"><label for="Jitter">抖音</label>
        <input type="checkbox" name="hobby[]" value="Novel" id="Novel" checked><label
            for="Novel">小说</label>
        <input type="checkbox" name="hobby[]" value="movies" id="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="secrecy" checked><label for="secrecy">保密</label>
    </p>
    <p>
        <label for="img">图片:</label>
        <input type="file" name="img" id="img">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重填">
        <input type="button" name="reset" value="按钮">
        <button type="button">注册</button>
    </p>
</form>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<ul>
    <li><a href="form.html" target="content">用户注册</a></li>
    <li><a href="commodity_information.html" target="content">商品信息</a></li>
    <li><a href="Production_navigation.html" target="content">系统</a></li>
</ul>
<iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe>
</body>
</html>

运行实例 »

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

1572415329191413.png

1572415330602982.png

1572415407777028.png

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

语义化标签是构建一个html的基础,由其构建的页面可以由浏览器直接运行不需要搭配环境,有利于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