============================ day1 =============================
一、相关概念
internet: 国际互联网，全球最大的网络。
WWW(web)：internet中的一类服务，如图片、新闻、视频。
URL地址：网址
http://www.taobao.com
http://localhost:8080/apex
协议：网络中通信 必须遵守的规范。
http协议：web服务中 必须遵守的规范。
域名（机器名/IP地址）：标识 网络中的一台主机。
网页：web服务中提供的 一个数据文件。
静态网页：内容固定不变。
动态网页：内容自动更新、因人因时而异。
HTML：Hype Text Markup Language 超文本标记语言
用于 制作 静态网页内容。
二、基本语法
1、后缀 .html .htm
2、由三部分构成： html
head
body
3、由标签组成 <html> </html>
标签成对出现，允许嵌套。
<html>
<head>
</head>
<body>
</body>
</html>
标签中可以有属性(定义在开始标签中)： <body 属性名="值" bgcolor="red">
标签可以有标签体内容：<body>标签体内容</body>
其中 标签体内容，可以是 文字内容/图片，也可以是 其它成对的标签。
如果1个标签没有标签体内容，可以写成 空标签 <meta/> (<meta></meta>)
三、head部分
不显示的网页中，用于 定义网页的附加信息，如作者、描述信息等。
1、标题
<title>这里是网页的标题</title>
2、meta标签
定义网页的附加信息，如作者、描述等。
<meta name="author" content="yyl" /> <!-- 作者 -->
<meta name="keywords" content="云处理,物联网,ajax,大数据" /> <!-- 关键字 -->
页面自动刷 新
<meta http-equiv="refresh" content="1" /> 每隔1秒自动刷新当前页
2秒后，自动转到淘宝主页
<meta http-equiv="refresh" content="2;url=http://www.taobao.com" />
<meta http-equiv="refresh" content="2;url=second.html" />
设置中文字符集【重点】
<meta http-equiv="content-type" content="text/html;charset=GBK" />
content="text/html;charset=GBK" 其中text/html 代表网页的类型
charset=GBK 代表该网页中的编码方式 是GBK(简体中文)
GBK GB2312 GB18030 BIG5(繁体中文) UTF-8(万国码)
四、body部分
定义在网页中 可见的元素。
1、body标签
<body bgcolor="red" text="blue" background="图片的url地址">
bgcolor: 背景颜色，可取值 名称 #RRGGBB (RGB 三元色)
如，red #FF0000 green #00FF00 white #FFFFFF black #000000
text: 所有字体的颜色(前景色)
background: 背景图片，其值 代表图片的路径和文件名 默认平铺效果
2、网页中的 标题
<h1 align="对齐方式">这是最大的标题</h1>
<h2>这是第2大的标题</h2>
<h6>这是最小的标题</h6>
align="对齐方式" 可取值 left(默认)|center|right
3、段落
<p>这是普通段落</p>
4、换行符
<br/> 空标签
5、特殊符号
空格
< <
> >
版权符号 ©
============================ day2 =============================
6、预格式化段落
<pre>这里的内容显示和定义的格式是一样的</pre>
7、字体标签
<font color="" size="" face="">xxxxx</font>
color,字体颜色
size，字体大小，可取值 1-7（7最大 1最小）
face，字体类型，必须是 已安装的字体
8、加粗 倾斜 下划线
<b>xxx</b>
<i>xxx</i>
<u>xxx</u>
9、无序列表 Unorder List (List Item)
<ul>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
10、有序列表 Order List (List Item)
<ol>
<li>xxxx</li>
<li>xxxx</li>
</ol>
11、图片
<img src="" width="宽" height="高" border="边框粗细" align="" />
src： source 指定要显示的图片路径及文件名
align: 图片相对于周围内容的对齐方式，
可取值：left(默认)|right|top 顶端|middle 中间|bottom 底端
alt/title: 图片的描述信息，当图片不能显示或鼠标移上后可见
12、水平线
<hr width="50%" noshade="noshade" size="1" align="left"/>
width,宽度，可以是 固定象素值 | 百分比
noshade，是否有阴影显示
size，线的粗细
align，对齐方式， left|center(默认)|right
13、超链接【重点】
<a href="链接目标" target="位置">热点文字/图片</a>
target，代表打开超链接目标 的位置，可取值：
_self: 在当前IE 窗口中显示(默认)
_blank: 在新IE窗口中显示
到当前网页的固定位置（如顶端等）：
1) 定义锚记
<a name="名称"></a>
2) 定义超链接
<a href="#锚记名称">xxx</a>
到其它网页的固定位置：
<a href="网页路径及名称#锚记名称">xxx</a>
电子邮件超链接：
<a href="mailto:admin@zparkhr.com.cn">联系管理员</a>
14、表格【重点】
<table>
<tr>
<td>第1行的第1个单元格</td>
<td>第1行的第2个单元格</td>
<td>第1行的第3个单元格</td>
<td>第1行的第4个单元格</td>
</tr>
<tr>
<td>第2行-1</td>
<td>第2行-2</td>
<td>第2行-3</td>
<td>第2行-4</td>
</tr>
</table>
属性：
border，边框
width,宽度 可以是像素或百分比
height,高度
cellspacing，单元格 和 单元格 之间的距离
cellpadding, 单元格的内容 和 边框 之间的距离
align,水平对齐
bgcolor,背景颜色
backgound, 背景图片
bordercolor, 边框颜色
<td align="水平对齐" valign="垂直对齐">xxx</td>
valign，垂直对齐，可取值 top|middle(默认)|bottom
合并单元格：
跨行合并：<td rowspan="2">
跨列合并：<td colspan="5">
============================ day3 =============================
一、form相关
1、form标签
<form action="" method="" name="名称" id="唯一标识">
.......
</form>
action: 指定 表单提交后 要转向的页面(路径及文件名)
method: 用于 指定 表单提交的方法，可取值： get(默认)|post
2、提交按钮
<input type="submit" value="登陆" />
3、单行文本框
<input type="text" name="名称" size="大小" maxlength="最大允许输入的长度"/>
4、密码框
<input type="password" />
5、重置按钮
<input type="reset" />
6、单选按钮
<input type="radio" name="sex" />
注意：同1组单选按钮 名称 必须相同！
7、复选框
<input type="checkbox" name="ah" />
注意：同1组复选框 名称 建议相同！
8、下拉列表
<select name="xl">
<option value="1">大班</option>
<option value="2">小班</option>
<option value="3">托班</option>
</select>
9、文本区域
<textarea name="名称" rows="行" cols="列">这里是默认值</textarea>
注意：没有value属性。
10、普通按钮
<input type="button" name="btn1" value=" 点击Me "/>
11、图片按钮
<input type="image" src="图片的路径及文件名" />
12、隐藏域
<input type="hidden" name="" value=""/>
13、文件上传
<input type="file" />
表单的注意：form标签 不允许嵌套。
二、frameset 框架集 frame 框架
<frameset rows="20%,80%">
<frame src="top.html"/>
<frame src="bottom.html"/>
</frameset>
注意：有 frameset 的网页，不能再定义 body 。
<frameset cols="150,*">
<frame src=""/>
<frame src=""/>
</frameset>
frameset（框架集）：
rows，指定要定义框架的行，以及每行的 高度比例；
cols，指定要定义框架的列，以及每列的 宽度比例。
frame（框架）：
src，指定要显示的网页路径及文件名。
框架集中指定超链接的打开位置：
1) 给目标框架frame 起名称 (框架集总页面中，index.html)
<frame src="" name="mainFrame"/>
2) 指定超链的 链接位置 (超链接所在的页面中， top.html/left.html)
<a href="" target="目标框架名称" >xxx</a>
============================ day4 =============================
<a href="" target="位置"
target，可取值： _self 当前网页
_blank 新窗口打开
_top 取消框架集结构，在整个IE窗口中显示
_parent 在父框架集中显示
自定义的框架名称 指定框架中显示
不支持框架集结果：
<noframes>
<body>
当前浏览器不支持框架集，建议 切换浏览器！
</body>
</noframes>
一、marquee 跑马灯
<marquee direction="left|right|up|down" 方向
bgcolor="" 背景颜色
width="宽" height="高"
behavior="" 方式，可取值 scroll(循环) slide(只走一次) alternate(来回走)
loop="数字" 循环次数
scrollamount="数字" 2次滚动之间的距离，单位象素
scrolldelay="数字" 2次滚动之间的时间间隔，单位毫秒
>这里是会动的文字</marquee>
二、CSS（Cascade Style Sheets 级联/层叠 样式表）
1、基本语法：
样式规则的语法：
属性名:值;属性名2:值2
2、分类
1）行内样式
使用场景：某1个元素 样式特殊时
语法： <html标签 style="样式规则" ... >xxx</结束标签>
如何应用：自动应用
2) 内嵌样式
<head>
<style type="text/css">
选择器名称 {
样式规则
}
</style>
</head>
1.) 标签选择器
使用场景：当前网页中的 所有相同标签 样式一致时
语法：<style type="text/css">
标签名称 {
样式规则
}
</style>
应用：自动应用
2.) 类选择器 (class选择器)
使用场景：当前网页中的 部分相同标签或不同的多个标签(所有同类标签) 样式一致时
语法：<style type="text/css">
.自定义名称 {
样式规则
}
</style>
应用：<html标签 class="选择器名称(不含.)" ...>xxx</html标签>
============================ day5 =============================
3.) ID选择器
使用场景：当前网页中的 部分相同标签或不同的多个标签(所有同类标签) 样式一致时
语法：<style type="text/css">
#自定义名称 {
样式规则
}
</style>
应用：<html标签 id="选择器名称(不含#)" ...>xxx</html标签>
注意：在HTML标签中，id属性通常用于 唯一标识页面中的一个元素。
4.)伪类选择器
使用场景： 特定的元素上 产生 特殊动作时， 样式特殊时。
语法：<style type="text/css">
标签名:动作名 {
样式规则
}
</style>
应用：自动应用
a:link 未访问的超链接
a:visited 访问过的超链接
a:hover 鼠标移上
a:active 当前活动的超链接
/* a标签中 同时class="link1" 的，才会应用该样式 */
a.link1:hover {
color:red;
text-decoration:underline;
}
/* 标签中 class="ul1" 的 子标签 li， 会应用该样式*/
.ul1 li{
}
/* 所有ul标签中 li 子标签中，都会应用该样式*/
ul li{
}
/*标签ul中的li 、 标签ol中的li、p标签、h2 标签，都会应用该样式*/
ul li, ol li,p,h2{
}
常见的样式属性：
1) 文本字体相关
font-size, 大小
color, 颜色
text-decoration, 文本修饰，none|underline
letter-spacing, 字符间距
text-align, 对齐方式，left|center|right
font-family, 字体类型
font-style, 字体风格，斜体italic 正常normal
font-weight, 字体粗细，normal正常 bold加粗
2) 边框相关
border, 边框，可以包含 4个边框 的粗细 颜色 样式风格
border: solid 1px blue;
border-top, 上边框， 包含 粗细 颜色 样式风格
border-top-width, 粗细
border-top-color, 颜色
border-top-style, 样式风格
border-bottom, 上边框， 包含 粗细 颜色 样式风格
border-bottom-width, 粗细
border-bottom-color, 颜色
border-bottom-style, 样式风格
border-left, 上边框， 包含 粗细 颜色 样式风格
border-left-width, 粗细
border-left-color, 颜色
border-left-style, 样式风格
border-right, 上边框， 包含 粗细 颜色 样式风格
border-right-width, 粗细
border-right-color, 颜色
border-right-style, 样式风格
3) 背景相关
background-color， 背景颜色
background-image, 背景图片
background-image:url(图片路径及文件名)
background-repeat, 背景图片是否重复，可取值
repeat, 默认 重复
no-repeat, 不重复
repeat-x, 横向重复
repeat-y, 纵向重复
background-position, 背景图片的位置
4) 列表相关
list-style-type, 列表项的符号，可取值 none|square|circle|.....
list-style-image:url(图片路径及文件名); 列表项的符号 使用指定的图片代替
5) 鼠标相关
cursor, 鼠标外观形状。 可取值：pointer（小手）|move|wait
3、外部样式表
使用场景：同一网站中的 多个网页 风格统一。
语法： a) 创建外部样式表文件
后缀 .css
内容 只能包含CSS语法，不允许包含HTML标签。
b) 使用链接link标签，在网页中 引入 外部样式表文件
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径及文件名"/>
</head>
二、布局
1、表格布局
2、frame布局
3、div布局(层布局)
span: 行级标签。通常用于 区分同1行或段落中，部分内容 的特殊样式时使用。
div: 块级标签。
============================ day6 =============================
一、浮动效果
<div id="div1" >
可以有图片、表格、文字、表单等页面元素
</div>
#div1 {
position: absolute; /*绝对定位*/
left:100px; /*x坐标*/
top:100px; /*y坐标*/
z-index:1; /*z坐标*/
display:none; /*显示，可取值 none(不显示)|block(块级显示)|inline(行级显示) */
width:300px;
height:200px;
}
#div2{
position:fixed; /*绑定位置*/
left:500px;
top:500px;
}
position: relative; /*相对定位，相对于该元素的前1个元素*/
二、布局
float:left|right; /*修改DIV的布局方式，为left(从左往右排列)*/
盒子模型：
padding， 内边距（边框到元素内容 之间的距离）
padding-top
padding-bottom
padding-left
padding-right
margin， 外边距（边框外面 的距离）
margin-top
margin-bottom
margin-left
margin-right
border， 边框
============================ day7 =============================
制作网页练习
============================ day8 =============================
JavaScript: 基于浏览器 解释型 脚本语言。 弱类型（语法要求不严格，严格区分大小写）
一、变量
定义变量语法：
var 变量名;
举例：
var name;
给变量赋值语法：
变量名 = 值;
举例：
name = "张三";
name = "李四";
定义变量同时赋初值：
var age = 18;
把JS语句，放入网页中的语法：
<head>
<script type="text/javascript">
//js语句
</script>
</head>
使用变量-输出打印变量的内容：
document.write(变量名);
JS中的注释：
// 单行注释
/*
多行注释
多行注释
*/
二、数据类型
1、数字类型：包含整数、小数
如，5 5.2 1.2345 234.12
var score = 90;
var score2 = 89.5;
2、字符串类型：用""或''引起来的1个或多个文本内容。
如，"abc" "张三" "男" 'abc' '张三' '男'
var name = "张三";
使用JS描述对1个学生信息的存储：
姓名
性别
年龄
身份证号码
家庭地址
邮政编码
邮箱
体重
3、布尔类型：只能是 true 或 false
true-真，正确
false-假，不正确
获取数据的数据类型：
typeof(变量名)
三、运算符
1、算术运算符
+ - * / %
+号的特殊用法：用于字符串的连接(包括字符串与数字的连接)。
2、关系(比较)运算符
== 是否相等
> 大于
>= 大于等于
< 小于
<= 小于等于
!= 不等于
3、逻辑运算符
&& 逻辑与 2个数都是true，结果才为true；否则结果为false
|| 逻辑或 2个数有1个为true，结果即为true；否则结果为false
！ 逻辑非 取反
练习1：有一个整数，输出该数 是不是一个偶数。效果如下：
123 是偶数吗？false
能被2整除的数是偶数：
num % 2
新效果如下：
123 不是偶数
122 是偶数
练习2：有3个整数122 123 88，分别输出它们 是不是一个大于100的偶数。效果如下：
122 是大于100的偶数吗？true
123 是大于100的偶数吗？false
88 四、逻辑语句
1、顺序结构
所有语句 从上到下 依次都执行1次。
2、分支结构
根据条件(条件成立)，只执行其中一部分，执行1次。
语法1：
if(判断条件){
// 语句
}
先判断条件，如果结果为true，则执行{}中的语句；
如果条件为false，则不执行{}中的语句；
然后再往后顺序执行其后的代码。
语法2：
if(判断条件){
// 语句块1
} else {
// 语句块2
}
先判断条件，如果为true，则执行if后{}中的语句块1；
否则 如果条件为false，则执行else后{}中的语句块2；
然后再往后顺序执行其后的代码。
语法3：
if (判断条件1){
// 语句块1
} else if(判断条件2) {
// 语句块2
} else if(条件3) {
// 语句块3
} else {
// 语句块n
}
先判断条件1，如果为true，则执行if后{}中的语句块1；
否则，再判断条件2 是否为true，是true，则执行 条件2 后{}中的语句块2；
如果条件2的结果是 false，则再判断条件3是否为true，是true，则执行 条件3 后{}中的语句块3；
如果条件3的结果是 false，则执行else后{}中的语句块n；
最后 再往后顺序执行其后的代码。
3、循环结构
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
