python學習四十四天(前端之HTML標簽)
今日主要內容:
web標準
瀏覽器內核
HTML介紹,規範,結構詳解
字體標簽
排版標簽
超鏈接
圖片標簽
1.web標準
web準備介紹:
- w3c:萬維網聯盟組織,用來制定web標準的機構(組織)
- web標準:制作網頁遵循的規範
- web準備規範的分類:結構標準、表現標準、行為標準。
- 結構:html。表示:css。行為:Javascript。
web準備總結:
- 結構標準:相當於人的身體。html就是用來制作網頁的。
- 表現標準: 相當於人的衣服。css就是對網頁進行美化的。
- 行為標準: 相當於人的動作。JS就是讓網頁動起來,具有生命力的
返回頂部
2.瀏覽器內核
瀏覽器 | 內核 |
IE | trident |
chrome | blink |
火狐 | gecko |
Safari | webkit |
PS:「瀏覽器內核」也就是瀏覽器所采用的「渲染引擎」,渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本原因
3.HTML介紹,規範,結構詳解
1、HTML的概述
html全稱HyperText Mackeup Language,翻譯為超文本標記語言,它不是一種編程語言,是一種描述性的標記語言,用於描述超文本內容的顯示方式。比如字體、顏色、大小等。
- 超文本:音頻,視頻,圖片稱為超文本。
- 標記 :<英文單詞或者字母>稱為標記,一個HTML頁面都是由各種標記組成。
作用:HTML是負責描述文檔語義的語言。
註意:HTML語言不是一個編程語言(有編譯過程),而是一個標記語言(沒有編譯過程),HTML頁面直接由瀏覽器解析執行。
HTML是負責描述文檔語義的語言
html中,除了語義,其他什麽都沒有。
html是一個純本文文件(就是用txt文件改名而成),用一些標簽來描述文字的語義,這些標簽在瀏覽器裏面是看不到的,所以稱為“超文本”,所以就是“超文本標記語言”了。
所以,接下來,我們肯定要學習一堆html中的標簽對兒,這些標簽對兒能夠給文本不同的語義。
比如,面試的時候問你,h1標簽有什麽作用?
- 正確答案:給文本增加主標題的語義。
- 錯誤答案:給文字加粗、加黑、變大。
2、HTML的網絡術語
- 網頁 :由各種標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記:
<p>
稱為開始標記 ,</p>
稱為結束標記,也叫標簽。每個標簽都規定好了特殊的含義。 - 元素:
<p>內容</p>
稱為元素. - 屬性:給每一個標簽所做的輔助信息。
HTML的規範
- HTML是一個弱勢語言
- HTML不區分大小寫
- HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符,比如dos系統)
- HTML的結構:
- 聲明部分:主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。是HTML5標準。
- head部分:將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分:我們所寫的代碼必須放在此標簽內。
1、編寫HTML的規範
1)所有標記元素都要正確的嵌套,不能交叉嵌套。正確寫法舉例:<h1><font></font></h1>
(2)所有的標記都必須小寫。
(3)所有的標記都必須關閉。
- 雙邊標記:
<span></span>
- 單邊標記:
<br>
轉成<br />
<hr>
轉成<hr />
,還有<img src=“URL” />
(4)所有的屬性值必須加引號。<h1 id="head"></h1>
(5)所有的屬性必須有值。<input type="radio" checked="checked" />
2、HTML的基本語法特征
(1)HTML對換行不敏感,對tab不敏感
HTML只在乎標簽的嵌套結構,嵌套的關系。誰嵌套了誰,誰被誰嵌套了,和換行、tab無關。換不換行、tab不tab,都不影響頁面的結構。
也就是說,HTML不是依靠縮進來表示嵌套的,就是看標簽的包裹關系。但是,我們發現有良好的縮進,代碼更易讀。要求大家都正確縮進標簽。
(2) 空白折疊現象
HTML中所有的文字之間,如果有空格、換行、tab都將被折疊為一個空格顯示。
(3)標簽要嚴格封閉
HTML結構詳解
新建HTML文件,輸入 html:5,按tab鍵後,自動生成的代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
1、文檔聲明頭
任何一個標準的HTML頁面,第一行一定是一個以
<!DOCTYPE...
開頭的這一行,就是文檔聲明頭,DocType Declaration,簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
PS:
XHTML:Extensible Hypertext Markup Language,可擴展超文本標註語言。
XHTML的主要目的是為了取代HTML,也可以理解為HTML的升級版。
HTML的標記書寫很不規範,會造成其它的設備(ipad、手機、電視等)無法正常顯示。
XHTML與HTML4.0的標記基本上一樣。
XHTML是嚴格的、純凈的HTML
以下內容僅做了解:
HTML4.01有哪些規範呢?
首先我們先確定一件事兒,我們現在學習的是HTML4.01這個版本,這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰,所以這幾年網頁還是應該用HTML4.01來制作。如今,手機、移動端的網頁,就可以使用HTML5了,因為其兼容性更高。
說個題外話,html1 至 html3 是美國軍方以及高等研究所用的,並未對外公開。
HTML4.01裏面有兩大種規範,每大種規範裏面又各有3種小規範。所以一共6種規範(見下面):
HTML4.01裏面規定了普通和XHTML兩大種規範。
HTML覺得自己有一些規定不嚴謹,比如,標簽是否可以用大寫字母呢?
<H1></H1>
所以,HTML就覺得,把一些規範嚴格的標準,又制定了一個XHTML1.0。在XHTML中的字母X,表示“嚴格的”。
總結一下,HTML4.01一共有6種DTD,說白了,HTML第一行語句一共有6種:
下面對上圖中的三種小規範進行解釋:
-
strict:表示“嚴格的”,這種模式裏面的要求更為嚴格。這種嚴格體現在哪裏?有一些標簽不能使用。
比如,u標簽,就是給一個本文加下劃線,但是這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u這個下劃線是樣式。所以,在strict中是不能使用u標簽的。
那怎麽給文本增加下劃線呢?今後的css將使用css屬性來解決。
那麽,XHTML1.0更為嚴格,因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。 -
Transitional:表示“普通的”,這種模式就是沒有一些別的規範。
-
Frameset:表示“框架”,在框架的頁面使用。
在sublime輸入的html:xt,x表示XHTML,t表示transitional。
HTML5中極大的簡化了DTD,也就是說HTML5中就沒有XHTML了(W3C自己打臉了):
<!DOCTYPE html>
ok,下面重點的來了。
2、頭標簽(head)
head標簽都放在頭部分之間。這裏面包含了:<title>、
<meta>
、<link>,<style>
<title>
:指定整個網頁的標題,在瀏覽器最上方顯示。<meta>
:提供有關頁面的基本信息<link>
:定義文檔與外部資源的關系。- <style>:定義內部樣式表與網頁的關系
2.1 Meta標簽介紹:
元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。