前端知识总结（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基础知识总结

前端学习总结

前端基础知识总结