二.HTML
1.HTML
1.
<head></head>标签
<!DOCTYPE html> <!--统一规范--> <!----> <html lang="en"> <!--html标签开始，只能有一个头标签，html是主动闭合标签，内部属性--> <head> <meta charset="UTF-8" /> <!--meta是自闭标签，charset指定编码--> <!-- <meta http-equiv="Refresh" content="3"/> #3秒后自动跳转--> <!-- <meta http-equiv="Refresh" content="3;Url=http:\\www.51job.com" /> #默认3秒后跳转到某个网站--> <!-- <meta name="keywords" content="汽车，汽车之家"/> #搜索引擎，即关键字--> <!-- <meta name="description" content="为你提供最新技术"/> #描述本网站是干什么的--> <!-- <meta http-equiv="X-UA-Compatible" content="IE=IE9"/> IE兼容--> <link rel="shortcut icon" href="image/ship.bmp"/> <!--前面link属性，后面地址。title页面标题前的小图标--> <!-- <style />--> <!-- <script />--> <title>初来乍到</title> <!--页面标题--> </head> <body> <!----> <a href="http:\\www.baidu.com">百度一下</a> </body> </html> <!--html标签结束-->
2.
<input />标签
<!DOCTYPE html> <!--标签不区分大小写--> <!----> <html lang="en"> <head> <meta charset="UTF-8"/> <link rel="shortcut icon" href="image/ship.bmp"/> <!--前面link属性，后面地址。title页面标题前的小图标--> <title>body部分</title> </head> <body> <a href="http:\\www.baidu.com">百 度 一下<a> </a> <!--只能加一个空格，可以用  ,一个对应一个空格，< > 是<>--> <p>123<br />456</p> <!--段落标签,<br>标签是换行，但还是一个段落--> <p>123</p> <h1>你好</h1> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)--> <h2>你好</h2> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)--> <h3>你好</h3> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)--> <h6>你好</h6> <span>hello</span> <!--行内标签也叫内联标签，span（白板）--> <span>hello</span> <!--行内标签--> <span>hello</span> <!--行内标签--> <div>1</div> <!--div也是块级标签，白板--> <div>2</div> <div>3</div> <div> <!--标签可以嵌套，标签存在的意义：定位，css操作，js操作--> <div>1</div> <span>2</span> </div> </body> </html>
3.
<form></form>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初试牛刀</title> <link rel="shortcut icon" href="image/ship.bmp"/> </head> <body> <p>123<br />456</p> <!----> <h1>123</h1> <span>123</span> <span>456</span> <div>qwe</div> <div>asd</div> <a href="http:\\www.baidu.com">百度一下</a> <form action="http://localhost:8888/index" method="POST"> <!--表单，跟属性提交到哪,默认get方式，会把数据拼接到url(表头)上再提交，post会放到内容(body)里方法--> <input type="text" name="user"/> <!-- name生成字典形式才提交到指定地址，{"user":"用户输入的用户","email","xx","pwd":"xx"} 生成字典提交到后台--> <input type="text" name="email"/> <input type="password" name="pwd"/> <input type="button" value="登录1"/> <!--type不对 不能跳转提交--> <input type="submit" value="登录2"/> <!--可以跳转提交--> </form> <br /> <form > <!--没有属性地址，没法提交--> <input type="text"/> <!--没有name不能提交--> <input type="password"/> <input type="button" value="登录1"/> <!--type不对，不能提交跳转--> <input type="submit" value="登录2"/> </form> </body> </html>
4.
<input /> <select><option></option><select>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初试牛刀</title> <link rel="shortcut icon" href="image/ship.bmp"/> </head> <body> <p>123<br />456</p> <!----> <h1>123</h1> <span>123</span> <span>456</span> <div>qwe</div> <div>asd</div> <a href="http:\\www.baidu.com">百度一下</a> <form action="http://localhost:8888/index" method="POST"> <!--表单，跟属性提交到哪,默认get方式，会把数据拼接到url(表头)上再提交，post会放到内容(body)里方法--> <input type="text" name="user"/> <!-- name生成字典形式才提交到指定地址，{"user":"用户输入的用户","email","xx","pwd":"xx"} 生成字典提交到后台--> <input type="text" name="email"/> <input type="password" name="pwd"/> <input type="button" value="登录1"/> <!-- 提交按钮type不对 不能跳转提交--> <input type="submit" value="登录2"/> <!--可以跳转提交--> </form> <br /> <form > <!--没有属性地址，没法提交--> <input type="text"/> <!--没有name不能提交--> <input type="password"/> <input type="button" value="登录1"/> <!--type不对，不能提交跳转--> <input type="submit" value="登录2"/> </form> <form> <input type="text" name="query" value="请输入"/> <!--输入文本框默认值，password也一样--> </form> <form enctype="multipart/form-data"> <div> <select name="city" size="5" multiple="multiple"> <!--下拉框,size默认=1，multiple="multiple"多选 --> <option value="1">北京</option> <!--下拉框内容--> <option value="2" selected="selected">上海</option> <option value="3">深圳</option> <option value="4">广州</option> <option value="5">苏州</option> </select> <p>请选择性别</p> 男：<input type="radio" name="gender" value="1" checked="checked"/> <!--radio圆框，相同name互斥，value区分，checked="checked"默认值--> 女：<input type="radio" name="gender" value="2"/> <br/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1"/> <!--checkbox复选框--> 足球：<input type="checkbox" name="favor" value="2"/> 排球：<input type="checkbox" name="favor" value="3"/> <p>技能</p> 游泳：<input type="checkbox" name="skill" value="1"/> <!----> 散步：<input type="checkbox" name="skill" value="2"/> 代码：<input type="checkbox" name="skill" value="3"/> <p>提交文件</p> <input type="file" name="fname"/> <!--file上传文件，form必须有里的enctype="multipart/form-data" ,把文件一点一点提交给服务器--> </div> <textarea name="meno">默认值</textarea> <!--多行文本标签，后台要数据还是要name--> <input type="submit" value="提交"/> <input type="reset" value="重置"/> <!--reset 把填写的重置即清除--> </form> </body> </html>
5.<a></a>超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初级HTML</title> </head> <body> <a href="http:\\www.baidu.com" target="_blank">百度一下</a> <!--1.做超链接,target打开另一个网页--> <a href="#i1">第一章</a> <!--2.做錨--> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <!----> <div id=i1 style="height:600px;">第一章内容</div> <!--style="height:600px;"高度600px--> <div id=i2 style="height:600px;">第二章内容</div> <!--id不能重复--> <div id=i3 style="height:600px;">第三章内容</div> I </body> </html>
6.<img /><ul></ul>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img标签</title> <!----> </head> <body> <a href="http:\\www.baidu.com"> <img src="image/ship.bmp" style="height:200px;width:200px" title="百度一下" alt="请直接点击"/> <!--图片跳转，title把鼠标放到图片上显示的字体，alt无法加载时显示的--> </a> <ul> <!--在前加点--> <li>你好</li> <li> <input type="text" name="user"/> </li> <div>hello</div> <!--ul和li必须组合才能加点--> </ul> <ol> <li>a</li> <!--在前面从1开始排序--> <li>b</li> <li>c</li> </ol> <dl> <dt>标题</dt> <dd>内容</dd> <dt>标题</dt> <dd>内容</dd> </dl> </body> </html>
7.<table></table> 列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <!--不规范操作，列表，border="1"外面加框--> <tr> <td>主机号</td> <td>端口</td> <!----> <td>操作</td> <!----> </tr> <tr> <td>192.186.1.1</td> <td>6688</td> <td> <a href="http:\\www.baidu.com">百度一下</a> </td> </tr> </table> <table border="1"> <!--正常操作--> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">2</td> <!--colspon 占两列 合并单元格--> </tr> <tr> <td rowspan="2">4</td> <!--rowspan 占两行--> <td>5</td> <td>6</td> <!----> </tr> <tr> <td>8</td> <td>9</td> </tr> </tbody> </table> </body> </html>
8.<label></label>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label for="username">用户名：</label> <input id="username" type="text" name="user"/> </body> </html>
9.<fieldset></fieldset>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!----> <label for="username">用户名：</label> <!--点击用户名也可以输入--> <input id="username" type="text" name="user"/> <fieldset> <!-- 在外面建个大框--> <legend>登录</legend> <!--缺口内容--> <label for="username1">用户名：</label> <!--点击用户名也可以输入--> <input id="username1" type="text" name="user"/> <br /> <label for="passwd">密码： </label> <!--点击用户名也可以输入--> <input id="passwd" type="password" name="pd"/> </fieldset> </body> </html>
2.css
1.标签里写style
2.在head里写id选择器
#i1{
}
id=i1
3.class选择器
class=c1
.c1{
}
4.标签选择器
div{
}
所有div都应用样式
5.关联(层级)选择器
span div{
}
span下的div才应用样式；
.c1 .c2 div{
}
class=c1 下的 class=c2下的div才应用样式
6.组合选择器
#i1,i2,i3{
}
.c1, .c2,.c3{
}
7.属性选择器：根据标签下的属性来选择
input[type="text"]{
}
input tupe="text" 的应用样式；
.c1[type="text"]{
}
class=c1 下的type=“”text“”的应用样式
8.引用CSS文件
<link rel="styleshet" href="css样式目录" />
9.边框
style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border:1px solid red">dd</div> <!--border边框,border-left左边框等，1px粗细,solid实体，dotted虚体，red颜色--> <!-- 字体大小： font-size:30px ; 水平居中text-align:center ；上下居中 line-height:50px ；字体加粗 font-weight:bold --> <div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sss</div> <div></div> </body> </html>
10.
float 和 style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin:0 auto;"> <!--margin:0 auto 与顶部距离为主动为0--> <div style="border:1px solid red">dd</div> <!--border边框,border-left左边框等，1px粗细,solid实体，dotted虚体，red颜色--> <!-- 字体大小： font-size:30px ; 水平居中text-align:center ；上下居中 line-height:50px ；字体加粗 font-weight:bold --> <div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sss</div> <div></div> <div style="width:20%;background-color:red;float:left">aa</div> <!--让标签飘起来，可以堆叠--> <div style="width:80%;background-color:green;float:left">bb</div> <span style="width:500px;background-color:green;display:inline-block" >aaa</span> <div style="clear:both;"></div> <!--父边框不显示时用它--> </body> </html>
11.
display 标签转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="display:inline;background-color:red">qqqqq</div> <!--display:inline 把行标签变为块标签--> <span style="display:block;background-color:red"></span> <!--display:block 把块变为行标签--> <!----><!--行内标签无法设置高度和宽度，可以用display:inline-block; 让它拥有两种功能--> <!--display:none 让标签隐藏--> </body> </html>
12
position 和 返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!----> <body> <div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto"> <!--position:absolute，绝对定位+ relative--> <div style="position:absolute;left:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqq</div> </div> <div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto"> <div style="position:absolute;right:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqq</div> </div> <div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto"> <div style="position:absolute;right:0px;top:0px;width:50px;height:50px;border:1px solid red;">qqqq</div> </div> </body> </html>
13.
分多层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--top:50%;left:50% 以框的左上角定位，--> <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-250px;background-color:white;height:400px;width:500px"></div> <div style="z-index:9;background-color:black;position:fixed; top:0; bottom:0; left:0; right:0; opacity:0.2 "> <!-- top:0;bottom:0;left:0;right:0;形成第二层 z-index:10,谁大谁在上面--> <!--opacity:0.2 设置透明度，0-1 --> </div> <div style="background-color:pink;height:5000px;"> </div> </body> </html>
14.
返回顶部？？？？？？？？？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--在我电脑上不支持--> </head> <body> <div onclick="GoTop();" style="background-color;height:50px;width:50px;position:fixed;right:10px;bottom:25px;color:white">返回顶部</div> <div style="height:5000px;background-color:pink">3333333333</div> <!--position:fixed固定在某个位置，top 上，bottom 下，--> <!--position:absolute，绝对定位+ relative--> <script> function GoTop(){ document.body.scrollTop=0 } </script> </body> </html>
15.
图片太大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height:200px;width:300px;overflow:auto"></div> <!--overflow:auto 太大则出现滚动条,或者style--> <img src=""> </body> </html>
16.
变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position:fixed; right:0; left:0; top:0; height:48px; background-color:#2459A2; line-height:48px; } .pg-body{ margin-top:5opx; } .w{ width:980px; margin:0 auto; } .pg-header .menu{ display:inline-block; padding:0 100px 0 100px; color:white; } .pg-header .menu:hover{ background-color:blue; } </style> </head> <!-- .pg-header .menu:hover 中间有空格啊 --> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">爱好</a> <a class="menu">登录</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
3 . javascript 基础
1.弹窗+定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--定时器--> <script> setInterval("alert(123);",2000); </script> </body> </html>
2.基本语法
name = "alex" 默认全局变量
var name= "alex" 声明局部变量
i = parseInt(age) 变为整数
i = parseFloat(age) 变为浮点数
a.charAt(1) 切片
a.substring(1,3) 位置切片
a.length 获取长度
3.在console中显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--setInterval() 里加执行函数或命令+ 时间间隔，function后加函数名和函数内容--> <script> function f1(){ console.log("你好") } setInterval("f1();",5000); </script> </body> </html>
4.滚动字条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎各位朋友们</div> <script> function func(){ var tag = document.getElementById("i1"); var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval("func()",500); </script> </body> </html>
5.
1
生活因我们奋力的拼搏而绽放姹紫嫣红的花朵
浙公网安备 33010602011771号