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

首页

web前端

html教程

HTML 是如何工作的？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:13 PM

htmlhtml5HTML TutorialHTML PropertiesHTML tags

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

HTML 页面的工作原理

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



<title>title tag of html</title>


<h1 id="heading-tag-of-html">heading tag of html</h1>
<p>paragraph tag of html</p><p>

</p>

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

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

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

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

、<link> 等。等等 <h4></h4> <p>此标签在 </p> 内部使用标签来写入文档标题。 <h4></h4> <p>标签代表文档的主体，其中保留其他 HTML 标签，如 </p> <div>、<h1 id="">、</h1> <p> 等。等等</p> <h3 id="HTML作品的不同标签及其描述">HTML作品的不同标签及其描述</h3> <p>HTML 工作原理的不同标签解释如下：</p> <h4><h1></h1></h4> <p>标题标签用于创建下面给出的标题示例的变体</p> <pre class="brush:php;toolbar:false"> <title>Heading Example</title> <h1 id="Heading">Heading 1</h1> <h2 id="Heading">Heading 2</h2> <h3 id="Heading">Heading 3</h3> <h4 id="Heading">Heading 4</h4> <h5 id="Heading">Heading 5</h5> <h6 id="Heading">Heading 6</h6> </pre> <p><strong>输出</strong></p> <p>标题 1<br> 标题 2<br> 标题 3<br> 标题 4<br> 标题 5<br> 标题 6</p> <h4></h4> <p> </p> <p>这是一个段落标签，通过下面给出的示例可以更好地理解。</p> <pre class="brush:php;toolbar:false"> <title>Paragraph Example</title> <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> </pre> <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> <pre class="brush:php;toolbar:false"> <title>Preserve Formatting Example</title> <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> </pre> <p><strong>输出</strong></p> <p>Laravel 是 PHP 框架。它是一个用于网络的开源框架<br> 应用程序开发。该框架基于模型视图控制器<br> 在这个框架的帮助下开发的这个项目的设计模式是<br> 更加结构化和易于管理。该框架重用了现有的</p> <h4 id=""> </h4> <p>要打印单个空格，这在 HTML 中使用。</p> <h4 id="标签属性">标签属性</h4> <p>我们可以在标签级别设置属性，示例如下</p> <pre class="brush:php;toolbar:false"> <title>Align Attribute</title> <p align="left">Left aligned</p> <p align="center">Center aligned</p> <p align="right">Right aligned</p> </pre> <p><strong>输出</strong></p> <p>左对齐<br> 居中对齐<br> 右对齐</p> <h3 id="HTML-的核心属性">HTML 的核心属性</h3> <p>几乎所有以下 HTML 元素都使用了一些核心属性。</p> <ul> <li>身份证</li> <li>标题</li> <li>班级</li> <li>类型</li> </ul> <h4 id="身份证号">1) 身份证号</h4> <p>该属性用于唯一标识页面中的HTML元素；同一元素可能已在 HTML 页面中的多个位置使用，通过 id 属性我们可以识别该元素及其内容，并且可以在 javascript 中用于其他目的。下面给出了示例。</p> <p><code><p id="html">这是第一段，解释什么是 HTML 如何使用它</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> </code></p> <p>说明 – 在上面的示例中，同一个元素被使用两次，仅通过 ID 来区分该元素。</p> <h4 id="标题">2) 标题</h4> <p>此属性语法类似于 id 属性，此属性的用途取决于携带它的元素；虽然当光标移至元素上时它通常显示为工具提示，但这是该属性的主要用途。下面给出了示例 –</p> <pre class="brush:php;toolbar:false"> <title> title Attribute Example</title> <h3 id="Sleeping-from-the-long-time">Sleeping from the long time</h3> </pre> <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 id="Class">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 id="Style">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> <pre class="brush:php;toolbar:false"> <title>The style Attribute</title> <p style="font-family:arial; color:#FF0000;">This is style example text , it is red color...</p> </pre> <p><strong>Output</strong></p> <p>This is a style example text; it is red color…</p> <h3 id="Conclusion">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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

什么是自我关闭标签？举一个例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexpthementneedingAseparateCloseTag，SightifyingmarkingmarkupStrupupStruptoReanDenhancingCodingsifice.1）shemeSsentialInxmmllforelementsswithcontentsswithcontent contentcontent，可确保wellwell-formedDocuments.2）Inhtmlible5，inhtmlibut forfix

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。