练习02-HTML语法

OranTech2025-12-24 9:41

题目1：自动生成网页结构

要求：

使用快捷键创建一个网页结构，并在body中添加一些HTML元素，要求：

在body元素中加入HTML元素：<p>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p>
在合适位置加入一个<br>元素，实现这首古诗的两行展示~

提示：先在编辑器中输入英文 ! ，然后按下Tab键（Q字母左侧），编辑器会自动生成 HTML文档模板。

答案：

html 复制代码

<!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>


<p>白日依山尽，黄河入海流。<br>欲穷千里目，更上一层楼。</p>


    
</body>
</html>

题目2：丰富网页元素

要求：

将body中的HTML元素补充完整，并添加指定的属性，要求：

给h3元素添加结束标签
在第2个p元素的开始标签内添加class属性，值为"red"

答案：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>古诗</title>
    <style>
         /* 这里是CSS代码，用于演示颜色样式  */
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- TODO 给h3元素添加结束标签 -->
    <h3>《出塞》</h3>
    <p>秦时明月汉时关，</p>
    <!-- TODO 在第2个p元素的开始标签内添加class属性，值为"red" -->
    <p    class = "red">万里长征人未还。</p>
    <p>但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>