前端面試之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的相關信息

您的項目需求