课外拓展训练1

最新推荐文章于 2024-10-10 23:52:19 发布

Westlich_

最新推荐文章于 2024-10-10 23:52:19 发布

阅读量53

点赞数

分类专栏： Web前端开发技术实验与实践文章标签： css html5 visual studio code web

本文链接：https://blog.csdn.net/m0_64740343/article/details/134220233

版权

Web前端开发技术实验与实践专栏收录该内容

5 篇文章 0 订阅

订阅专栏

复习用

题1-1 h3、hr、p等标记的应用

要求：

meta标记至少设置2个属性值对
标题居中对齐、段落首行缩进2个字符、水平分割线为粉红色

效果展示：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Keywords" content="meta、h3、hr、p等标记的应用">
    <meta name="Description" content="meta、h3、hr、p等标记的应用"><!--描述-->
    <title>h3、hr、p等标记的应用</title>
    <style>
        h3{
            text-align: center;
        }
        p{
            text-indent: 2em;/*首行缩进2个字符*/
        }
    </style>
</head>
<body>
    <h3>meta、h3、hr、p等标记的应用</h3>
    <hr color="pink" size="3">
    <p>HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其他标准被束之高阁，为了推动Web标准化
       运动的发展，一些公司联合起来，成立了一个叫Web Hypertext Application Technology Working
       Group（Web超文本应用技术工作组，WHATWG）的组织。</p>
</body>
</html>

题1-2 body属性及注释标记的应用

要求：

利用CSS和body属性设计彩色页面；页面文字颜色为白色，背景为#6633ff，顶部边界、左边边界均为50px；两条分割线颜色分别为#00ff00、#ff0066
CSS样式表定义：段落p标记样式，首行缩进2个字符；
图层div样式：边粗细为5px、线型为点画线、颜色为黑色

效果展示：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>body属性及注释标记的应用</title>
    <style>
        body{
            background:#6633ff;
            color:white;
        }
        .demo p{
            text-indent: 2em;
        }
        .demo{
            margin: 50px 50px;
            border: 5px dotted black;
        }
    </style>
</head>
<body>
    <div class="demo">
        <br>body的属性应用
        <br>在div中插入标题字、水平分割线和段落
        <h2>设计彩色页面</h2>
        <hr color="#00ff00">
        <p>HTML(Hyper Text Mark-up Language)即超文本标记语言，是WWW的描述语言，由Tim Berners-Lee
           提出，设计HTML语言的目的是为了能把存放在一台电脑上的文本或图形另一台电脑中的文本或图形方便
           地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。</p>
        <hr color="ff0066">
    </div>
</body>
</html>