知識點導航:
* HTML初步認識
* HTML基本骨架
* HTML語法特性
* HTML雜項
一敛劝、HTML初步認識<p>
-
什么是純文本文件txt
只能保存文本內容的文件叫做純文本文件,即txt文件. txt是英文text的縮寫,它是無法記錄文本樣式的.
注意
1. html, css, js 都是純文本文件
2. 同樣內容情況下, doc 文件比 txt 文件 大
-
什么是HTML
HTML 是英語 HyperText Markup Language 的縮寫, 超文本標記語言.
html 本質上和 txt 沒有任何區(qū)別, 都是純文本文件, 它是由txt文件改名而成的, 用一些標簽來描述文字的語義,由于這些標簽字瀏覽器里面是看不到的,所以稱為”超文本”, 標簽也就是”標記”,所以是超文本標記語言
注意
* HTML 是一個用文本 ( HTML標簽 )來描述 文本語義 的語言
* 除了語義,其他什么都不是
* .html 是 HTML 文件的后綴名
二、HTML基本骨架<p>
1. 文檔聲明頭<p>
<!DOCTYPE> 文檔聲明頭
DocType Declaration ( DTD ) 用于告知瀏覽器使用哪種 HTML 或 XHTML 規(guī)范.
HTML4.01 從IE6開始兼容,HTML5 是從IE9開始兼容的, 故這幾年網頁還是應該用HTML4.01來制作,移動端使用HTML5
HTML4.01 規(guī)定了 普通 和 XHTML 兩大種規(guī)范. XHTML中的字母X夸盟，表示“嚴格的”
XHTML1.0 嚴格體現在小寫標簽、閉合上陕、引號.
| 大規(guī)范 | 里面的小規(guī)范 |
|---|---|
| HTML 4.01 | Strict, Transitional, Frameset |
| XHTML 1.0 | Strict, Transitional, Frameset |
1.strict 表示“嚴格的”，這種模式里面的要求更為嚴格释簿。這種嚴格體現在哪里？有一些標簽不能使用辕万。比如枢步，u標簽，就是可以讓一個本文加上下劃線醉途，但是這和HTML的本質有沖突，因為HTML只能負責語義隘擎，不能負責樣式，而u這個下劃線是樣式货葬。所以，在strict中是不能使用u標簽的.
2.Transitional 表示“普通的”震桶，這種模式就是沒有一些別的規(guī)范
3.Frameset 表示“框架”休傍，在框架的頁面使用
說明
- HTML5中極大的簡化了DTD,也就是說HTML5中就沒有XHTML了
2. 字符集<p>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
字符集用 meta 標簽定義( 自封閉標簽 ), meta 表示 “元”, 即配置, 表示基本的配置. charset就是character set“字符集”的意思
重點
- 我們用meta標簽可以聲明當前這個html文檔的字庫蹲姐，但是一定要和保存的類型一樣，否則亂碼柴墩！
中文可以使用的字符集為兩種
第一種: UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
第二種: gb2313
<meta http-equiv="Content-Type" content="text/html;charset=gb2313">
也可以寫成 gbk
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
說明
- UTF-8 是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字江咳，比如阿拉伯文逢净、漢語歼指、鳥語……
- gb2312 是國標，是中國的字庫东臀，里面僅涵蓋了漢字和一些常用外文着饥，比如日文片假名惰赋，和常見的符號
字庫規(guī)模:
UTF-8(字全) > gb2313(只有漢字)
保存大小:
UTF-8(3個字節(jié),加載慢) > gb2313(2個字節(jié),加載快)
總結:
1.UTF-8 字多宰掉，有各種國家的語言赁濒，但是保存尺寸大，文件臃腫
2.gb2312字少拒炎，只用中文和少數外語和符號，但是尺寸小击你，文件小巧
3. 關鍵字和頁面描述<p>
meta除了可以設置字符集玉组，還可以設置關鍵字和頁面描述
設置頁面描述
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱惯雳、游戲、搜索引擎服務石景，開設新聞、娛樂潮孽、體育等30多個內容頻道，及博客往史、視頻、論壇等互動交流怠堪，網聚人的力量揽乱。" />
只要設置的Description頁面描述粟矿，那么百度搜索結果，就能夠顯示這些語句陌粹，這個技術叫做SEO，search engine optimization掏秩，搜索引擎優(yōu)化。
設置關鍵字
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞蒙幻，就是告訴搜索引擎，這個網頁是干嘛的胆筒，能夠提高搜索命中率。讓別人能夠找到你仆救，搜索到你。Keywords就是“關鍵詞”的意思
4. title標簽<p>
<title>網頁的標題</title>
title 也是有助于SEO搜索引擎優(yōu)化的
基本骨架
<!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" xml:lang="en">
head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Keywords" content="牛逼彤蔽，很牛逼，特別牛逼" />
<meta name="Description" content="網易是中國領先的互聯網技術公司顿痪，為用戶提供免費郵箱油够、游戲、搜索引擎服務叠聋，開設新聞、娛樂碌补、體育等30多個內容頻道，及博客棉饶、視頻、論壇等互動交流照藻，網聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
說明
- 網頁的最外層的標簽對兒是
<html></html>標簽對幸缕，里面有兩部分，分別是 head 和 body发乔。 - head 標簽中，描述網頁的配置栏尚；body 中的內容，才是用戶可以看見的內容译仗。
- 第1行, 就是網頁的聲明頭抬虽，術語叫做 DocType Defintion纵菌，文檔類型定義，簡稱 DTD咱圆。這行語句非常的復雜笛辟，里面暗含了一個網址闷堡。W3C就是出web規(guī)范的組織機構。html杠览、css弯菊、js 的規(guī)范都是W3C定義發(fā)布的。world wide web coalition , 國際萬維網聯盟管钳。網頁聲明頭可以告訴瀏覽器，這是一個什么標準的頁面才漆。
- 第2行, 是最大的html標簽，所有的網頁內容醇滥，都要包裹在這個標簽對兒里面。
我們發(fā)現鸳玩，html標簽中阅虫，有兩個屬性：
xmlns="http://www.w3.org/1999/xhtml"命名空間,一般用來規(guī)范JS
xml:lang="en"語言是英語 - 第3行, 就是head標簽不跟，就是配置。
- 第4行,
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">字符集的配置 - 第5行,
<meta name="Keywords" content="牛逼窝革，很牛逼，特別牛逼" />關鍵詞 - 第6行,
<meta name="Description" content="網易是中國領先的互聯網技術公司虐译，為用戶提供免費郵箱、游戲菱蔬、搜索引擎服務篷帅，開設新聞拴泌、娛樂、體育等30多個內容頻道蚪腐，及博客、視頻回季、論壇等互動交流，網聚人的力量正林。" />描述 - 第7行,
<title>哈哈哈</title>網頁的標題，可以顯示在瀏覽器的標簽欄中 - 第9行,body 標簽就是網頁的內容觅廓，用戶能夠看見。
三杈绸、HTML語法特性<p>
-
HTML對換行不敏感
HTML只在乎標簽的嵌套結構矮瘟，嵌套的關系。誰嵌套了誰澈侠，誰被誰嵌套了，和換行哨啃、tab無關。換不換行棘催、tab不tab，都不影響頁面的結構耳标。也就是說，HTML不是依靠縮進來表示嵌套的次坡，就是看標簽的包裹關系。但是砸琅，我們發(fā)現有良好的縮進，代碼更易讀症脂。要求大家都正確縮進標簽。
-
空白折疊現象
HTML中所有的文字之間诱篷，如果有空格壶唤、換行棕所、tab都將被折疊為一個空格顯示。
-
標簽要嚴格閉合
四琳省、HTML雜項<p>
-
字符實體
< < > > © ? 版權標志 空格
示例：
哈?????????????????哈 （可以防止空白折疊現象）
-
廢棄標簽
HTML現在只負責語義不負責樣式，故一些之前帶有樣式的標簽均被廢棄了
<hr /> 水平線
<br /> 換行
<del>刪除線</del>
<b>加粗</b>
<u>下劃線</u>
<i>傾斜</i>
<em>強調</em>
<strong>強調</strong>
<b>加粗</b>
<u>下劃線</u>
<i>傾斜</i>
<em>強調</em>
<strong>強調</strong>
