Web复习
目录：
文本
列表
图像
链接
表格
框架
表单
CSS
DIV
JavaScript
JavaScript对象
- 万维网(World Wide Web),即WWW
- html5文本类型声明：
<!DOCTYPE html> - meta元素：
属性http-equiv：页面进行设置
属性name：针对搜索引擎进行设置 - 标题标签：
<h1>
文本
- 文本修饰标签：
- 行内标签：
<span></span>
属性：
style：设置行内样式
align：内容对齐方式 - 设置文本的字体样式：
<font></font>，通过face，size，color属性来设定文本字体，大小，颜色 - 字体加粗：
<b></b> - 斜体：
<i></i> - 删除线：
<s></s> - 下划线：
<u></u> - 内容以上标形式显示：
<sub></sub> - 内容以下标形式显示：
<sup></sup> - 内容加粗：
<strong></strong> - 内容比周围文本大一个字体尺寸：
<big></big> - 内容比周围文本小一个字体尺寸：
<small></small> - 文档结构元素：
- 段落标签：
<p></p>
提供块级格式，p与p之间会自动插入一个新的空白行 - 换行标签
<br /> - 水平线标签：
<hr />
列表
- 有序列表：
<ol type="1/A/a" start=?>
<li></li>
<li></li>
…………
</ol>
- 无序列表
<ul type="cicle/disc/square/none" >
<li></li>
<li></li>
…………
</ul>
- 定义列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
…………
</dl>
图像
- 图像标签：
<img src=" " >
属性：
alt ：图像文本描述，图像无法显示时描述
height：图像高度
width：图像宽度
align：图像对齐方式
border：图像边框宽度
链接
- 链接标签：
<a href=" " >链接内容(可文本可图片)</a>
target属性：
_blank:在新窗口打被链接的文档
_self:默认值，在相同框架中打开被链接的文档
_parent:在父框架中打开被链接的文档
_top:在整个窗口打开被链接的文档
frameName:在指定框架打开被链接的文档
表格
- 表格标签：
<table>
<tr></tr> <!--代表一行-->/
<td></td>
<td></td>
<tr></tr> <!--代表一行-->
<td></td>
<td></td>
…………
</table>
<th></th>:定义表格的头部信息，多用于表格的第一行或第一列，其内容通常粗体并水平居中显示
- 表格属性：
align：表格相对于周围元素的对齐方式
bgcolor：表格的背景颜色
border： 表格边框的宽度
cellpadding： 单元格与内容之间的距离
cellspacing：单元格之间的距离
height：表格高度
width：表格宽度
rules：表格线的显示方式：none，groups，rows，cols，all(默认值)
frame：设置表格外部边框的显示方式 - 单元格属性：
align：单元格内容的水平对齐方式
valign：单元格内容的垂直对齐方式
rowspan：单元格跨越的行数
colspan：单元格跨越的列数
scope：将表头数据与单元数据相关联的方法
width：单元格的宽度
height：单元格的高度
bgcolor：单元格背景颜色 - 行标签：
bordercolor：行内单元格边框颜色
bordercolordark：行内单元格左上边框颜色
bordercloorlight：行内单元格右下边框颜色 - 行分组：
<caption></caption>：定义表格标题，显示在正上方
<thead></thead>：定义表头(只能出现一次)
<tbody></tbody>：定义表格主体
<tfoot></tfoot>：定义表尾(只能出现一次) - 列分组：
属性：
span：列组横跨的列数，默认值为1
width：列组合的宽度
框架
<frameset> <!--框架集 -->
<frame></frame> <!--框架 -->
<frame></frame>
<frame></frame>
…………
</frameset>
- 框架集：
<frameset></frameset>
属性：
rows：设置包含框架的行数，以及对应高度
cols：设置包含框架的列数，以及对应宽度
frameborder：设置边框是否显示，取值0/1，yes/no
bordercolor：边框颜色
framespacing：框架之间的空白距离 - 框架：
<frame></frame>
属性：
name：框架名称，设置超链接时用作框架的标记
frameborder：设置框架的边框是否显示
marginheight：内容与上下边框的高度，默认为1
marginwidth：内容与左右边框的高度，默认为1
scrolling：设置框架是否显示滚动条
noresize：设置框架不能调整大小 - 内联框架：
<iframe></iframe>
表单
- 表单标签：
<form></form>
属性：
action：提交表单时，说明向何处发送表单数据
method：向服务器端发送数据所采用的方式，取值可以为get和post(安全性高) - 表单域(表单下的一些标签 )
文本框标签：<input />
属性：
type：说明控件的类型:值可为text(文本框)，password(密码框)，radio(单选按钮)，checkbox(多选框)，file(文件选择框)，button(按钮)，
submit(提交)，reset(重置)，button(普通)，image(图片按钮)
多行文本框：<textarea></textarea>
列表选择框：
<select>
<option disabled(不可选)></option>
<option selected="selected"(默认值)></option>
…………
</select>
表单分组：
<fieldset></fieldset> 或<legend></legend>
CSS
- 内嵌样式：在标签内用style
- 内部样式： 1:
<style type="text/css"> …………</style>放在头部 - 外部样式：
<link type="text/css" rel="stylesheet" href="css文件名称.css">放在头部
优先级：内嵌>内部>外部>浏览器默认 - 选择器：
通用选择器：*{}
标签选择器：p{}
ID选择器：#ID名{}
类选择器：.类名{}
多元素选择器：selector1，selector2，……{} 例：p，div{}
后代选择器：selector1 selector2 ……{} 例：div p{}
子选择器：selector1>selector2{} 例：div>p{}
相邻兄弟选择器：selector1+selector2{}
普通兄弟选择器：selector1~selector2{} - 文本属性：
文本缩进：text-indent
水平对齐：text-align
垂直对齐：vertical-align
字间距：word-space
文本修饰：text-decoration - 字体属性：
颜色：color
字体类型：font-family
字体风格：font-style
字体加粗：font-weight
字体大小：font-size
行间距：line-height - cursor属性：
auto：光标形状取决于悬停对象
crosshairs：光标呈现十字形
pointer：光标呈现手的形状
wait：光标呈现等待形状
help：光标呈现？形状 - display属性：
赋值：
none(将元素设为隐藏状态)
block(将元素显示为块级元素) - position属性：
relative：相对定位，相对元素正常位置进行定位
absolute：绝地定位，相对于浏览器窗口进行定位
fixed：固定位置 - float属性：
left：左边界
right：右边界
none：不浮动(默认值) - clear属性：
清除浮动 - 伪类(向元素的状态添加样式)：
:active：向被激活的元素添加样式
:focus：向拥有键盘输入1焦点的元素添加样式
:hover：鼠标悬停时添加样式
:link：向未被访问的链接添加样式
:visited：向已被访问的链接添加样式
DIV
- div标签：
<div></div>
属性： - 边框宽度：border-width
- 边框长度：border-height
- 边框颜色：border-color
- 边框样式：border-style
- 边框阴影：box-shadow
无边框：none
实线：solid
虚线：dashed
隐藏边框：hidden - 圆角边框
水平半径与垂直半径相等:
一个值：border-radius：10px； 四个角均相同
两个值：border-radius：10px，20px； 上左与下右相同10px，上右与下左相同20px
三个值：border-radius：10px，20px，30px； 上左为10px，上右与下左20px，下右为30px
四个值：border-radius：10px，20px，30px，40px； 顺序为左上角开始顺时针方向赋值
水平半径与垂直半径不等:
样式：水平值/垂直值
一个值：border-radius：10px / 20px；水平值，垂直值
两个值：10px，20px / 30px，40px；上左下右水平值为10px，上右下左水平值为20px；上左下右垂直值为30px，上右下左垂直值为40px
(其他三水平两垂直或两水平四垂直什么的推一下就好) - 内边距：padding
- 外边距：margin
JavaScript
- 行内JavaScript
- 内部JavaScript：
<script></script>可放在任意位置且多次使用 - 外部JavaScript：
<link rel="stylesheet" type="text/css" href="文件名.css" /> - 基本语法：
标识符：由数字，字母，下划线，美元符号组成，不能与关键字相同且只能以字母或下划线开头
变量定义：定义变量时不需要指明变量类型，用关键字var进行声明；在JavaScript中变量也可以不用定义直接使用，类型由赋值决定
循环：for；for in；while；do while - 函数：
字符串转换为整型：parseInt()
参数是否为一个数字：isNaN()
计算表达式的结果：eval()
显示一个带OK的提醒框：alert()
显示一个确认对话框：confirm()
显示一个输入对话框，提示等待用户输入：prompt() - 自定义函数
命名规则：function name(参数){函数体}
JavaScript对象
- 数组对象：
创建方式：
1.var array=new Array()
arry[0]=……
arry[1]=……
2.var array=new Array(……)
3.var array=[………]
属性：
construct：返回对象的类型(数组/字符串/……)
length：数组长度
方法：
concat()：连接多个数组
join()：数组元素放入一个字符串
reverse()：颠倒所有元素的顺序
slice()：从数组中返回指定的元素
splice()：向数组中删除一或多个元素并返回被删除的元素
sort()：对数组元素进行排序
shirt()：删除并返回数组第一个元素
pop()：删除并返回数组最后一个元素 - 字符串对象：
创建方式：
var string=……(创建单个字符串)
var string=new String(……)
var string=String(……)
方法：
indexOf()：检索字串在字符串中出现的首位置
lastIndexOf()：从后向前检索，检索字串在字符串中出现的首位置
slice()：从字符串抽取一部分内容
split()：把一个字符串分割成一个字符串数组 - 日期对象：
创建方式：
new Date()
new Date(yyyy，MM，dd)
new Date(“month dd，yyyy”)
方法：
getTime()：返回1970.1.1至今的毫秒数
setFullYear()：设置年份 - 数学对象：
方法：
abs(x)：返回绝对值
ceil(x)：数字向上取整
floor(x)：数字向下取整
round(x)：数字进行四舍五入
max(x,y)：求最大值
min(x,y)：求最小值
sqrt(x)：返回数字平方根
random()：返回0~1之间的随机数 - 正则表达式对象(字符串匹配)
- 创建对象：
var regexp=/pattern/attributes
var regexp=new RegExp(pattern,attributes)
attributes取值：
i：匹配时忽略大小写
g：全局匹配
m：多行匹配
方法：
compile()：编译正则表达式
exec()：检索匹配情况，成功时返回匹配内容及所在位置
test()：检索匹配情况，成功为true，失败为false - 自定义对象：
原始方式：
var object=new Object()
构造函数方式
原型方式
混合方式
JSON方式：
var object={
属性名：……
属性名：……
…………
}
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
