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的漂移
- 行级元素和块级元素
大体就整理到这了。