前端知识总结(HTML CSS Javascript)
Posted 夏芷雨涵梦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端知识总结(HTML CSS Javascript)相关的知识,希望对你有一定的参考价值。
html(超文本标记语言)
列表标签
无序列表ul:属性type:circle(空心圆) disc(默认,实心圆) square(黑色方块)
有序列表ol:属性type:1、A、a、I、i(数字、字母、罗马数字)
定义列表dl:
dt:定义标题
dd:定义描述
a标签的作用:
- 超级链接
- 锚链接(a href="#xxx",xxx代表的是锚点的位置,可以使用a标签声明,用name来坐定名称,或者使用其他的标签来定义,用id声明)
a链接中target属性的使用:
- _self 在自身页面打开
- _blank 在新窗口打开
- _parent 在父窗口打开
- _top 在顶部窗口打开
- _search相当于给窗口起一个名字,如果打开过不再打开新的页面(search可以换为任何自己起的名字)
target的属性值:top和parent
target=_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象self参数一样。
target=_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架 不写的话就是表示默认值,默认值一般跟浏览器有关。
普通表格
<tr>表示为行
<td>表示为列(单元格)
<th>表示表头
表格的属性
border:边框像素为单位
width:宽度
height:高度
行的属性:
align:控制表格的对齐方式:center right left
valign:控制表格的垂直对齐(都是对表格的内容的控制)
跨列和跨行:
colspan=""占几列
rowspan=""占几行
<b> 定义粗体
<big>定义大号字体
<em>着重文字(斜体)
<i>斜体字
<sub>下标字,数学上的log下标
<sup>上标字,数学上的平方
<del>删除字,在文字上打上一条横线
表单标签
form标签
常用属性: action 表示动作,值为服务器端的地址,把表单的数据提交到该地址上进行处理
method:请求方式:get和post
enctype:表示表单提交的类型
默认值:application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain普通文本
get和set的区别:
get:数据储存在地址栏中,请求参数都在地址后拼接,不安全、效率高,大小有限制,一般用于查询数据
post:地址没有数据,请求参数单独处理,安全可靠、效率低,大小理论上没有限制,一般用于插入删除操作
input标签
type:可能要取得值:
text 文本框 输入内容
password 密码,密文或者掩码
radio 单选按钮,name必须要一致;value:提交给服务器的数据,表示同一组只能选中一个
checkbox 表示多选,name必须一致,返回值是数组,可以选多个
file 表示选择上传文件
以上具有输入性质的必须要有name属性,初始开始写value表示要有默认值(以后获取输入框的内容要根据name来获取)
一下按钮不具有输入性质,不需要name属性,但是按钮上的文字提示使用的是value属性
submit 提交
reset 重置
image 图片提交按钮
button 普通按钮
hidden 表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不想清楚地显示在界面上)
email 表示邮箱格式的数据
name属性:表单元素的名字,只有name属性才能提交给服务器
value属性:提交给服务器的数据
placeholder:提示信息
高级属性:
disabled:禁用
readonly:只读
select元素(下拉列表)
<select name="">
<option value=""></option>
<option value=""></option>
</select>
selected表示选中该项,默认是选择第一项
textarea元素(文本区)
<textarea cols="100" rows="5">
框架标签
frameset框架结构标签,把body删除掉,使用frameset代替body
基本的注意事项
1.不能将<body></body>标签与<framesete></frameset>标签同时使用
2.假如一个框架有可见边框,用户可以拖动边框来改变他的大小。可以使用<frame>标签中加入:noresize="noresize"
3.freamset 的属性freamborder="1|0|yes|no"表示是否有边框,border="1"表示边框的粗细 bordercolor表示边框的颜色
其他标签
<!--该网页的关键字-->
<meta name="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta name="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<!-- href:引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src:js的文件地址-->
<script type="text/javascript" src=""></script>
特殊符号
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
CSS(层叠样式表)
语法规则:选择器属性:值;属性:值
使用方式:
-
内联方式
把css样式嵌入到HTML标签中 <div style="color:blue;font-size:50px">This is my HTML page. </div>
-
内部样式
使用style标签引用css <style type=“text/css”> //告诉浏览器使用css解析器去解析 div color:red; font-size:50px </style> 好处是:能够控制页面中的多个元素样式,缺点:只能一个页面使用
-
外部样式
将css样式抽成一个单独文件,谁用谁就引用,好处:多个页面可以同时使用 方式1:链接式: <link rel="stylesheet" type="text/css" href=“div.css"></link> rel:代表当前页面与href所指定文档的关系 type:文件类型,告诉浏览器使用css解析器去解析 href:css文件地址 方式2:导入式: <style type="text/css"> @import url("div.css") </style> 备注:link和@import区别: link所有浏览器都支持,@import某些版本低的IE不支持 @import是等待HTML加载完才加载,link解析到这个语句,就加载 @import不支持js动态修改
优先级:内联样式>内部样式>外部样式,就近原则
CSS选择器
基本选择器:
- 标签选择器 span
- id选择器 #xx
- class选择器 .xx
- 优先级从高到低:id>class>标签
属性选择器:
格式为:html标签[属性='属性值']css属性:css属性值;
或者html标签[属性]css属性:css属性值;具体示例:
input[type='text']
background-color: pink
font[size]
color: green
伪元素选择器:主要是针对a标签
a:link 静止状态
a:hover 悬浮状态
a:active 触发状态
a:visited 完成状态
层级选择器:
空格 表示后代选择器
大于号 子代选择器
加号 相邻的兄弟
~ 通用兄弟
其他选择器:
全局选择器 *
群组选择器 h1,h2
CSS属性
文本和文字属性
文字属性:font:italic bold 30px “幼圆”;/style weight size family swsf/
文本属性:text-indent:缩进,单位是em或者百分比
text-decoration:文字修饰
word-spacing:字符之间的间隔
letter-spacing:字母或单词之间的间隔
line-height:设置行高
背景属性:background-repeat: repeat-y:垂直方向平铺、repeat-x:水平方向平铺、repeat:水平垂直方向平铺、no-repeat:任何方向都不平铺
列表属性:
list-style-type:decimal;改变列表的标志类型
list-style-image: url(“images/dog.gif”);用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
简写
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;
尺寸显示轮廓属性:
display:none 不显示 block 块级显示 inline:行级显示 inline-block:行级块
block块元素 有宽度和高度
inline 是默认的行元素,没有高度和宽度
inline-block行块标签,既有行又有块
overflow:溢出,当内容超出了盒子的大小,如何处理
H5之后添加了弹性盒子,用于设置垂直对齐
display:flex
align-items:center;垂直居中
justify-content:center;水平居中
clear属性:规定元素的哪一侧不允许其他浮动元素
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
定位属性
position:static|relative|absolute|fixed
静态定位(默认定位方式)static
相对定位(relative)相对于原来位置偏移某个距离。元素仍保持其未定位前的形状,他原本所占的空间仍保留
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭,就好像原来不存在一样。元素定位后会生成一个块级框,而不论原来它在正常流中生成何种类型的框
固定定位(fixed)元素框的表现类似于将position设置为absolute,不过其位置相对于视窗本身。
盒子模型
border margin padding
CSS3扩展属性
border-radius 圆角属性 示例:border-radius:20px;
box-shadow 向方框添加阴影 示例:box-shadow:10px 10px 5px #333333;
background-size属性设置背景图片的大小
background-url(img/1.png);
background-size:200px 300px;
background-repeat:no-repeat;
background-image 为指定元素使用多个背景图像,多个URL用逗号隔开
text-shadow 文本阴影
javaScript
完整的javaScript实现包含了三个部分:ECMAScript,文档对象模型(DOM Document Object Model),浏览器对象模型(BOM Brower Object Model)
数据类型:
-
基本类型(原始类型)undefined null number string boolean
-
引用类型(对象类型)Object(Person) Array String Number Boolean RegExp
数组的声明:var a=[1,1,1,2];
三种使用方式:
- 在<script>标签中,可以放在网页中的任意位置
- 使用外部的js文件,把js代码单独放在文件中,通过引用来使用<script type="" src=""></script>>
- 放在标签中的事件中,常见事件onclick()
关系运算符:
==:比较的是两个值,会自动转换类型
===:比较的是引用,首先比较类型,如果类型不同,直接返回false
if语句:
if(变量):如果变量值是undefined,null表示false,其他是true,如果变量没有定义会出现异常。
zhangsan.name:是给zhangsan添加name的属性,没有赋值
增强for的写法:
for(var i in arr) i指的是下标
function中的参数不用写数据类型,返回值也不用写,如果有返回值就直接return
自行执行的匿名函数:
(function() document.write(""))();
闭包:
闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。
闭包三个条件:
1 闭包是一个内部函数
2 闭包能够读取其他(外部)函数的局部变量
3 闭包和局部变量在同一个作用域。
使用形式:1 闭包作为函数的返回值;2闭包作为函数的参数。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包 closure</title>
<script type="text/javascript">
/*定义一个函数*/
function a()
var a=10;
document.write(a);
document.write("<br/>");
// a();
// a();
// a();
function b()
var num=10;//没有释放
/*函数包含函数*/
function c()
num++;
document.write(num);
document.write("<br />")
return c;
var f=b();//f是一个函数:闭包
f();
f();
f();
</script>
</head>
<body>
</body>
</body>
</html>
闭包的好处:
- 使局部变量常驻内存
- 避免污染全局变量
- 提高封装性保护局部变量
系统函数:
- 提示框alert(),,没有返回值,如果接受是undefined
- 确认框confirm(),返回值是boolean型,点击确定返回true,取消返回false
- 输入框prompt("","")第一个参数是提示信息,第二个参数是用户输入的默认值,点击确定返回用户的输入值,否则返回null.
其他系统函数:
- parseInt():将字符串转换为整形
- parseFloat():字符串转换为小数
- isNaN():判断数字是不是不是一个数字,不是一个数字返回true
事件:
事件 | 描述 |
---|---|
onchange | HTML 元素内容改变(离开光标触发) |
onclick | 用户点击 HTML 元素 |
onmouseover | 光标移动到HTML元素 |
onmouseout | 光标离开HTML元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
字符串、正则表达式:
var str="hello,我爱java";//原始类型
var str2=new String("hello");//引用类型对象类型
var str3=String("hello");//原始类型
RegExp对象方法:
exec:检索字符串中指定的值,返回找到的值,并确定其位置
test:检索字符串中的指定的值,返回true或者false
支持正则表达式的String对象的方法:
match:找到一个或者多个正则表达式的匹配
replace:替换与正则表达式匹配的子串
split:把字符串分割为字符串数组
正则表达式的示例:
var patt1=new RegExp("^1[3589]\\\\d9$");
document.write(patt1.test("13688889999"));//true
DOM
获取HTML元素:
- 通过id来获取 document.getElementById("");
- 通过标签名获取 document.getElementsByTagName("")
- 通过类名获取 document.getElementsByClassName("")
修改HTML元素:
- 修改内容:innerHTML=""(这个可以实现标签的效果显示) innerText(不能解析标签效果) 示例:document.getElementById(“p1”).innerHTML=“abcd”;
- 修改属性:attribute=新属性值 示例:document.getElementById(“image”).src=“2.jpg”;
- 修改css样式:style.property=新样式 示例:document.getElementById(“p2”).style.color=“blue”;
元素操作:
-
创建新元素 document.creatElement() 在已知的元素后面添加新的元素appendChild();
-
删除已有的元素 parent…removeChild(child)
如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById(“p1”);
child.parentNode.removeChild(child);
DOM事件
DOM允许我们通过触发事件来执行代码,比如:元素被点击,页面加载完成,输入框被修改
示例:<h1 onclick="this.innerHTML='改变内容!'">点击文本!</h1>
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" </div>
<script>
function mOver(obj)
obj.innerHTML="Thank You"
function mOut(obj)
obj.innerHTML="Mouse Over Me"
</script>
EventListener addEventListener()方法
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素中,用户点击元素, 哪个元素的 “click” 事件先被触发呢?
在 *冒泡 *中,内部元素的事件会先被触发,然后再触发外部元素,即:
元素的点击事件先触发,然后会触发
元素的点击事件。在 *捕获 *中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
元素的点击事件先触发 ,然后再触发元素的点击事件。
addEventListener()的第三个参数默认值是false即冒泡传递,当值为true时,就是捕获传递
BOM
获取window尺寸(涵盖所有的浏览器)
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
window方法
- window.open()打开新的窗口
- window.close()关闭当前窗口
Screen
- 可用宽度:screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏
- 可用高度:screen.availHeight属性返回访问者的屏幕高度,以像素计,减去界面特性,比如窗口任务栏
Location
window.location对象用于获取当前页面的地址(URL),并把浏览器重新定向到新的页面
window.location对于在编写时可不使用window这个前缀。
- location.href 属性返回当前页面的URL
- location.hostname 返回web主机的域名
- location.pathname返回当前页面的路径和文件夹
- location.port返回web主机的端口
- location.protocal返回使用的web协议
history
window.history对象包含浏览器的历史
window.history对象在编写时可不使用window这个前缀
- history.back()–与在浏览器中点击后退按钮功能相同
- history.forward()–与在浏览器中点击前进按钮功能相同
- history.go(number|url)–加载历史列表中的某个具体页面。URL 参数使用的是要访问的 URL,或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
JavaScript计时
Date对象(获取年 月 日 时 分 秒)
计时函数
setInterval()周期执行函数,间隔指定的毫秒数不停的执行指定的代码
cleanInterval()方法用于停止setInterval()方法执行的函数代码
setTimeout()延迟执行函数,只能执行一次
clearTimeout()方法用于停止执行setTimeout()方法的函数代码
动态显示时间:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="btn1" type="button" value="暂停" onclick="stoptime()" />
<input id="btn2" type="button" value="开始" onclick="starttime()" disabled="disabled" /><br />
<div id="clock">
<script type="text/javascript">
var clock = document.getElementById("clock");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function showtime()
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
clock.innerHTML = t = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
var tid = setInterval("showtime()", 1000);
function stoptime()
clearInterval(tid);
btn2.disabled = false;
btn1.disabled = true;
function starttime()
tid = setInterval("showtime()", 1000);
btn1.disabled = false;
btn2.disabled = true;
</script>
</div>
</body>
</html>
以上是关于前端知识总结(HTML CSS Javascript)的主要内容,如果未能解决你的问题,请参考以下文章