HTML5之HTML+CSS3代码（一）

最新推荐文章于 2024-06-16 23:58:06 发布

英雄有梦

最新推荐文章于 2024-06-16 23:58:06 发布

阅读量3.3k

点赞数 5

分类专栏： HTML5专栏文章标签： html5 css3 html

本文链接：https://blog.csdn.net/wzc10101415/article/details/64925134

版权

HTML5专栏专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、HTML的基础语法
01-输出helloworld

<!--根标签-->
<html>
<!--头部:配置性的信息-->
   <head>
     <meta charset="UTF-8">
     <title>大神二期</title>
   </head>
<!--身体(主要内容)-->
   <body>
       你好,世界!
   </body>
</html>

02-HTML中常见的标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常见的标签</title>
</head>
<body>
  <!--h标签 标题标签-->
  <h1>11111111111111111</h1>
  <h2>11111111111111111</h2>
  <h3>11111111111111111</h3>
  <h4>11111111111111111</h4>
  <h5>11111111111111111</h5>
  <h6>11111111111111111</h6>

  <!--div标签:很纯洁的容器-->
  <div>22222222222222222222222

  </div>
  <div>22222222222222222222222</div>
  <input placeholder="请输入姓名">  <br>
  <input value="大神二期">  <br>
  <input type="color">  <br>
  <input type="radio">  <br>
  <input type="checkbox">  <br>
  <input type="date">  <br>
  <div>
      <div>
          4444444444444444
      </div>
  </div>
  <!--横线标签-->
  <hr>
  <!--表单标签-->
  <input placeholder="请输入姓名">  <br>
  <input value="大神二期">  <br>
  <input type="color">  <br>
  <input type="radio">  <br>
  <input type="checkbox">  <br>
  <input type="date">  <br>

<!--段落标签-->
  <p>wedewdheuwdheiwhdeiuwhuiewfuhif</p>
  <p>15151514651121115511212121212</p>

<!--超链接标签-->
   <a href="http://baidu.com" target="_blank">百度一下,你就知道</a>
<!--图像标签
    相对路径 本地的资源
    绝对路径: http:// ftp:// file://
-->
   <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" width="200" height="150">
   <img src="images/img_01.jpg" alt="风光">

<!--列表标签-->
    <ul>
       <li>111111</li>
       <li>222222</li>
       <li>333333</li>
    </ul>

   <hr>

<!--换行标签-->
  <br>


</body>
</html>

03-HTML5中-文章详情页

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>库克破局迎新生，主推ipad pro，市场是否能如愿？</title>
</head>
<body>
<!--文章-->
  <article>
      <!--头部-->
      <header>
          <h1>库克破局迎新生，主推ipad pro，市场是否能如愿？</h1>
          <h4>iPad 苹果 智能硬件 分类 :互联网</h4>
      </header>
      <!--中间主要内容-->
      <section>
          <h3>但苹果真的是沿着这样的趋势在没落吗？</h3>
          <p>的确，从公司经营与产品创新两个角度来看，库克应当委以一个地道精明商人的称誉，而乔布斯要冠以却是完美的天才产品经理盛誉。既然出发点和追求的落脚点不同，分别以产品创新和商业经营为主导的两条不同分叉理念上衍生的产品文化，自然相差甚远，形成的落差也在所难免，不必在意纠结。</p>
      </section>
      <section>
          <h3>库克以商人的身姿迎合市场，以破局者的段位迎接新生。</h3>
          <p>为了拥抱市场需求，他打破了乔布斯始终强调的3.5英寸显示屏最佳苹果屏，换上了大众广为喜爱的4英寸、4.7英寸、5.5寸等屏幕，虽然在产品的外观打造上缺少较为革命性的突破，但在辅助性的产品智能操作上却是不断地推陈出新。</p>
          <p>正所谓不破不立，破就要根除彻底，且要标新立异。作为新一代的苹果公司领袖，库克正在用自己的所信奉的商业准则清洗深烙着乔布斯个人印记的苹果宗教文化，毕竟再也难有谁能够成为第二个乔布斯，这个苹果的时代属于他，所以他必须成为自己。为此，从商业化出发，库克完成了苹果帝国为更好地掠夺占有市场的最大利润，开始了他从小屏到大屏布局的战略谋划。</p>
      </section>
      <!--尾部-->
      <footer>
          <p>下一篇:周鸿祎做机心结被阻，撕逼酷派，望置之死地而后生</p>
      </footer>
  </article>

</body>
</html>

04-HTML5中新增的标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!--
  src 和 href的区别: src是引用资源(不可缺少), href仅仅就是引用
-->

<!--进度条-->
<progress value="30" max="100"></progress>

<!--音频-->
<audio src="source/music.m4a" controls="controls"></audio>
<!--视频-->
<video src="source/BigBuck.m4v" controls="controls"></video>
</body>
</html>

二、CSS的学习
index.css

div{
    color: blueviolet;
    font-size: 60px;
}

p{
    background-color: greenyellow;
    font-size: 45px;
}

01-行内样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<!-- style="background-color: red;" -->
<body>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>

   <p style="color: green; font-size: 100px; background: url('images/img_03.jpg');">22222222222222222</p>
</body>
</html>

02-页内样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>页内样式</title>
    <!--
      css的样式遵循的规律:
       1. 叠加原则
       2. 就近原则
    -->
    <style>
       div{
           color: deepskyblue;
           font-size: 30px;
           border: 1px solid red;
       }

       p{
           color: deeppink;
           font-size: 40px;
       }
    </style>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>

  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>

  <div>3333333</div>

</body>
</html>

03-外部样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <div>5555555555555555555</div>
   <p>1111111111111111111</p>
</body>
</html>

三、CSS的选择器
01-css的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*标签选择器*/
        div{
            color: red;
        }

        p{
            color: blue;
        }

        /*类选择器*/
        .test{
            color: green;
        }

        /*id选择器*/
        #older{
            font-size: 66px;
        }

        #main{
            width: 300px;
            height: 250px;
            background-color: green;
        }

        /*并列选择器*/
        div,.test{
            /*background-color: black;*/
        }

        /*复合选择器*/
        div.test{
           border: 10px dashed red;
        }

        /*后代选择器*/
        div .test3 a{
            color: black;
        }

        /*伪类选择器*/
        input:focus{
           width: 500px;
           height: 40px;
           outline: none;
           font-size: 30px;
        }

        #main:hover{
            /*width: 400px;*/
            /*height: 50px;*/

            /*改变鼠标的类型*/
            cursor: crosshair;
        }
    </style>
</head>
<body>
   <div id="older">21221212121</div>
   <div>21221212121</div>
   <div>21221212121</div>
   <p>454455321231135</p>
   <div class="test">77777777777</div>
   <p class="test">8888888888888</p>

   <div>
       <p class="test3">
           <a href="#">百度一下</a>
       </p>
   </div>

   <input>

   <div id="main">我是MT</div>
</body>
</html>

02-选择器的优先级别

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!--
      选择器的优先级别:
      1.同等级别的选择器,遵循: a.叠加原则  b.就近原则
      2.不同等级别:
        important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
      3. 选择器的针对性越强，它的优先级就越高
    -->
    <style>
        /*符合选择器*/
        div.test1{ /* 权值 11*/
            color: royalblue;
        }

        /*id选择器*/
        #one{/* 权值 100*/
            color: chocolate;
        }


        /*类选择器*/
        .test2{/* 权值 10*/
            color: purple;
        }

        .test1{/* 权值 10*/
            color: deeppink;
        }

        /*标签选择器*/
        div{ /* 权值 1*/
            color: red;
        }
        div{/* 权值 1*/
            color: blue;
        }
        div{/* 权值 1001*/
            color: green ! important;
         }

        *{ /*所有的 权值 0*/
            font-size: 30px;
            color: firebrick;
        }
    </style>
</head>
<body>
  <div class="test1 test2" id="one" style="color:blue;">1221212121212121</div>
</body>
</html>

四、HTML标签的类型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: red;
            width: 300px;
            height: 30px;
            /*隐藏*/
            /*display: none;*/
            /*变成块级标签*/
            /*display: inline;*/
            /*变成行内-块级标签*/
            /*display: inline-block;*/
        }
        p{
            background-color: green;
            width: 150px;
            height: 40px;
            /*display: none;*/
            /*变成块级标签*/
            /*display: inline;*/
        }

        span{
            background-color: yellowgreen;
            width: 500px;
            height: 250px;
            /*让标签变成块级标签*/
            /*display: block;*/
            /*变成行内-块级标签*/
            display: inline-block;
        }

        input{
            width: 500px;
            height: 130px;
            /*display: block;*/
            /*display: inline;*/
        }


        button{
            width: 250px;
            height: 38px;
        }
    </style>
</head>
<body>
 <!--块级标签-->
  <div>11111111111111</div>
  <div>11111111111111</div>
  <p>222222222222222</p>
  <!--行内标签-->
  <span>222222222</span>
  <span>222222222</span>
  <br>
  <!--行内-块级标签-->
  <input value="我是MT">
  <button>我是MJ</button>
</body>
</html>

五、CSS的属性
01-CSS的可继承属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
           color: red;
           font-size: 30px;
           font-family: 'Arial';
        }
    </style>
</head>
<body>
  <div>我是MT</div>
  <p>我是MJ</p>
  <span>我是MM</span>
</body>
</html>

02-CSS的不可继承属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
           background-color: red;
           width: 300px;
           height: 300px;
            /*让标签变成行内标签*/
           display: inline;
        }

        p{
            background-color: green;
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
   <div>
       <p>我是MT</p>
   </div>
</body>
</html>

03-css常见的属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*background-color: red;*/
            /*background: url("images/img_02.jpg") no-repeat;*/
            /*background-size: cover;*/
            /*width: 500px;*/
            /*height: 250px;*/
            /*隐藏,不会隐藏尺寸*/
            /*visibility: hidden;*/
            /*隐藏,内容和尺寸都会隐藏*/
            /*display: none;*/
        }

        span{
            background-color: green;
        }

        /*伪类*/
        div:hover{
            /*改变鼠标指针的类型*/
            /*十字架*/
            /*cursor: crosshair;*/
            /*手指*/
            cursor: pointer;
            font-weight: bolder;
        }

        a{
            /*去除下划线*/
            text-decoration: none;
        }

        p{
            background-color: red;
        }

        .test1{
            /*首行缩进*/
            text-indent:50px;
        }

        ul{
          /*设置列表左边的样式*/
          /*list-style: square;*/
           list-style: none;
        }

        #test{
            width: 100px;
            height: 60px;
            background: green;
            /*处理超出内容*/
            /*overflow: hidden;*/
            overflow: auto;
        }
    </style>
</head>
<body>

 <div>我是MT</div>
 <span>哈哈哈哈哈哈哈哈</span>

 <a href="#">百度一下,你就不知道</a>

  <p class="test1">ghdbehwjdewbdewbhjdbewdbjewbjdbehwewbhjdbehjwbh</p>
  <p class="test2">ewdnejnwndewjkdnwenjdnjkewnj</p>

  <ul>
      <li>11111111</li>
      <li>2222222</li>
      <li>3333333</li>
  </ul>

  <div id="test">32787327832783723273827832783</div>
</body>
</html>

六、盒子模型-边距问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
           background-color: green;
           width: 300px;
           height: 200px;
            /*实线*/
           /*border: 5px solid red;*/
            /*虚线*/
            /*border: 5px dashed red;*/
            /*双线*/
            border: 5px double red;
           /*padding-left: 20px;*/
           /*padding-top: 20px;*/
           /*padding-right: 20px;*/
           /*padding-bottom: 20px;*/
           /*内边距*/
           padding:15px;

           /*设置边框的圆角*/
           /*border-radius: 15px;*/

           border-bottom-right-radius: 150px;

          /*设置外边距*/
            margin: 30px;
        }
    </style>
</head>
<body>
 <div>21212121</div>
</body>
</html>

七、CSS3新增的属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 40px;
            background-color: red;
            margin-bottom: 10px;
            /*设置不透明度*/
            /*opacity: 0.5;*/
            /*块阴影*/
            box-shadow:5px 5px 5px black;
        }
         /*rgba设置透明度*/
        /*.test1{*/
           /*background-color: rgba(255,0,0,1.0);*/
        /*}*/
        /*.test2{*/
            /*background-color: rgba(255,0,0,0.8);*/
        /*}*/
        /*.test3{*/
            /*background-color: rgba(255,0,0,0.6);*/
        /*}*/
        /*.test4{*/
            /*background-color: rgba(255,0,0,0.4);*/
        /*}*/
        /*.test5{*/
            /*background-color: rgba(255,0,0,0.2);*/
        /*}*/

        span{
           font-size: 100px;
           color: red;
           /*文字阴影*/
           text-shadow: 5px 5px 5px black;
           border: 10px solid #ddd;
           -webkit-border-image:url('https://www.baidu.com/img/baidu_jgylogo3.gif') 30 30 round;
        }
    </style>
</head>
<body>
 <div class="test1">1111111111</div>
 <div class="test2">2222222222</div>
 <div class="test3">3333333333</div>
 <div class="test4">4444444444</div>
 <div class="test5">5555555555</div>

 <span>我是MT</span>
</body>
</html>

八、居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!--
      标签水平居中:
      1. 行内标签  行内-块级标签 text-align: center;
      2. 块级标签   margin: 0 auto;

      标签的垂直居中:
      line-height的高度等于height的高度
    -->
    <style>
        #main{
            width: 500px;
            height: 300px;
            background-color: red;
            /*水平居中*/
            text-align: center;
            /*行高*/
            /*line-height: 300px;*/
        }

        span{
            background-color: yellowgreen;
        }

        .test1{
            width: 350px;
            /*height: 30px;*/
            background-color: green;
            text-align: center;

            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
            line-height: 300px;
        }
    </style>
</head>
<body>
  <div id="main">
     <!--行内标签-->
      <!--<span>我是哈哈哈哈</span>-->
     <!--行内-块级标签-->
      <!--<input>-->
     <!--块级标签-->
      <div class="test1">123456</div>
  </div>
</body>
</html>

英雄有梦

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML5之HTML+CSS3代码（一）

一、HTML的基础语法 01-输出helloworld<html> <head> <meta charset="UTF-8"> <title>大神二期</title> </head> <body> 你好,世界! </body></html>02-HTM
复制链接

扫一扫