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="width: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="width: 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="width: 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{
   width: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="
 width: 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{
 width: 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;
}*/

HTML&CSS笔记001的更多相关文章

  1. gogs 源码阅读笔记 001

    gogs 源码阅读笔记 001 gogs项目相当不错,本笔记实际是基于gogs fork版本 git-122a66f. gitea (gitea版本由来)[https://blog.gitea.io/ ...

  2. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  3. [Oracle]OWI学习笔记--001

    [Oracle]OWI学习笔记--001 在 OWI 的概念里面,最为重要的是 等待事件 和 等待时间. 等待事件发生时,需要通过 P1,P2,P3 查看具体的资源. 可以通过 v$session_w ...

  4. TensorFlow机器学习框架-学习笔记-001

    # TensorFlow机器学习框架-学习笔记-001 ### 测试TensorFlow环境是否安装完成-----------------------------```import tensorflo ...

  5. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  6. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  7. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  8. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  9. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

随机推荐

  1. C Primer Plus note2

    warning: 'mmin' is used uninitialized in this function [-Wuninitialized]| 编译器出现如上图的警告,是因为变量‘mmin’没有初 ...

  2. 无法远程访问Mysql的解决方案

    现在在很多的互联网公司对于mysql数据库的使用已经是不可阻挡的趋势了,所以经常我们在项目开始的时候就会做的事情就是找一台Linux服务器,到上面去安装个mysql,然后在开始我们的数据表的导入工作, ...

  3. js 闪动元素

    <style> #div1{width:500px;height:100px;background:#888;font-size:5px;margin:0 auto;color:yello ...

  4. Linux基础之命令练习Day4-fdisk,mkfs,mlabel,mount,umount,mkswap,swapon,dd,top,free,ps,kill,rpm,yum,make

    一. 硬盘分区.格式化及文件系统的管理 1. 在Linux系统中,一切皆文件.每个设备都被当作一个文件来对待. 常见的存储设备在Linux系统中的文件名如下表所示: 2. 对硬盘进行分区有以下优点: ...

  5. 求解2的N次幂的问题(多种方法)

    #include <iostream> using namespace std; //计算2的N次幂 //一般方法,时间复杂度为2^n __int64 pow2(int n) { __in ...

  6. idea maven 依赖问题

    今天发现,原来idea引用maven依赖的时候,优先依赖的是本地.但是有个问题,如果我删除了一个packet,如果刚刚好本地另外一个项目里面也有这个对于的packet,idea的智能提示 是 将其导入 ...

  7. Junit 报错: Failed to load ApplicationContext

    今天在使用Junit测试时候,报了个错误: Failed to load ApplicationContext, aspect not found;挺奇怪的 我又没有调用你,之前还好好的,现在不能使用 ...

  8. html5之hash

    http://blog.csdn.net/u012028371/article/details/67636395 原文:https://www.studyscript.com/Post/index/i ...

  9. IOS AFN (第三方请求)

    什么是AFN全称是AFNetworking,是对NSURLConnection.NSURLSession的一层封装虽然运行效率没有ASI高,但是使用比ASI简单在iOS开发中,使用比较广泛 AFN的g ...

  10. 理解Underscore中的_.bind函数

    最近一直忙于实习以及毕业设计的事情,所以上周阅读源码之后本周就一直没有进展.今天在写完开题报告之后又抽空看了一眼Underscore源码,发现上次没有看明白的一个函数忽然就豁然开朗了,于是赶紧写下了这 ...