Web 開發是當今最受歡迎的技能之一。它涉及創建可透過瀏覽器訪問的用戶友好且引人入勝的網站。成為 Web 開發人員的第一步是了解 HTML。
HTML(超文本標記語言)是任何網頁的支柱。它是用來建立網頁的標準語言,決定內容在瀏覽器中的顯示方式。雖然頁面的外觀由CSS (層疊樣式表) 決定,其功能由JS (Javascript) 決定,HTML 負責基本骨架或結構。
在深入學習這部分課程之前,了解您的旅程中將使用的著名和反覆出現的術語非常重要。這些將幫助您隨著我們的進展理解概念(也讓作者更容易解釋事情;-))。
的標籤(paragraph) 在其中,瀏覽器建立一個主體節點,並以段落節點作為其子節點。
) 將被視為 div 的子層級。
HTML 代表 超文本標記語言
超文本:指 HTML 將不同文件連結在一起的能力。
標記語言:使用標籤來註釋文本,定義文本在瀏覽器中的顯示方式。
這是 HTML 文件的基本結構:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <p>Hello, world!</p> </body> </html>
標籤:在 HTML 中,標籤用來定義元素。標籤括在尖括號中,例如 或
。
元素:由開始標籤和結束標籤組成,其中可能包含內容。例如,
你好,世界!
是一個段落元素。每個 HTML 文件都遵循一個基本結構:
Here are some basic HTML elements you’ll use frequently:
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.Let’s take a step further by creating a simple table in HTML:
<p>Table Example</p> <table> <tr> <th>Name</th> <th>Power</th> <th>Is Kurama Present</th> </tr> <tr> <td>Naruto</td> <td>Rasengan</td> <td>Yes</td> </tr> <tr> <td>Sasuke</td> <td>Sharingan</td> <td>No</td> </tr> </table>
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
Note that