前端知识总结(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标签的作用:
  1. 超级链接
  2. 锚链接(a href="#xxx",xxx代表的是锚点的位置,可以使用a标签声明,用name来坐定名称,或者使用其他的标签来定义,用id声明)

a链接中target属性的使用:

  1. _self 在自身页面打开
  2. _blank 在新窗口打开
  3. _parent 在父窗口打开
  4. _top 在顶部窗口打开
  5. _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>

特殊符号
		&lt; 小于号  
        &gt; 大于号
        &amp; 与字符
        &quot; 引号 
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格	

CSS(层叠样式表)

语法规则:选择器属性:值;属性:值
使用方式:
  1. 内联方式

    把css样式嵌入到HTML标签中
     <div style="color:blue;font-size:50px">This is my HTML page. </div>
    
    
  2. 内部样式

    使用style标签引用css
    <style type=“text/css”> //告诉浏览器使用css解析器去解析
           div color:red; font-size:50px
    </style>
    好处是:能够控制页面中的多个元素样式,缺点:只能一个页面使用
    
    
  3. 外部样式

    将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)

数据类型:

  1. 基本类型(原始类型)undefined null number string boolean

  2. 引用类型(对象类型)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
事件:
事件描述
onchangeHTML 元素内容改变(离开光标触发)
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元素:
  1. 修改内容:innerHTML=""(这个可以实现标签的效果显示) innerText(不能解析标签效果) 示例:document.getElementById(“p1”).innerHTML=“abcd”;
  2. 修改属性:attribute=新属性值 示例:document.getElementById(“image”).src=“2.jpg”;
  3. 修改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)的主要内容,如果未能解决你的问题,请参考以下文章

前端知识总结(HTML CSS Javascript)

前端css知识总结整理

前端知识点总结(HTML篇2)

HTML基础知识总结

前端学习总结

前端基础知识总结