决定要开始写博客，先把之前的东西总结一下好了。以前培训的时候学到的一些基础知识，做下笔记备用。w3cSchool也是一个很好的学习这些知识的地方。
web基础知识回顾
（一）web界面开发的三个基本技术【html、css、js】
1.html:超文本标记语言（告诉浏览器显示什么）
2.css:层叠样式表（告诉浏览器如何显示）
3.js:客户端脚本语言（告诉浏览器如何交互）
（二）用记事本写一个最最简单的html界面。
<html>
<head>
<title>标题</title>
</head>
<body>内容</body>
</html>
（三）常用的标记：
<br>换行
<p></p>段落
<s></s>删除线
<b></b>粗体
<u></u>下划线
<i></i>斜体
<hn></hn> 1-6 字体大小
<sub></sub>下标
<sup></sup>上标
<hr>水平线
<a></a>超链接
。。。。。。标签还有很多，就不一一往上放了。
（四）颜色表示机制（三种）
- 英文颜色名：red、blue、yellow、gray、white、black、green、orange。。。。。
- 十六进制颜色编码(RGB)：#RRGGBB #FF0000红色 #000000
- 使用rgb函数： rgb(r,g,b) 0-255 rgb(255,0,0)
（五）几点要注意的事：
- 页面的主文件名不要使用中文和空格以及特殊字符 $ni好.html
- 讲究格式（缩进）
- HTML不区分大小写，标记名和属性名应该小写
- 属性的值使用双引号引起
- 单标记使用自封闭写法 <标记名 />
- 资源的名字不要使用中文和空格
- 资源基本上都要使用相对路径
- 关键图片必须有title和alt两个属性，两个属性值不一样
（六） PS的使用（处理图像）
- 截取屏幕： alt +prscrn
- tab 隐藏/显示面板
- alt + 鼠标滚轮 缩/放 视图
- ctrl + 放大 ctrl- 缩小
- 缩放框 直接输入数值
- Space + 鼠标左键 移动图片
- 修改单位：编辑-》首选参数-》单位与标尺-》像素
- 量大小：选择工具 –》信息面板
- 显示标尺：视图 –》标尺
- 取消选取：ctrl + D
（七）滚动 + 鼠标的感应
- 使用标记<marquee>滚动的内容</marquee>
- 修饰滚动：
- 方向：direction left|right|up|down
- 区域：width 宽 height 高
- 速度：scrollamount步长（像素），scrolldelay频率（毫秒）
- 感应：οnmοuseοver="this.stop()" οnmοuseοut="this.start()"
（八） 列表
- 无序列表
- <ul><li>…..</li><li>…..</li></ul>
- 通过type属性，选择项目符号
- 有序列表
- <ol><li>…..</li><li>…..</li></ol>
（九） 表格
- 数据管理、布局管理
- 标记：<table></table>、<tr></tr>、<td></td>
- 属性：
- border 边框
- cellpadding 填充 cellspacing间距
- width 宽 height 高
- colspan 合并列 rowspan合并行
（十） CSS样式表控制样式
- 新建CSS文件 .css
- 导入样式表文件
- <link href="styles/xxxx.css" rel="stylesheet"type="text/css" />
- 规则：
- 选择器{属性：值； 属性：值; …..}
- 选择器分类
- 标记选择器：HTML标记
- ID选择器：id=”” #id
- 类选择器：class=”” .类名
（十一） 表单
- 作用在于获取用户的信息
- 使用<form></form>表单
- 属性：
- name 名字
- action 提交对象
- method 提交方式 get|post
- 表单元素
- <input name=”名字” type=”类型” value=”值” />
- 类型：
- text 文本框
- password 密码框
- radio 单选按钮 name相同才能互斥，checked默认选中
- checkbox 复选框
- file 文件域
- submit 提交按钮 value按钮文本
- reset 重置按钮
- button 空白按钮
- <select>
- 下拉菜单
- <select name=”名字”>
- <option value=”值”>文本</option>
…….
</select>
- <textaera name=”名字” rows=”行数” cols=”列数”></textarea>
（十二） 表格布局
- 新建：30原则【行、列、宽】
- 属性：ID、对齐
- 留白：margin外留白、padding内留白
- 容器和内容
- <div></div> 块标记
- <span></span> 行级标记
（十四） 框架
- 浏览器窗口的分割技术
- 框架集：特殊页面，负责分割浏览器<frameset></frameset>
- 分割：按行(rows=”,”)，按列分(cols=””)
- 子窗口：<framesrc=”目标” />
- noresize 不允许改变子窗口大小
- scrolling auto no yes
- <frameset border=”0”> 无边框
- 框架集的嵌套
- 超链接的目标窗口
- target属性
- 目标框架名字
- _blank 新窗口
- _self 自己窗口
- _top 顶级窗口中打开
- 动态日期
- 新建的JS脚本文件
- 导入脚本文件
<script type="text/javascript"src="scripts/top.js"></script>
- JS语法
- 两个对象：window、document
- 获取页面元素的方法：document.getElementById(“xxxx”).innerHTML
- Date()日期时间对象
- .getYear() 获取年份
- .getMonth() 获取月份 0-11
- .getDate() 获取日 0-6 日-六
（十五）JS的应用
- JS的基本使用
- JavaScript：客户端程序段
- HTML如何使用JS脚本（三种）
- <标记事件名=”执行”>
- 使用<script>标记：
- <script>标记中定义函数
- <标记 事件名=”函数名()”>
- 使用js脚本文件
- 两个基本的对象
- window：浏览器窗口
- window.alert() 消息
- window.prompt() 输入
- window.confirm() 选择
- document：网页
- document.write() 输出
- document.bgColor = “” 背景色
- 变量： var定义
- Dom操作
- 如何获取页面上的元素
- l document.表单名.元素名 【表单元素】
- l document.getElementById(“元素ID”). 【所有元素】
- 表单验证
- 保证用户输入数据的合法性
- onsubmit验证
- 在.js文件中定义函数check_form()
- 在表单<form …. Onsubmit=”return check_form()”>
- Onblur验证
- 在.js中为每个验证元素定义函数
- 在元素中调用相应验证函数 <元素 οnblur=”xxxx()”>
- 图片透明
- 事件处理模式：当发生什么事件的时候就怎么样 <标记 事件名=”事件处理”>
- 样式表的透明滤镜：filter:alpha(opacity=50); 0-100
- JS控制CSS： xxx.style.xxx = xxx this.style.width=200 οnmοuseοver="this.filters.alpha.opacity=100"οnmοuseοut="this.filters.alpha.opacity=50"
- 函数传递对象
- 菜单的收放
- JS控制CSS
- 元素的隐藏和控制
- visibility hidden | visible
- display none | block
（十六）多媒体使用：
- 音频（mp3 。。。。。。。。）
- <bgsound src="audios/dabeizhou.mp3"volume="100" loop="-1" /> 背景音乐
- <embed src="audios/dabeizhou.mp3" ></embed> width 宽 height 高 hidden隐藏/显示面板 autostart是否自动播放 loop 循环
- 视频（avi，flv 。。。。。。）
- avi……(本地) <embed src="audios/shan.avi" width="500"height="400"></embed>
- flv。。。（在线）
设计 –》插入 -》 媒体 -》 FLV
- Flash动画（交互 as）
- .gif 动画 <img>
- .js …………
- .swf Flash动画
- Flash动画的透明效果
任务九：回到顶部
- DIV的定位
- 相对定位
- 其他块
- 绝对定位：document
- position:absolute;
- top
- left
- 固定定位：window
- position:fixed;
- top、left、bottom、right
- 显示和隐藏
- display： block none
- visibility： visible hidden
- JS的事件处理
- 三元素：当在生么（事件源）上发生什么（事件）的时候就做什么（事件处理）
- 模式一：<标记事件名=”事件处理函数()”>
- 模式二：事件源.事件名 = 事件处理函数;
- 函数递归调用
DIV+CSS布局模式
- DIV定位
- DIV的漂移
- 行级元素和块级元素
大体就整理到这了。
4461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
