HTML 文檔的結構：學習 HTML 的基本結構
已發表: 2020-12-14HTML 已被用作可通過瀏覽器數據在 Internet 上訪問的文檔的標準標記語言。 HTML 由一系列短元素、標籤和代碼組成，當它們以結構化格式編譯在一起時，可以創建一個任何人都可以通過適當的互聯網訪問查看的網頁。
它改變了人們的工作方式。 HTML 和 CSS 與 javascript 一起用於在網頁上創建和操作元素，HTML 讓創建者為每個元素定義不同的角色，從而在創建過程中提供完全的自定義自由。
HTML 代表超文本標記語言，用於設計在網站上顯示的網頁。
將三個主要方面放在一起有助於構建網頁。
- HTML結構——支持結構元素
- CSS 樣式——幫助設計並為這些結構元素賦予樣式
- JS 交互——啟用這些元素之間的交互
在HTML 結構中，元素和標籤相互配對以標記內容。
互聯網上的每個頁面都包含 HTML 標籤。 這些標籤有助於以清晰開放的視角在線顯示內容，並且始終可以對其進行審核和更改。 為了更簡單地解釋事情，讓我們描述一下元素和標籤在程序中是如何使用的。
開始和結束元素發生變化，但標籤保持不變。 標籤插入句子之前和結尾，使它們能夠在頁面上進行格式化。 一個理想的網頁由三個主要和基本部分組成：
- 標題
- 頭
- 身體
Head 元素用於突出顯示頭部部分的開始/標題。 頭部部分總是有助於作為關於頁面的描述。 標題標籤內的內容，即標題，是用作識別頁面內容的來源。
下面列出了所有可以在 head 元素中使用的標籤：
- <基地>
- <鏈接>
- <元>
- <無腳本>
- <腳本>
- <風格>
- <標題>
例如：
<頭部>
<TITLE> HTML 中的 Hello world 示例<TITLE>
</頭>
塊級元素用於標識網頁的特定部分，可以是段落、子標題或要創建的某些列表。
段落：<P>和</P>
標題，一級：<H1>標題，二級：<H2>和</H2>
水平尺：<HR> 居中：<CENTER>
頁腳：沒有特殊的標籤來表示它，但仍然建議在網頁上設置頁腳，以幫助識別需要與作者聯繫的部分。 它們可能包括常見問題解答部分或訂閱時事通訊的電子郵件。
<HTML>
<頭部>
<TITLE>一家鞋業公司 <TITLE>
</頭>
<身體>
<H1>歡迎來到神奇鞋！ </H1>：</H2>
<IMG SRC=.”.http://example.com/images/image1.jpg”><HR>
<CENTER> 為什麼不訪問 <A HREF =..http://www.example1.com/..>示例網站
</A>
</中心>
</正文>
</HTML>
上面的部分解釋了HTML 結構的網頁中的主要元素。
現在，我們轉向 HTML 源代碼，並嘗試了解如何使用它來理解程序結構及其元素。
作為初學者，這有助於了解其他頁面是如何開發的，並且可以作為參考來為您自己的網頁創建自定義版本。
單擊網頁上任意位置的右鍵，然後選擇“查看頁面源”。 這將打開一個包含頁面源代碼的窗口。
檢查頁面
單擊網頁上任意位置的右鍵，然後選擇“檢查”以查看用於構建該特定網頁的元素的列表和類型。 它將包括 HTML 和 CSS，可以通過樣式面板進行修改。
解釋了 HTML的基本結構及其標籤後，現在讓我們了解在 HTML 中編寫內容所需的基本元素。
<p> 當需要一個段落時，此標籤用於網頁中，並使用 </p> 標籤結束它。
<br> 此標籤用於換行，主要用於寫單行，無論是聯繫人還是地址。
<hr> 該標籤用於將網頁內容分成兩部分。
這裡的所有標籤都是在一個示例網頁代碼中實現的
學習： 21 個 Web 開發項目理念
輸入
<html>
<頭部>
<標題></標題>
</head>
<正文>
<h1>HTML 結構</h1>
<p>
由 upGrad 教育<br>
<小時>
學習基礎知識 <br>
<小時>
由 upGrad 教育<br>
</p>
</正文>
</html>
屬性
對於提到的所有標籤，當需要額外信息時使用屬性。 屬性由兩個參數定義，即“值”和“名稱”。
在這裡，'name' 參數有一個函數來獲取它被認為是分配的屬性的名稱。 'value' 參數具有類似的功能，可以獲取與元素對齊的屬性名稱的值。
<img> 此屬性用於在網頁中添加/嵌入圖像。 此標籤將有助於指定圖像路徑。 <height> 和 <width> 分別表示圖像的高度和寬度。
<alt> 當圖像由於連接錯誤或其他原因而無法加載時應用此屬性。 alt 標籤用作圖像的副標題。
報名參加世界頂尖大學的軟件工程課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。
閱讀： 8 個令人興奮的全棧項目創意和主題
例子
<html>
<正文>
<h2>src 屬性</h2>
<p>HTML圖片是用img標籤定義的，圖片源的文件名在src屬性中指定：</p>
<img src=”img_101.jpg” alt=”一張空圖片” width=”500″ height=”600″>
</正文>
</html>
<style> 標籤用於更改文本樣式、大小、字體和與文本相關的任何其他功能
例子
<html>
<正文>
<h2>樣式屬性</h2>
<p>該屬性用於改變樣式，例如顏色：</p>
<p style=”color:red;”>這是一個紅色段落。</p>
</正文>
</html>
對於文本修改應用程序，HTML 還提供了標籤來使用這些標籤將文本修改為自定義請求。
- <b> – 粗體文本
- <strong> – 重要文本
- <i> – 斜體文本
- <em> – 強調文本
- <mark> – 標記文本
- <small> – 較小的文本
- <del> – 刪除的文本
- <ins> – 插入的文本
- <sub> – 下標文本
- <sup> – 上標文本
總結這篇文章，我們學習了 HTML 的以下特性和基礎知識：
- HTML結構
- 標籤、元素及其類型
- 基本標籤及其應用
所有這些特性、標籤和屬性都有助於理解對HTML 的需求。
如果您有興趣了解有關全棧軟件開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目，和任務、IIIT-B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。
