前端面試之html的相關(guān)信息

.你是如何理解HTML語義的？

答：使用合適的標(biāo)簽標(biāo)示內(nèi)容。優(yōu)點在于標(biāo)簽語義化有利于搜索引擎建立索引進(jìn)行抓取，有助于構(gòu)建良好的HTML結(jié)構(gòu)，便于團(tuán)隊開發(fā)和維護(hù)。

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

答：meta表示不能被HTML的其它元素（link，script,base, style, title）之一表示的任何元素信息。viewpoint讓web開發(fā)者控制視口的尺寸及比例，移動設(shè)備的viewpoint指設(shè)備屏幕上用來展示網(wǎng)頁的那一塊區(qū)域，也就是瀏覽器上用來展示網(wǎng)頁的那部分，可能比瀏覽器的可視區(qū)大，也可能比瀏覽器可視區(qū)域小，一般情況，比瀏覽器可視區(qū)域大。屬性包括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新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

答：html5新特性：

語義特性: header footer
本地存儲特性： localStorage, manifest
設(shè)備訪問特性: Geolocation
連接特性: webSocket
網(wǎng)頁多媒體特性: audio、video標(biāo)簽
三維、圖形及特效：SVG，Canvas, css3D
性能、集成特性

解決兼容性的方法：

在IE8以下，通過document.createElement(新標(biāo)簽)，并設(shè)置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>

結(jié)構(gòu)語義上 html: 基本沒有體現(xiàn)結(jié)構(gòu)語義，一般為

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

html5: 具有結(jié)構(gòu)語義

 <header></header>

5.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

答： Doctype是document type(文檔類型)，告訴瀏覽器解析器采用哪種規(guī)范（html、xhtml）來解析頁面，Doctype不存在或格式錯誤的情況下，采用兼容模式。

標(biāo)準(zhǔn)模式（嚴(yán)格模式）展示的支持最新標(biāo)準(zhǔn)的網(wǎng)頁。兼容模式（松散模式或怪異模式）展示的是兼顧傳統(tǒng)瀏覽器的網(wǎng)頁，向后兼容老式瀏覽器。

具體區(qū)別：

6.用戶訪問頁面到最終渲染的整個過程？

用戶輸入url,瀏覽器向服務(wù)器發(fā)送請求，獲取html,然后進(jìn)入HTML渲染機(jī)制。首先，根據(jù)HTML生成DOM樹；其次，根據(jù)css和js重排頁面 https://segmentfault.com/a/1190000009317496

7.你對頁面進(jìn)行性能優(yōu)化的思路和思想是什么？

答：減少http請求; 減少DOM操作，避免不必要的重繪和重排;壓縮文件體積；采用CDN；

tml+css基礎(chǔ)一：html簡介和發(fā)展史

HTML全稱（hypertext markup language）譯為超文本標(biāo)記語言，其譯文代表了HTML的含義，它和其他編程語言不同的是，HTML不是一門真正意義上編程語言，而是一種標(biāo)記語言，通過帶有尖角號的標(biāo)簽對文本進(jìn)行標(biāo)記，從而實現(xiàn)網(wǎng)頁的結(jié)構(gòu)搭建。

1.2、HTML發(fā)展史

HTML創(chuàng)始人（蒂姆·伯納斯-李）蒂姆·伯納斯-李除了是HTML的創(chuàng)始人，還是w3c組織的主席。

1、HTML1.0 （1991年12月）

1991年萬維網(wǎng)（www）在互聯(lián)網(wǎng)上首次露面，也隨之引起了巨大的轟動。

1989年，伯納斯-李寫了一份備忘錄，提出建立一個基于互聯(lián)網(wǎng)的超文本系統(tǒng)。同年和另外一個工程師一起進(jìn)行聯(lián)合資金申請，但是這個項目并沒有通過。

1991年底的時候，伯納斯-李公開了一份“HTML Tag”的文檔，里面描述了組成HTML初始版本的18個元素

2、HTML2.0（1995年11月）

HTML 2.0是HTML語言的擴(kuò)展。????

與原始版本的HTML不同，HTML 2.0被創(chuàng)建為Web標(biāo)準(zhǔn)，規(guī)定了常見的網(wǎng)頁結(jié)構(gòu)

3、HTML3.2（1996年1月）

慘淡的"第一次瀏覽器大戰(zhàn)時期（Netspace Vs IE）"，兩大巨頭不斷推出重大舉措試圖控制整個領(lǐng)域。???????

網(wǎng)頁開發(fā)者是這場戰(zhàn)爭中的焦點。商業(yè)戰(zhàn)爭就像軍備競賽，各家公司為了保持領(lǐng)先，招兵買馬。各家都有各家的規(guī)則。?????????

那時候，你不得不寫兩份不同的網(wǎng)頁，一個用于網(wǎng)景的瀏覽器，另一個用于微軟的瀏覽器

4、HTML4（1997年12月）

瀏覽器大戰(zhàn)接近尾聲，W3C（世界萬維網(wǎng)聯(lián)盟）成立，他們打算通過制定統(tǒng)一的HTML標(biāo)準(zhǔn)，使整個產(chǎn)業(yè)能有序的發(fā)展。 ? ? ? ? ? ?

他們計劃用兩種語言分離出HTML的表達(dá)式（HTML 4.0）和結(jié)構(gòu)（CSS），并且說服瀏覽器廠商接受這些標(biāo)準(zhǔn)

這次發(fā)布提供了規(guī)范的三種變體：

Strict，嚴(yán)格版本；

Transitional，過渡版本；

Frameset，iframe框架集；

HTML4.0 采納了許多瀏覽器特定的元素類型及屬性，但是同時也把 Netscape 的視覺化標(biāo)記標(biāo)記為過時的尋求淘汰; 贊成使用樣式表; 同時在1998年4月對HTML4.0進(jìn)行了微小的修訂，沒有增加版本號HTML5.0

5、HTML4.01（1999年12月）

像 HTML4.0 一樣提供了三種變體，并且他的最終錯誤修訂版在2001年的5月12日發(fā)布

6、XHTML 1.0（2000年1月）

各大瀏覽器廠商紛紛接受W3C標(biāo)準(zhǔn)的時候，新技術(shù)出現(xiàn)了。?????????????

HTML和另一種語言XML融合，XHTML（可拓展的超文本標(biāo)記語言）就此誕生。???????????

它繼承了HTML的通用型和瀏覽器的兼容性，繼承了XML的嚴(yán)密性和可拓展性

7、HTML5（2014 年 10 月）

HTML5是HTML最新的修訂版本，由W3C制定，目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)

我們現(xiàn)在使用的是html5版本，因為由于新興框架的出現(xiàn)和瀏覽器兼容性的提升，讓我們選擇了html5。

ttps://www.w3school.com.cn/js/index.asp
1.javascript 運算符
JavaScript 使用（=）復(fù)制運算符。
JavaScript 使用算數(shù)運算符（+ - * / % ++ --）來計算值。

<!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="測試算數(shù)運算符" 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 使用（> < == >= <= !=）比較運算符運算符。
比較運算符的結(jié)果一定是布爾值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的比較運算符</title>
		<script>
			//測試比較運算符的函數(shù)
			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結(jié)果就是true
&& [邏輯與]? true && false --> false
????&emspfalse && true --> false
????&emspfalse && false --> false
????&emsptrue && true --> true
????&emsp只要有false結(jié)果就是false

![取反] ?!ture–>false
????!false->true
邏輯運算符的運算值和運算結(jié)果一定是布爾值【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 數(shù)據(jù)類型
字符串值，數(shù)值，布爾值，數(shù)組，對象。
字符串值–“hello”
var zf=”hello”;
數(shù)值[整數(shù)和小數(shù)]—123 ， 12.5
var sz=123; var sz=12.5;
布爾值–[true/false]
var be=true; var be=false;
數(shù)組–可以保存一組值
var array=[“hello”,123,12.5,true,false];
對象
var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};
student.stuid===>1001
JavaScript 函數(shù)
JavaScript 函數(shù)是被設(shè)計為執(zhí)行特定任務(wù)的代碼塊【{}】。
實例:
function myFunction(p1, p2) {
return p1 * p2; // 該函數(shù)返回 p1 和 p2 的乘積
}
JavaScript 函數(shù)通過 function 關(guān)鍵詞進(jìn)行定義.
myFunction–函數(shù)名稱
“()”—參數(shù)列表【可以沒有參數(shù),也可以有多個】
參數(shù)接收函數(shù)之外的數(shù)據(jù)值進(jìn)入本函數(shù)進(jìn)行運算【找?guī)褪帧?br>p1, p2—參數(shù)【變量名稱，不需要定義】接收函數(shù)之外的數(shù)據(jù)值進(jìn)入本函數(shù)
{}—代碼塊
return — 返回函數(shù)的執(zhí)行結(jié)果
函數(shù)沒有執(zhí)行結(jié)果，不需要出現(xiàn)return xxxx
函數(shù)有執(zhí)行結(jié)果,需要在最后出現(xiàn)return xxxxx
有沒有名稱
有名稱的函數(shù)
function test1(){
alert(“有名稱的函數(shù)”);
}
沒有名稱的函數(shù)【匿名函數(shù)】
window.onload=function(){
alert(“匿名函數(shù)”);}
有沒有參數(shù)
有參數(shù)的函數(shù)
function test2(info){
alert(info);
}
在使用的時候需要傳遞進(jìn)入?yún)?shù)值
沒有參數(shù)的函數(shù)
function test1(){
alert(“沒有參數(shù)的函數(shù)”);
}
有沒有結(jié)果
有結(jié)果的函數(shù)
function test3(){
return “有結(jié)果”;
}
沒有結(jié)果的函數(shù)
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】【屬性名稱:屬性值】
方法----函數(shù) 【function】【方法名稱:function(){}】
格式:
var 對象名稱={屬性:屬性值,…,
方法名稱:函數(shù)}；
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>創(chuàng)建并使用對象</title>
		<script>
			//創(chuàng)建一個汽車對象
			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="藍(lán)色";
			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>
			//創(chuàng)建一個學(xué)生對象
			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="測試學(xué)生對象的getInfo方法" onclick="test1();"/>
		<input type="button" value="測試學(xué)生對象的getInfo2方法" onclick="test2();"/>
		<input type="button" value="測試Person對象" onclick="test3();"/>
	</body>
</html>

請將下面的汽車做成一個對象

在線咨詢

上一篇：2.HTML簡介
下一篇：小猿圈web前端開發(fā)之HTML5 manifest離線緩存的示例

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端面試之html的相關(guān)信息

您的項目需求