- A+
所属分类：Web前端
web note
html note
列表
ul 无序列表
ol 有序列表 并且可以通过 type 来定义列表序号的形式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>list</title> </head> <body> <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul> <ol type="1"> <li>html</li> <li>css</li> <li>javascript</li> </ol> <ol type="A"> <li>html</li> <li>css</li> <li>javascript</li> </ol> <ol type="I"> <li>html</li> <li>css</li> <li>javascript</li> </ol> </body> </html> 表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> table,td,td{border: 1px solid silver;} </style> </head> <body> <table> <caption>考试成绩表</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>英语</th> <th>数学</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小杰</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小红</td> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td>平均</td> <td>90</td> <td>90</td> <td>90</td> </tr> </tfoot> </table> </body> </html> 图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片</title> </head> <body> <img src="../image/computer.jpg" alt="web note" alt="computer" title="computer"> <img src="../image/dome.png" alt="web note" alt="dome" title="dome"> <img src="../image/Tqqj2.jpg" alt="web note" alt="tqqj" title="tqqj"> </body> </html> 超链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接</title> </head> <body> <!--锚节点 跳转到本页面的任意位置--> <a href="#runoob">菜鸟编程</a><br> <a href="#inside">内部链接</a><br> <a href="#text">文本</a><br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> <div id="runoob"> <a href="https://www.runoob.com" target="_blank"><img src="../image/runoob-logo.png" alt="web note" alt="菜鸟编程" title="菜鸟编程"></a> <br> <a href="https://www.runoob.com" target="_blank">菜鸟编程——学的不仅是技术，更是梦想！</a> <!-- target 默认为从当前页面打开链接，就是_self _blank 从新页面打开链接 --最重要的 _parent 从父窗口打开链接 _top 在顶层窗口打开链接 --> </div> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> <!--超链接分为外部链接和内部链接--> <div id="inside"> <a href="../html/表格.html" target="_parent">内部链接</a> </div> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> ...<br> <div id="text"> <p>文本</p> </div> </body> </html> 表单
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
例如：手机注册，话费充值，用户登陆等界面
数据传输有两种方式，一种是get ，明文，所有人都可以看见，不安全；
另一种是post， 暗文，看不见，安全
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form method="post" action="index.php"> 昵称：<input type="text"><br> 密码：<input type="password"><br> 邮箱：<input type="email"> <select> <option>qq.com</option> <option selected>gmail.com</option> <option>yahoo.com</option> </select><br> <!--name需要一样， value不能一样--> 性别：<input type="radio" name="gender" value="男" checked>男 <input type="radio" name="gender" value="女">女 爱好：<input type="checkbox" name="hobby" value="travel">旅游 <input type="checkbox" name="hobby" value="photo">摄影 <input type="checkbox" name="hobby" value="sport">运动 <br> 个人简介： <br> <textarea rows="5" cols="20">请介绍一下你自己</textarea> <br> 上传个人照片： <br> <input type="file"> <br> <hr> <input type="submit" value="立即注册"> </form> </body> </html> 框架
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>框架</title> </head> <body> <iframe src="https://www.runoob.com" width="500" height="200"></iframe> <br> <iframe src="http://www.tqqj.top" width="500" height="200"></iframe> </body> </html> css note
css的四种引入方式
<!DOCTYPE html> <html> <!--一般最常用的是外部样式表--> <!--想要在一个页面引入CSS，共有以下三种方式。 外部样式表 内部样式表 行内样式表--> <head> <meta charset="uft-8"> <title></title> <!--外部样式表定义在link标签内--> <link rel="stylesheet" type="text/css" href="../css/01css.css"> <!--内部样式表定义在<head>里的<style>标签内--> <style type="text/css"> div{color: aqua;} </style> </head> <body> <!--行内样式表--> <div style="color: aqua;">绿叶学习网</div> </body> </html> 第四种引入方式是@import，不常用，不需要了解
css选择器
<!DOCTYPE html> <html> <!--最实用的5种选择器 元素选择器 id选择器：id相当于一个人的身份证，全国唯一 class选择器：class相当于一个人的姓名，全国不唯一 后代选择器 群组选择器--> <head> <meta charset="utf-8"> <title></title> <!--元素选择器，最前面的是元素--> <!--id选择器，最前面的是 # 加 id --> <!--class选择器，最前面的是 .class--> <style> div{color: aqua;} #lover{color: aquamarine;} .lei{color: blueviolet;} #father1 div{color: black;} #father2 span{color: blue;} h1,.ko,#oops{color: aliceblue;} </style> <!--父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素--> <!--对于群组选择器，两个选择器之间必须要用英文逗号（，）隔开，不然群组选择器就无法生效--> </head> <body> <h1>Hello, css</h1> <div id="oops">hello!</div> <div class="ko">goooooood!</div> <div>I love css!</div> <div id="lover">I love css2!</div> <p class="lei">I love css3!</p> <span class="lei">I love css3 too!</span> <div id="father1"> <div>Aaaaa</div> <p>sssss</p> </div> <div id="father2"> <div>hello</div> <span>afaf</span> </div> </body> </html> 字体样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体样式</title> <!--在实际开发中，一般只会用到bold这一个--> <!--有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果--> <style type="text/css"> #div1{font-family: 'Courier New'; font-weight: lighter; color: aqua;} #div2{font-family: 'Franklin Gothic Medium';font-weight: bold;} #div3{font-family: 'Gill Sans';font-size: 200px; font-style: italic;} /*这是css的注释*/ p{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: aqua; } </style> </head> <body> <div id="div1">hello</div> <div id="div2">hello</div> <div id="div3">hello</div> <p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p> </body> </html> 文本样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本样式</title> <style type="text/css"> #pp p{ font-size: 14px; text-indent: 28px; text-align: center; text-decoration: underline; } #s{ text-decoration: overline; } #ss{ text-decoration: line-through; } a{ text-decoration:none; } #ass{ text-transform: uppercase; } #p1 p{ line-height: 15px; letter-spacing: 0px; } #p2 p{ line-height: 20px; letter-spacing: 3px; } #p3 p{ line-height: 25px; letter-spacing: 5px; } #p4 p{ word-spacing: 30px; } </style> </head> <body> <div id="pp"> <h3>爱莲说</h3> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p> <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p> </div> <span id="s">顶划线</span> <span id="ss">delete</span> <a href="https://www.baidu.com" target="_blank">去掉下划线的百度</a> <br> <hr> <p id="ass">hello</p> <div id="p1"> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p> <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p> </div> <div id="p2"> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p> <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p> </div> <div id="p3"> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p> <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p> </div> <div id="p4"> <p>Rome is was't built in a day.</p> </div> </body> </html> 边框样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框样式</title> <!--想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border color这三个属性才会有效果--> <style type="text/css"> div{ width: 100px; height: 30px; } #div1{border: 1px dashed red;} #div2{border: 1px solid red;} img{ /*border-width: 2px; border-style: solid; border-color: red;*/ border:1px solid red;/*简写，等价于上面的三行代码*/ border-top: 5px dashed blue; border-left: 5px solid wheat; border-bottom: 0px; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div><br> <img src="../image/runoob-logo.png" alt="web note" alt="runoob" title="runoob"> </body> </html> 列表样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表样式</title> <style type="text/css"> ol{list-style-type:lower-roman;} ul{list-style-type: none;} #ul1 ul{ list-style-image: url(../image/ba.png); } </style> </head> <body> <ol> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ol> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> <div id="ul1"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html> 小demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{list-style-type: none;} a{text-decoration: none; color: pink;} div{ width: 180px; height: auto; background-color: aquamarine; } </style> </head> <body> <div> <ul> <li><a href="https://www.baidu.com" target="_blank">Top1：百度</a></li> <li><a href="https://www.taobao.com" target="_blank">Top2：淘宝</a></li> <li><a href="https://www.weibo.com" target="_blank">Top3：新浪</a></li> <li><a href="https://www.163.com" target="_blank">Top4：网易</a></li> <li><a href="https://www.sohu.com" target="_blank">Top5：搜狐</a></li> </ul> </div> </body> </html> 表格样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格样式</title> <style type="text/css"> table,th,td{border: 1px solid red;} table{ caption-side: bottom; /*border-collapse: collapse; 合并边框*/ border-spacing: 8px; } </style> </head> <body> <table> <caption>表头</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>表身1</td> <td>表身2</td> </tr> </tbody> <tfoot> <tr> <td>表尾1</td> <td>表尾2</td> </tr> </tfoot> </table> </body> </html> 图片样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片样式</title> <style type="text/css"> div{ width: 300px; height: 80px; border: 1px solid silver; } .div1{text-align: left;} .div2{text-align: center;} .div3{text-align: right;} img{width: 60px; height: 60px;} #img1{vertical-align: top;} #img2{vertical-align: middle;} #img3{vertical-align: bottom;} #img4{vertical-align: baseline;} </style> </head> <body> <div class="div1"> <img src="../image/computer.jpg" alt="web note" alt=""> </div> <div class="div2"> <img src="../image/computer.jpg" alt="web note" alt=""> </div> <div class="div3"> <img src="../image/computer.jpg" alt="web note" alt=""> </div> <br> 电脑<img id="img1" src="../image/Tqqj2.jpg" alt="web note" alt=""> 电脑(top) <hr> 电脑<img id="img2" src="../image/Tqqj2.jpg" alt="web note" alt=""> 电脑(middle) <hr> 电脑<img id="img3" src="../image/Tqqj2.jpg" alt="web note" alt=""> 电脑(bottom) <hr> 电脑<img id="img4" src="../image/Tqqj2.jpg" alt="web note" alt=""> 电脑(baseline) </body> </html> 小demo—float 实现文字环绕图片
<!DOCTYPE html> <html> <meta charset="utf-8"> <title></title> <style type="text/css"> img{float: right;} p{ font-family: fantasy; font-size: 12px; } div{width: 500px;height: 150px;} </style> <body> <div> <img src="../image/dome.png" alt="web note" alt=""> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p> </div> </body> </html> 背景样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景样式</title> <style type="text/css"> div{ width: 100px; height: 60px; } #div1{background-color: hotpink;} #div2{background-color: #87CEFA;} p{ color: white; background-color: hotpink; } .divv{background-image: url(../image/ba.png); background-repeat: repeat-y;} </style> </head> <body> <div id="div1">背景颜色为：hotpink</div> <div id="div2">背景颜色为：#87CEFA</div> <p>文本颜色为white，背景颜色为hotpink</p> <div class="divv"></div> </body> </html> <!DOCTYPE html> <html> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 3000px; height: 12000px; border:1px solid red; background-image: url(../image/Tqqj2.jpg); background-repeat: no-repeat; background-position: center right; background-attachment: fixed; /*fixed 图片固定不动 scroll 图片随着元素滚动*/ } </style> <body> <div></div> </body> </html> 讲一张图片铺满整个页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100%; height: 100%; background-image:url(../image/Tqqj2.jpg); background-size: 100% 100%; position: absolute; } </style> </head> <body> <div></div> </body> </html> 超链接样式
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>超链接样式</title> <style type="text/css"> /*定义这四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式。请记住，这四种样式定义顺序不能改变。*/ a{text-decoration: none;} a:link{color: red;} a:visited{color: purple;} a:hover{color: yellow;} a:active{color:blue} div{ width: 200px; height: 100px; color: red; line-height: 50px; background-color: yellow; text-align: center; } div:hover{background-color: aqua; width: 100px; }/* hover可以用在任何元素上 :hover伪类应用非常广泛，任何一个网站都会大量用到它，我们要好好掌握。*/ img:hover{border: 3px solid red;} #1{cursor: default;} #2{cursor: url(../image/ba.png),pointer;} </style> <body> <a href="https://www.taobao.com" target="_blank">淘宝</a> <div>aaaaaaaaaaaaa</div> <div id="1"></div> <div id="2"></div> <br> <img src="../image/Tqqj2.jpg" alt="web note" alt=""> </body> </html> ?
盒子模型
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以视为一个盒子。
- 内容区(content)
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。
内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。
在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法。 - 内边距(padding)
指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
关于内边距的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简写内边距属性padding。
使用这五种属性可以指定内容区与各方向边框之间的距离。 - 外边距(margin)
指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有五种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上四个方向的简写外边距属性margin。
同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。 - 边框(border)
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。边框属性有border-width、border-style、border-color以及综合了三类属性的简写边框属性border。
其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。
border-width:1px;borde-style:solid;border-color:gray;等价于border:1px solid gray;。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> div{ display: inline-block; /*将块元素转换为inline-block元素*/ padding: 40px 80px; margin: 200px; border:1px solid red; background-color: #FFDEAD; } </style> </head> <body> <div>学习网络安全</div> </body> </html> padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。
padding: 20px --意思是上下左右四个方向都是20px padding: 20px 40px --意思是上下方向为20px，左右方向为40px padding: 20px 40px 60px 80px --意思是按顺时针方向（上、 右、下、左）分别赋值 margin 当存在父元素是是相对于父元素而言的
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> #father{ display: inline-block; border: 1px solid blue; } #son{ display: inline-block; padding: 20px; margin-top: 20px; margin-right: 40px; margin-bottom: 60px; margin-left: 80px; border: 1px solid red; background-color: #FFDEAD; } .brother{ height: 50px; background-color: lightskyblue; } </style> </head> <body> <div id="father"> <div class="brother"></div> <div id="son">绿叶学习网</div> <div class="brother"></div> </div> </body> </html> 浮动布局
什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。那什么叫“正常文档流”呢？正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。我们先来看一下正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
由于div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正常文档流</title> <style type="text/css"> #father{ width: 300px; background-color: #0C6A9D; border: 1px solid silver; } #father div{ text-align: center; padding: 10px; margin: 15px; } #son1{ background-color: hotpink; float: left; } #son2{ background-color: #FCD568; float: right; } .clear{ clear: both; /*清除因其他元素的浮动布局而给别的元素带来的影响*/ } </style> </head> <body> <div id="father"> <div id="son1">box 1</div> <div id="son2">box 2</div> <div class="clear"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局</title> <style type="text/css"> #father{ border: 2px solid red; } #son1{ height: 100px; background-color: aquamarine; margin: 10px; } #son2{ height: 400px; width: 67%; background-color: azure; float: left; margin: 10px; } #son3{ height: 400px; width: 30%; background-color: bisque; float: right; margin: 10px; } #son4{ height: 100px; background-color: blueviolet; margin: 10px; } .clear{clear: both;} </style> </head> <body> <div id="father"> <div id="son1"></div> <div id="son2"></div> <div id="son3"></div> <div id="son4"></div> <div class="clear"></div> </div> </body> </html> 定位布局
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。结合使用定位和浮动，能够创建多种高级而精确的布局。其中，布局定位共有四种方式。
- 固定定位（fixed）
- 相对定位（relative）
- 绝对定位（absolute）
- 静态定位（static）
这四种方式都是通过position属性来实现的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位布局</title> <style type="text/css"> #first{ width: 120px; height: 1800px; border: 1px solid gray; line-height: 600px; background-color: #B7F1FF; } #second{ position: fixed; top: 30px; left: 160px; width: 60px; height: 60px; border: 1px solid silver; background-color: hotpink; } </style> </head> <body> <div id="first">无定位的div元素</div> <div id="second">有定位的div元素</div> </body> </html> End
至此，html和css 的入门学习已经完成。
下面我将实战两个项目：
完成这两件事情之后，我会进一步学习javascript的入门学习
当然，打ctf 需要的就只是入门知识就可以了，但是我却在学习的过程中感受到了写前端网页的乐趣。
看到别人那特别好看酷炫的网页，心生羡慕啊；
所以可能我会在学习完javascript入门知识，PHP以及python后进一步学习他们的进阶知识吧：）
