理解基本html程式碼的5個步驟
HTML是web的重要組成部分。雖然很少有網頁設計師通過手工輸入HTML來創建網頁，但瞭解一點HTML仍然很方便。
我們將瞭解該語言的一些基礎知識，包括什麼是HTML，一些基本概念，以及它如何與其他語言交互。把這當成一個“傻瓜的HTML”速成班。
什麼是html格式(html)？
HTML代表超文本標記語言。雖然它有時會與編程語言結合在一起，但這並不準確。
作為一種標記語言，HTML只允許您創建頁面的顯示佈局。真正的編程語言，如java或C++，包含邏輯和命令。
雖然它很簡單，但HTML是web上每個頁面的主幹。它負責將文本顯示為粗體、添加圖像和鏈接到其他頁面。我們有一個HTML常見問題解答，解釋更多。
您可以在瀏覽器中的大多數網頁上單擊鼠標右鍵，然後選擇“查看頁面源代碼”或類似選項以查看它們背後的HTML。這可能還包含許多非HTML的代碼，但您可以進行篩選。
即使您對標記或編程語言沒有任何經驗，學習一點HTML也會使您成為一個更明智的web用戶。讓我們通過五個基本步驟來幫助您瞭解HTML的工作原理。我們將在此過程中提供示例。
步驟1：理解標籤的概念
HTML使用標籤系統對文檔的不同元素進行分類。
大多數標記成對出現，將受影響的文本包裝在其中。下面是一個簡單的例子
<strong>標記使文本加粗；我們稍後將詳細討論。）
<strong>This is some bold text</strong>.注意結束標記是如何以正斜槓（/）開頭的。這表示結束標記，這很重要。如果不關閉標記，則從開始起的所有內容都將具有該屬性。
然而，並不是所有的標籤都有一對。一些HTML元素，稱為空元素，沒有內容並且獨立存在。一個例子是
<br>標記，這是換行符。您可以通過添加斜槓（例如
<br />)但這不是絕對必要的。
步驟2：框架html佈局
一個正確的HTML文檔必須定義某些標記，這樣才能正確地佈局。這些是基本部分：
- Every HTML document must begin with <!DOCTYPE html>to declare itself as such. Thus, its closing tag, </html>, is the last item in an HTML file.
- Next, the <head>section includes information like the page title, various scripts that run on the page, and similar. As the name suggests, this typically comes right after the initial <html>tag. The end user doesn't see much of the content in these tags.
- Finally, the <body>tag holds the text of the page that the reader sees (plus much more). Here you'll find images, links, and more.
自從
<body>節構成了HTML文檔的大部分，本演練的其餘部分將查看與其相關的元素。
步驟3：格式化的基本html標記
接下來，讓我們看看組成HTML文檔的一些常見標記。當然，不可能涵蓋所有元素，因此我們將回顧一些最重要的元素。如果您不滿意，我們已經介紹了更多的HTML示例。
如果這些標籤看起來很基本，請記住HTML是在1993年創建的。網絡在早期階段是非常基於文本的。
簡單文本格式
HTML支持Microsoft Word中的基本文本樣式：
- <strong>tags make text bold.
- <em>tags (which stands for "emphasis") will italicize text.
HTML還支持舊的
<b>標記為粗體和
<i>斜體字。但是，最好使用上面的方法。
總之，
<strong>和
<em>顯示應該如何理解某些內容，而後面的標籤只告訴您應該如何理解。這些以前的標籤對於視障人士使用的屏幕閱讀器來說更容易使用。
段落和其他部分
HTML的
<div>標記用於定義文檔的一部分。通常，這與CSS（見下文）配合使用，以某種方式格式化節。
這個
<p>標記允許您將文本劃分為段落。瀏覽器會自動在這些之前和之後放置一些空間，讓您自然地分解文本。
您可以向文檔中添加標題，並使用
<h1>通過
<h6>標籤。H1是最重要的標題，而H6是最不重要的。幾乎每一篇MakeUseOf文章都使用H2和H3標題來組織信息。
按Enter鍵在HTML文檔中添加換行符實際上不會顯示它們。相反，你可以使用
<br>添加換行符。
下面是一個使用所有這些的示例：
<div class="example"><h2>Example Heading</h2><p>This is one paragraph.</p><p>This is a second<br>paragraph split between two lines.</p></div>步驟4：**圖像
圖像是大多數網頁的重要組成部分。您可以使用HTML輕鬆地添加它們，甚至可以為它們設置不同的屬性。
使用
<img>標籤。把這個和
src屬性用於指定要從何處加載圖像。
另一個重要的屬性
<img>標籤是
alt. Alt text允許您為屏幕閱讀器描述圖像，或者在圖像加載不正確的情況下描述圖像。您可以將鼠標移到圖像上以查看其alt文本。
使用
width和
height元素來指定圖像顯示的像素數。
把它們放在一起，圖像標籤如下所示：
<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">第5步：添加鏈接
如果沒有其他網頁的鏈接，萬維網就不可能是一個大網站。使用
<a>標籤，您可以鏈接到任何文本上的其他頁面。
內部
<a>標籤，標籤
href屬性指示鏈接的位置。簡單地粘貼URL就可以了。你可以用
title元素添加當有人將鼠標懸停在鏈接上時出現的一點文本。
基本鏈接如下所示：
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>這個
<a>tag還有許多其他可能的元素，但我們在這裡不深入討論。
html如何與css和javascript連接
我們已經瞭解了HTML的基本原理以及它是如何建立網頁的。但是你可以想象，HTML本身並不能滿足現代網絡的需求。在“Web1.0”時代，簡單的HTML網頁很常見，那時大多數網站只不過是靜態文本。
但現在，我們還有很多。CSS（層疊樣式表）是一種用來描述用HTML編寫的文本外觀的語言。還記得嗎
<div>我們討論過的標籤？在這個（和其他標記）中，可以定義
class屬性。然後，在附帶的CSS文檔中，您可以編寫說明如何實現這一點
class你應該看看。
您可以在HTML代碼中內聯定義這些樣式元素，但這被認為是一種糟糕的做法，因為維護起來要困難得多。通過這些簡單的CSS示例瞭解更多信息。還可以查看如何優化CSS文件。
javascript語言
我們已經看到HTML定義了內容，CSS決定了外觀。JavaScript是對web至關重要的三者中的最後一個成員，它允許web頁面響應人們的行為，而無需每次加載新頁面。
例如，JavaScript允許網站在您嘗試提交密碼之前警告您輸入的密碼不符合其要求。網頁設計師可以使用JavaScript在幻燈片中循環瀏覽圖像或提示用戶輸入。
這些只是幾個基本的例子。JavaScript是一種腳本語言，它能夠做很多事情，而且比HTML和CSS複雜得多。更多信息，請參閱我們的JavaScript概述。
查看網頁設計的完整範圍超出了本文的討論範圍，但只需說HTML與其他語言交互來創建我們今天所知道的網頁就足夠了。
html的發展
需要注意的是，HTML不是靜態的。HTML經歷了幾次修改，最近的是HTML5。值得注意的是，該標準支持本地視頻嵌入，而不是依賴adobeflash等專有格式。
新的HTML迭代還聲明某些過時的標記不時被棄用。這些包括可怕的標籤，如
<marquee>和
<blink>（分別是卷軸和flash文本）常見於20世紀90年代的網站設計。所以請記住，標準會隨著時間的推移而改變。
一點html知識會大有幫助
我們已經簡單地瞭解了HTML文檔的工作原理。現在您瞭解了網頁是如何構造的基本原理。即使你不繼續建立網頁，你也會對你每天使用的網頁有一點了解。
要了解更多信息，請使用必要的工具升級您的web開發技能，然後查看我們關於如何設計您的第一個網站的指南。
圖片來源：Belyaevsky/存款照片
- 發表於 2021-03-21 16:54
- 閱讀 ( 78 )
- 分類：程式設計
你可能感興趣的文章
為什麼有些程式語言比其他語言快？
... 由於最終結果是用一種計算機可以直接理解的語言編寫的，所以速度往往相當快。將其與經過另一個步驟的解釋語言進行比較。儘管如此，並不是所有的編譯語言都是相同的。 ...
如何透過3個簡單的步驟構建javascript幻燈片
...ipt很有信心，但從未使用過jQuery，那麼請檢視我們的jQuery基本指南。 ...
7所有網站開發人員都應該知道的程式設計技巧
...控制是一組構造程式碼更改的實踐。版本控制解決了無法理解程式碼庫的哪個更改建立了成功還是失敗的問題。透過跟蹤分支圖中程式碼的變化，網站程式設計師可以瞭解程式碼何時中斷以及中斷的原因。 ...
透過我的5門頂級課程真正學習javascript
... javascript：理解奇怪的部分 ...
什麼是javascript？它是如何工作的？
...主流。這種強大的語言已經發展成為任何web開發人員都能理解的基本工具。 ...
在chrome中啟用flash的5個步驟
...駭客，你還得擔心密碼保護和資料隱私。檢視我們的文章基本谷歌Chrome隱私設定和谷歌Chrome的最佳安全擴充套件。 ...
如何使用github頁面免費託管網站
... 對於一個靜態網站或小型網路應用程式，有免費的託管計劃，可以讓你在一瞬間上線執行。他們需要比付費主機多一點的設定，但這是一個值得的免費權衡。 ...
想學習基本的編碼嗎？在你的業餘時間嘗試5個一口大小的編碼應用程式
...的支援。每一個完成的挑戰都會給你信心，你已經很好地理解了這些概念。否則，你將從解決錯誤的方法中吸取教訓。 ...
如何管理多年的瀏覽器書籤：整潔的5個步驟
... 要使用它們，請遵循以下最流行瀏覽器的基本步驟： ...
什麼是刮網？如何從網站收集資料
... 要理解web scraper，我們首先需要了解web是如何工作的。要訪問此網站，請鍵入“makeuseof.com網站“或者您單擊了另一個網頁的連結（告訴我們在哪裡，說真的，我們想知道）。...
