html基本样式

第一次写这么完整的html网页….完全的手打

<!--告知浏览器这是H5文档 -->
<!DOCTYPE html>
<!--html是整个文档的基本标签,也是跟标签-->
<html>
    <!--head描述整个文档的信息-->
    <head>
        <!--元信息标签,设置文档的基本描述信息,这里charset是设置编码-->
        <meta charset="utf-8">
         <!--title标签0所设置的内容会显示在浏览器的标签页上-->
         <!--概括中心思想-->
        <title>the fist one </title>
        <!--style标签,写css样式-->
        <style> 
        h1{
            /*设置颜色*/
            color: violet;

            /*背景颜色*/
            background-color: green;
            /*设置宽度,大小是px像素*/
            width:200px;
        }
        p{
            color: darkmagenta;
        }
        </style>

    </head>
    <!--body标签,显示内容在浏览器上 -->
    <body>
        <!--标题标签,h2到h6-->
        <!--onmousemove 鼠标移动到上面的时候-->
        <!--onmouseout 鼠标移动走-->
    <h1 onmousemove="h1_move()"  onmouseout="h1_out()"> hahahahaha </h1>
    <!--p段落标签-->
    <p onclick="p_click()" ondblclick=""> 就是这样</p>
    <!--script 写javascrip代码-->
    <script>
        // var是声明变量的关键字,document是js定义的一个全局文本对象
        // queryselector 使用这个方法就能在js代码中找到html标签
         var h1_object=document.querySelector('h1');
         var p_object=document.querySelector('h1');
        //  这里声明一个函数或者方法,声明的关键字是function  
         function h1_move(){
             h1_object.style.width='1000px';             
       }
       function h1_out(){
             h1_object.style.width='400px';     
         }
          var i=1;
        function p_click(){
           // p_object.style.color='yellow';
            if(i%2==0)
            {
                p_object.style.color='purple';
            }
            else{
                p_object.style.color='aliceblue';
            }
             i++;
       }
     </script>
    </body>
</html>

很简单的一个网页,就是备注多,适合初学者

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值