部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
今天大綱如下 :
➤ HTML基礎
➤ 元素與標籤
➤ MDN簡介
➤ HTML樣板
➤ 常見的HTML元素
好的，讓我們從HTML開始，HTML有點像名詞。它是網頁的內容和結構。頁面上的文字，像是一個按鈕、一種形式、一個鏈接。
因此，我們將從HTML開始，然後再添加一些CSS，然後再添加JavaScript，然後他們將所有組在一起，一切都會變得生動。
首先，讓我們談談HTML。
HTML是稱為標記語言的示例。它代表超文本標記語言。HTML是一種用於標記文檔，網頁的語言或語法。
因此，如果您想到的是科學研究論文之類的東西，那麼實際上正是HTML起源於1989年，1990年創建HTML，以幫助描述學術研究論文的結構並在非常早期的Internet上共享它們。加上一些特殊的格式，加粗文本，編號列表和項目符號列表之類的東西。在這種情況下，我們在不同頁面和不同部分之間具有鏈接。我們用斜體顯示文本，我們在文本的各個段落之間用空格隔開他們。就像您在其他論文中看到的那樣，這只是一個段落。
要編寫HTML，我們使用所謂的HTML元素。其中有很多，例如圖像元素或表單元素或鏈接元素或標題元素或粗體或斜體。我們可以做很多事情，但是我們在這裡使用這種語法來定義它們，一般模式，我們在此處將標籤包裹在開始標籤中，並將結束標籤包裹在某些內容周圍。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
好的，讓我們開始創建第一個HTML文檔。我將在Udemy的Wikipedia頁面上重新創建一部分。您可以跟隨我做相同的文本。您也可以只寫亂碼。您可以提出自己的內容。但是，真正重要的不是這些標籤之間的含義，而是這些標籤本身。這就是我們現在要介紹的內容。因此，您可以根據需要輸入亂碼。
我要將此文件命名為Udemy1，它必須以HTML擴展名結尾，如此Udemy1.html。這一部分非常重要。當我在瀏覽器中打開它時，它將被識別為HTML並以HTML呈現方式運行。
我將首先在此處輸入一些文本。這樣，所以我在這裡寫了兩行。不管我們在這裡擁有什麼。這只是文字。但是現在我將保存該文件，並在瀏覽器中將其打開。查找文件，然後雙擊它。
此消息未發佈到某處。我不會去某個網站或訪問服務器來查看此內容或此文件的內容。我是唯一可以在這台機器上看到此信息的人，因此它不是在線的或類似的東西。因此，現在我們將開始編寫一些實際的HTML。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
創建粗體字，即如果您輸入標籤<b></b>。我需要將American放在<b></b>標籤內，這樣才能打開和關閉，並且我需要確保就在那邊。這是告訴瀏覽器在開始和結束之間加粗文本。
因此，我要保存回瀏覽器並刷新頁面。因此我們有了第一個HTML元素，即粗體元素。
有了基本概念後，我們現在將瘋狂學習一系列不同的元素，不僅是標籤，我們還如何製作標題？我們如何製作鏈接，圖像，表格和按鈕？因此，接下來的都會講到這些。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
接下來，向您介紹最有用的資源之一，接下來我建議您一直使用。它被稱為Mozilla (https://developer.mozilla.org/zh-CN/) 開發人員網絡。它是涵蓋基礎知識和更多內容的資源，而不僅僅是Web技術的基礎知識。由開發人員編寫的開發人員資源將其視為HTML，CSC和JavaScript的Wikipedia。和瀏覽器以及許多其他解釋HTML規則的內容。它充滿了教程，參考和指南，我會經常使用它。它是可以幫助您了解和幫助您了解這些技術的資源。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
我們在這裡要討論的第一個要素是段落元素或<P></P>標籤。您也可以在Mozilla <p>搜索它。它代表一個段落，段落實際上可以包含您希望分組在一起的任何類型的相關內容。因此它們可以是圖像，也可以是表單的不同部分，例如不同的輸入和標籤，以及其他東西。但是現在，我們要編寫文本段落。
我將兩個段落區分開來保存後，讓我們回到瀏覽器並刷新。通過將所有內容包裝在一個或多個<P></P>標籤中，我們最終得到了一個獨立的段落。
我可以在一個段落中包含一個粗體元素，所以我要在該段落中添加段落，稱為塊級元素的東西。我們將對此進行更多了解，這意味著什麼，但是它們佔用了一定的空間。那是一個段落元素。Block Elements 和 Inline Elements 可看我另一篇解釋。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
接下來，將介紹六個非常相似的元素。它們都是標題或節標題元素。
標記文本 : 本段包含了一些最常用的文本標記 HTML 元素。
標題（Heading）: 標題元素可用於指定內容的標題和子標題。就像一本書的書名、每章的大標題、小標題，等。 HTML 文檔也是一樣。 HTML 包括六個級別的標題， <h1>~<h6>，一般最多用到 3-4 級標題。
<h1>主標題</h1>
<h2>頂層標題</h2>
<h3>子標題</h3>
<h4>次子標題</h4>
<h5>次次子標題</h5>
<h6>次次次子標題</h6>
它們是1、2、3、4、5和6個元素。因此它們都指示標題。如果轉到這篇Udemy Wikipedia文章，我們實際上有許多有關這些元素的示例。我們的主要標題是<h1></h1>。這是整個頁面的頂層標題。但隨後我們有了諸如，History、Overview、Reception等副標題。這些將是下一個層次。考慮一下您文檔的輪廓。那副標題就是<h2></h2>。
首先，它會更大，但也像段落一樣佔用自己的一行。這是一個標題。它獨立存在。因此，如果我之後還有其他文本，請保存並刷新，然後將其推到自己的行中。確定，因此將其放大。但這又不是重點。我們可以更改字體。稍後我們可以更改大小，顏色。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
接下來，我想向您介紹chrome開發人員工具，在一個網頁中按 F12，或按右鍵→檢查，或按Chrome右上方的三點控制列表→更多工具→開發人員工具，您在任何網頁上的Chrome瀏覽器中，都可以。在這裡看到的是此頁面上的所有基礎HTML
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
每個HTML文檔都應該具備的一些基本結構。您會看到我們有這個HTML元素在前面打開和關閉它，然後我們需要一個主體，我們談論的是這個HTML框架。人們也將其稱為樣板。它是標準化的標記，需要包含在您創建的每個文檔，每個HTML頁面中。
HTML不只是將我們的代碼放入其中。實際上閱讀了MDN上的文檔允許任何一個頭部元素，然後是一個身體元素。這就是我們的HTML元素。
現在，我將向您展示另一件事，即標題元素。title元素將定義我們文檔的標題title元素實際上將改變我們在瀏覽器選項卡中顯示的內容。
請鍵入!感嘆號並單擊Tab。給我的文檔類型是什麼，它給了我下面的樣板
<!DOCTYPE html> — 文檔類型。HTML 大約是 1991/92 年時，DOCTYPE 用來鏈接一些 HTML 編寫守則，比如自動查錯之類。 DOCTYPE 在當今作用有限，僅用於保證文檔正常讀取。現在知道這些就足夠了。
<html></html> — <html> 元素。該元素包含整個頁面的內容，也稱作根元素。
<head></head> — <head> 元素。該元素的內容對用戶不可見，其中包含例如面向搜索引擎的搜索關鍵字（keywords）、頁面描述、CSS 樣式表和字符編碼聲明等。
<meta charset="utf-8"> — 該元素指定文檔使用 UTF-8 字符編碼 ，UTF-8 包括絕大多數人類已知語言的字符。基本上 UTF-8 可以處理任何文本內容，還可以避免以後出現某些問題，沒有理由再選用其他編碼。
<title></title> — <title> 元素。該元素設置頁面的標題，顯示在瀏覽器標籤頁上，也作為收藏網頁的描述文字。
<body></body> — <body> 元素。該元素包含期望讓用戶在訪問頁面時看到的內容，包括文本、圖像、視頻、遊戲、可播放的音軌或其他內容。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
將介紹與列表有關的一些元素 列表（List）: Web 上的許多內容都是列表，HTML 有一些特別的列表元素。標記列表通常包括至少兩個元素。最常用的列表類型為：
無序列表（Unordered List）中項目的順序並不重要，就像購物列表。用一個 <ul> 元素包圍。
有序列表（Ordered List）中項目的順序很重要，就像烹調指南。用一個 <ol> 元素包圍。
列表的每個項目用一個列表項目（List Item）元素 <li> 包圍。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
鏈結
鏈結非常重要 — 它們賦予 Web 網絡屬性。要植入一個鏈結，我們需要使用一個簡單的元素 — <a> — a 是 "anchor" （錨）的縮寫。要將一些文本添加到鏈結中，只需如下幾步：
為此 <a> 元素添加一個 href 屬性，把屬性的值設置為所需網址
<a href="https://en.wikipedia.org/wiki/Eren_Bali">Eren Bali</a>
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
<img> 元素：該元素通過包含圖像文件路徑的地址屬性 src，可在所在位置嵌入圖像。
該元素還包括一個替換文字屬性 alt，是圖像的描述內容，用於當圖像不能被用戶看見時顯示，不可見的原因可能是：
用戶有視覺障礙。視障用戶可以使用屏幕閱讀器來朗讀 alt 屬性的內容。有些錯誤使圖像無法顯示。可以試著故意將 src 屬性裡的路徑改錯。保存並刷新頁面就可以在圖像位置看到
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
註釋 : 在你的code裡面你想添加自己的說明，可以將你需要註釋的部分，藉由快捷鍵，按crtl+/，即可將文字註釋，run code就不受影響
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog
隨意窩 : https://blog.xuite.net/warlimit/blog
Blogspot : https://warlimit.blogspot.com/
留言列表
