前端面试之html的相关信息

.你是如何理解HTML语义的？

答：使用合适的标签标示内容。优点在于标签语义化有利于搜索引擎建立索引进行抓取，有助于构建良好的HTML结构，便于团队开发和维护。

2.meta viewport 是做什么用的，怎么写？

答：meta表示不能被HTML的其它元素（link，script,base, style, title）之一表示的任何元素信息。viewpoint让web开发者控制视口的尺寸及比例，移动设备的viewpoint指设备屏幕上用来展示网页的那一块区域，也就是浏览器上用来展示网页的那部分，可能比浏览器的可视区大，也可能比浏览器可视区域小，一般情况，比浏览器可视区域大。属性包括width、height、initial-scale、maximum-scale、minimum-scale,使用方式是

<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1">

3.canvas 元素是干什么的？

答： canvas是用来绘制图形的HTML元素。

4.html5新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

答：html5新特性：

语义特性: header footer
本地存储特性： localStorage, manifest
设备访问特性: Geolocation
连接特性: webSocket
网页多媒体特性: audio、video标签
三维、图形及特效：SVG，Canvas, css3D
性能、集成特性

解决兼容性的方法：

在IE8以下，通过document.createElement(新标签)，并设置css样式。document.createElement('header'), header {display: block};
条件注释的方式

<!--[if lt IE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]-->

HTML和HTML5

文档类型声明上：

html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

html5:

 <!doctype html>

结构语义上 html: 基本没有体现结构语义，一般为

 <div id="header"></div>

html5: 具有结构语义

 <header></header>

5.Doctype作用？标准模式与兼容模式各有什么区别?

答： Doctype是document type(文档类型)，告诉浏览器解析器采用哪种规范（html、xhtml）来解析页面，Doctype不存在或格式错误的情况下，采用兼容模式。

标准模式（严格模式）展示的支持最新标准的网页。兼容模式（松散模式或怪异模式）展示的是兼顾传统浏览器的网页，向后兼容老式浏览器。

具体区别：

6.用户访问页面到最终渲染的整个过程？

用户输入url,浏览器向服务器发送请求，获取html,然后进入HTML渲染机制。首先，根据HTML生成DOM树；其次，根据css和js重排页面 https://segmentfault.com/a/1190000009317496

7.你对页面进行性能优化的思路和思想是什么？

答：减少http请求; 减少DOM操作，避免不必要的重绘和重排;压缩文件体积；采用CDN；

tml+css基础一：html简介和发展史

HTML全称（hypertext markup language）译为超文本标记语言，其译文代表了HTML的含义，它和其他编程语言不同的是，HTML不是一门真正意义上编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。

1.2、HTML发展史

HTML创始人（蒂姆·伯纳斯-李）蒂姆·伯纳斯-李除了是HTML的创始人，还是w3c组织的主席。

1、HTML1.0 （1991年12月）

1991年万维网（www）在互联网上首次露面，也随之引起了巨大的轰动。

1989年，伯纳斯-李写了一份备忘录，提出建立一个基于互联网的超文本系统。同年和另外一个工程师一起进行联合资金申请，但是这个项目并没有通过。

1991年底的时候，伯纳斯-李公开了一份“HTML Tag”的文档，里面描述了组成HTML初始版本的18个元素

2、HTML2.0（1995年11月）

HTML 2.0是HTML语言的扩展。

与原始版本的HTML不同，HTML 2.0被创建为Web标准，规定了常见的网页结构

3、HTML3.2（1996年1月）

惨淡的"第一次浏览器大战时期（Netspace Vs IE）"，两大巨头不断推出重大举措试图控制整个领域。

网页开发者是这场战争中的焦点。商业战争就像军备竞赛，各家公司为了保持领先，招兵买马。各家都有各家的规则。

那时候，你不得不写两份不同的网页，一个用于网景的浏览器，另一个用于微软的浏览器

4、HTML4（1997年12月）

浏览器大战接近尾声，W3C（世界万维网联盟）成立，他们打算通过制定统一的HTML标准，使整个产业能有序的发展。

他们计划用两种语言分离出HTML的表达式（HTML 4.0）和结构（CSS），并且说服浏览器厂商接受这些标准

这次发布提供了规范的三种变体：

Strict，严格版本；

Transitional，过渡版本；

Frameset，iframe框架集；

HTML4.0 采纳了许多浏览器特定的元素类型及属性，但是同时也把 Netscape 的视觉化标记标记为过时的寻求淘汰; 赞成使用样式表; 同时在1998年4月对HTML4.0进行了微小的修订，没有增加版本号HTML5.0

5、HTML4.01（1999年12月）

像 HTML4.0 一样提供了三种变体，并且他的最终错误修订版在2001年的5月12日发布

6、XHTML 1.0（2000年1月）

各大浏览器厂商纷纷接受W3C标准的时候，新技术出现了。

HTML和另一种语言XML融合，XHTML（可拓展的超文本标记语言）就此诞生。

它继承了HTML的通用型和浏览器的兼容性，继承了XML的严密性和可拓展性

7、HTML5（2014 年 10 月）

HTML5是HTML最新的修订版本，由W3C制定，目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准

我们现在使用的是html5版本，因为由于新兴框架的出现和浏览器兼容性的提升，让我们选择了html5。

ttps://www.w3school.com.cn/js/index.asp
1.javascript 运算符
JavaScript 使用（=）复制运算符。
JavaScript 使用算数运算符（+ - * / % ++ --）来计算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function suanshu(){
				//声明变量
				var num1=10;
				var num2=3;
				
			document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
			document.getElementById("h1").innerHTML=num1+"-"+num2+"="+(num1-num2);
			document.getElementById("h1").innerHTML=num1+"*"+num2+"="+(num1*num2);
			document.getElementById("h1").innerHTML=num1+"/"+num2+"="+(num1/num2);
			document.getElementById("h1").innerHTML=num1+"%"+num2+"="+(num1%num2);
			//++[自动加1]
			//变量++   【先用后加】
			//num1++；   //10
			//document.getElementById("h6").innerHTML=num1;   //11
			// ++变量  [先加后用]
		    //++num1;  //11
			//document.getElementById("h6").innerHTML=num1; //11
			// -- [自动减1]
			// 变量-- [先用后减]
			//num1-- ; //10
			//document.getElementById("h6").innerHTML=num1; //9
			//  -- 变量
			--num1;  // 9
			document.getElementById("h6").innerHTML=num1; //9

			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="测试算数运算符" onclick="suanshu()" /><br>
		<h1 id="h1"></h1>
		<h1 id="h2"></h1>
		<h1 id="h3"></h1>
		<h1 id="h4"></h1>
		<h1 id="h5"></h1>
		<h1 id="h6"></h1>
	</body>
</html>

JavaScript 使用（> < == >= <= !=）比较运算符运算符。
比较运算符的结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的比较运算符</title>
		<script>
			//测试比较运算符的函数
			function test1(){
				//定义参与运算的变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+">"+num2+" = "+(num1>num2);//true
				document.getElementById("h2").innerHTML=num1+"<"+num2+" = "+(num1<num2);//false
				document.getElementById("h3").innerHTML=num1+">="+num2+" = "+(num1>=num2);//true
				document.getElementById("h4").innerHTML=num1+"<="+num2+" = "+(num1<=num2);//false
				document.getElementById("h5").innerHTML=num1+"=="+num2+" = "+(num1==num2);//false
				document.getElementById("h6").innerHTML=num1+"!="+num2+" = "+(num1!=num2);//true
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试比较运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
		<h2 id="h4"></h2>
		<h2 id="h5"></h2>
		<h2 id="h6"></h2>
	</body>
</html>

JavaScript 使用(|| && ! )逻辑运算符运算符。
|| [逻辑或] true || false --> true
false || true --> true
true || true --> true
false || false --> false
只要有true结果就是true
&& [逻辑与] true && false --> false
&emspfalse && true --> false
&emspfalse && false --> false
&emsptrue && true --> true
&emsp只要有false结果就是false

![取反] !ture–>false
!false->true
逻辑运算符的运算值和运算结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			测试逻辑运算符
			function test1(){
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML="("+num1+">"+num2+") || ("+num1+"<"+num2+")=="+((num1>num2)||(num1<num2));
				//(10>3) || (10<3)== true
				document.getElementById("h2").innerHTML="("+num1+">"+num2+") && ("+num1+"<"+num2+")=="+((num1>num2)&&(num1<num2));
				//(10>3) && (10<3)== false  
				document.getElementById("h3").innerHTML="!(("+num1+">"+num2+") && ("+num1+"<"+num2+"))=="+!((num1>num2)&&(num1<num2));
				//!((10>3) && (10<3))== true  
			}
		</script>
	</head>
	<body>
		<input type="button"  value="测试逻辑运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
	</body>
</html>

比较与逻辑运算符通常都是用来做判断的。

JavaScript 数据类型
字符串值，数值，布尔值，数组，对象。
字符串值–“hello”
var zf=”hello”;
数值[整数和小数]—123 ， 12.5
var sz=123; var sz=12.5;
布尔值–[true/false]
var be=true; var be=false;
数组–可以保存一组值
var array=[“hello”,123,12.5,true,false];
对象
var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};
student.stuid===>1001
JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块【{}】。
实例:
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
JavaScript 函数通过 function 关键词进行定义.
myFunction–函数名称
“()”—参数列表【可以没有参数,也可以有多个】
参数接收函数之外的数据值进入本函数进行运算【找帮手】
p1, p2—参数【变量名称，不需要定义】接收函数之外的数据值进入本函数
{}—代码块
return — 返回函数的执行结果
函数没有执行结果，不需要出现return xxxx
函数有执行结果,需要在最后出现return xxxxx
有没有名称
有名称的函数
function test1(){
alert(“有名称的函数”);
}
没有名称的函数【匿名函数】
window.onload=function(){
alert(“匿名函数”);}
有没有参数
有参数的函数
function test2(info){
alert(info);
}
在使用的时候需要传递进入参数值
没有参数的函数
function test1(){
alert(“没有参数的函数”);
}
有没有结果
有结果的函数
function test3(){
return “有结果”;
}
没有结果的函数
function test3(){

}
例如：`

function test4(num1,num2){
			var res=num1*num2;
			return res;
		}
function test5(){
			var res=test4(100,123);
			alert("res=="+res);
		}

`4.JavaScript 对象
对象也是变量。但是对象包含很多值。
对象包含很多值1.属性 2.方法
对象就是用来描述具有相同属性和方法的变量。
属性----变量【var】【属性名称:属性值】
方法----函数【function】【方法名称:function(){}】
格式:
var 对象名称={属性:属性值,…,
方法名称:函数}；
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建并使用对象</title>
		<script>
			//创建一个汽车对象
			var car={
				carName:"bmw",
				carcolor:"红色",
				start:function(){
					alert("启动--"+car.carcolor+","+car.carName+"汽车");
				},
				stop:function(){
					alert(this.carcolor+","+this.carName+"汽车停止了");
				}
			};
		function startcar(){
			car.carName="奔驰";
			car.start();
		}
		function stopcar(){
			car.carcolor="蓝色";
			car.stop();
		}
		</script>
	</head>
	<body>
		<input type="button" value="启动" onclick="startcar();"/><br>
		<input type="button" value="停车" onclick="stopcar();"/><br>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//创建一个学生对象
			var student={
				stuid:1001,
				stuname:"zhangsan",
				stuage:23,
				stuaddress:"西安",
				getInfo:function(){
					return student.stuid+"-"+student.stuname;
				},
				getInfo2:function(id,name){
					student.stuid=id;
					student.stuname=name;
					return student.stuid+"-"+student.stuname;
				}
			};
			
			var person={
				personname:"wangwu",
				mystudent:{
					stuid:1001,
					stuname:"zhangsan",
					getInfo:function(){
						return person.mystudent.stuid+"-"+person.mystudent.stuname;
					}
				}
			}
			
			function  test1(){
				var info1=student.getInfo();
				alert(info1);
			}
			
			function  test2(){
				var info2=student.getInfo2(1002,"lisi");
				alert(info2);
			}
			
			function  test3(){
				var name=person.personname;
				//person.mystudent.stuid=1002;
				//person.mystudent.stuname="lisi";
				var info=person.mystudent.getInfo();
				alert(name+"----"+info);
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试学生对象的getInfo方法" onclick="test1();"/>
		<input type="button" value="测试学生对象的getInfo2方法" onclick="test2();"/>
		<input type="button" value="测试Person对象" onclick="test3();"/>
	</body>
</html>

请将下面的汽车做成一个对象

在线咨询

上一篇：2.HTML简介
下一篇：小猿圈web前端开发之HTML5 manifest离线缓存的示例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端面试之html的相关信息

您的项目需求