HTML+CSS
一个制作矢量图标（SVG）的网址：https://icomoon.io/
<a href="index2.html">index</a> <a href="myPage/index2.html">index</a> <!-- 目录语法，斜杠前面表示文件夹的名字，在哪个文件夹里面，就写哪个文件夹的名字，至于文件夹再上面的路径层级，系统会自动识别出来 -->
<base href="http://serverName/FolderName/"/> 在heade标签中使用base标签设置基准URL，在html文档的其他地方使用到a标签的时候，hreft的值就可以直接是一个文件的名称 <a href='page2.html'/> 最后生成的连接地址会是：http://serverName/FolderName/page2.html
<!--style元素中的type值基本上就是"text/css",media属性有多个值,列举几个可能会用到的值。--> <!-- all将样式用于所有设备（默认） --> <style media="all" ></style> <!-- 将样式用于手持设备--> <style media="handheld" ></style> <!-- 将样式用于打印预览和打印页面时--> <style media="print" ></style> <!-- 将样式用于计算机显示器屏幕--> <style media="screen" ></style> <style media="screen AND (max-width:500px)" type="text/css" ></style> <style media="screen AND (min-width:500px)" type="text/css" ></style> <!-- 当页面宽度大于500的时候使用上面一个样式，小于500时使用下面一个样式。-->
<!-- 当浏览器不支持脚本或者禁用脚本时的处理办法， --> <noscript> <h1>javascript is required!</h1> </noscript> <noscript> <meta http-equiv="refresh" content="0;http://www.baidu.com"/> </noscript>
form标签一般有3种编码格式：application/x-www-form-urlencoded编码（默认编码除文件上传外都可以使用）、multipart/form-data编码（文件上传使用） 以及text/plain编码（没有正式规范，不推荐使用） <form method="post" action="http://vichin:8585/form" enctype="multipart/form-data"> </form>
<!-- 如果一个页面有很长的内容，可以点击锚点，让页面显示锚点所指向的那个部分。也可以使用name或者class等其他元素。 --> <a href="#a">指向id为a的元素</a> <a href="#b">指向id为b的元素</a> <a href="#c">指向id为c的元素</a> <div id="a"></div> <div id="b"></div> <div id="c"></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- a标签中的href属性，如果不用http协议，那么浏览器会对该超链接视为相对引用。 --> <!-- a标签拓展 --> <a href="#MyName">click here</a> <a href="QQ.exe">发送邮件</a>在IE浏览器中，可以调用本地的exe程序 <a href="ftp://212.8.65.45">使用ftp协议访问文件服务器</a> <a href="mailto:vichin278@163.com?CC=vichin278@126.com?Subject:文字主题?BCC=暗送邮件地址Body=邮件内容">调用本地的outlook发送邮件</a> <!-- 在新的标签中打开 --> <a href="http://www.baidu.com" target="_blank">百度</a> <p id="MyName"> vichin </p> </body> </html>
<!-- 每个meta元素只能用于一种很用途，如果想使用多个meta标签的属性，可以添加多个meat元素。 --> <!-- 使用meta标签为页面设置关键字 --> <meta charset="UTF-8" name="keyword" content="关键字，元信息"> <!-- 使用meta标签为页面设置页面描述 --> <meta name="description" content="关于HTML标签中，meta标签的使用"> <!-- 使用meta标签为页面设置作者信息 --> <meta name="author" content="vichin"> <!-- 使用meta标签为页面设置网页的定时跳转 3秒后跳转到百度。如果不添加url，则表示刷新当前页面--> <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> <!-- 使用meta标签为页面设置网页禁止从缓存中调用 cache-control和pragma都可以使用--> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <!-- 使用meta标签使页面强制打开新的窗口 --> <meta http-equiv="windows-target" content="_top"> <!-- 指定页面使用文档模式为IE8： --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <!-- 使用最新的IE文档模式来呈现页面： --> <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <p><label for="name"> Name:<input placeholder="Your name" id="name" name="name" /> </label></p> <p><label for="city"> City:<input placeholder="Where you live" id="city" name="city" /> </label></p> <p> <label for="fave"> Friut:<input list="fruitlist" id="fave" name="fave" /> </label> </p> <button type="submit">Submit Vote</button> </form> <datalist id="fruitlist"> <option value="Apples" label="Lovely Apples"></option> <option value="Oranges" ></option> <option value="Cherries" ></option> </datalist> </body> </html>
<input type="text" value='' id='txt_Id' oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false" />
<p><img src="捕获.PNG" alt="" usemap="#mymap"></p> <map name="mymap"> <area href="http://www.baidu.com" shape="rect" coords="3,5,68,62" /> <area href="http://www.biying.com" shape="rect" coords="70,5,130,62"/> <area href="http://www.sogou.com" shape="default" alt="default" /> </map>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn_SetVal">设置值</button> <button id="btn_GetVal">获取值</button> <button id="btn_ClearVal">清空值</button> <button id="btn_RemoveVal">删除值</button> <button id="btn_SetJson">保存一个Json对象</button> <button id="btn_GetJson">获取一个Json对象</button> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> // webStorage中分sessionStorage和localStorage。前者类似于session，后者类似于一个数据库 // length:获取webstorage中的数量 // key(index):返回第index条数据 // getItem(key):返回指定内容（字符串类型），若内容不存在，则返回null。 // setItem(key,value):设置值。 // removeItem(key):删除值。 // clear:清空webStorage中的内容。 // localStorage.setItem("key","value") $(function () { $("#btn_SetVal").click(function(){ localStorage.setItem("name","vichin"); }); $("#btn_GetVal").click(function(){ var len=localStorage.length; if (len>0) { var key=localStorage.key(0);//获取第一个位置上的key值 if (key.length>0) { var person=localStorage.getItem(key);//使用key值去获取value值 if (person.length>0) { alert(person); } } } }); $("#btn_ClearVal").click(function(){ if (localStorage.length>0) { localStorage.clear(); } }); $("#btn_RemoveVal").click(function(){ localStorage.removeItem("name"); }); $("#btn_SetJson").click(function(){ var person=new Object; person.name="vichin"; person.age=26; person.sex="male"; localStorage.setItem("P0",JSON.stringify(person)); }); $("#btn_GetJson").click(function(){ var len=localStorage.length; if (len>0) { for (var i = 0; i < len; i++) { var key=localStorage.key(i); if (key.length>0) { var data=localStorage.getItem(key); if (data!=null) { var person=JSON.parse(data);//使用key值去获取value值 alert('姓名：'+person.name+', 性别：'+person.sex+', 年龄：'+person.age); } } } } }); }); </script> </body> </html>
CSS属性
box-sizing:border-box;
使用position:absolute 会让当前元素相对于其父元素来设置一个绝对位置，但是父元素的位置不能是position:static（如果一个元素不设置position属性，那么起默认为static）。所以要用position:absolute相对于父容器的位置的时候，可以为其父容器增加一个position:relative
ime-mode: disabled;
.table { font-family: Microsoft YaHei; margin: 20px auto; border: 1px solid black; border-collapse: collapse; text-align: center; font-size: 30px; } .table tr th { border: 1px solid black; background-color: lemonchiffon; color: #00BFFF; } .table tr td { border: 1px solid black; } .table tr:nth-child(2n) { background-color: white; }
页面布局：
一列布局：通常作为网站的首页，页面内容较少。页面通常是固定宽度的。
两列布局：一般自适应宽度的两列布局很少，通常都是固定宽度的两列布局。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单列布局</title> <style type="text/css"> /*清除自带样式*/ body{ margin: 0; padding: 0; } .main{ width: 800px; height: 300px; background-color: #ccc; margin: 0 auto;/*让内容居中显示*/ } .top{ height: 100px; background-color: blue; } .foot{ width: 800px; height: 100px; background-color: #900; margin: 0 auto;/*让内容居中显示*/ } </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ padding: 0; margin: 0; } .left{ width: 30%; height:500px; background-color: #ddd; float: left; } .right{ width: 70%; height: 500px; background-color: #999; float: right; } .main{ width: 1000px; height: 600px; background-color: red; margin: 0 auto; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .left{ width: 33.3%; height: 500px; float: left; background-color: #ccc; } .right{ width: 33.3%; height: 500px; float: right; background-color: #ddd; } .middle{ width: 33.3%; height: 500px; float: left; background-color: #999; } </style> </head> <body> <div class="left"></div> <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div> <div class="right"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; padding: 0; } .left{ width: 200px; height: 500px; background-color: #ccc; position: absolute;/*使用绝对定位，让左侧元素停靠在页面的左侧。*/ left: 0; top:0; } .middle{ height: 500px; /*width: 500px; */ background-color: #999; margin: 0 300px 0 200px; } .right{ width: 300px; height: 500px; background-color: #ddd; position: absolute;/*使用绝对定位，让左侧元素停靠在页面的右侧。*/ right: 0; top:0; } </style> </head> <body> <div class="left">200px</div> <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div> <div class="right">300px</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>混合布局</title> <style type="text/css"> /*清除自带样式*/ body{ margin: 0;padding: 0; } .main{ width: 800px;height: 600px;background-color: #ccc;margin: 0 auto;/*让内容居中显示*/ } .top{ height: 100px;background-color: blue; } .head{ height: 100px;width: 800px;background-color: #f60;margin: 0 auto; } .left{ width: 200px;height: 600px;background-color: yellow;float: left; } .right{ width: 600px;height: 600px;background-color: #369;float: right; } .sub_l{ width: 400px;height: 600px;background-color: green;float: left; } .sub_r{ width: 200px;height: 600px;background-color: #09f;float: right; } .foot{ width: 800px;height: 100px;background-color: #900;clear: both; margin: 0 auto;/*让内容居中显示*/ } </style> </head> <body> <div class="top"> <div class="head"> </div> </div> <div class="main"> <div class="left"></div> <div class="right"> <div class="sub_l"></div> <div class="sub_r"></div> </div> </div> <div class="foot"></div> </body> </html>
