什么是 HTML？

超文本标记语言（HTML）是一种允许创建任何连接到互联网的人都可以查看的网站的语言。 根据一项调查，超过 55% 的受访者表示他们使用 HTML。

此外，学习 HTML 通常是任何 Web 开发人员旅程的第一步。 Web 开发人员的平均年收入为 61,718 美元，顶级开发人员的年收入突破了 103,000 美元大关。

超文本是一种通过单击称为超链接的文本进入下一页的上网方式。

要点

• 基本代码由 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 版本。

语法：

<p><strong>Element</strong>：该元素是 HTML 文档的根元素，包含所有其他元素。</p>
<p><strong>语法：</strong></p>
<pre class="brush:php;toolbar:false">...

Head 元素：head 元素包含有关文档的信息，例如标题、元数据以及指向外部资源（例如样式表）的链接。

语法：

...

Title 元素：title 元素定义文档的标题，该标题显示在浏览器的标题栏中。

语法：

<title>Name of Web Page</title>

Body元素：body元素包含文档的主要内容，包括文本、图像和其他媒体。

语法：

...

除了这些基本标签之外，其他几个元素可以帮助添加内容以创建一个出色的网站。这些是-

标题：标题（H1、H2、H3 等）有助于构建内容并提供信息的层次结构。

语法：

<h1 id="Main-Heading">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="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Image Description">

Code:

<title>EDUCBA’s Page</title>


<p> Hello World! This is EDUCBA’s first web page. </p>

Output:

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.



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.



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





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:

<title>Student Details</title>

Output:



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



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:

Name	Mathematics	Science

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



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:

<title>Student Details</title>

<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="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" 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:

<h4 id="Q-What-is-an-HTML-header"> Q8. What is an HTML header?</h4>
<p><strong>Answer: </strong>The HTML <header> 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.</header></p>

以上是什么是 HTML？的详细内容。更多信息请关注PHP中文网其他相关文章！