TML 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而,值得注意的是,HTML 不能被視為一種編程語言,因為它不能創建動態功能。
HTML有很多用例,即:
本文將介紹 HTML 的基礎知識,包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。
HTML(代表超文本標記語言)是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本,而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。
在國內的網站上找了一圈,這應該是介紹歷史最細致的,長按保存手機里翻譯
平均每個網站包含幾個不同的信息 HTML 頁面。例如,主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。
HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容,以便互聯網用戶可以查看它。
所有 HTML 頁面都有一系列 HTML 元素,由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束,而屬性描述元素的特征。
元素的三個主要部分是:
這三個部分的組合將創建一個 HTML 元素:
<p>這是在HTML中添加段落的方法。</p>
HTML 元素的另一個關鍵部分是它的屬性,它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加信息,并且屬性值給出進一步的說明。
例如,添加紫色和 font-family verdana 的樣式元素將如下所示:
< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >
另一個屬性,HTML 類,對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如,我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充,在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式,請在每個開始標記后添加 class=”important”:
<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>
大多數元素都有一個開始標簽和一個結束標簽,但有些元素不需要結束標簽即可工作,例如空元素。這些元素不使用結束標簽,因為它們沒有內容:
< img src= "/" alt= "圖像" >
這個圖像標簽有兩個屬性——一個src屬性,圖像路徑,和一個alt屬性,描述性文本。但是,它沒有內容,也沒有結束標簽。
最后,每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭,以告知 Web 瀏覽器文檔類型。使用 HTML5,doctype HTML public 聲明將是:
< !DOCTYPE html >
目前,有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽,但學習所有可用的不同元素仍然是有益的。
第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。
塊級元素占據頁面的整個寬度。它總是在文檔中開始一個新行。例如,標題元素將位于與段落元素不同的行中。
每個 HTML 頁面都使用這三個標簽:
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
其他流行的塊級標簽包括:
內聯元素格式化塊級元素的內部內容,例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。
例如,一個 <strong> 標簽會以粗體呈現一個元素,而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素:
<a href="https://www.icodingdeu.com/" >點我!</a>
HTML 的第一個版本由 18 個標簽組成。從那時起,每個新版本都帶有添加到標記中的新標簽和屬性。迄今為止,該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標簽,可以清楚地描述內容,例如 <article>、<header> 和 <footer>。
就像任何其他計算機語言一樣,HTML 有其優點和局限性。以下是 HTML 的優缺點:
優點:
就像任何其他計算機語言一樣,HTML 有其優點和局限性。以下是 HTML 的優缺點:
缺點:
HTML 用于添加文本元素并創建內容結構。然而,僅僅建立一個專業的和完全響應的網站是不夠的。因此,HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。
HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。
HTML 是一種對初學者友好的語言,有很多支持,主要用于靜態網站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我們還向您展示了一些在線教學課程,它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。
如果您有任何其他喜歡的資源來學習 HTML,請在評論部分告訴我們。
TML(超文本標記語言)是一種用于創建網頁的標準標記語言,由瀏覽器解析執行。
接下來我來介紹一下簡單的模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Ps:針對上面的這些HTML,對于初學者而言是不是一頭霧水。
那么接下來,我將為大家一一講述,讓大家明白其中這些標簽的用處。
html元素: 是一個html頁面最外層的標簽(HTML頁面的根元素),其他所有標簽都被它包裹。
head元素: 是一個用來放置頁面信息的標簽(文檔的元數據),如<meta>定義編碼格式,<title>頁面標題等。
body元素: 是一個用來放頁面看得到的內容(可見的頁面內容),如圖表,表格,文字等
html結構介紹
另外簡單貼下兩個標簽,放到body,就可以用瀏覽器看到效果,源碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>小成講前端</h1>
<p>本系列將隔天不定時更新</p>
</body>
</html>
分別是:
h1元素:定義一個大標題
p元素:定義一個段落
(本期完)
小成講前端---本系列將隔天不定時更新
歡迎點贊,關注我!!
前端對于網站來說,通常是指網頁,網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發。
前端設計一般可以理解為網站的視覺設計,比如 UI 設計; 前端開發則是網站的前臺代碼實現,包括基本的HTML和CSS以及JavaScript/ajax,現在最新的高級版本HTML5、CSS3,以及SVG等。
前端開發的核心部分主要是:HTML,CSS,JavaScript 三個部分。
HTMLHTML 是這三者中最基礎的部分,相當于是網頁的骨架,也就是網頁的結構; CSSCSS 部分是網頁的表現形式,也可以說是網頁的美化,比如一個圖片的大小、位置,文字的大小顏色等; JavaScriptJavaScript 是一種動態的腳本語言,負責與用戶進行交互,增加用戶體驗的作用。
一個網頁的組成部分主要包括下面幾個部分:文字、圖片、輸入框、視頻、音頻、超鏈接文字、圖片、輸入框、視頻、音頻、超鏈接 等。
說道 Web 標準,不能不說 W3C 組織(World Wide Web Consortium),全稱為「萬維網聯盟」。萬維網聯盟創建于1994年,是Web技術領域最具權威和影響力的國際中立性技術標準機構。
W3C 最重要的工作是發展 Web 規范(稱為推薦,Recommendations),這些規范描述了 Web 的通信協議(比如 HTML 和 XHTML)和其他的構建模塊。簡單的說就是就是確定 Web 頁面的語法格式和規范的。
與之類似的一個組織是「European Computer Manufacturers Association」(ECMA組織),這個組織制定了標準的腳本語言規范 ECMAScript ,而 JavaScript 就參照的這個規范。
那么 Web 標準規范了下面三個部分:
HTML 標準(結構標準 ),相當人的骨架結構。CSS 樣式(表現)標準 , 相當于給人化妝變得更漂亮。JavaScript 行為標準 , 相當于人在唱歌,頁面更靈動。
瀏覽器內核是一個瀏覽器的核心部分,也就是「渲染引擎渲染引擎」。它的主要作用是決定一個瀏覽器如何顯示網頁的內容及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同,因此同一網頁在不同的內核的瀏覽器里的渲染(顯示)效果也可能不同。
這里涉及到一個「兼容性問題兼容性問題」,瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。所以我們在編寫代碼的時候,做好瀏覽器兼容,才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計,瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
內核和對應的瀏覽器:內核和對應的瀏覽器:
trident : IE windows gecko : firefox 跨平臺 webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同開發
HTML 全稱為:超文本標記語言超文本標記語言(Hyper Text Markup Language)。這里超文本就是超鏈接的意思,就是可以實現頁面的跳轉。
HTML 基本結構如下:
<!doctype html> 聲明文檔類型
<html> 根標簽
<head> 頭標簽
<title></title> 標題標簽
</head>
<body> 主體標簽
</body>
</html>
<!DOCTYPE html> 是告訴瀏覽器,以下文件用 HTML 哪個版本解析,這里是 HTML5 版本。<html></html> 標簽是一個網頁的根標簽,所有的標簽都要寫在這一對根標簽里面。<head></head> 是頭標簽,主要是定義文檔(網頁)的頭部,包括完檔的屬性和信息,文檔的標題,還可以引入 JavaScript 腳本,CSS 格式等。<body></body> 是一個文檔的主題,里面包含文檔的所有內容,比如文本,超鏈接,圖片,表格等內容。
單標簽 <! Doctype html> 雙標簽 <html> </html> ,<head></head>, <title></title>
包含(嵌套關系) <head><title></title></head> 父子關系 并列關系 <head></head><body></body> 兄弟姐妹
前期學習一種語言的時候,開發工具很重要。Web開發工具有很多。最簡單的一個開發工具就是 Windows 系統自帶的記事本了,但是又難用又難看,沒有語法高亮、代碼補全等功能。
那么我推薦大家使用的是「Sublime Text 3」 代碼編輯器,它雖小巧精致,但有著炫酷的界面,并且有大量的插件可以使用,大大提高了代碼的編寫效率。
提到 Web 開發工具不得不提到 JebBrain 全家桶的「 Webstorm 」軟件。目前已經被廣大 Web 開發者譽為"Web前端開發神器"、"最強大的HTML5編輯器"、"最智能的JavaScript IDE"等。它令人稱道的是它智能打代碼補全、代碼一鍵格式化、HTML 提示、聯想查詢、代碼重構等強大功能。
還有近些年來崛起的【visual studio code】,已經成為前端開發的主流工具。
建議初學者初期使用Sublime等文本編輯器,太過于智能的編輯器確實會帶給我們極大的便利,但是在帶給我們便利的同時,也會削弱我們對基礎知識的掌握,只有自己一個單詞一個單詞敲出來的代碼,才會讓我們記得更加牢固。
學習了解更多前端、互聯網內容,點贊關注我。私信獲取完整前端學習資料。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。