zoukankan      html  css  js  c++  java

  • HTML&CSS笔记001

    lesson1

    <!DOCTYPE html>
    <html lang="en,zh">
    <!-- 告诉搜索引擎爬虫，我们的网站是关于什么内容的 -->
    <head>
     <meta charset="utf-8">
     <meta content="服装" name="keywords">
     <meta content="好看的衣服" name="description">
     <title></title>
    </head>
    <body>
     ①<p>我是你爸爸</p>
     <p>我是你爸爸</p><!-- 段落标签 -->

     ②<h1>标题</h1>
     <h2>标题</h2>
     <h3>标题</h3>
     <h4>标题</h4>
     <h5>标题</h5>
     <h6>标题</h6><!-- 标题标签 独成一段，加粗字体-->
     ③<strong>
      <em>哈哈</em>
     </strong>
     ④<del style="color:#999">50$</del>
     ⑤<address>我的家在东北</address>
     ⑥<div style="color:#f40">
      <strong>a</strong>
      <em>b</em>
      <del>c</del>
     </div>
     <span></span><!-- 可以作为容器能够捆绑操作 -->
    </body>
    </html>

    lesson2

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8">
     <title></title>
     <style type="text/css">/*链接到4中的ul的导航栏应用*/
      *{
       margin:0;
       padding: 0;
      }
      ul{
       list-style: none;
      }
      li{ 
       margin: 0 10px;
       float:left;
       color:#f40;
       font-weight: bold;
       font-size: 24px;
       height: 30px;
       line-height: 30px;
       padding: 0 5px;
      }
      li:hover{
       border-radius:20px;
       background-color:#f40;
       color: #fff;
      }
     </style><!-- 链接到4中的ul的导航栏应用 -->
     <style type="text/css">
      input{
       border: 1px solid #999;
      }
     </style>
    </head>
    <body>
      <div style="100px;height:100px; ">
      彪哥很帅
    <!-- 1.1 ①空格和回车都是字符分割符 -->
      osdfjsjfsjff fdfdfsf  dff
    <!-- 1.2  html编码 -->
      <!--① 空格：&nbsp; -->
      <!--②小于和大于符号&lt;    &gt; -->
      <!--   彪哥&nbsp;&nbsp;&nbsp;&nbsp;帅 &lt;div&gt; -->
      <!-- 2.1 回车符 <br> -->
      <!--   <br><br><br><br><br><br> -->
    <!-- 2.2 水平线 <hr> -->
    <!-- 3. 有序列表 -->
     <!-- </div>
     喜欢的电影
     <ol type="i" start="117" reversed="reversed">
       <li>了不起的盖茨比</li>
       <li>飞速发</li>
       <li>的说法</li>
       <li>地方</li>
      </ol>  -->
    <!-- 4.无序列表 应用：导航栏-->
    <!--   <ul type="square">
       <li>苹果</li>
       <li>草莓</li>
       <li>橘子</li>
       <li>香蕉</li>
      </ul> -->
    <!-- 5.img src="" -->
         <!-- 1.网上的url
         2.本地的绝对路径
         3.本地的相对路径
       相对关系 D:/A/B/LESSON2.HTML
         D:A/B/123.JPG-->
      <!-- <img src="" alt="" title=""> -->
     <!-- <alt>是图片占位符，当图片出错时显示文字信息
      <title>是图片提示符-->
    <!-- 6.<a herf=""></a>   超链接 -->
     <!-- 6.11 文本超链接-->
    <!--  <a href="https://www.baidu.com">百度一下，你就知道</a>
     --> <!-- 6.12 图片超链接-->
    <!--  <a href="https://www.baidu.com">
      <img src="">
     </a> -->
     <!-- 6.13 超链接跳转至新的标签页-->
     <!-- <a href="https://www.baidu.com" target="_blank">百度一下，你就知道
     </a> -->
     <!-- 6.2 锚点，回到顶部/底部 -->
    <!--  <div id="demo1" style=" 100px;height: 100px;">demo1
     </div>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <br></br>
     <div id="demo2" style=" 100px;height: 100px;">demo2
     </div>
     <a href="#demo1">find demo1</a>
     <a href="#demo2">find demo2</a> -->
     <!--6.3 打电话 发邮件-->
    <!--  <a href="tel:1566804****">给彪哥打电话</a>
     <a href="mailto:299893****@qq.com">给彪哥发邮件</a> -->
    <!-- 7.<form>表单向后台发送数据 method有两种方法:get/post
     action是发送给谁 -->
     <form method="get" action="">
      <p>
      username<input type="text" name="username" value="请输入用户名">
      <!-- 输入框
       后面是数据名 数据值需要输入 -->
      </p>
      <p>
      password<input type="password" name="password">
      <!-- 密码框  -->
      <!-- 后面是数据名 数据值需要输入-->
      </p>
      <input type="submit" value="登陆啦">
      <!-- submit 提交按钮 -->
      <!-- 喜欢的男明星
      1.周杰伦<input type="radio" name="star" value="jaychou">
      2.吴亦凡<input type="radio" name="star" value="wu">
      3.彭于晏<input type="radio" name="star" value="peng">
      <input type="submit"> -->
      <!-- 单选框 name的作用是把它们限定在一个选择题中
       value是数据值 没有value就不能提交-->
     </form>
    </body>
    </html>

    lesson3.html （与lesson3.css配套使用）

    <!DOCTYPE html>  <!-- <form>和<input>必须连用才能提交 -->
    <html>
    <head>
     <title>
      lesson3
     </title>
     <meta charset="utf-8">
    <!-- 链接CSS1.2 页面级CSS -->
     <!-- <style type="text/css">
      div{
       100px;
       height:100px;
       background-color: green;
      }
     </style> -->
    <!-- 链接1.3 的link -->
     <link rel="stylesheet" type="text/css" href="lesson3.css">
    </head>
    <body>
    <!-- 1.复选框 -->
     <!-- <h1>
      Choose your favorite fruit!!
     </h1>
     <form>
     1.apple<input type="checkbox" name="fruit" value="apple">
     2.orange<input type="checkbox" name="fruit" value="orange">
     3.banana<input type="checkbox" name="fruit" value="banana"> -->
    <!-- 2.单选框默认选中 -->
     <!--  请选择您的性别
     <form>
      male<input type="radio" name="sex" value="male" checked="checked">
      female<input type="radio" name="sex" value="female">
     <input type="submit">
     </form> -->
    <!-- 3.下拉菜单的构造 -->
    <!--  <form method="get">
      <h1>province</h1>
     <select name="province">
      <option>beijing</option>
      <option>shandong</option>
      <option>shanghai</option> -->
     <!-- </select> --><!-- 提交的数据值即是option间的值 也可以在option间添加value再赋值 -->
     <!-- <input type="submit"> -->
     <!-- </form> -->


    <!-- CSS -->
    <!-- 1.CSS的引入 -->
    <!-- 1.1行间样式引入 -->
     <!--  <div style="
      100px;
     height: 100px;
     ">
     </div> -->
    <!-- 1.2 页面级CSS见上head内 -->
     <!-- <div></div>   下面这个div不可以省略 -->
    <!-- 1.3 建立一个 lesson3.css的文件 之后再head中用link -->
    <!-- PS:这里的<div></div>也不能省略 -->

    <!-- 2.选择器 -->
    <!-- 2.1 ID选择器 ID 一一对应 -->
     <!-- <div id="only">123</div>
     <div id="only1">456</div> -->
    <!-- 2.2 class -->
     <!-- <div class="demo demo1">123</div>
     <div calss="demo">456</div> -->
    <!-- 2.3标签选择器 -->
     <!-- <div>123</div> -->
    <!-- 2.4通配符选择器 -->
     <!--  <span>123</span>
     <div>456</div>
     <strong>999</strong> -->
    <!-- 2.5属性选择器 -->
    <!--  <div id="only" class="demo">123</div>
     <div id="only1">234</div> -->

    <!-- !important -->
    <!--  <div style="background-color: red">666</div> --> 

    <!-- 选择器的优先级：
     !important>行间样式>id>class=属性选择器>标签选择器>通配符 -->

    <!-- CSS权重 -->
     !important  Infinity正无穷
     行间样式  1000
     id     100
     class|属性|唯类 10
     标签|伪元素  1
     通配符   0
       256进制
    </body>
    </html>

    lesson3.css

    /*div{
      100px;
     height: 100px;
     border-radius:50%;
     background-color: red;
    }*/
    /*2.1#only{
     background-color: red;
    }
    #only1{
     background-color: green;
    }*/


    /*2.2 class选择器
       .demo{
     background-color: yellow;
    }
    .demo1{
     color: #f40;
    }*/


    /*2.3 标签选择器 选中所有该种标签（无论标签是否嵌套，无论标签的位置）*/
    /*div{
     background-color: red;
    }*/


    /*2.4通配符选择器 选中所有标签*/
    /**{
     background-color: green;
    }*/

    /*2.5属性选择器*/

     /*[id="only"]{
      background-color: green;
     }*/

    /*!important*/

    /*div{
     background-color: green!important;
    }*/
  • 相关阅读:
    OAuth2 协议原理简析及Azure AD OAuth2示例
    MySQL Innodb MVCC(多版本并发控制)
    乐观锁和悲观锁
    数据库索引
    SQL盲注
    JAVA array to list and list to array
    缓存穿透，缓存雪崩和缓存击穿
    四、Spring Cloud 之旅 -- Ribbon 负载均衡
    JavaScript中 require、import 有什么区别？
    vue 2.x Vue 3.x 日常采坑之 设置alias别名、background引入图片、全局引入scss文件 的问题
  • 原文地址：https://www.cnblogs.com/AmosWong/p/AmosWong.html
Copyright © 2011-2022 走看看