HTML 是如何工作的？-html教程-PHP中文网

HTML 是一种基于标签的语言，用于开发网页； HTML 代表超文本标记语言。超文本是指网页链接在一起的方式。因此，网页上可用的链接称为超文本。它是一种标记语言，标签告诉浏览器如何在其上呈现页面。 Berners-Lee 在 1991 年底开发了它，但“HTML2.0”是 1995 年发布的第一个标准规范。后来，它的许多 HTML 版本出现了，例如 HTML 4.0；目前，它的最新版本是HTML5.0，在前端网站开发中非常有名。

HTML 页面的工作原理

让我们看看 HTML 页面的工作原理。

<!DOCTYPE html>
<html>
<head>
<title>title tag of html</title>
</head>
<body>
<h1>heading tag of html</h1>
<p>paragraph tag of html<p>
</body>
</html>

登录后复制

此标签定义文档的类型和 HTML 版本。

上面的标签包含了完整的 HTML 编程语言文档，包括由

... 表示的文档头。以及由 ... 表示的文档正文标签。

head 标签代表文档的标题，可以保留其他 HTML 标签，如

、<link> 等。等等 <h4></h4> <p>此标签在 </p> 内部使用标签来写入文档标题。 <h4></h4> <p><身体>标签代表文档的主体，其中保留其他 HTML 标签，如 </p> <div>、<h1>、</h1> <p> 等。等等</p> <h3>HTML作品的不同标签及其描述</h3> <p>HTML 工作原理的不同标签解释如下：</p> <h4><h1></h1></h4> <p>标题标签用于创建下面给出的标题示例的变体</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出</strong></p> <p>标题 1<br> 标题 2<br> 标题 3<br> 标题 4<br> 标题 5<br> 标题 6</p> <h4><p></h4> <p>这是一个段落标签，通过下面给出的示例可以更好地理解。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>This is a first paragraph of text.</p> <p>This is a second paragraph of text.</p> <p>This is a third paragraph of text.</p> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出</strong></p> <p>这是正文的第一段。<br> 这是正文的第二段。<br> 这是正文的第三段。</p> <h4><br /></h4> <p>该标签用于断行；当我们想要任何东西从下一行开始时，我们可以使用这个标签。它是一个单行标记，不需要结束标记。</p> <h4></h4> <p>将整个内容放在中心位置，这是该标签在网页创建中的主要用途。</p> <h4><hr></h4> <p>用于创建线条，主要用于绘制单线网页时。</p> <h4></h4> <p>这是HTML非常重要的标签；在某些情况下，我们希望显示的所有内容与 HTML 页面中编写的内容相同；在这些情况下，它是一个非常有用的标签。下面给出了示例。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre class="brush:php;toolbar:false"> Laravel is the PHP framework. It is an open source framework used in web application development. This framework is based on model view controller design pattern due to this project developed with help of this framework are more structured and manageable. This framework reuses the existing </pre> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出</strong></p> <p>Laravel 是 PHP 框架。它是一个用于网络的开源框架<br> 应用程序开发。该框架基于模型视图控制器<br> 在这个框架的帮助下开发的这个项目的设计模式是<br> 更加结构化和易于管理。该框架重用了现有的</p> <h4> </h4> <p>要打印单个空格，这在 HTML 中使用。</p> <h4>标签属性</h4> <p>我们可以在标签级别设置属性，示例如下</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Align Attribute</title> </head> <body> <p align = "left">Left aligned</p> <p align = "center">Center aligned</p> <p align = "right">Right aligned</p> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出</strong></p> <p>左对齐<br> 居中对齐<br> 右对齐</p> <h3>HTML 的核心属性</h3> <p>几乎所有以下 HTML 元素都使用了一些核心属性。</p> <ul> <li>身份证</li> <li>标题</li> <li>班级</li> <li>类型</li> </ul> <h4>1) 身份证号</h4> <p>该属性用于唯一标识页面中的HTML元素；同一元素可能已在 HTML 页面中的多个位置使用，通过 id 属性我们可以识别该元素及其内容，并且可以在 javascript 中用于其他目的。下面给出了示例。</p> <p><code><p id = "html">这是第一段，解释什么是 HTML 如何使用它</code></p> <code><p id = "html">This is first paragraph which explains what is HTML how to use it</p><br> <p id = "css">This it second para which explains what is Cascading Style Sheet and how to use it</p> </code> <p id="css">这是第二段，解释什么是级联样式表以及如何使用它</p> <p>说明 – 在上面的示例中，同一个元素被使用两次，仅通过 ID 来区分该元素。</p> <h4>2) 标题</h4> <p>此属性语法类似于 id 属性，此属性的用途取决于携带它的元素；虽然当光标移至元素上时它通常显示为工具提示，但这是该属性的主要用途。下面给出了示例 –</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> title Attribute Example</title> </head> <body> <h3 title = "Hello Title Example Test">Sleeping from the long time</h3> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出</strong></p> <p>睡了好久</p> <p>If we try to bring our cursor over “Sleeping from a long time”, we will see that whatever title we have used in our code is coming out as a tooltip of the cursor.</p> <h4>3) Class</h4> <p>The class attribute is used to associate an element with a style sheet and specifies the class of element. We will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS).Its main use is CSS. Value for this attribute may also be a space-separated list of class names. The example is given below –</p> <p><code>class = "className11 className12 className53"</code></p> <h4>4) Style</h4> <p>It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">This is style example text , it is red color...</p> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>Output</strong></p> <p>This is a style example text; it is red color…</p> <h3>Conclusion</h3> <p>As we saw many basics tags, the web page can be created with the help of these tags, which can be displayed to the end-user whenever a user requests the particular web page through his web browser, the work of displaying will be done by the web browser. Today lots of new tags exist into the market to make web pages more attractive.</p> </div>

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