Web前端系统复习
缺省适配器设计模式:父类不实现该方法,让子类去实现(抽象方法)
模板方法设计模式:定义一个操作中的方法骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个方法的结构即可重定义该算法的某些特定步骤。如:在父类中有参方法调用无参方法,子类可以重写无参方法而不会影响到有参方法
(html)
1.基本规则
html书写规则:
1.双标签 你好宋伟 开始标记 结束标记 中间可以包裹内容或其他标签
2.单标签(自结束标签) charset="utf-8" 没有结束标记 通常要搭配属性使用
乱码:文本本身编码格式 跟读取的程序编码格式不统一
统一编码格式
html解析文本格式
1.回车换行 需要使用html中特殊的方式(使用br标签)
2.空格需要使用html特殊的格式(转义符) &xxx;
3.编写文本时 注意不要跟html标签格式产生冲突
2.常用标签
2.1.标题标签
加粗 改字号 换行(自己占满一行) 上下边距
<h1>测试标题</h1>
<h2 id="myaim">测试标题</h2>
<h3>测试标题</h3>
<h4>测试标题</h4>
<h5>测试标题</h5>
<h6>测试标题</h6>
普通文本
<p>这是一个段落</p>
2.2.转义标签
源代码 | 显示结果 | 描述 |
---|---|---|
<; | < | |
>; | > | |
&; | & | |
"; | " | |
®; | 注册商标 | |
©; | 版权符号 | |
&trade; | tm符号 | |
&ensp; | 半个空白位 | |
&emsp; | 一个空白位 | |
 ; | b不断行的空白 |
2.3.列表标签
定义列表
<dl>
<dt>标题1</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
<dt>标题2</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
</dl>
有序列表
<ol type="a">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
无序列表
<ul type="square">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
2.4.文本标签
<u>测试</u><strong>文</strong><em>本</em>
2.5.超链接
<a href="1html基本规则.html">这是超链接</a>
图片超链接
<a href="#">
<img src="https://www.baidu.com/img/bd_logo1.png" width="50px" height="50px" alt="美女图片" />
</a>
2.5.1.锚点
使用id与name声明锚点的区别
在老版本浏览器中最初都是使用name作为锚点位置的声明方式。
网页中name属性的取值不唯一,因此造成锚点定位不准,所以后期浏览器都支持使用id作为锚点声明位置。
Html5规范中已经声明取消name的锚点声明方式,建议使用id。
超链接中经常嵌套图片标签
<a href="#jump">点我看看</a>
---<p id="jump">我是该区域的相应内容</p>
---<p name="jump">我是该区域的相应内容</p>
2.6图片
Src 图片路径
Width 图片宽度
Height 图片高度
Alt 图片说明(当图片失效时显示)
1.src与href的区别:实际效果类似 内部处理方式不同 主要区别如下
2.src( source )的值是外部资源的访问路径,在请求src资源时会将其指向的资源下载并应用到当前文档中,此时外部资源作为当前文档的一部分(引入),一般用作非文本引入方式。
3.href 表示超文本引用(hypertext reference),在使用href请求外部资源时,会下载外部资源,同时当前网页读取外部资源的内容(引用)。一般用作文本引入方式
注意:Link、a标签使用href,其余使用src
<img src="coder.jpg" width="100px" height="100px" alt="图片"/>
2.7表格
常见标签
Table 表格
Tr 行
Td 单元格(列)
Th 列头
Thead 表区域(头)
Tbody 表区域(体)
Tfoot 表区域(脚)
Caption 表名
Rowspan 跨行
Cellspan 跨列
2.8.表单
Input标签
<input type=”xxxx”/> 常用表单元素
type的属性值:
Text 文本框
Password 密码框
Radio 单选按钮
Checkbox 多选按钮
File 文件框
Color 颜色框
Date 日期框
Button 空白按钮
Submit 提交按钮
Reset 重置按钮
Select标签 下拉菜单
<select>
<option>选项1</option>
<option>选项1</option>
</select>
Textarea标签 多行文本框
<textarea></textarea>
Form表单(用户填写的数据需要通过表单标签提交)
<form action=“http://www.sohu.com” method=“post”> </form>
Action属性 代表提交的地址
Method属性 代表提交的方式get post
2.8.get和post
GET | POST | |
---|---|---|
后退按钮/刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能缓存 |
编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 |
对数据长度的限制 | 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 | 无限制。 |
对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ! | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
2.9.Frameset frame
通过frameset 可以把页面拆分成多份
通过frame在每一份引入一个单独的页面
<FRAMESET rows="20%,*" frameborder="0"> //设置成无边框
<FRAME src="top.html" name="topframe" scrolling="no" noresize="noresize"> //scrolling="no" 不显示滚动条
<FRAMESET cols="20%,*">
<FRAME src="left.html" noresize="noresize" scrolling="no" name="leftframe" > //noresize="noresize"禁止调整框架大小
<FRAME src="right.html" name="rightframe"> // name="rightframe"框架名称,便于超文本链接锚标签
</FRAMESET>
可以通过超链接的target属性 指定到跳转哪个frame
<frame src="xxxx" name="窗口名">
<a href="xxx" target="窗口名">
(css)
1.css引入方式
1.通过style标签 编写css代码 调试代码时使用
2.通过style属性 不推荐使用(调试较麻烦)(优先级高)
3.通过link标签引入css文件 最终格式 使页面整洁
2.css常用选择器
.元素选择器 元素名(标签名)
2.class选择器 .class值 使用较灵活
class属性允许多个值
3.id选择器 #id值 尽量不用
4.并集选择器 选择器,选择器
5.交集选择器 (元素)选择器选择器
6.后代选择器 选择器 选择器 可以跨代
7.子代选择器 选择器>选择器 不可以跨带
8.属性选择器 [属性] [属性="属性值"] 一般要搭配交集选择器使用
9.全局选择器 *
2.1.伪类选择器
:active 点击动作
:hover 鼠标悬停
a:hover{
color: greenyellow;
}
a:active{
color: lightblue;
}
div{
border: 1px solid black;
height: 100px;
width: 100px;
}
div:hover{
background-color: lightseagreen;
cursor: pointer;
}
div:active{
background-color: lightpink;
}
<a href="###">超链接</a>
3.常用属性
html元素中 有几个通用属性使用
id 在页面中尽量不要重复
name 表单元素的提交
class 跟样式配合使用 值部分允许多个值
style 直接编辑样式属性 尽量不用
color 文字颜色
font-size 文字大小
font-family 字体类型
text-align 文本对齐方式
line-hight 行高
text-decoration 文本修饰(下划线等)
Background 背景图片
background-repeat 背景图片重复方式
background-color 背景颜色
Widht 宽
Height 高
List-style 列表标签的列表样式
3.1.元素排布规则相关属性display
默认文档流
block 块状元素 从上到下
inline行内元素从左到右 不可以设置宽高 大小由内容大小决定
inline-block行内块状元素 从左到右 可以设置宽高
none不显示
3.2盒子相关属性
border 边框
margin 外边距
padding 内部填充
margin: 10px;上下左右
margin: 10px 20px;上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin: 10px auto; 做块左右居中
margin-left: 100px; 四边可以单独设置padding 填充 用法和margin相似
3.2.1盒子嵌套的问题
当盒子模型嵌套使用时 会遇到超过边界的问题(内容大小 大于父元素的大小)
可以使用overflow属性处理 隐藏超过的内容
改变在父元素中的排列属性 可以使用float浮动属性 让元素水平排列
通过div加浮动 可以使用css制作类似frameset的页面布局
overflow例:
.mainD{
border: 1px solid black;
width: 700px;
height: 500px;
overflow: hidden;/*处理内部超过边界*/
}
3.3.position定位
relative 相对定位 元素本身位置保留(不脱离文档流) 根据元素本身的位置进行偏移
absolute 绝对定位 元素本身位置不保留(脱离文档流) 根据页面位置进行偏移 不推荐使用
fixed 固定定位 元素本身位置不保留(脱离文档流)根据浏览器主体部分进行偏移 并固定在主偏移位置上(小广告)
z-index 层叠顺序 需要使用在有定位属性的元素上,值大的覆盖值小的
(javascript)
1.js引入方式
Script标签中编写
通过script标签引入(当前标签无法再编辑js代码)
在页面中直接编写javascript
例:onclick="javascript:alert(1)" 尽量不用
2.变量
变量声明规则与java基本一致
var num = 10 ;
Js中变量类型
Number 数字类型
String 字符串类型
Boolean 布尔类型
Undefined 未定义或未初始化类型
Null 表示空对象 一般作为对象类型的初始值
Object 复合类型 包含js中的各种对象
类型装换函数
parseInt():字符串转换为整数(parseInt(string, radix))
parseFloat():字符串转换为浮点数
toString():返回字符串
注意parseInt parseFloat对字符串的转换
运算符
inFixed(取小数位数)
3.函数
parseInt 函数可解析一个字符串,并返回一个整数 parseInt(string, radix)
parseFloat 函数可解析一个字符串,并返回一个浮点数。 parseFloat(string)
IsNaN 函数用于检查其参数是否是非数字值。 isNaN(value)
eval 函数可计算某个字符串,并执行其中的的 JavaScript 代码。 eval(string)
4.js事件
Js会自动对行为进行监听,当触发某些行为时,可以调用自定义函数来完成用户交互。
事件通常与函数配合使用,当事件发生时去调用函数
鼠标点击 onclick
鼠标悬浮于页面的某个热点之上 onmouseover
在表单中选取输入框 onfocus
内容改变 onchange
页面或图像载入 onload
键盘按键 onkeyup
表单提交 onsubmit
5.history对象
常用方法
back():加载上一个浏览的文档 用法:history.back()
forward():加载下一个浏览过的文档 同上
go(n):n为整数,跳转第n个浏览过的文档 同上
n==0 则刷新当前页面
n>0 则向前跳转到第n个文档
n<0 则向后跳转到第n个文档
6.Location对象
常用属性与方法
Href属性 与浏览器地址栏直接输入地址效果相同
Reload()方法 与浏览器刷新按钮效果相同
location.href="http://www.baidu.com/";
location.reload();
7.Document对象
常用属性与方法
Title 可以设置文档的title
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByTagName() 返回带有指定名称的对象集合
getElementsByName() 返回带有指定名称的对象集合
选取元素的方法也可以通过元素调getElementById(xxx).getElementsByTagName(xxx),当选取元素有不需要的元素时 可以通过属性再次进行筛选
document.title 页面标题
document.getElementById("id名") //通过id获取元素
document.getElementsByTagName("div") //通过标签名获取元素集合
document.getElementsByName("honby") //通过name属性获取元素集合
document.getElementById("aimdiv").getElementsByTagName("input") //在目标父元素内部获取元素
8.Window对象常用方法
8.1.Open()
打开新窗口
newWin= window.open("弹出窗口的url", "窗口名称", "窗口特征")
属性名称 | 说明 |
---|---|
height/width | 窗口文档显示的高度与宽度(px) |
left/top | 窗口的X,Y坐标(px) |
toolbar=yes|no|1|0 | 显示浏览器的工具栏,默认yes |
scrollbars=yes|no|1|0 | 是否显示滚动条,默认yes |
location=yes|no|1|0 | 是否显示地址字段,默认yes |
status=yes|no|1|0 | 是否添加状态栏,默认yes |
menubar=yes|no|1|0 | 是否显示菜单栏,默认yes |
reszable=yes|no|1|0 | 窗口是否可调节尺寸,默认yes |
titlebar=yes|no|1|0 | 是否显示标题栏,默认yes |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器,默认no |
8.2.close()
关闭窗口
newWin.close() 关闭打开的窗口
8.3l.setInterval
setInterval(fun,time) 开启定时循环函数反复执行
8.4.clearInterval
clearInterval 停止循环
方式1:
var task = setInterval(“myfun()”,1000)
方式2:
var task = setInterval(myfun,1000)
方式3:
var task = setInterval(function(){xxxxxx},1000)
clearInterval(task) 停止定时函数
8.5.setTimeout
setTimeout(fun,time)开启定时函数 执行一次
8.6.clearTimeout
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
用法与setInterval相同
9.文档对象模型(dom树结构)
9.1.Dom动态操作相关方法
//动态操作元素
document.createElement 创建元素
var newli = document.createElement("li");
var newinput = document.createElement("input");
或者 newinput.setAttribute("type","button");
//appendChild(newli) 追加子元素
newli.appendChild(newinput);
把新input加在新li里
//insertBefore(newli,目标元素) 追加子元素 在目标元素之前
document.getElementById("aimul").insertBefore(newli,document.getElementById("aimli"));
//cloneNode(bol) 复制节点 true 复制当前节点及子节点 false 只复制当前节点
//removeChild(ele) 删除指定节点
//parentNode:返回节点的父节点
//childNodes:返回子节点集合,childNodes[i]
//firstElementChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
//lastElementChild: 返回节点的最后一个子节点
//nextElementSibling:下一个节点
//previousElementSibling:上一个节点
9.2Dom操作表格相关方法
rows 行数组
cells 单元格数组
//查看数组原素console.log(document.getElementById("mytable").rows[1].cells[1].innerHTML);
insertRow(idx) 添加行
insertCell(idx) 新增单元格(列)
deleteRow(idx) 删除行
function addTBVal(){
var newrow = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
var newtd1 = newrow.insertCell(0);
var newtd2 = newrow.insertCell(1);
var newtd3 = newrow.insertCell(2);
//从文本框中读取数据写入table
newtd1.innerHTML=document.getElementById("nametext").value;
newtd2.innerHTML=document.getElementById("agetext").value;
newtd3.innerHTML=document.getElementById("addrtext").value;
}
//删除
function delTBVal(){
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
//操作html
function addTBVal2(){
document.getElementById("mytable").innerHTML+="<tr><td>"+123+"</td><td>452</td><td>水里2</td></tr>";
}
10.String
IndexOf 查找指定字符
subString 截取字符串
Substr 截取字符串
Split 分割
toUppercase 转大写
console.log(mystr.indexOf("de"));//查找成功返回条件的第一次出现的位置,失败返回-1
console.log(mystr.lastIndexOf("de"));
//if(mystr>0)//表示有查找的字符
console.log(mystr.substring(2,5));//起止位置
console.log(mystr.substr(2,5));//起始位置 截取几个
11.Math
Ceil 向上取整
Floor 向下取整
Round 四舍五入
Random 伪随机数 [0-1)
console.log(Math.floor(myunm));
console.log(Math.ceil(myunm));
console.log(Math.round(myunm));
//如果想要指定的随机数 扩倍数 加减
//比如获取 0-3 parseInt(Math.random()*4)
console.log(parseInt(Math.random()*4));//[0,10)
12.Date
用法与java用法一致
<script>
var mydate = new Date();
console.log(mydate);
//不能拿这个时间作为服务器时间的标准
var mydate2 = new Date("2022-2-2 2:2:2");
console.log(mydate2);
var mydate3 = new Date("2022/2/2 22:22:22");
console.log(mydate3);
var myyear = mydate.getFullYear();
var mymonth = mydate.getMonth()+1;
var mydayofMonth = mydate.getDate();
var myhour = mydate.getHours();
var mymin = mydate.getMinutes();
var mysec = mydate.getSeconds();
console.log(myyear+"年 "+mymonth+"月 "+mydayofMonth+"日 "+myhour+"时 "+mymin+"分 "+mysec+"秒")
//mydate.getTime() 是标准格林威治时间 与东8区有8小时时差
console.log(mydate.getTime());
</script>
13.Array数组对象
数组 不需要指定成员类型 数组大小可以随意扩充 使用上类似 ArrayList