web基础知识总结
2014-03-11 17:09
344 查看
决定要开始写博客，先把之前的东西总结一下好了。以前培训的时候学到的一些基础知识，做下笔记备用。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频率（毫秒）
感应：onmouseover="this.stop()" onmouseout="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中为每个验证元素定义函数
在元素中调用相应验证函数 <元素 onblur=”xxxx()”>
- 图片透明
事件处理模式：当发生什么事件的时候就怎么样 <标记 事件名=”事件处理”>
样式表的透明滤镜：filter:alpha(opacity=50); 0-100
JS控制CSS： xxx.style.xxx = xxx this.style.width=200 onmouseover="this.filters.alpha.opacity=100"onmouseout="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的漂移
- 行级元素和块级元素
大体就整理到这了。
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频率（毫秒）
感应：onmouseover="this.stop()" onmouseout="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中为每个验证元素定义函数
在元素中调用相应验证函数 <元素 onblur=”xxxx()”>
- 图片透明
事件处理模式：当发生什么事件的时候就怎么样 <标记 事件名=”事件处理”>
样式表的透明滤镜：filter:alpha(opacity=50); 0-100
JS控制CSS： xxx.style.xxx = xxx this.style.width=200 onmouseover="this.filters.alpha.opacity=100"onmouseout="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的漂移
- 行级元素和块级元素
大体就整理到这了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaWEB基础知识总结
- 【JavaWeb】基础知识总结03 Servlet
- [Java面试三]JavaWeb基础知识总结.
- [Java面试三]JavaWeb基础知识总结.
- web前端基础知识总结
- web前端基础知识总结
- 基础总结知识点-第一章:web技术的基础知识
- 【JavaWeb】基础知识总结04 JS基础
- Web前端开发基础知识--部分总结
- 【JavaWeb】基础知识总结01 准备知识
- 【WEB】JS面试题涉及基础知识总结（二）
- 【JavaWeb】基础知识总结Servlet
- 【WEB】JS面试题涉及基础知识总结(一)
- 【JavaWeb】基础知识总结02 JSP
- JavaWeb开发知识总结(一)-(oracle_基础)
- 3.JavaWeb基础知识总结
- 【JavaWeb】基础知识总结05 jQuery
- (20)WEB的相关知识以及JSP入门基础知识点总结
- 【JavaWeb】基础知识总结 JSP
- 网页编程基础第一章知识点总结——Web基础知识