03、HTLM练习题

已于 2023-06-23 15:02:10 修改
阅读量62 收藏
点赞数
分类专栏： 前端实战-HTML&CSS 文章标签： 前端 html
于 2023-06-23 15:00:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44431329/article/details/131350765
版权

1、HTLM练习题

  1. 创建一个 HTML 页面并添加一个标题。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--  
  1. 题目说给HTML中添加一个标题,因为HTML中标题标签一共有两种
    a. h1-h6 标题标签
    b. title 网页标题标签
  -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是第一个网页</title>
</head>
<body>
    <h1>这是第一个标题</h1>
</body>
</html>

  2. 展示

image.png

  1. 在页面上添加一张图片。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 题目中需要添加一张照片，故用到了img标签和相对路径和绝对路径知识
        2. img标签详解释
            a. src 图片的路径，一共有相对路径和绝对路径和外部路径三种方式
            b. alt 图片加载时候展示的问题
            c. title 图片的标题
            d. width 图片宽度
            e. height 图片高度
     -->
     <img src="../day07练习/images/cat.gif" alt="图片加载失败" title="猫咪">
    
</body>
</html>

  2. 展示

image.png

  1. 在页面上添加一个段落并设置文本为“欢迎来到我的网站”。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        题目中需要用到p标签，p标签属于行内标签
     -->
    <p>欢迎来到我的网站</p>
</body>
</html>

  2. 展示

image.png

  1. 在页面上添加一个链接到 https://www.baidu.com 并将其文本设置为“前往百度”。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中需要用到a标签 
        2. a标签详解
            a. href跳转链接地址
            b. target设置跳转方式
                _self 当前窗口跳转
                _blank 新建窗口打开

     -->
    <a href="https://www.baidu.com "> 前往百度</a>
</body>
</html>

  2. 展示

image.png

  1. 创建一个无序列表，包括三个列表项。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 题目中需要用到无序标签 ul li
        2. 无序标签详解
            a. ul 下级菜单中只能放li
            b. li标签中可以放任意标签 
     -->
     <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
     </ul>
</body>
</html>

  2. 展示

image.png

  1. 创建一个有序列表，每个列表项包含一个链接和图像。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 题目中涉及的知识 有序列表 a标签 和img标签
        2. 有序标签详解
            a. ol和li组成
            b. ol下级只能放li
            c. li可以放置任意标签
        3. a标签详解
            a. href跳转地址
            b. target跳转方式一共有两个值
                _self 当前窗口跳转
                _blank 新建窗口跳转
        4. img标签详解
            a. src 图片路径
            b. alt 设置图片加载失败文字
            c. width图片宽度
            d. height图片高度
            e. title图片标题
     -->
     <ol>
        <li>
            <a href="https://www.baidu.com "> 前往百度</a>
            <img src="../day07练习/images/cat.gif" alt="图片加载失败" title="猫咪">
        </li>
        <li>
            <a href="https://www.baidu.com "> 前往百度</a>
            <img src="../day07练习/images/cat.gif" alt="图片加载失败" title="猫咪">
        </li>        <li>
            <a href="https://www.baidu.com "> 前往百度</a>
            <img src="../day07练习/images/cat.gif" alt="图片加载失败" title="猫咪">
        </li>
     </ol>
</body>
</html>

  2. 展示

image.png

  1. 将链接嵌入到一个图像中，并设置其目标在新的选项卡里打开。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.题目中需要用到a标签和img标签,并且a标签来包裹img标签
        2.a标签详解
            a. herf 跳转路径
            b. target 跳转方式
                _self 当前窗口跳转
                _blank 新建窗口跳转
        3.img标签详解
            a. src 跳转路径
            b. alt 图片加载失败展示文字
            c. title 图片的标题
            d. width 图片宽度
            e htight 图片高度
     -->
     <a href="https://www.baidu.com " target="_blank">
        <img src="../day07练习/images/cat.gif" alt="图片加载失败" title="猫咪">
    </a>

</body>
</html>

  2. 展示

image.png

  1. 在页面上加入一个导航栏，包含至少四个链接。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 加入一个导航栏需要用到有序列表和a标签 题目解法较多选择一个即可
        2. 有序标签详解
            a. 有序标签由ol和li组成
            b. ol下级只能放li
            c. li可以放任何标签
        3. a标签详解
            a. href 跳转地址
            b. target 跳转方式
                _self 当前窗口跳转
                _blank新建窗口跳转
     -->
    <ol>
        <li><a href="https://www.baidu.com ">导航栏1</a></li>
        <li><a href="https://www.baidu.com ">导航栏2</a></li>
        <li><a href="https://www.baidu.com ">导航栏3</a></li>
        <li><a href="https://www.baidu.com ">导航栏4</a></li>
    </ol>
</body>
</html>

  2. 展示

image.png

  1. 创建一个表单并包含一个文本输入框和一个提交按钮。
    1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题用到知识点为 form标签和input标签
        2. form标签详解
            a. action 把表单提交到的路径
            b. method 请求方法
        3.input标签需要用的类型
            a. text
            b. submit
     -->
    <form action="" method="get">
        输入框: <input type="text" name="text" id=""> <input type="submit">

    </form>
</body>
</html>

  2. 展示

image.png

  1. 将文本输入框标签设置为“姓名”。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        本题需要用到input标签中的text类型
     -->
    姓名: <input type="text" name="username">
</body>
</html>

  2. 展示

image.png

  1. 在表单中添加一个下拉菜单，并将选项设为“苹果”，“香蕉”和“梨子”。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        本题需要应用select标签配合option属性
     -->
     <select name="fruit" id="">
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <option value="">梨子</option>
     </select>
</body>
</html>

  2. 展示

image.png

  1. 在表单中添加一个单选按钮和一个复选框。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题知识点需要用到form标签和 input标签中的radio和checkbox类型
     -->
     <form action="">
        单选框<input type="radio" name="" id="">
        复选框 <input type="checkbox" name="" id="">
     </form>
</body>
</html>

  2. 展示

image.png

  1. 创建一个包含多个文本输入框和多个提交按钮的表单。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.本题用到的知识点为form表单和input标签和button
     -->
    <form action="">
        账户：<input type="text" name="" id=""><br>
        密码：<input type="password" name="" id=""><br>
        <input type="text" name="" id=""><button type="submit">获取验证码</button><br>
        <input type="submit" value="注册"><input type="submit" value="登录">

    </form>
</body>
</html>

  2. 展示

image.png

  1. 创建一个注释。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <!-- 注释 -->
</body>
</html>
  1. 在页面上插入一个水平线。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.本题中用到了hr水平标签
     -->
     <hr>
</body>
</html>

  2. 展示![image.png](https://cdn.nlark.com/yuque/0/2023/png/28006873/1687499129256-3f65e689-e036-4ef8-a657-e3fcf5b69cac.png#averageHue=%23fdfdfd&clientId=u3188e805-1b20-4&from=paste&height=60&id=u8e2351f5&originHeight=90&originWidth=1058&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=699&status=done&style=none&taskId=uba2d9851-9933-4fb1-9528-4631d4ad678&title=&width=705.3333333333334)
  1. 将文本以粗体字展示。
    4. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        本题用到的知识点strong标签
     -->
     <strong>加粗后的文字</strong>
</body>
</html>

  2. 展示

image.png

  1. 将文本以斜体字展示。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中使用到的为em标签
     -->
    <em>斜体</em>
</body>
</html>

  2. 展示

image.png

  1. 将文本以链接形式展示。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        1.本题用用到的知识点为a标签并包裹文字
      -->
      <a href="#">点击我跳转</a>

</body>
</html>

  2. 展示

image.png

  1. 创建一个多级列表，并包含至少两个子级列表。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的为无序列表
     -->
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
    </ul>
</body>
</html>

  2. 展示

image.png

  1. 创建一个包含两个标题的列表。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为无序列表和h标签
     -->
     <ul>
        <li><h1>标题1</h1></li>
        <li><h1>标题2</h1></li>
     </ul>
</body>
</html>

  2. 展示

image.png

  1. 创建一个包含表格的 HTML 页面，并为表格添加标题。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为table标签
            a. thead为表格头部可以放th标签为标题
     -->
    <table border="1">
        <thead>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </thead>
        <tbody>
            <tr>
                <td>标题</td>
                <td>标题</td>
                <td>标题</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

  2. 展示

image.png

  1. 在表格中添加一个合并单元格的实例。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 
        1. 本题中用到的知识点为table标签
        2. 合并单元格主要用到rowspan和colspan两个属性
     -->
     <table border="1">
        <thead>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">标题</td>
                <td colspan="2">标题</td>
            </tr>
            <tr>
                <td>标题</td>
                <td>标题</td>
            </tr>
        </tbody>
    </table>
</body>
</body>
</html>

  2. 展示

image.png

  1. 创建一个 HTML 页面包含多个表单，其中一个表单包含文件上传功能。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到表单标签form和input标签
     -->
     <form action="">
        <h1>第一个表单</h1>
     </form>

     <form action="">
        <h1>第二个表单</h1>
            <input type="file" multiple>
     </form>
</body>
</html>

  2. 展示

image.png

  1. 在页面中添加一个视频。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        1. 本题中用到的标签为video
     -->
     <video src="../day07练习/images/video.mp4 " controls></video>
</body>
</html>

  2. 展示

image.png

  1. 在页面中添加一个音频。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为audio
     -->
     <audio src="../day07练习/images/music.mp3" controls></audio>
</body>
</html>

  2. 展示

image.png

  1. 创建一个包含5列和4行的表格。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为table标签和其中的属性
     -->
     <table border="1">
        <thead>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </thead>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>    
     </table>
</body>
</html>

  2. 展示

image.png

  1. 在上述表格中的第一行添加表头单元格。
  2. 参考26题
  3. 在表格的最后一行添加一个单元格，并将其跨越5个列。
  4. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为table标签和其中的属性
     -->
     <table border="1">
        <thead>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </thead>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>    
        <tr>
            <td colspan="5">单元格</td>

        </tr> 
     </table>
</body>
</html>

  2. 展示

image.png

  1. 在表格中添加一个多行文本框，用于输入各个项目的说明。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中用到的知识点为table标签和其中的属性 和textare标签
     -->
     <table border="1">
        <thead>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>说明</th>

        </thead>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td><textarea name="" id="" cols="30" rows="10" placeholder="项目说明"></textarea></td>

        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td><textarea name="" id="" cols="30" rows="10" placeholder="项目说明"></textarea></td>

        </tr>        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td><textarea name="" id="" cols="30" rows="10" placeholder="项目说明"></textarea></td>
        </tr>    
        <tr>
            <td colspan="5">单元格</td>

        </tr> 
     </table>
</body>
</html>

  2. 展示

image.png

  1. 利用表格来创建一个基本的作息表，包含时间、任务及备注。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        
        <thead>
            <th colspan="5"><strong>这是一周作息表</strong></th>
        </thead>
        <tbody>
            <tr>
                <td>时间</td>
                <td>上午</td>
                <td>下午</td>
                <td>任务</td>
                <td>备注</td>
            </tr>
            <tr>
                <td>周一</td>
                <td>9-10</td>
                <td>14-15</td>
                <td><textarea name="" id="" cols="30" rows="10" placeholder="任务说明"></textarea></td>
                <td><textarea name="" id="" cols="30" rows="10" placeholder="备注说明"></textarea></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

  2. 展示

image.png

  1. 创建一个表单，其中包含下拉列表、密码输入框和多行文本框。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 本题中需要用到input标签 textare标签 selcet标签 form标签
     -->
<form action="">
    <select name="" id="">
        <option value="">x选项</option>
        <option value="">x选项</option>
        <option value="">x选项</option>
        <option value="">x选项</option>
    </select>
    密码框: <input type="password" name="" id=""><br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>

  2. 展示

image.png

  1. 创建一个表单，包含一个单选按钮组、多选框和提交按钮。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
                1. 本题中需要用到input标签 textare标签 form标签 button

     -->

     <form action="">
        <input type="radio" name="sex"> 男<br>
        <input type="checkbox" name="hob" id="">篮球<br>
        <button type="submit">提交</button>
     </form>
</body>
</html>

  2. 展示

image.png

  1. 创建一个表单，其中包含电话号码、电子邮件地址和网址输入框。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        本题中需要用到form标签 input标签
     -->
     <form action="">
        电话号码：<input type="text" name="" id=""><br>
        电子邮件: <input type="text" name="" id=""><br>
        网址输入: <input type="text" name="" id=""><br>
     </form>
</body>
</html>

  2. 展示

image.png

  1. 利用表单创建一个登录页面，其中包含用户名和密码输入框以及提交按钮。
  2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 
        本题中需要用到form标签 input标签
     -->
    <form action="">
        用户名： <input type="text" name="" id=""> <br>
        密码： <input type="password" name="" id=""> <br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

  2. 展示

image.png

孙小明的测试修炼手册
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML与CSS练习题1
Long_1016的博客
11-26 7609
一、单选题（共30题，每题2分） 1.下面关于外部样式表的说法错误的是 A文件扩展名为 .cs B外部样式表内容不需要使用<style>标签 C使用<link>标签引入外部样式 D使用外部样式表可以使网站更加简洁，风格保持统一 正确答案:A 解析:文件扩展名为 .css 2.下列在HTML文档中插入样式表的方式，优先级最高的是 A外部样式表 B内部样式表 C层叠样式表 D内联样式表 正确答案:D 解析:样式表的优先级：内...
html相关案例练习题
卓卓卓
10-16 1200
案例一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background
html、css练习题
zyz00000000的博客
09-12 6848
1. 网络慢的时候，会只加载html内容，不加载css样式，页面只显示html的文字内容。    显示的效果：  解决办法（1）： a { display: inline-block; width: 190px; height: 140px; border: 1px solid black; background-image: url(ht...
HTML学习练习题02：HTML习题02
SH_思寒的博客
08-29 595
HTML学习练习题02： HTML习题02： 链接：https://pan.baidu.com/s/1eDQf_KQRW6s1HojtNVKzmw 提取码：a66j
HTML5基础基础练习题
qq_42663223的博客
10-27 4062
HTML5基础基础练习题 学习内容： 提示：HTML5是标记语言大多数都是记单词不过基础最重要 例如： 1、 掌握单表签->例如<br> 2、 掌握双标签->例如<p><p> 3、 掌握超链接->例如<a href=" “><a> 4、 掌握img图片->例如<img src=” "> 基础习题一李清照的词 提示：根据下图使用HTML5标记语言实现 代码如下所示： <!DOCTYPE html>
HTML表格习题练习
qq_50589028的博客
02-20 2282
文章目录一、会议日程安排表二、课程表设计 一、会议日程安排表 <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h3 align="center">设置单元格跨列、跨行属性</h3> <center><table border="1" bordercolor="#3366ff"> <capt
html5-表格练习题
tester92的博客
04-18 5991
纯html编写（仅供参考，并非完美答案）：&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;        
HTML5练习题
zyz00000000的博客
09-13 4585
1. 通过canvas写一个小物块的移动 &lt;canvas width="200" height="400" id="canvas1"&gt;&lt;/canvas&gt; &lt;script&gt; var oCanvas = document.getElementById('canvas1'); //获取canvas var ctx = oC..
【前端】html 0基础练习题
weixin_52078305的博客
05-21 1497
1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。 要求： （1）大标题使用h3标签； （2）问卷调查题目使用h4标签 （3）前2个问题选项使用有序列表； （4）最后一个问题选项使用无序列表 添加链接描述 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习题</title> </head> <bod.
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
HTML_course.rar_html 练习题
09-14
html课程讲义，一共分七章。有练习题和联系代码。
HTML操作练习题.doc编程资料
04-05
HTML操作练习题.doc
html练习题
11-24
很不错的资源，希望对大家有帮助，相当简单易懂
一些java html的练习题
06-20
一些java html的练习题
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 664
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
前端开发记录
qq_25806839的博客
05-31 218
【代码】前端开发记录。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 584
记录一次前端页面崩溃的产生及处理
【JS实战02】轮播图
最新发布
微木
06-03 398
JS最经典案例之一，轮播图全功能总结详细代码
html 练习题和答案
07-07
HTML 练习题和答案是为帮助学习者巩固和提升他们在HTML方面的知识，以下为一些常见的HTML练习题和答案： 1. 创建一个HTML文件，包含一个标题为"我的第一个网页"的标题标签。 ```html <!DOCTYPE html> <html> 我的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值