HTML簡述及常見標籤與分類

05-17

HTML簡述及常見標籤與分類

HTML 概念與歷史

HTML是「HyperText Markup Language」的縮寫，譯為超文本標記語言，它在1993年被互聯網工程工作小組（IETF）工作草案發布，其初版被公認是蒂姆·伯納·李爵士（Tim Berners-Lee）的發明。

「Text」（文本）是20世紀哲學、符號學、社會學等學科大熱的研究對象——解構主義思潮認為傳統文本的結構包含著一系列的規則與規定，作為符號的傳統文本不僅具有溝通功能，而且具有一種真正的政治功能——它作為先在的結構、隱蔽的框架引導著人們的認知秩序。社會學家布爾迪厄認為：「符號權力是建構現實的權力，是朝向建構認知秩序的權力。」哲學家福柯則從知識考古學（系譜學）的角度考察了權力與話語文本二者互為扶持、共生共榮的關係。

如何突破傳統文本對於讀者個體潛移默化的認知規訓，成為了數代社會思想家共同關心的問題。早在20世紀30年代，范尼瓦·布希（Vannevar Bush）即提出一種叫做memory extender（存儲擴充器）的設想，這是一種幻想中的非線性結構文本，旨在呼籲在有思維的人和所有的知識之間建立一種新的關係。在20世紀60年代，符號學大師羅蘭·巴特（Roland Barthes）提出了「作者之死」（對尼采「上帝死了」、福柯「人之死」的繼承）——他認為作品不應完全由作者創作與安排，因為寫作的人永遠處在寫作的歷史之中，他寫出的話語必定和歷史上已經存在的文本相似。文本應該是一個多維的空間，是一個「互文性」的場域，而文本的意義完全在於讀者。到了20世紀後半葉，藉由計算機及網路概念的發展，「HyperText」的概念首次在1965年被HTTP之父（哲學、社會學master）德特·納爾遜(Ted Nelson)提出。

「HyperText」譯為超級文本，簡稱超文本，是通過使用超鏈接的方法，將各種不同空間內的文字信息組織在一起的網狀文本結構。在納爾遜的設想中：「HyperText」是一種非相續性著述（non—sequential writing），即分叉的、允許讀者作出選擇、最好在交互屏幕上閱讀的文本。「大量的書寫材料或圖像材料，以複雜的方式相互聯繫，以至於不能方便地呈現在紙上。它可能包含其內容或相互關係的概要或地圖，也可能包含自已經審閱過它的學者所加的評註、補充或腳註。」

計算機及網路的高速發展應允了這一概念，1984年，為了使歐洲各國的核物理學家能通過計算機網路及時溝通傳遞信息進行合作研究，歐洲原子核研究會（CERN）委託蒂姆·伯納·李開發一個軟體，以便使分布在各國各地物理實驗室、研究所的最新信息、數據、圖像資料可供大家共享。於是，李爵士發明了第一個局部存取瀏覽器"Enquire"。在此之後，李爵士將目光放在了建立一個全球規模的網路上面。1989年12月「world wide web」世界上第一款瀏覽器被李爵士發明，他隨後成為互聯網工程工作小組（IETF）的領導者，並建立起World Wide Web Consortium（W3C聯盟）。HTML成為了W3C標準的「HyperText」標記語言。

」HyperText「以HTML為表現方式，通過伺服器所儲存的數據為基礎，使得傳統線性文本變成可以通向四面八方的解構性文本，讀者可以在任何一個HTML頁面上停下來，進入另一個HTML文本，然後再點擊、進入另一個HTML文本，原先的單一的文本變成了無限延伸、擴展的超級文本。

以羅蘭·巴特為代表的社會思想家們有關「以超越傳統文本的方式來反抗權力規訓」的奇妙構想，就由一場橫跨世紀的社會變遷——互聯網革命完成了。「HyperText」使得每個讀者擺脫了傳統文本線性的控制，讀者可以隨意地在哪個地方停下來，進入另一個文本：讀者本身成為了文本意義最後的生產者。當我們在網路上閱讀時，可以依照自己的意願和思路，輕鬆地實現內容的「跳轉」及表達方式的轉換，這一定程度上維護了作為個體的我們對於自身思維的自主地位。

HTML，就是這樣一個偉大的工具。

HTML基礎結構

HTML文件往往被放置於伺服器之中，通過瀏覽器和伺服器的交互（HTTP通訊），瀏覽器得到並運行伺服器上的HTML文件，予以解析渲染。

在此文中，我們使用windows和git。首先，創建一個.html文件：

touch index.html

怎麼讓瀏覽器知道這是一個HTML文件並加以解析呢？打開文件，在首行聲明：

<!DOCTYPE html>

HTML使用標記的方式表達文本內容,而標記的工具是」HTML標籤（」標籤「也被稱」元素「）。在聲明後寫下html根標籤<html></html>，在根標籤之中寫入<head><body>標籤：

<!DOCTYPE html><html lang="en"> <head> </head> <body> </body></html>

HTML根標籤下分有<head></head><body></body>標籤，注意，這是注釋標籤

<head>用來標記文檔的基礎數據

<head> <meta charset="UTF-8"> <link rel=stylesheet type="text/css" href="css/style.css"> <script src="js/main.js" type="text/javascript" charset="utf-8" ></script>  <title>Document</title></head>

<body>用來標記正文的文本內容

<body> <p>hello world</p>  <a href="https://developer.mozilla.org/zh-CN/docs/learn">web學習</a> </body>

常用的HTML標籤與標籤分類

常用的HTML標籤有：

<p>段落，<a>錨（超文本），<h1>to<h6>標題，<br>換行，<hr>水平線，<form>表單，<input>輸入控制項，<button>按鈕，<ol>有序列表，<ul>無序列表，<div>塊狀標記，<span>行內標記，<img>圖片，<video>視頻控制項，<audio>音頻控制項，<svg>矢量圖控制項，<table>表格，<textarea> 文本域，<kbd>鍵盤文本等等，更多標籤及其詳細用法請訪問：HTML以及google，並親自創建HTML文檔對其試驗。

常見的HTML標籤分類有：

1，行內標籤和塊級標籤：

行內標籤（默認樣式display:inline;）：

b, big, i, small, tt,

abbr, acronym, cite, code, dfn,

em, kbd, strong, samp, var,

a, bdo, br,img, map,

object, q, script, span, sub,

sup,button, input, label, select, textarea

塊級標籤（默認樣式display:block;）:

address,article,aside,audio,blockquote,

canvas,dd,div,dl,fieldset,

footer,form,h1 to h6,header,

hr,noscript,ol,output,p,

section,table,ul,video

行內元素只能包含數據和其他行內元素。而塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更」大型「的結構。

行內元素不會以新行開始，而塊級元素會新起一行。

2,空標籤：

area,base,br,col,colgroup,command,

embed,hr,img,input,keygen,link,

meta,param,source,track,wbr

空標籤不能包裹內容，也無法存在子節點，其閉合標籤</>形式無效。

3，可替換標籤：

img,object,video,audio,canvas

可替換標籤的表現樣式由其引用的外部對象決定，層疊樣式表只能對其小部分屬性進行更改。

感謝閱讀本文

對於HTML的了解與學習我推薦：

https://developer.mozilla.org/zh-CN/docs/learn/HTML?

developer.mozilla.org

慕課網-程序員的夢工廠?

www.imooc.comHTML 教程 | 菜鳥教程?

www.runoob.com

https://www.w3.org/TR/html52/?

www.w3.org

願大家共同進步