<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*元素选择器:*/
        h1{
            color: rgb(100,200,300);
        }
        span{
            color: gray;
        }
        /*类选择器:*/
        /*记得要加上.*/
        .cls{
            color: crimson;
        }
        /*id选择器:*/
        #time{
            color: yellowgreen;
        }

        a{
            color: cornflowerblue;
            text-decoration: none;
        }
        p{
            text-indent: 30px; /*这是设置段落开头的缩进,意思就是设置空格*/
            line-height: 20px; /* 这是设置行高*/
        }
        #plast{
            text-align: right;  /*这是设置右对齐*/
        }

        #center{
            weight: 65%;
            margin: 0% 17.5% 0% 17.5%; /*上右下左*/  /*或者属性值为0 auto; 0表示上下为0,auto表示系统自动计算左右边距*/
        }
    </style>
    <title>This is my new report</title>
</head>
<body>
<div id="center">
<img src="img/123.jpg" width="50" height="50"> my picture <a href="https://www.xianghaha.site/" target="_self">my link</a>
<h1>welcome to my world</h1>
<hr>
<span>2025-10-31</span>  <!--span标签没有任何实际意义,只是与上文的style中定义结合-->
<hr> <!--hr表示分隔线-->
<p>
    <span class="cls">这是类选择器实现的功能</span>
    <br>  <!--br是换行标签-->
    <span id="time">这是id选择器实现的功能</span>
</p>  <!--p是段落标签-->
<!--正文-->
<video src="video/01.mp4" controls="controls" width="1000" height="600"></video> <!--视频播放器-->
<!--音频播放器用 audio src-->
<p>
    <b>这是加粗文字</b>  也可以用strong标签
</p>

<p id="plast">
    这是靠右对其的文字
</p>
</div>  <!--设置整个文章的布局--> <!--和span一样也是无意义的,但是可以设置宽高属性在style中-->
</body>
</html>