web项目
前端网页web（人体结构）
HTML负责前端网页结构
Css负责网页样式
css引入
内联样式引入
内部样式
外部样式
三种基本引入器
id选择器
类选择器
标签选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css标签样式</title> 6 <!--内联样式引入：使用标签<style>--> 7 <style type="text/css" rel="stylesheet"> 8 h1{ 9 color:red; 10 font-size:10px; 11 } 12 /*id选择器*/ 13 #id1{ 14 color:blue; 15 font-size:10px; 16 } 17 /*类选择器*/ 18 .class{ 19 color:blue; 20 font-size:10px; 21 } 22 23 /*内联样式*/ 24 。class1{ 25 26 } 27 28 </style> 29 <!--外部引入 link标签--> 30 <link href="CSS/CSS1.CSS"> 31 32 </head> 33 <body> 34 <div> 35 36 <h1 h1="h1">心之所向</h1> 37 <!-- p 标签段落 paragraphs 38 <br>自动换行--> 39 <p id="id1"> 40 道可道，非常道<br> 41 名可名，非常名<br> 42 无名天地之始<br> 43 有名天地之母 故常无欲以观其妙 44 <!-- 空格，，，大于号>；小于号<；版权©；双引号" ； 水平线<hr>--> 45 </p> 46 <p class=".class">故常无欲以观其妙</p> 47 <!--内部样式的引入style属性--> 48 <p style="color:aquamarine；font-size: large">段落</p> 49 <div> 50 <a href="http://music.163.com/video?id=92808D4BD1E6C04EB6086055CF360F47&userid=1491164241" target="_blank"> 51 点击 </a> 52 53 </div> 54 </div> 55 </body> 56 </html>
伪类（鼠标与超链接进行交互时的样式）：
鼠标未点击超链接 a:link{}
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
1 a:link { 2 color:#FF0000; 3 text-decoration:underline; 4 } 5 a:visited { 6 color:#00FF00; 7 text-decoration:none; 8 } 9 a:hover { 10 color:#000000; 11 text-decoration:none; 12 } 13 a:active { 14 color:#FFFFFF; 15 text-decoration:none; 16 }
背景样式
注意点：相对路径如何找到他
找同级
列表
有序列表<ol>
无序列表<ul>
自定义列表<dl>
1 <div> 2 <!--有序列表--> 3 <ol> 4 <li>道</li> 5 <li>可</li> 6 <li>道</li> 7 <li>道</li> 8 </ol> 9 <!--无序列表--> 10 <ul> 11 <li>道</li> 12 <li>可</li> 13 <li>道</li> 14 <li>道</li> 15 </ul> 16 <!--自定义列表--> 17 <dl> 18 <dt>道</dt> 19 <dd>道</dd> 20 <dd>可</dd> 21 <dd>道</dd> 22 </dl> 23 24 </div>
表格
table tr 行 table rows；td table td
合并行 colspan
列 row
1 <div> 2 <!--表格--> 3 <table border="1"> 4 <tr><td colspan="2">道</td><td>可</td></tr> 5 <tr><td row="2">道</td><td>可</td></tr> 6 <tr><td>道</td><td>可</td></tr> 7 </table> 8 </div>
JS/
基本结构
<!DOCTYPE html> //第几个版本
<html lang="en">//嵌套：标签+属性+属性值
<head>
<meta charset="UTF-8">支持utf-8
<title>Title</title>//标题
</head>
<body>
</body>
</html>
注册表单注释标签：对代码进行说明
<!-- 单行注释,也可以对多行文字进行注释 -->常用格式标签
1 <b>加粗</b>
2 <i>斜体</i>
3 <u>下划线</u>
4 <s>删除线</s>
5 <p>段落标签</p>
6 <hr>：分割线
7 <br>：换行
8 <sup>上标</sup>
9 <sub>下标</sub>
10 <pre>保留当前格式样式</pre>
11 <strong>(粗字体)强调文本</strong>
12
../：返回上一级（父级）目录标题标签
1 <h1>我是一级标题标签(最大)</h1> 2 <h2>我是二级标题标签</h2> 3 <h3>我是三级标题标签</h3> 4 <h4>我是四级标题标签</h4> 5 <h5>我是五级标题标签</h5> 6 <h6>我是六级标题标签(最小)</h6>
列表标签
无序列表：
1 <ul type="disc"> <!--disc:圆点；circle：圆圈；square：方块--> 2 <li>列表项1</li> 3 <li>列表项2</li> 4 <li>列表项3</li> 5 </ul>
有序列表：
1 <ol type="1"> <!--1，a/A，i/I--> 2 <li>列表项1</li> 3 <li>列表项2</li> 4 <li>列表项3</li> 5 </ol>
自定义列表：图文混排
1 <dl> 2 <dt>标题，图片</dt> 3 <dd>描述</dd> 4 </dl>
CSS样式
内嵌样式:放在<head>标签之间
语法：
1 <style type="text/css"> 2 选择器名 { 3 属性名:属性值; 4 } 5 </style>
1 所有标签（*） 2 * { 3 padding:0px; /*清除默认内边距*/ 4 margin:0px; /*清除默认外边距*/ 5 } 6
文本属性
1 line-height:20px; /*行高*/ 2 text-align:center; /*对齐：Left|right|center|justify*/ 3 text-decoration:none; /*文本修饰None：默认|underline：定义文本下的一条线|overline：定义文本上的一条线|line-through：定义穿过文本下的一条线*/ 4 Letter-spacing:5px; /*字母之间的间距*/ 5 Text-indent:40px; /*首行的缩进方式：px/%*/
字体标签及属性
1 <font>字体标签</font>
2
3 <!--字体CSS属性-->
4 <style type="text/css">
5 font-size:字体大小（常用单位：px/%/em...）;
6 color:颜色;
7 font-style:字体样式;
8 font-family:字体系列;
9 font-weight:字体粗细;
10 </style>
11
12
例：<font size="6" color="#FF0000" face="微软雅黑">我是字体标签</font>背景相关的属性
1 background-color: red; /*设置背景颜色*/ 2 background-image: url(图片路径); /*设置背景图片（图片路径没有引号包裹）*/ 3 background-repeat: no-repeat; /*设置背景的平铺方式：Repeat-x、repeat-y、no-repeat*/ 4 Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/ 5 6 background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/ 7 background-position:100px -100px; 8 /*第一值：左右偏移量，正：向右偏移，负：向左偏移； 9 第二值：上下偏移量，正：向下偏移，负：向上偏移*/ 10 11 background-size:cover; 12 /*可以为px、%、cover、continue 13 cover: 不会造成图片失真，会铺满整个标签。 14 contain: 不会造成图片失真，不会铺满整个标签。 15 */ 16 17 opacity: 0.5; /*设置透明度，范围0.0-1.0*/ 18 ontline:0 none; /*清除默认边框*/
超链接:
1 <a href="网页的网址" target="_blank">超链接文字或图片</a> 2 3 _blank:在新窗口打开网页 4 _self:在当前自身窗口打开网页
邮件超链接
1 <a href="mailto:cupwang@163.com">我的邮箱</a>
图片标签
1 <img src="图片地址路径" width="宽度" height="高度" alt="加载失败提示文字" 2 title="鼠标悬浮提示文字" border="边框大小" align="图片与周围文字的对齐方式：top/middle/bottom/left/right" 3 vspace="图片在垂直方向上与周围文字的间距" hspace="图片在水平方向上与周围文字的间距"/>
锚点链接
1 <a href="#锚点名">锚点链接：跳转链接</a> 2 <a name="锚点名">锚点名:要跳转到的位置</a>
图片滚动
1 <marquee scrolldelay="时间延时：毫秒" direction="滚动方向 up down left right"> 2 3 </marquee>
分隔窗口
1 <frameset cols="20%,*"></frameset> <!--左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整-->
2 <frameset rows="20%,*"></frameset> <!--上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整-->
3 <frameset cols="20%,*"></frameset> <!--分割左右两个框架-->
4 <frameset cols="20%,*,20%"></frameset> <!--分割左中右三个框架-->
5 <frameset rows="20%,*"></frameset> <!--分割上下两个框架-->
6 <frameset rows="20%,*,20%"></frameset> <!--分割上中下三个框架 -->
7
例：
1 <frameset cols="20%,*">
2 <frame src="1.html">
3 <frame src="2.html">
4 </frameset>
块级元素和行内元素
块级元素：凡是默认自动占满网页整行的元素（自动换行），称为块级元素
1 <hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...
行内元素：不能占满网页整行的元素
1 <font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...
表格标签
1 tr:行； td：单元格 2 <table align="表格对齐方式" border="边框" bgcolor="背景颜色" height="高度" width="宽度" background="背景图片" bordercolor="边框颜色" cellspacing="单元格外边距" cellpadding="单元格内边距" colspan="合并栏(使用数字)" rowspan="合并列(使用数字)"> 3 <tr align="文本对齐方式"> 4 <td>1</td> 5 <td>2</td> 6 </tr> 7 <tr> 8 <td>3</td> 9 <td>4</td> 10 </tr> 11 </table> 12 13 14
优先级：td > tr > table
跨行：<td rowspan="2">跨2行</td>
跨列：<td colspan="2">跨2列</td>盒子模型
网页中所有的元素都是盒子
盒子组成部分：
content:内容 padding:内边距
border:边框 margin:外边距居中对齐：
1 text-align: center; /*文本居中*/ 2 margin: 0px auto; /*盒子水平居中*/
盒子属性
1 height:高度 width:宽度
2
3 padding、border、margin:都有四个方向：top、bottom、left、right;
4
5
例:
1 <style type="text/css">
2 padding-top:50px;
3 border-left:50px;
4 margin-right:50px;
5 </style>
6 <style type="text/css">
7 width:200px;/*内容宽度*/
8 height:150px;/*内容高度*/
9 border-width:25px;/*边框宽度*/
10 border-color:red;/*边框颜色 transparent：透明*/
11 border-style:solid;/*边框样式 soild：实线，dashed：线虚线，dotted：点虚线*/
12 </style>
13
14 <style type="text/css">
15 border:10px red solid;
16 等价于：
17 border-width:10px;
18 border-color:red;
19 border-style:solid;
20
21
22 padding-top:50px;
23 padding-bottom:100px;
24 padding-left:50px;
25 padding-right:100px;
26
27 padding:50px; /*内边距上下左右各50px*/
28 padding:50px 100px; /*第一个值:上下 第二个值:左右*/
29 padding:50px 30px 100px; /*第一个值:上 第二个值:左右 第三个值：下*/
30 padding:10px 30px 50px 100px; /*第一个值:上 第二个值:右 第三个值:下 第四个值:左 (顺时针方向)*/
31 </style>
32
如何选定网页中某些或某个元素
选择器：
1、标签选择器：标签名，网页中所有这样的标签都具有相同的属性
1 <style type="text/css"> 2 div { 3 width:300px; /*宽度*/ 4 height:250px; /*高度*/ 5 border-width:10px; /*边框宽度*/ 6 border-color:red; /*边框颜色*/ 7 border-style:solid; /*边框样式 solid：实线 dashed：虚线 dotted：点虚线*/ 8 }
2、ID选择器：#+ID名，选择网页中唯一元素，命名规则同C语言 ，关键字：id
1 #box2 { 2 border-color:blue; 3 }
3、类选择器：.+类名，选择网页中具有相同类名的元素 ，关键字：class
1 .style2 { 2 background-color:green; 3 border-color:black; 4 border-style:dashed; 5 }
4、伪类选择器:
1 a:link /* 未访问的链接 */ 2 a:visited /* 已访问的链接 */ 3 a:hover /* 鼠标移动到链接上 */ 4 a:active /* 点击时的链接 */ 5 这四种不同的状态必须按照固定的顺序写： 6 :link :visited :hover :active
5、通配符选择器（*）
1 /* 清除网页默认样式 */ 2 *{ 3 margin: 0; 4 padding: 0; 5 }
选择器优先级：
!important > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器默认属性
样式有三种使用方式：
内嵌样式：定义在该标签里面的
1 <div style="width:300px; height:200px; border:5px solid blue; margin:0px auto;"> 2 <!-- 我是一个盒子 --> 3 </div>
内部样式：定义在网页的<head>里面的
1 <style type="text/css"> 2 p{ 3 background: green; 4 } 5 </style> 6 <body> 7 <P>Hello World!</P> 8 </body>
外部样式：定义在网页之外的CSS文本里面的
1 <link type="text/css" rel="stylesheet" href="css/newstyle.css"/>
样式使用的优先级为：
行内样式表 > 内嵌样式表 > 外部样式表
字符实体
表单元素：
<form action="要提交的网页" method="post/get"> </form>
post：提交的数据不会在地址栏显示，安全性好，不限制提交数据的大小。
get：提交的数据会在地址栏显示，完全性差，限制提交数据的大小。 常见的表单元素包括文本框、按钮和下拉列表等。除下拉列表框、多行文本域等少数表单元素外，大多数表单元素均使用<input>标签，只是他们的属性设置不同，其统一用法如下：
1 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中"/> 2 3 文本框： <input type="text" value="jack" maxlength="8" name="account" size="10" readonly="readonly"/> 4 5 密码框：<input type="password" maxlength="8" name="pwd" size="10"/> 6 7 若要实现多个单选按钮，只选中一个，前提是保证name属性值是一样的，若多个单选按钮都有checked="checked"，以最后一个单选按钮为准。 8 单选按钮：<input type="radio" name="sex" value="男" checked="checked"/> 9 10 复选框：<input type="checkbox" name="hobby" value="篮球" checked="checked"/> 11 12 文件域：<input type="file" name="photo"/> 13
下拉列表
1 <select name=”指定列表的名称”size=”行数”> 2 <option value=”可选择的值” selected=“selected”>显示项的内容</option> 3 <option value=”可选择的”>显示项的内容</option> 4 …… 5 </select>
多行文本域
1 <textarea name=”指定名称” cols=”列数” rows=”行数”> 2 //文本域的内容 3 </textarea>
重置、提交与普通按钮，图像按钮：
1 <input type="submit" value="提交按钮的显示值" name="名称"/> 2 <input type="reset" value="重置按钮的显示值" name="名称"/> 3 <input type="button" value="普通按钮的显示值" name="名称"/> 4 <input type="image" src="imags/Logo.png"/>
去掉页面中的滚动条
1 <body scroll="no"> <!--去掉全部滚动条--> 2 <body style="overflow-y:hidden"> <!--去掉页面右边的滚动条--> 3 <body style="overflow:scroll; overflow-y:hidden"> 4 <body style="overflow-x:hidden"> <!--去掉页面底部的滚动条--> 5 <body style="overflow:scroll; overflow-x:hidden">
自定义滚动条
1 body { 2 Scrollbar-3DLight-Color: #999999; /*滚动条亮边的颜色*/ 3 Scrollbar-Arrow-Color: #CCCCCC; /*上下按钮上三角箭头的颜色*/ 4 Scrollbar-Base-Color: #E1E1E1; /*滚动条的基本颜色*/ 5 Scrollbar-Shadow-Color: #CCCCCC; /*立体滚动条阴影的颜色*/ 6 Scrollbar-DarkShadow-Color: #333333; /*滚动条动条阴影的颜色*/ 7 Scrollbar-Face-Color: #999999; /*滚动条凸出部分的颜色*/ 8 Scrollbar-Highlight-Color: #F2F2F2; /*滚动条空白部分的颜色*/ 9 Scrollbar-Track-Color: #F2F2F2; /*滚动条的背景颜色*/ 10 } 11
javasript 负责交互行为，是一种基于对象和事件的脚本语言
特点：面向对象，事件驱动
面向对象：调用属性与方法
Windows
类似于object
Document
Location
History
事件驱动
引入javascript
内联方式嵌入
内部方式（js标签位置可以不限
外部方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript</title> 6 <!--内部引入--> 7 <script type="text/javascript"> 8 /*使用document在网页正文输出，相当于print*/ 9 document.write("hello"); 10 document.write("<h1>hello</h1>")/*里面可以添加标签*/ 11 document.write("<p>道</p>") 12 13 </script> 14 <!--外部引入--> 15 <script type="text/javascript" src="js/js1.js"> 16 17 </script> 18 </head> 19 <body> 20 <div> 21 <!--内嵌方式 ，可以把javascript去掉--> 22 <input onclick="javascript:document.write('输出')" type="button" name="button" value="点击"> 23 </div> 24 </body> 25 </html>
1 <script type="text/javascript" > 2 /*java 的变量声明和赋值， 3 * int i=1 */ 4 /*常见的number和string*/ 5 var a=1; 6 var al; 7 al=2; 8 var b="rose"; 9 var c=null; 10 var d=true; 11 var c=undefined; 12 var f=object; 13 /*scanner调用*/ 14 var i= window.prompt("请输入第一个数字") 15 var j= prompt("请输入第二个数字") 16 /*s数据类型转换 string number*/ 17 var i1=window.parseInt(i); 18 var j1=window.parseInt(j); 19 var result=i1+j1; 20 /*页面输出值*/ 21 document.write("计算结果" + result) 22 23 </script>
html的变量与赋值
1 1 <script type="text/javascript" > 2 2 /*java 的变量声明和赋值， 3 3 * int i=1 */ 4 4 /*常见的number和string*/ 5 5 var a=1; 6 6 var al; 7 7 al=2; 8 8 var b="rose"; 9 9 var c=null; 10 10 var d=true; 11 11 var c=undefined; 12 12 var f=object; 13 13 /*scanner调用 14 14 var i= window.prompt("请输入第一个数字") 15 15 var j= prompt("请输入第二个数字") 16 16 /*s数据类型转换 string number*/ 17 17 var i1=window.parseInt(i); 18 18 var j1=window.parseInt(j); 19 19 var result=i1+j1; 20 20 /*页面输出值*/ 21 21 document.write("计算结果" + result) 22 22 23 23 </script> 24
下标，元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Title</title> 7 <script type="text/javascript"> 8 <!--string对象--> 9 var str="asdfgs"; 10 var str1=str.substring(3,4);/*左闭右开*/ 11 document.write(str1); 12 document.write("<br>");/*隔行*/ 13 var numl=str1.length 14 15 document.write(numl); 16 var num2=str.indexOf("a")/*下标*/ 17 document.write("<br>") 18 document.write(num2); 19 var str3=str.charAt(4); 20 document.write("<br>"+str3);/*根据下标找元素*/ 21 </script> 22 23 </head> 24 <body> 25 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 /*数组的创建*/ 8 var arr=new Array(4); 9 arr[0]="a"; 10 arr[1]="b"; 11 arr[2]="c"; 12 arr[3]="d"; 13 /*数组创建*/ 14 var arr1=new Array("a","b") 15 document.write(arr) 16 document.write("<br>"+arr1); 17 18 var arr2=["a0","as"] 19 document.write("<br>"+arr2); 20 </script> 21 </head> 22 <body> 23 24 </body> 25 </html>
运算
2.运算符：
数学运算符：+ - * / % ++ --；
关系运算符：== != >= <= > <；
逻辑运算符：&& || ！；
其他运算符：+= -= *= /= %= ？:；
输入proment
输出write，scanner
语句：
1 一般分为顺序、分支和循环语句。 2 3 （1）分支语句if： 4 5 if（判断条件） 6 7 { 8 9 满足条件要执行的语句 10 11 } 12 13 else 14 15 { 16 17 不满足条件时执行的语句 18 19 } 20 21 22 23 （2）循环for语句： 24 25 for（初始条件；循环条件；状态改变） 26 27 { 28 29 循环体 30 31 } 32 33 34 35 （3）问题类型：穷举、迭代。 36 37 （4）两个关键词：break 和 continue。 38 39 （5）如果要输出某一参数的值：输出的值是"+a+"和"+b" 40 41 42 43 44 45 <script>function visible1() 46 { 47 $("p").hide(); 48 };</script></head><body> 49 <input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>
函数：
函数的四要素：名称、输入、返回值、加工。
定义函数：function add(形参){函数体} //函数名为add，输入为参数的形式，返回值可以是var类型，也可以return一个返回值。
函数必须经过调用才能执行。函数的调用：add（实参）。
*放在头部也可以读取（最先读取头部）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函数</title> 6 <script type="text/javascript"> 7 /*w无参函数自定义*/ 8 function study() { 9 for(var i=0;i<5;i++){ 10 document.write("<h1>欢迎</h1>") 11 } 12 13 } 14 /*有参函数*/ 15 function study1(count) { 16 for (var i = 0; i < count; i++) { 17 document.write("<h1>欢迎</h1>") 18 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <!--调用 无参函数，通过触发方式，onclick是事件属性--> 25 <div> 26 <input onclick="study()" type="button" name="button" value="按钮"> 27 </div> 28 <!--有参函数，--> 29 <div> 30 <input onclick="study1(prompt('请输次数',''))" type="button" name="button" value="按钮1"> 31 </div> 32 </body> 33 </html>