HTML, CSS学习笔记（完整版）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML, CSS学习笔记（完整版）相关的知识，希望对你有一定的参考价值。

第一章 div布局

前几课内容

.htm是早期的后缀。由于那时仅仅能支持长度为3的后缀。因此html与htm是一样的。

shtml是server先处理然后再交给浏览器处理

 

#HTML小知识#之#XHTML与HTML的差别#XHTML是更严谨更纯净的 HTML 版本号。XHTML目标是代替HTML。更具体的介绍 XHTML 教程 http://t.cn/h94BV

 

#HTML小知识#之#<!DOCTYPE>声明#位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本号、过渡版本号以及基于框架的 HTML 文档。

更具体的介绍http://t.cn/h59taG

 

做网页先布局。

先大处布局。在细节点缀。

 

container的高度能够不用设定height，子元素有高度会把父元素撑开的

 

1.ID命名可依据C语言变量命名规则

2.HTML文件本身charset採用的编码必须与文件保存时的编码方式一样。否则出现乱码显现

 

 

<!DOCTYPE html>

<html>

  <head>

    <title>页面布局</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <link rel="stylesheet" type="text/css" href="NewFile.css">

   

  </head>

 

  <body>

    <div id="container">

       <div id="header"></div>

       <div id="main">

           <div id="left"></div>

           <div id="right"></div>

       </div>

       <div id="bottom"></div>

    </div>

  </body>

</html>

 

@CHARSET "UTF-8";

 

#container {

    width: 1000px;

    background-color: gray;

}

 

#header {

    height: 120px;

    background-color: red;

}

 

#main {

    height: 600px;

    background-color: yellow;

}

 

#bottom{

    height:120px;

    background-color: blue;

}

 

#left {

    width: 700px;

    height: 600px;

    float: left;

    background: green;

}

 

#right {

    width: 300px;

    height: 600px;

    float: right;

    background-color: pink;

}

 

第二章 盒模型

margin 外边框

border 边框

padding 内边框

 

第12课 首页布局实战之margin设置

外边距

 

<!DOCTYPE html>

<html>

  <head>

    <title>页面布局</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <link rel="stylesheet" type="text/css" href="NewFile.css">

   

  </head>

 

  <body>

    <div id="container">

       <div id="header"></div>

       <div id="main">

           <div id="left">

              <div class="four"></div>

              <div class="four"></div>

              <div class="four"></div>

              <div class="four"></div>

           </div>

           <div id="right"></div>

       </div>

       <div id="bottom"></div>

    </div>

  </body>

</html>

 

@CHARSET "UTF-8";

 

#container {

    width: 1000px;

    background-color: gray;

}

 

#header {

    height: 120px;

    background-color: red;

}

 

#main {

    height: 600px;

    background-color: yellow;

}

 

#left {

    width: 700px;

    height: 600px;

    float: left;

    background: green;

}

 

.four {

    width: 330px;

    height: 280px;

    background: black;

    margin:10px;

    float: left;

}

 

#right {

    width: 300px;

    height: 600px;

    float: right;

    background-color: pink;

}

 

#bottom{

    height:120px;

    background-color: blue;

}

 

 

第13课 盒模型之border设置

border的3要素：宽，形状（实现虚线）。颜色

<!DOCTYPE html>

<html>

  <head>

    <title>study13.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 

    <style type="text/css">

       div {

           width: 300px;

           height:300px;

           background: blue;

           border: 50px outset green;

       }

    </style>

  </head>

 

  <body>

    <div>

   

    </div>

  </body>

</html>

 

 

第14课 用css控制border画三角形

边框透明

画一棵圣诞树

 

<!DOCTYPE html>

<html>

  <head>

    <title>study14.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 

    <style type="text/css">

   

       #parent_div{

           width: 600px;

           height: 500px;

           background: silver;

       }

       #tri1 {

           width:0px;

           height: 0px;

           border-right: 100px solid transparent;

           border-left: 100px solid transparent;

           border-bottom: 100px solid green;

       }

       #tri2 {

           width:0px;

           height: 0px;

           border-right: 120px solid transparent;

           border-left: 120px solid transparent;

           border-bottom: 120px solid green;

       }

       #tri3 {

           width:0px;

           height: 0px;

           border-right: 150px solid transparent;

           border-left: 150px solid transparent;

           border-bottom: 150px solid green;

       }

       #tri4 {

           width: 50px;

           height: 130px;

           background-color: saddlebrown;

      

       }

    </style>

  </head>

 

  <body>

    <div id="parent_div" align="center">

       <div id="tri1" ></div>

       <div id="tri2" ></div>

       <div id="tri3" ></div>

       <div id="tri4" ></div>

    </div>

   

  </body>

</html>

 

 

改进版：

<!DOCTYPE html>

<html>

  <head>

    <title>study14.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 

    <style type="text/css">

   

       #parent_div{

           width: 400px;

           height: 360px;

           background: silver;

           margin: 0px auto;

       }

       #tri1 {

           width:0px;

           height: 0px;

           border-right: 100px solid transparent;

           border-left: 100px solid transparent;

           border-bottom: 100px solid green;

           margin-bottom: -50px;

       }

       #tri2 {

           width:0px;

           height: 0px;

           border-right: 120px solid transparent;

           border-left: 120px solid transparent;

           border-bottom: 120px solid green;

           margin-bottom: -60px;

       }

       #tri3 {

           width:0px;

           height: 0px;

           border-right: 150px solid transparent;

           border-left: 150px solid transparent;

           border-bottom: 150px solid green;

       }

       #tri4 {

           width: 50px;

           height: 100px;

           background-color: saddlebrown;

      

       }

    </style>

  </head>

 

  <body>

    <div id="parent_div" align="center">

       <div id="tri1" ></div>

       <div id="tri2" ></div>

       <div id="tri3" ></div>

       <div id="tri4" ></div>

    </div>

   

  </body>

</html>

 

 

第15课 padding具体解释

内边距

 

 

2.盒子的宽高各是100px。同一时候padding: 30px,背景为灰色。请问灰色面积是多少？160px*160px，所以padding也是铺的背景色，即背景色铺到border，但文字输入面积仅仅有100px*100px。

<!DOCTYPE html>

<html>

  <head>

    <title>study15.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 

    <style type="text/css">

       #a{

           width: 100px;

           height:100px;

           padding: 30px;

           background-color: gray;

       }

    </style>

   

  </head>

 

  <body>

    <div id="a">

        打一些乱七八糟的字測试一下

    </div>

  </body>

</html>

 

 

第16课 padding与背景

第17课 padding美化首页

添加padding后 要降低原来width和height的值

<!DOCTYPE html>

<html>

  <head>

    <title>页面布局</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <link rel="stylesheet" type="text/css" href="NewFile.css">

   

  </head>

 

  <body>

    <div id="container">

       <div id="header"></div>

       <div id="main">

           <div id="left">

              <div class="four">

                  2014.09.09(星期二)

腾讯2015校园招聘  就业中心一楼信息公布厅 19:00- 21:00

2014.09.10(星期三)

中国舰船研究设计中心（武汉）  就业中心一楼信息公布厅 10:00- 12:00

陕西海泰电子有限责任公司  教2-100（德育基地）   10:00- 12:00

核工业西南物理研究院  主楼A-403  16:30- 18:30

              </div>

              <div class="four">

                  2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

航天恒星科技有限公司  就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司  就业中心一楼信息公布厅 16:30- 18:30

百度   就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会 文治书院报告厅（西19舍1

              </div>

              <div class="four">

                  2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

航天恒星科技有限公司  就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司  就业中心一楼信息公布厅 16:30- 18:30

百度   就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会 文治书院报告厅（西19舍1

              </div>

              <div class="four">

                  2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

航天恒星科技有限公司  就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司  就业中心一楼信息公布厅 16:30- 18:30

百度   就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会 文治书院报告厅（西19舍1

              </div>

           </div>

           <div id="right"></div>

       </div>

       <div id="bottom"></div>

    </div>

  </body>

</html>

 

@CHARSET "UTF-8";

 

#container {

    width: 1000px;

    background-color: gray;

}

 

#header {

    height: 120px;

    background-color: red;

}

 

#main {

    height: 600px;

    background-color: yellow;

}

 

#left {

    width: 700px;

    height: 600px;

    float: left;

    background: green;

}

 

.four {

    width: 310px;

    height: 260px;

    background: white;

    margin:10px;

    padding:10px;

    float: left;

}

 

#right {

    width: 300px;

    height: 600px;

    float: right;

    background-color: pink;

}

 

#bottom{

    height:120px;

    background-color: blue;

}

 

第18课 盒子模型的总结

一个盒子，有margin，border，padding，实占多少空间？

<!DOCTYPE html>

<html>

  <head>

    <title>study15.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 

    <style type="text/css">

       #a{

           width: 300px;

           height:300px;

           border: 50px solid blue;

           padding:50px;

           margin:50px;

          

           background-color: silver;

       }

    </style>

   

  </head>

 

&n

以上是关于HTML, CSS学习笔记（完整版）的主要内容，如果未能解决你的问题，请参考以下文章

Less学习笔记(未完待续)

阿里P8的《MySQL学习笔记》火了，完整版开放下载！

大厂 MySQL 学习笔记与 Linux 命令行大全，完整版下载

95页字节跳动内部前端学习笔记在互联网上火了，完整版开放下载

95页字节跳动内部前端学习笔记在互联网上火了，完整版开放下载

牛逼！阿里巴巴总结的《MySQL学习笔记》 火了，完整版PDF开放下载！

(c)2006-2024 SYSTEM All Rights Reserved IT常识