17個簡單的html程式碼示例，你可以在10分鐘內學會
儘管現代網站通常都是用用戶友好的界面構建的，但瞭解一些基本的HTML還是很有用的。如果你知道下面17個HTML示例標記（和一些附加標記），你就可以從頭開始創建一個基本的網頁，或者調整像WordPress這樣的應用程序創建的代碼。
我們提供了HTML代碼示例，其中包含大多數標記的輸出。如果您想看到它們的實際應用，請下載本文末尾的示例HTML文件。您可以在文本編輯器中使用它，並將其加載到瀏覽器中，以查看所做的更改。
1
在創建的每個HTML文檔的開頭都需要這個標記。它確保瀏覽器知道它正在讀取HTML，並且它需要最新版本的HTML5。
儘管這實際上不是一個HTML標記，但它仍然是一個很好的標記。
2
這是另一個告訴瀏覽器它正在讀取HTML的標記。標記緊跟在DOCTYPE標記之後，您可以在文件末尾用一個標記將其關閉。文檔中的其他內容都在這些標記之間。
三。
標記開始文件的頭部分。這裡的東西不會出現在你的網頁上。相反，它包含搜索引擎的元數據和瀏覽器的信息。
對於基本頁面，標籤將包含您的標題，僅此而已。但是你還可以包括一些其他的東西，我們一會兒再談。
4
此標記設置頁面的標題。你需要做的就是把你的標題放在標籤裡，然後關閉它，就像這樣（我也包括了標題標籤）：
<head><title>My Website</title></head>這是在瀏覽器中打開時顯示為選項卡標題的名稱。
5
與title標籤一樣，元數據也放在頁面的標題區域中。元數據主要由搜索引擎使用，是關於頁面內容的信息。有許多不同的元字段，但這些是最常用的：
- 描述---頁面的基本描述。
- 關鍵詞---一組適用於你的頁面的關鍵詞。
- 作者---你的頁面的作者。
- viewport---一個標籤，用於確保頁面在所有設備上看起來都很好。
下面是一個可能適用於此頁面的示例：
<meta name="description" content="A basic HTML tutorial"><meta name="keywords" content="HTML,code,tags"><meta name="author" content="MakeUseOf"><meta name="viewport" content="width=device-width, initial-scale=1.0">“viewport”標籤的內容應始終為“width=device width，initial scale=1.0”，以確保頁面在移動和桌面設備上顯示良好。
6
關閉標題部分後，就可以進入正文了。你用標籤打開它，然後用標籤關閉它。就在文件的末尾，標籤的前面。
你網頁的所有內容都在這些標籤之間。聽起來很簡單：
<body>Everything you want displayed on your page.</body>7
標籤在頁面上定義一級標題。這通常是標題，最好每頁只有一個。
定義第二級標題，如節標題、第三級子標題等，直至。例如，本文中標記的名稱是二級標題。
<h1>Big and Important Header</h1><h2>Slightly Less Big Header</h2><h3>Sub-Header</h3>結果：
正如你所看到的，它們在每一級都變小了。
8
段落標記開始一個新段落。這通常**兩個換行符。
例如，看前一行和這一行之間的斷點。標籤就是這麼做的。
<p>Your first paragraph.</p><p>Your second paragraph.</p>結果：
你的第一段。
你的第二段。
您還可以在段落標記中使用CSS樣式，例如更改文本大小的樣式：
<p style="font-size: 120%;">20% larger text</p>結果：
文字放大20%
要了解如何使用CSS設置文本樣式，請查看這些HTML和CSS教程。
9
換行符標記**單個換行符：
<p>The first line.<br>The second line (close to the first one).</p>結果：
第一行。
第二行（靠近第一行）。
以類似的方式工作就是標籤。這會在頁面上畫一條水平線，有利於分隔文本的各個部分。
10
此標記定義重要文本。總的來說，這意味著它將是大膽的。但是，可以使用CSS使文本顯示不同。
但是，您可以安全地使用粗體文本。
<strong>Very important things you want to say.</strong>結果：
你想說的非常重要的事情。
如果您熟悉加粗文本的標記，您仍然可以使用它。不能保證它在將來的HTML版本中繼續工作，但目前，它可以工作。
11
喜歡和，和是相關的。標記標識強調的文本，這通常意味著它將變成斜體。同樣，CSS可能會使強調的文本顯示方式不同。
<em>An emphasized line.</em>結果：
強調的線條。
該標記仍然有效，但同樣，它可能會在將來的HTML版本中被棄用。
12
錨定標記用於創建鏈接。一個簡單的鏈接如下所示：
<a href="https://www.makeuseof.com/>Go to MakeUseOf</a>結果：
轉到MakeUseOf
“href”屬性標識鏈接的目標。在許多情況下，這將是另一個網站。它也可以是一個文件，如圖像或PDF。
其他有用的屬性包括“target”和“title”。target屬性幾乎只用於在新選項卡或窗口中打開鏈接，如下所示：
<a href="https://www.makeuseof.com/" target="_blank">Go to MakeUseOf in a new tab</a>結果：
轉到新選項卡中的MakeUseOf
“title”屬性創建工具提示。將鼠標懸停在下面的鏈接上以查看其工作原理：
<a href="https://www.makeuseof.com/" title="This is a tool tip">Hover over this to see the tool tip</a>結果：
將鼠標懸停在此處可查看工具提示
13
如果要在頁面中嵌入圖像，則需要使用圖像標記。您通常會將它與“src”屬性結合使用。這將指定圖像的源，如下所示：
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">結果：
其他屬性也可用，如“高度”、“寬度”和“高度”
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">正如您所料，“height”和“width”屬性設置圖像的高度和寬度。通常，最好只設置其中一個，以便圖像正確縮放。如果同時使用這兩種方法，最終可能會得到拉伸或壓扁的圖像。
“alt”標記告訴瀏覽器，如果圖像無法顯示，將顯示什麼文本，最好包含在任何圖像中。如果有人有一個特別慢的連接或舊的瀏覽器，他們仍然可以得到什麼應該在你的網頁上的想法。
14
ordered list標籤允許您創建一個有序列表。一般來說，這意味著你會得到一個編號的列表。列表中的每個項都需要一個list item標記（），因此您的列表如下所示：
<ol><li>First thing</li><li>Second thing</li><li>Third thing</li></ol>結果：
- 第一件事
- 第二件事
- 第三件事
在HTML5中，可以使用來反轉數字的順序。您可以使用start屬性設置起始值。
“type”屬性允許您告訴瀏覽器列表項使用哪種類型的符號。可以將其設置為“1”、“A”、“A”、“I”或“I”，將列表設置為使用如下所示的符號顯示：
<ol type="A">15
無序列表比有序列表簡單得多。這只是一個項目符號列表。
<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>結果：
- 第一項
- 第二項
- 第三項
無序列表也有“type”屬性，您可以將其設置為“disc”、“circle”或“square”
16
雖然不贊成使用表格進行格式化，但很多時候您會希望使用行和列來分割頁面上的信息。要使一個表正常工作，需要幾個標籤。下面是示例HTML代碼：
<table><tbody><tr><th>1st column</th><th>2nd column</th></tr><tr><td>Row 1, column 1</td><td>Row 1, column 2</td></tr><td>Row 2, column 1</td><td>Row 2, column 2</td></tbody></table>和標記指定表的開始和結束。標記包含所有表內容。
表的每一行都包含在一個標記中。每行中的每個單元格都包裝在列標題的標記或列數據的標記中。每行的每一列都需要一個。
結果：
| 1st column | 2nd column |
|---|---|
| 第1行，第1列 | 第1行第2列 |
| 第2行，第1列 | 第2行，第2列 |
17
如果您正在引用其他網站或個人的報價，並且希望將報價與文檔的其餘部分分開，請使用blockquote標記。您所需要做的就是將報價包含在開始和結束blockquote標記中：
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>結果：
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
所使用的確切格式可能取決於所使用的瀏覽器或網站的CSS。但標籤保持不變。
繼續前進
有了這17個HTML示例（和計數），您應該能夠創建一個簡單的網站。要了解如何將它們放在一起，您可以下載我們的示例HTML頁面。在瀏覽器中打開它，查看所有代碼是如何組合在一起的，或者在文本編輯器中查看代碼的具體工作方式。
想要更多關於HTML的小巧玲瓏的課程，請嘗試這些用於編碼的微學習應用程序。
- 發表於 2021-03-18 02:34
- 閱讀 ( 48 )
- 分類：程式設計
你可能感興趣的文章
不涉及程式碼的程式設計師的10個愛好
... 如果你想玩正確的這一分鐘，最簡單的選擇將是檢查這些免費的基於瀏覽器的益智遊戲。如果你在**上，試試這些免費的**益智遊戲吧。喜歡手寫或印刷的拼圖嗎？也有一些很棒的網站。 ...
您需要了解的有關內容管理系統的所有資訊
...非技術使用者在web上的創作變得容易。有人誰想要釋出一個簡單的部落格可以註冊一個便宜的託管帳戶，點選幾個按鈕，並有一個CMS準備在幾分鐘內去。多花幾美元，託管公司甚至可以管理它的更新和維護。 ...
javascript壓縮器：如何以及為什麼縮小js
...應時間的一種方法（同時壓縮HTML），幸運的是，這是一個簡單的過程。今天我將向你展示你需要知道的一切。 ...
每天5分鐘學習一門新語言的6種快速方法
...從一種語言翻譯到你的母語，反之亦然，這使學習更快更簡單。 ...
如何透過3個簡單的步驟構建javascript幻燈片
... 這似乎是一個簡單的功能列表。自動模式將自動將影象前進到序列中的下一個影象。以下是我在編寫任何程式碼之前所做的粗略草圖： ...
如何使用架構.org你網站上的標記以及為什麼你應該
... 作為一個例子，我們將標記一個簡單的句子：“我住在丹佛。”在HTML中，它將被簡單地表示，如下所示： ...
透過精彩的youtube影片，學會以自己的速度畫畫
...彩色筆和畫筆，景觀教程更進一步。這些場景把你從一棵簡單的樹帶到雪山，再帶到遠處的城堡。逃離到一個寧靜的湖泊，參觀一個黑暗的森林，或乘坐熱氣球與這個偉大的收集繪畫影片。 ...
當你無法編寫程式碼時，如何製作iphone遊戲
...iOS專案並沒有什麼特別新穎的地方：“你在太空。你有一個簡單的宇宙飛船。你所要做的就是儘可能多地旅行，收集‘鑽石’解鎖其他船隻，這些船隻更耐用，操控水平也不同。” ...
什麼是javascript？它是如何工作的？
... JavaScript可以編寫函式，這裡有一個簡單的函式可以新增數字。 ...
10分鐘內可以學習10個簡單的css程式碼示例
... 下面是幾個簡單的CSS示例，向您展示如何在web頁面上進行一些基本的樣式更改。 ...
