首頁  >  文章  >  web前端  >  什麼是 HTML?

什麼是 HTML?

WBOY
WBOY原創
2024-09-04 16:12:30797瀏覽

超文本標記語言(HTML)是一種允許創建任何連接到互聯網的人都可以查看的網站的語言。 根據一項調查,超過 55% 的受訪者表示他們使用 HTML。

此外,學習 HTML 通常是任何 Web 開發人員旅程的第一步。 Web 開發人員的平均年收入為 61,718 美元,頂級開發人員的年收入突破了 103,000 美元大關。

超文本是一種透過點擊稱為超連結的文字進入下一頁的上網方式。

什麼是 HTML?

要點

  • 基本程式碼由 doctype 宣告、HTML 標籤、head 標籤、title 標籤和 body 標籤組成。
  • 它可以在任何作業系統(例如 Windows、Mac 和 Linux)以及任何瀏覽器(例如​​ Google Chrome、Mozilla Firefox 和 Safari)上運行。
  • 它還有各種應用程序,例如創建個人部落格、詳細資料表、註冊表、登陸頁面、新聞通訊和線上作品集。
  • 優點是它是一個開放標準,易於學習,適合初學者,具有良好的社區支持,並且對搜尋引擎友好。
  • 缺點包括安全性差、缺乏設計彈性、在各種瀏覽器上輸出不一致、功能有限。

HTML 子集

1. XHTML(可擴充超文本標記語言)

  • XHTML 是一種基於 XML 的標記語言,這意味著它遵循嚴格的語法和語義規則。
  • XHTML 是 HTML 4 的繼承者,旨在使語言更加模組化和可擴展。
  • XHTML 文件必須格式正確且有效,這使得它們更難以創建,並且更加一致且可供更廣泛的設備存取。

2. SGML(標準通用標記語言)

  • SGML 是一種用來定義標記語言(包括 HTML)的元語言。
  • SGML 提供了描述文件結構和內容的標準語法,使其對於在不同系統之間交換資訊非常有用。
  • SGML 是一個複雜且強大的系統,但其語法和複雜性使其不如 HTML 等簡單標記語言廣泛使用。

3. DHTML(動態 HTML)

  • DHTML 是指使用 HTML、CSS 和 JavaScript 建立動態、互動式網頁。
  • DHTML 允許操作網頁的內容、版面配置和行為以回應使用者操作,而無需重新整理頁面。
  • DHTML 廣泛用於建立動態效果,例如下拉式選單、工具提示和幻燈片放映。
  • 它還可以創建簡單的動畫和遊戲。

4. TTML2(定時文字標記語言 2)

  • TTML2 是一種標記語言,用於以標準化方式表示定時文字內容,例如字幕和副標題。
  • TTML2 提供了一套全面的功能,用於設定定時文字的格式和樣式,包括對多種語言和字體樣式的支援。
  • TTML2 是確保聾啞和聽力障礙使用者可存取多媒體內容以及提高所有使用者影片內容可用性的重要工具。

HTML 範本

每個 HTML 頁面都有一個基本模板。它由以下部分組成:

文件類型聲明:HTML 文件的第一行是 doctype 或文件類型聲明,它定義了所使用的 HTML 版本。

文法:

<!DOCTYPE html>

Element:該元素是 HTML 文件的根元素,包含所有其他元素。

文法:

<html>...</html>

Head 元素:head 元素包含有關文件的信息,例如標題、元資料以及指向外部資源(例如樣式表)的連結。

文法:

<head>...</head>

Title 元素:title 元素定義文件的標題,該標題顯示在瀏覽器的標題列中。

文法:

<title>Name of Web Page</title>

Body元素:body元素包含文件的主要內容,包括文字、圖像和其他媒體。

文法:

<body>...</body>

除了這些基本標籤之外,其他幾個元素可以幫助添加內容以創建一個出色的網站。這些是-

標題:標題(H1、H2、H3 等)有助於建構內容並提供資訊的層次結構。

文法:

<h1>Main Heading</h1>

段落:段落 (

) 有助於定義文字區塊。

文法:

<p>Hello World</p>

連結:連結 () 允許使用者導航到其他網頁或其他資源。

文法:

<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>

Images: Images () can provide visual content in a document.

Syntax:

<img src="image.jpg" alt="Image Description">

Code:

<!DOCTYPE html>


EDUCBA’s Page


Hello World! This is EDUCBA’s first web page.

Output:

什麼是 HTML?

How to Create an HTML Table?

There are specific table tags to create a table – mainly,

, , and
,
.

Pre-requisites for HTML Table

For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.

  • : Defines a table
  • : Defines a table row
  • : Defines a table header cell
  • : Defines a table data cell

    Student Details Table

    John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.

    Name Mathematics Science
    Mary 78 92
    Susan 98 84
    Amy 63 79

    Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-

    Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.

    Step #2: Select File > New Text File.

    什麼是 HTML?

    Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.

    什麼是 HTML?

    Step #4: Again, go to File > Save As and save the file with the filename.html format.

    什麼是 HTML?

    什麼是 HTML?

    Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    

    Output:

    什麼是 HTML?

    Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”

    什麼是 HTML?

    Step #6: Now, define the table using the

    tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag, and adding the data in each cell using
    tag. Don’t forget to close the tags with a corresponding closing tag.

    Code:

    <table>
    <tr>
    <th>Name</th>
    <th>Mathematics</th>
    <th>Science</th>
    </tr>
    </table>

    Save the file and refresh the webpage to see the updated output:

    什麼是 HTML?

    Step #7: Add the student details by defining a row for each student using

    tag. Close the table with the
    tag.

    Code:

    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>

    Once again, save and refresh the webpage to see the final output:

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>
    
    Name Mathematics Science

    Applications of HTML

    Application How Does HTML Help?
    Web pages To create web pages, provide the structure and content for displaying information in a web browser.

     

    E-commerce To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.

     

    Landing pages To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.

     

    Newsletters It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.

     

    Online portfolios To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.

     

    Blogs One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
    Documentation It helps to create documentation and help files, providing information and guidance to users of the software and other products.

     

    Advertisements It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.

     

    Forms To create a form, one can use
    elements.

     

    Advantages and Disadvantages

    Pros Cons
    Open Standard: It is free of cost and readily available. Limited Functionality: It cannot perform complex tasks like calculations or data storage.
    Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers. Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
    Search Engine Friendly: Search engines can easily crawl and index the content of the pages. Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
    Community Support: It has large community support and many online resources available for learning and troubleshooting. Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.

    Final Thoughts

    In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.

    FAQs

    Q1. How to convert an HTML to PDF?

    Answer: To convert, use a library or online service that supports HTML to PDF conversion.

    Q2. How to add an image in HTML?

    Answer: To add an image, use the tag with the src attribute pointing to the image file’s URL or local path. Example:

    <img src="image.jpg" alt="Alt text">

    Q3. Is HTML a programming language? What is the HTML used for?

    Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.

    Q4. How to add a video in HTML?

    Answer: To add a video, use the

    <video src="video.mp4"></video>

    One can also add controls to play, pause, and adjust volume with the controls attribute:

    <video src="video.mp4" controls></video>

    Q5. Is HTML case-sensitive?

    Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.

    Q6. How many tags are in HTML?

    Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.

    Q7. What is HTML doctype?

    Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:

    <!DOCTYPE html>

     Q8. What is an HTML header?

    Answer: The HTML

    tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.

    以上是什麼是 HTML?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    上一篇:HTML 簡介下一篇:HTML 簡介