任務4-HTML初識

1、HTML、XML、XHTML 有什么區別?

1)HTML,超文本標記語言,是語法較為松散的、不嚴格的Web語言;

2)XML,可擴展標記語言, 是一種標記語言,很類似 HTML;
它的設計宗旨是傳輸數據,而非顯示數據,XML標簽沒有被預定義,您需要自行定義標簽。XML 被設計為具有自我描述性。
XML 和 HTML 為不同的目的而設計:
XML 被設計為傳輸和存儲數據,其焦點是數據的內容。
HTML 被設計用來顯示數據,其焦點是數據的外觀。
即HTML 旨在顯示信息,而 XML 旨在傳輸信息。

3)XHTML,可擴展超文本標記語言,基于XML,作用與HTML類似,但語法更嚴格,比如在XHTML標準中:
元素必須被正確地嵌套。
元素必須被關閉。
標簽名必須用小寫字母。
文檔必須擁有根元素。

2、怎樣理解 HTML 語義化?

HTML是一種對文本內容進行結構和語義(或者說“意義”)進行說明的方法。
它會告訴我們說:“這行是一個標題,這幾行組成了一個段落。這些文字是項目列表,這些文字是鏈接到互聯網上另一個文件的超鏈接。”

值得注意的是,不應該讓HTML來告訴我們:“這些文字是藍色的,這些文字又是紅色的。這部分內容是最最靠右的一欄,這行內容是斜體字。”這些和表現相關的信息是CSS的工作。

在做前端開發的時候要記住:HTML告訴我們一塊內容是什么(或其意義),而不是它長的什么樣子。當我們提到“語義標記”的時候,我們所說的HTML應該是完全脫離表現信息的,其中的標簽應該都是語義化地定義了文檔的結構。

HTML語義化的優點:
1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構。
2.屏幕閱讀器(如果訪客有視障)會完全根據你的標記來“讀”你的網頁。
3.方便搜索引擎和網絡爬蟲很好的解析。
4.便于團隊開發和維護。

3、怎樣理解內容與樣式分離的原則?

CSS與HTML分離的優點
1、使頁面載入得更快由于將大部分頁面代碼寫在了CSS當中,使得頁面體積容量變得更小。相對于表格嵌套的方式的逐層加載速度快。
2、修改設計時更有效率在修改頁面的時候更加容易省時。根據區域內容標記,到CSS里找到相應的ID,使得修改頁面的時候更加方便,也不會破壞頁面其他部分的布局樣式。
3、保持視覺的一致性最重要的優勢之一:保持視覺的一致性;以往表格嵌套的制作方法,會使得頁面與頁面,或者區域與區域之間的顯示效果會有偏差。
4、更好地被搜索引擎收錄由于將大部分的HTML代碼和內容樣式寫入了CSS文件中,這就使得網頁中代碼更加適合搜索引擎。
5、對瀏覽者和瀏覽器更具親和力對瀏覽者和瀏覽器更具親和力,由于CSS富含豐富的樣式,使頁面更加靈活性,更加的美觀,它可以根據不同的瀏覽器,而達到顯示效果的統一和不變形。
所以在前端開發時堅持內容與樣式的分離原則,工作更容易和有序。

4、有哪些常見的meta標簽?

1、META標簽的keywords 寫法為:<meta name="Keywords" content="信息參數" /> meat標簽的Keywords的的信息參數,代表說明網站的關鍵詞是什么。

2、META標簽的Description <meta name="Description" content="信息參數" /> meta標簽的Description的信息參數,代表說明網站的主要內容,概況是什么。

3、META標簽的http-equiv=Content-Type content="text/html 代表的是HTTP的頭部協議,提示瀏覽器網頁的信息。
寫法為:<meta http-equiv="Content-Type" content="text/html; charset=信息參數" >
charset="信息參數" 指定字符集即網采用的編碼方式:
GB2312=簡體中文;
BIG5=繁體中文;
iso-2022-jp=日文;
ks_c_5601=韓文;
ISO-8859-1=英文;
UTF-8=世界通用的語言編碼;
在HTML5中,在表達charset信息時可以簡寫,前面的內容可以去掉,即寫法是: <meta charset="GBK">

4、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 適配移動設備。

5、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">適配雙核瀏覽器。

6、META標簽的generator <meta name="generator" content="信息參數" /> meta標簽的generator的信息參數,代表說明網站的采用的什么軟件制作。

7、META標簽的author <meta name="author" content="信息參數"> meta標簽的author的信息參數,代表說明網頁版權作者信息。

8、META標簽的http-equiv="Refresh" <Meta http-equiv="Refresh" Content="時間; Url=網址參數"> meta標簽的Refresh代表多少時間網頁自動刷新,加上Url中的網址參數就代表,多長時間自動鏈接其他網址。

9、META標簽的HTTP-EQUIV="Pragma" CONTENT="no-cache" <META HTTP-EQUIV="Pragma" CONTENT="no-cache">代表禁止瀏覽器從本地計算機的緩存中訪問頁面內容,這樣設定,訪問者將無法脫機瀏覽。

10、META標簽的COPYRIGHT <META NAME="COPYRIGHT" CONTENT="信息參數"> meta標簽的COPYRIGHT的信息參數,代表說明網站版權信息。

11、META標簽的http-equiv="imagetoolbar" <meta http-equiv="imagetoolbar" content="false" /> 指定是否顯示圖片工具欄,當為false代表不顯示,當為true代表顯示。

12、META標簽的Content-Script-Type <Meta http-equiv="Content-Script-Type" Content="text/javascript"> W3C網頁規范,指明頁面中腳本的類型。

13、META標簽的revisit-after <META name="revisit-after" CONTENT="7 days" > revisit-after代表網站重訪,7 days代表7天,依此類推。

14、META標簽的Robots <meta name="Robots" contect="信息參數"> Robots代表告訴搜索引擎機器人抓取哪些頁面 其中的屬性說明如下:
信息參數為all:文件將被檢索,且頁面上的鏈接可以被查詢;
信息參數為none:文件將不被檢索,且頁面上的鏈接不可以被查詢;
信息參數為index:文件將被檢索;
信息參數為follow:頁面上的鏈接可以被查詢;
信息參數為noindex:文件將不被檢索,但頁面上的鏈接可以被查詢;
信息參數為nofollow:文件將不被檢索,頁面上的鏈接可以被查詢。

15、META標簽的<meta http-equiv="windows-Target" contect="_top"> 代表頁面在當前窗口中以獨立頁面顯示,可以防止自己的網頁被別人當作一個frame頁調用,設置有:_blank、_top、_self、_parent。

16、META標簽的set-cookie <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> 代表Cookie設定,如果網頁過期,存盤的cookie將被刪除,需要注意的也是必須使用GMT時間格式

5、文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html>的作用?

瀏覽器分為兩種模式,一種是嚴格模式,一種是混雜模式,這兩種模式就是是通過doctype的定義來區分,
什么是doctype,doctype是一種標準通用標記語言的文檔類型聲明,目的是告訴瀏覽器要使用什么樣的文檔類型定義(DTD)來解析文檔,doctype 最早是xml的概念,在xml中它的定義是通過一種特定的語法,作為一種元數據,來描述xml文檔中允許出現的元素,以及各元素的組成,規則等。
doctype在html中的作用是觸發瀏覽器的標準模式,如果html中省略了doctype,瀏覽器會進入到混雜模式的狀態也稱之為兼容模式,在這種模式下有些樣式,布局會和標準模式(或稱嚴格模式)存在差異,html標準,DOM標準只規定了標準模式下的行為,沒有對兼容模式做出規定,因此不同瀏覽器在兼容模式下的處理也是不同的,應用兼容模式比較困難,所以需要慎用。
在html4中 doctype有三種模式
嚴格模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
過渡模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。
框架模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">。
因為瀏覽器有容錯能力,實際上運用這三種模式并不十分嚴格,瀏覽器都能正確解析出用戶想要的結果,所以
在html5中doctype就簡化成了<!DOCTYPEhtml>。

6、瀏覽器亂碼的原因是什么?如何解決?

瀏覽器解析頁面時使用的編碼標準與網頁實際的編碼標準不一致就會導致亂碼,可能的原因有兩種:
1)網頁未聲明編碼標準,瀏覽器渲染時自動使用的編碼標準與文檔實際的編碼標準不一致。此時可以為網頁添加編碼聲明或在瀏覽器中手動指定正確的編碼標準。

2)網頁聲明了編碼標準,但是與實際使用的不一致,瀏覽器在渲染時采用網頁聲明的編碼設置,于是出現亂碼。只要將聲明的編碼標準更改成正確的就可以 了。

7、常見的瀏覽器有哪些,什么內核?

1)IE瀏覽器(Internet explorer)
IE瀏覽器是世界上使用最廣泛的瀏覽器,它由微軟公公司開發,預裝在windows操作系統中。所以我們裝完windows系統之后就會有IE瀏覽器。
IE瀏覽器使用Trident內核,又稱其為IE內核。Trident(又稱為MSHTML),是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器還包括:傲游、世界之窗瀏覽器、Avant、騰訊TT等

2)Safari瀏覽器
Safari瀏覽器由蘋果公司開發,它也是使用的比較廣泛的瀏覽器之一。Safari預裝在蘋果操作系統當中,從2003年首發測試以來到現在已經11個年頭。是蘋果系統的專屬瀏覽器,當然現在其他的操作系統也能裝Safari。
Safari使用WebKit內核,webkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件,主要用于Mac OS系統,它的特點在于源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高,導致一些編寫不標準的網頁無法正常顯示。

Firefox瀏覽器
火狐瀏覽器是一個開源的瀏覽器,由Mozilla資金會和開源開發者一起開發。由于是開源的,所以它集成了很多小插件,開源拓展很多功能。發布于2002年,它也是世界上使用率前五的瀏覽器。
Mozilla Firefox使用Gecko內核,Gecko是一套開放源代碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一,僅次于Trident。

Opera瀏覽器
opera瀏覽器是由挪威一家軟件公司開發,該瀏覽器創始于1995.目前其最新版本是opera 20.他有著快速小巧的特點,還有綠色版的,屬于輕靈的瀏覽器。
Opera使用Presto內核,Presto是由Opera Software開發的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態功能,例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。

Chrome瀏覽器
Chrome瀏覽器由谷歌公司開發,測試版本在2008年發布。雖說是比較年輕的瀏覽器,但是卻以良好的穩定性,快速,安全性獲得使用者的親睞。與Safari 一樣采用WebKit內核。

其他瀏覽器
現在很多國內瀏覽器,像360瀏覽器,獵豹瀏覽器,搜狗瀏覽器使用高速(webkit)和兼容(Trident)雙核瀏覽模式,保證良好兼容性的同時極大提升網頁瀏覽速度。當采用高速模式訪問網頁出現問題時,可點擊地址欄旁邊的內核按鈕直接切換內核,使用兼容性更佳的兼容模式正常瀏覽網頁。

8、列出常見的標簽,并簡單介紹這些標簽用在什么場景?

<html></html> 創建一個HTML文檔。
<head></head> 設置文檔標題和其它在網頁中不顯示的信息。
<title></title> 設置文檔的標題
<body></body> 元素定義文檔的主體,包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等。)
<h1></h1>到<h6></h6>描述標題的標簽,塊元素,從上到下字體依次減少。
<p> </p> paragraph的縮寫,描述的是段落,段中沒有間距,但是在段與段之間是有間距的,典型的塊元素。
<img src="圖片地址" alt="信息"/>)插入一張圖片,alt 定義當圖片無法加載時,顯示什么信息。
<a> </a>鏈接標簽,例<a href="URL"></a><a>有比較重要的屬性有兩個,分別是href、target,href指定超鏈接地址;target指定打開方式:_blank 新頁面打開,_self 為默認值可不寫,指在當前頁面打開。
<table>標簽定義表格,用戶注冊登錄時會用到。
<ul> <li>html列表標簽,<ul>表示有序列表。
<ol> <li>html列表標簽,<ol>表示無序列表。
<dl> <dt> <dd>內容塊標簽,dl:內容塊,dt:內容塊的標題,dd:內容。
<button> 定義一個點擊按鈕
<strong></strong> 加重文本,通常為黑體。
<em></em> 強調文本通常為斜體。
<!-- comment -->html注釋并不會顯示在網頁上,提高可讀性,便于維護。
<br /> 單標簽,輸出換行。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,013評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,346評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,421評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,146評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,534評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,767評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,318評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,074評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,258評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,486評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,916評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,156評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,993評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,234評論 2 375

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,777評論 1 92
  • HTML、XML、XHTML 有什么區別 1.HTML 是用來描述網頁的一種語言,指的是超文本標記語言 (Hype...
    饑人谷_牛牛閱讀 706評論 0 2
  • HTML、XML、XHTML有什么區別? XMLXML是The Extensible Markup Languag...
    zx9426閱讀 440評論 0 1
  • 一、HTML、XML、XHTML 有什么區別 1. HTML是什么? 描述網頁的一種語言 超文本標記語言 (Hyp...
    饑人谷_CST閱讀 814評論 0 7
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong閱讀 22,503評論 1 92