\npython<\/h2>\n
Python is a new programming language<\/p>\n<\/article>\n<\/body>\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n![\"HTML-Artikel-Tag\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543858051215.png\")
<\/p>\n
Example #2<\/h4>\n
An example illustrates using attribute
with the CSS style. It makes use of CSS? to display well in the web browser.<\/p>\nCode:<\/strong><\/p>\n\n\nDemo of article<\/title>\n<\/head>\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n<article style=\"width: 200px; border: 1px solid black;\npadding: 8px; border-radius: 8px;\nmargin:6px;\">\n<article>\n<address>\nWritten by xxxxxx.<br>\nrefer me at: <br>\nhttps:\/\/www.educba.com\/ <br>\n<\/address>\n<\/article><\/pre>\n<p>The below output shows the visitors the web page with the address to the link.<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543858128891.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n<h4>Example #3<\/h4>\n<p>An example Demonstrating how to display a date and time with <article tag>.<\/p>\n\n\n<p><strong>Code:<\/strong><\/p>\n<pre><!DOCTYPE html>\n<head>\n<title>Demo of article tag<\/title>\n<\/head>\n<body>\n<article style=\"width: 200px; border: 1px solid black;\npadding: 8px; border-radius: 8px; color :green;\nmargin:6px;\">\n<article class=\"blog_post\">\n<p>My first article post. Stay tuned<\/p>\n<footer>\n<p>\nDisplayed on <time datetime=\"2019-12-24 20:00\"> Dec 23<\/time> by tutor\n<\/p>\n<\/footer>\n<\/article><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543858388034.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n<h4>Example #4<\/h4>\n<p>Example using multiple articles. The below code uses the semantic element <h1>to specify the most significant header within the HTML content.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><style>\n.JAN {\nmargin: 1;\npadding: .2rem;\nbackground-color: #D2691E;\nfont: 2rem 'Fira Sans', sans-serif;\n}\n.JAN > h1,\n.day {\nmargin: .4rem;\npadding: .2rem;\nfont-size: 1rem;\n}\n.day {\nbackground: border-box no-repeat\ngray;\n}\n.day > h2,\n.day > p {\nmargin: .2rem;\nfont-size: 1rem;\n}\n<\/style>\n<article class=\"JAN\">\n<h1>FEDERAL HOLIDAYS IN USA<\/h1>\n<article class=\"day\">\n<h2>01 JAN 2020<\/h2>\n<p>NEW YEAR DAY.<\/p>\n<p> martin luther day <\/p>\n<\/article>\n<article class=\"day\">\n<h2>18 feb 2020<\/h2>\n<p>Presidents day.<\/p>\n<\/article>\n<article class=\"day\">\n<h2>05 May 2020<\/h2>\n<h2>27 May 2020<\/h2>\n<p>mothers day.<\/p>\n<p>memorial day.<\/p>\n<\/article>\n<\/article><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543858477007.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n<h4>Example #5<\/h4>\n<p>We shall see the <article> tag is done with several <section> tags. Below are some pieces of code with output.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><style>\n.art {\nmargin: 5;\npadding: .3rem;\nbackground-color: #DC143C;\nfont: 1rem 'italic', sans-serif;\n}\n<\/style>\n<article class=\"art\">\n<section id=\"aim\">\n<p>[Main Objective]<\/p>\n<\/section>\n<section id=\"main_concept\">\n<p>[Content text]<\/p>\n<\/section>\n<section id=\"link page\">\n<ul>\n<li><a href=\"tt.html\">first link page<\/a><\/li>\n<li><a href=\"th.html\">second link page<\/a><\/li>\n<\/ul>\n<\/section>\n<\/article><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543858794568.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n\n\n<h4>Example #6<\/h4>\n<p><strong>Code:<\/strong><\/p>\n<pre><article>\n<header>\n<h1>On this page<\/h1>\n<p>Published on 15th DEC 2019<\/p>\n<\/header>\n<p>WELCOME<\/p>\n<p> EXAMPLES TOPIC<\/p>\n<p>ILLUSTRATION<\/p>\n<section>\n<h2>Related topics<\/h2>\n<article>\n<footer>\n<p>published by Mark winston<\/p>\n<\/footer>\n<p>This was a great article<\/p>\n<\/article>\n<article>\n<footer>\n<p>Posted by: Casey Brock<\/p>\n<\/footer>\n<p>What do you think about the topics with the comments please<\/p>\n<\/article>\n<\/section>\n<\/article><\/pre>\n<p>Here is a global header that contains web page headlines for any document with related content. Next comes the <footer> tag, which links to the footer for a particular website and benefits SEO? by providing the company details in the footer section. Finally, the true way of using <section> tag is to embed or group the related contents of a page or, in another way; I can say that they are the autonomous section structure.<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543859056330.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n<h4>Example #7<\/h4>\n<p>Article tag with the help of <main> tag.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre><!DOCTYPE html>\n<head>\n<title>Demo of article tag<\/title>\n<\/head>\n<main>\n<article>\n<h1>Cloud computing Basics<\/h1>\n<p>Used for data storage.<\/p>\n<section>\n<h2>Basic and syntax part<\/h2>\n<p>With an example.<\/p>\n<\/section>\n<section>\n<h2>Types of cloud computing services<\/h2>\n<p>Private , public , hybrid<\/p>\n<\/section>\n<\/article>\n<\/main><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543859116722.png\" alt=\"HTML-Artikel-Tag\" ><\/p>\n<h3>Conclusion<\/h3>\n<p>To conclude, this article covers several guides to use on a web page. They are an excellent choice to contain a document (they sense on their own) or content in a single web page, and they are known to be a perfect semantic element under HTML5. Being a self-contained context, it has been used in html5 as cutting-edge websites have started to take full advantage of this tag is rewarded by the user well in posting content like blogs and magazines.<\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/de/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://www.miracleart.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://www.miracleart.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://www.miracleart.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://www.miracleart.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://www.miracleart.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://www.miracleart.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://www.miracleart.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://www.miracleart.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('de')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="suchen" onclick="searchs('de')"><img src="/static/imghw/find.png" alt="suchen"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Deutsch<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:;" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Inhaltsverzeichnis</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-Does-Article-Tag-Work-in-HTML" title="How Does Article Tag Work in HTML?" >How Does Article Tag Work in HTML?</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Examples-to-Implement-HTML-Tag" title="Examples to Implement HTML Tag" >Examples to Implement HTML Tag</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Example" title="Example #7" >Example #7</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Conclusion" title="Conclusion" >Conclusion</a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/de/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>HTML-Artikel-Tag</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">HTML-Artikel-Tag</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/de/member/887227.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/de/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Sep 04, 2024 pm 04:29 PM</span>
<div id="377j5v51b" class="Articlelist_txts_infos">
<span id="377j5v51b" class="Articlelist_txts_infoss on">html</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">html5</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Tutorial</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Properties</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML tags</span>
</div>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>HTML Article Tag has been introduced in HTML5 as a new edition. More specifically, they are found to represent an article. It is specified as independent data and probably used in forum posts, magazine publications, blogs, and user-enabled comments. It is represented by <article> tag. Moreover, defining a stylish element on a web page is similar to the <div> element. This article tag supports all types of browsers: Google Chrome, opera, internet explorer, and Edge. They are unlike a section tag of the general section but act as a standalone content part.</p>
<p><strong>Syntax:</strong></p>
<p>Here let’s see the immediate syntax of these tag elements.</p>
<pre class="brush:php;toolbar:false"><article>
<h1>…</h1>
</article></pre>
<p>The structure follows the start tag. The next preceding section has <h1> tag or <h2> that forms a sub-heading, gives exact semantic information of the content, and provides much richer and more appropriate meaningful information. Like other tags, this article tag also supports HTML attributes like event attributes and global attributes for their appropriate class.</p>
<p><strong>Example of <article> tag:</strong></p>
<pre class="brush:php;toolbar:false"><article>
<h1>Introduction to? CSS demo</h1>
<p>CSS is a cascading Style Sheet helps to make a web page visually colored</p>
</article></pre>
<h3 id="How-Does-Article-Tag-Work-in-HTML">How Does Article Tag Work in HTML?</h3>
<p>This section will discuss a simple article tag (self-contained content in a document) and see how it works on a web page. HTML 5 introduces new semantic content to enrich the content in search engines. They do support global and event attributes for the content. The tag’s content is considered an independent document from the other content part on the single page. They can define or demonstrate an article’s name on the page, author information, and publication date. This <article> tag can be used as a single element and multiple <article> elements.</p>
<p>A document having a single article element explains the main content of the document. It has individual unique single content, whereas, in the case of multiple <article> tags, a page has various contents; in another way, they are equivalent <div> elements. The main aim of the <article> tag is to help HTML code in cleaning the content by reducing the work of the <div> element.</p>
<h3 id="Examples-to-Implement-HTML-Tag">Examples to Implement HTML Tag</h3>
<p>Below are the examples of implementing HTML Tag:</p>
<h4 id="Example">Example #1</h4>
<p>Example using Single <article > tag.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>HTML Article Tag demo</title>? </head>
<body>
<article>
<h2>python</h2>
<p>Python is a new programming language</p>
</article>
</body>
</html></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543858051215.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #2</h4>
<p>An example illustrates using attribute <address> with the CSS style. It makes use of CSS? to display well in the web browser.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<head>
<title>Demo of article</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px;
margin:6px;">
<article>
<address>
Written by xxxxxx.<br>
refer me at: <br>
https://www.educba.com/ <br>
</address>
</article></pre>
<p>The below output shows the visitors the web page with the address to the link.</p>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543858128891.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #3</h4>
<p>An example Demonstrating how to display a date and time with <article tag>.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px; color :green;
margin:6px;">
<article class="blog_post">
<p>My first article post. Stay tuned</p>
<footer>
<p>
Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor
</p>
</footer>
</article></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543858388034.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #4</h4>
<p>Example using multiple articles. The below code uses the semantic element <h1>to specify the most significant header within the HTML content.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><style>
.JAN {
margin: 1;
padding: .2rem;
background-color: #D2691E;
font: 2rem 'Fira Sans', sans-serif;
}
.JAN > h1,
.day {
margin: .4rem;
padding: .2rem;
font-size: 1rem;
}
.day {
background: border-box no-repeat
gray;
}
.day > h2,
.day > p {
margin: .2rem;
font-size: 1rem;
}
</style>
<article class="JAN">
<h1>FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2>01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2>18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2>05 May 2020</h2>
<h2>27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543858477007.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #5</h4>
<p>We shall see the <article> tag is done with several <section> tags. Below are some pieces of code with output.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543858794568.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #6</h4>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><article>
<header>
<h1>On this page</h1>
<p>Published on 15th DEC 2019</p>
</header>
<p>WELCOME</p>
<p> EXAMPLES TOPIC</p>
<p>ILLUSTRATION</p>
<section>
<h2>Related topics</h2>
<article>
<footer>
<p>published by Mark winston</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>What do you think about the topics with the comments please</p>
</article>
</section>
</article></pre>
<p>Here is a global header that contains web page headlines for any document with related content. Next comes the <footer> tag, which links to the footer for a particular website and benefits SEO? by providing the company details in the footer section. Finally, the true way of using <section> tag is to embed or group the related contents of a page or, in another way; I can say that they are the autonomous section structure.</p>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543859056330.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h4 id="Example">Example #7</h4>
<p>Article tag with the help of <main> tag.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<main>
<article>
<h1>Cloud computing Basics</h1>
<p>Used for data storage.</p>
<section>
<h2>Basic and syntax part</h2>
<p>With an example.</p>
</section>
<section>
<h2>Types of cloud computing services</h2>
<p>Private , public , hybrid</p>
</section>
</article>
</main></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543859116722.png" class="lazy" alt="HTML-Artikel-Tag" ></p>
<h3 id="Conclusion">Conclusion</h3>
<p>To conclude, this article covers several guides to use on a web page. They are an excellent choice to contain a document (they sense on their own) or content in a single web page, and they are known to be a perfect semantic element under HTML5. Being a self-contained context, it has been used in html5 as cutting-edge websites have started to take full advantage of this tag is rewarded by the user well in posting content like blogs and magazines.</p><p>Das obige ist der detaillierte Inhalt vonHTML-Artikel-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Erkl?rung dieser Website</div>
<div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hei?e KI -Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Ausziehbilder kostenlos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>KI-gestützte App zum Erstellen realistischer Aktfotos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>KI-Kleiderentferner</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hei?e Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Einfach zu bedienender und kostenloser Code-Editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 chinesische Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 chinesische Version</h3>
</a>
<p>Chinesische Version, sehr einfach zu bedienen</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Senden Sie Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Senden Sie Studio 13.0.1</h3>
</a>
<p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visuelle Webentwicklungstools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac-Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac-Version</h3>
</a>
<p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hei?e Themen</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8639</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1785</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1581</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1445</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/faq/zt">Mehr anzeigen</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796829177.html" title="Was sind die wesentlichen HTML -Elemente für die Strukturierung einer Webseite?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148129241939.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind die wesentlichen HTML -Elemente für die Strukturierung einer Webseite?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796829177.html" title="Was sind die wesentlichen HTML -Elemente für die Strukturierung einer Webseite?" class="phphistorical_Version2_mids_title">Was sind die wesentlichen HTML -Elemente für die Strukturierung einer Webseite?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:34 AM</span>
<p class="Articlelist_txts_p">Die Webseitenstruktur muss durch Kern -HTML -Elemente unterstützt werden. 1. Die Gesamtstruktur der Seite besteht aus dem Stammelement, das Meta -Informationen speichert und den Inhalt anzeigt. 2. Die Inhaltsorganisation stützt sich auf Titel (-), Absatz () und Block-Tags (wie), um die Organisationsstruktur und die SEO zu verbessern; 3. Die Navigation wird durch und implementiert, h?ufig verwendete Organisationen werden mit dem Aria-Strom-Attribut verknüpft und erg?nzt, um die Zug?nglichkeit zu verbessern. 4. Formularinteraktion beinhaltet und, um die vollst?ndigen Eingabebereich- und Einreichungsfunktionen zu gew?hrleisten. Die ordnungsgem??e Verwendung dieser Elemente kann die Klarheit, Wartung und Suchmaschinenoptimierung der Seiten verbessern.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796829157.html" title="Umgang mit Wiederverbindungen und Fehlern mit HTML5-Server-Sent-Ereignissen." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148089165625.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Umgang mit Wiederverbindungen und Fehlern mit HTML5-Server-Sent-Ereignissen." />
</a>
<a href="http://www.miracleart.cn/de/faq/1796829157.html" title="Umgang mit Wiederverbindungen und Fehlern mit HTML5-Server-Sent-Ereignissen." class="phphistorical_Version2_mids_title">Umgang mit Wiederverbindungen und Fehlern mit HTML5-Server-Sent-Ereignissen.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">Bei Verwendung von HTML5SSE sind die Methoden zur Umsetzung mit Wiederverbindung und Fehlern: 1. Verst?ndnis des Standard -Wiederverbindungsmechanismus. EventSource erneut 3 Sekunden nach der Unterbrechung der Verbindung standardm??ig unterbrochen. Sie k?nnen das Intervall über das Wiederholungsfeld anpassen. 2. H?ren Sie sich das Fehlerereignis an, um mit Verbindungsfehler oder Parsenfehlern umzugehen, Fehlertypen zu unterscheiden und die entsprechende Logik auszuführen, z. B. Netzwerkprobleme, die sich auf automatische Wiederverbindung stützen, Serverfehler die Wiederverbindung und Authentifizierungsfehler aktualisieren. 3. Steuern Sie aktiv die Wiederverbindungslogik, wie z. B. manuelles Schlie?en und Wiederaufbau der Verbindung, die maximale Anzahl von Wiederholungszeiten und kombinieren Navigator. Diese Ma?nahmen k?nnen die Anwendungsstabilit?t und die Benutzererfahrung verbessern.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796829178.html" title="Deklarieren Sie den richtigen HTML5 -DocType für moderne Seiten." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148132111973.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Deklarieren Sie den richtigen HTML5 -DocType für moderne Seiten." />
</a>
<a href="http://www.miracleart.cn/de/faq/1796829178.html" title="Deklarieren Sie den richtigen HTML5 -DocType für moderne Seiten." class="phphistorical_Version2_mids_title">Deklarieren Sie den richtigen HTML5 -DocType für moderne Seiten.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:35 AM</span>
<p class="Articlelist_txts_p">DocType ist eine Anweisung, die dem Browser mitteilt, mit dem HTML -Standard die Seite analysiert werden soll. Moderne Webseiten müssen nur zu Beginn der HTML -Datei geschrieben werden. Seine Funktion besteht darin, sicherzustellen, dass der Browser die Seite eher im Standardmodus als im seltsamen Modus rendert und sich in der ersten Zeile befinden muss, ohne Leerzeichen oder Kommentare davor. Es gibt nur einen richtigen Weg, um es zu schreiben, und es wird nicht empfohlen, alte Versionen oder andere Varianten zu verwenden. Andere wie Charset, Ansichtsfenster usw. sollten teilweise platziert werden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796829167.html" title="Implementierung der Client-Seite-Formularvalidierung mithilfe von HTML-Attributen." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148109151878.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implementierung der Client-Seite-Formularvalidierung mithilfe von HTML-Attributen." />
</a>
<a href="http://www.miracleart.cn/de/faq/1796829167.html" title="Implementierung der Client-Seite-Formularvalidierung mithilfe von HTML-Attributen." class="phphistorical_Version2_mids_title">Implementierung der Client-Seite-Formularvalidierung mithilfe von HTML-Attributen.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">Client-sideFormvalidationCanbedoneWithoutjavaScriptByusinghtmlattributes.1) UseSequeured toEnforcemandatoryfields.2) ValateMailsandurlswithTypeattributes-?hnlichemailorurl, orusepatternwithrExforcustomformaten</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796829956.html" title="Wie Gruppenoptionen innerhalb einer Dropdown -Abteilung mit HTML Gruppieren?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175157020270129.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Wie Gruppenoptionen innerhalb einer Dropdown -Abteilung mit HTML Gruppieren?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796829956.html" title="Wie Gruppenoptionen innerhalb einer Dropdown -Abteilung mit HTML Gruppieren?" class="phphistorical_Version2_mids_title">Wie Gruppenoptionen innerhalb einer Dropdown -Abteilung mit HTML Gruppieren?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 04, 2025 am 03:16 AM</span>
<p class="Articlelist_txts_p">Verwenden Sie Tags in HTML, um Optionen im Dropdown-Menü zu Gruppoptionen zu erhalten. Die spezifische Methode besteht darin, eine Gruppe von Elementen zu wickeln und den Gruppennamen über das Label -Attribut zu definieren, wie z. B.: 1. Enth?lt Optionen wie ?pfel, Bananen, Orangen usw.; 2. Enth?lt Optionen wie Karotten, Brokkoli usw.; 3. jeweils ist eine unabh?ngige Gruppe, und die Optionen innerhalb der Gruppe werden automatisch eingerichtet. Zu den Notizen geh?ren: ① Es wird keine Verschachtung unterstützt; ② Die gesamte Gruppe kann über das behinderte Attribut deaktiviert werden. ③ Der Stil ist eingeschr?nkt und muss in Kombination mit CSS- oder Drittanbieterbibliotheken versch?nert werden. Plug-Ins wie Select2 k?nnen zur Verbesserung der Funktionen verwendet werden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796835653.html" title="Integration von CSS und JavaScript effektiv in die HTML5 -Struktur." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175226046128038.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Integration von CSS und JavaScript effektiv in die HTML5 -Struktur." />
</a>
<a href="http://www.miracleart.cn/de/faq/1796835653.html" title="Integration von CSS und JavaScript effektiv in die HTML5 -Struktur." class="phphistorical_Version2_mids_title">Integration von CSS und JavaScript effektiv in die HTML5 -Struktur.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span>
<p class="Articlelist_txts_p">HTML5, CSS und JavaScript sollten effizient mit semantischen Tags, angemessenen Ladereihenfolge und Entkopplungsdesign kombiniert werden. 1. Verwenden Sie HTML5-Semantik-Tags, wie z. B. die Verbesserung der strukturellen Klarheit und Wartbarkeit, was dem SEO und barrierefreien Zugang f?rderlich ist. 2. CSS sollte eingerichtet werden, externe Dateien verwenden und nach dem Modul aufgeteilt werden, um Inline -Stile und verz?gerte Ladeprobleme zu vermeiden. 3. JavaScript wird empfohlen, voran vorzugehen, und verwenden Sie Defer oder Async, um asynchron zu laden, um das Blockieren des Renders zu vermeiden. 4. Reduzieren Sie die starke Abh?ngigkeit zwischen den drei, führen Sie das Verhalten durch Datenattribute und den Status der Klassennamen und verbessern Sie die Zusammenarbeit Effizienz durch einheitliche Benennungsspezifikationen. Diese Methoden k?nnen die Seitenleistung effektiv optimieren und mit Teams zusammenarbeiten.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796831880.html" title="Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182671121571.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796831880.html" title="Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements" class="phphistorical_Version2_mids_title">Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">Um HTML -Schaltfl?chenelemente zu verwenden, um anklickbare Schaltfl?chen zu erreichen, müssen Sie zun?chst die grundlegende Verwendung und gemeinsame Vorsichtsma?nahmen beherrschen. 1. Erstellen Sie Schaltfl?chen mit Tags und definieren Sie Verhaltensweisen durch Typattribute (z. B. Schaltfl?che, Senden, Zurücksetzen), die standardm??ig übermittelt werden. 2. Fügen Sie interaktive Funktionen über JavaScript hinzu, die über ID geschrieben werden k?nnen, um Ereignish?rer zu verbinden, um die Wartung zu verbessern. 3.. Verwenden Sie CSS, um Stile anzupassen, einschlie?lich Hintergrundfarbe, Grenze, abgerundete Ecken und Schwebe-/aktive Statusffekte, um die Benutzererfahrung zu verbessern. 4. Achten Sie auf h?ufige Probleme: Stellen Sie sicher, dass das behinderte Attribut nicht aktiviert ist. Meistere das</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796832574.html" title="Senden von Formulardaten mit neuen HTML5 -Methoden (FormData)" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191288234525.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Senden von Formulardaten mit neuen HTML5 -Methoden (FormData)" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796832574.html" title="Senden von Formulardaten mit neuen HTML5 -Methoden (FormData)" class="phphistorical_Version2_mids_title">Senden von Formulardaten mit neuen HTML5 -Methoden (FormData)</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">Es ist bequemer, Formulardaten mithilfe der FormData -API von HTML5 einzureichen. 1. Es kann automatisch Formularfelder mit Namensattribut erfassen oder manuell Daten hinzufügen. 2. Es unterstützt die Einreichung im Multipart/Form-Daten-Format über Fetch oder XMLHTTPrequest, das für das Datei-Upload geeignet ist. 3. Wenn Sie Dateien bearbeiten, müssen Sie die Datei nur an Formdata anh?ngen und eine Anfrage senden. V.</p>
</div>
</div>
<a href="http://www.miracleart.cn/de/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/de/about/us.html">über uns</a>
<a href="http://www.miracleart.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://www.miracleart.cn/de/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="0uaae" class="pl_css_ganrao" style="display: none;"><em id="0uaae"><blockquote id="0uaae"><tfoot id="0uaae"></tfoot></blockquote></em><tbody id="0uaae"></tbody><center id="0uaae"></center><table id="0uaae"></table><tfoot id="0uaae"><rt id="0uaae"><code id="0uaae"></code></rt></tfoot><center id="0uaae"></center><cite id="0uaae"></cite><abbr id="0uaae"><sup id="0uaae"><dd id="0uaae"></dd></sup></abbr><rt id="0uaae"><tbody id="0uaae"><pre id="0uaae"></pre></tbody></rt><dd id="0uaae"></dd><wbr id="0uaae"></wbr><bdo id="0uaae"><option id="0uaae"><delect id="0uaae"></delect></option></bdo><tbody id="0uaae"><pre id="0uaae"><xmp id="0uaae"></xmp></pre></tbody><em id="0uaae"><del id="0uaae"><dfn id="0uaae"></dfn></del></em><acronym id="0uaae"><xmp id="0uaae"><fieldset id="0uaae"></fieldset></xmp></acronym><center id="0uaae"></center><xmp id="0uaae"><cite id="0uaae"><table id="0uaae"></table></cite></xmp><abbr id="0uaae"></abbr><button id="0uaae"></button><input id="0uaae"></input><delect id="0uaae"></delect><button id="0uaae"><dd id="0uaae"><th id="0uaae"></th></dd></button><table id="0uaae"></table><li id="0uaae"></li><table id="0uaae"></table><small id="0uaae"></small><source id="0uaae"></source><strike id="0uaae"></strike><button id="0uaae"></button><small id="0uaae"><button id="0uaae"><samp id="0uaae"></samp></button></small><dl id="0uaae"><optgroup id="0uaae"><abbr id="0uaae"></abbr></optgroup></dl><abbr id="0uaae"></abbr><kbd id="0uaae"></kbd><tr id="0uaae"></tr><tr id="0uaae"></tr><tr id="0uaae"></tr><code id="0uaae"></code><tbody id="0uaae"></tbody><td id="0uaae"></td><abbr id="0uaae"></abbr><abbr id="0uaae"></abbr><xmp id="0uaae"></xmp><source id="0uaae"></source><wbr id="0uaae"></wbr><em id="0uaae"></em><tr id="0uaae"><pre id="0uaae"><xmp id="0uaae"></xmp></pre></tr><dd id="0uaae"></dd><blockquote id="0uaae"></blockquote><th id="0uaae"><object id="0uaae"><small id="0uaae"></small></object></th><source id="0uaae"></source><blockquote id="0uaae"><strike id="0uaae"><input id="0uaae"></input></strike></blockquote><acronym id="0uaae"></acronym><bdo id="0uaae"></bdo><li id="0uaae"><button id="0uaae"><dd id="0uaae"></dd></button></li><button id="0uaae"></button><tr id="0uaae"></tr><bdo id="0uaae"></bdo><em id="0uaae"><blockquote id="0uaae"><dfn id="0uaae"></dfn></blockquote></em><abbr id="0uaae"></abbr><blockquote id="0uaae"></blockquote><rt id="0uaae"><tbody id="0uaae"><em id="0uaae"></em></tbody></rt><cite id="0uaae"></cite><nav id="0uaae"></nav><blockquote id="0uaae"><strike id="0uaae"><rt id="0uaae"></rt></strike></blockquote><input id="0uaae"></input><source id="0uaae"><code id="0uaae"><noframes id="0uaae"></noframes></code></source><button id="0uaae"></button><em id="0uaae"></em><del id="0uaae"></del><center id="0uaae"></center><ul id="0uaae"></ul><dd id="0uaae"></dd><nav id="0uaae"></nav><delect id="0uaae"></delect><center id="0uaae"></center><tr id="0uaae"><pre id="0uaae"><xmp id="0uaae"></xmp></pre></tr><tbody id="0uaae"></tbody><delect id="0uaae"></delect><th id="0uaae"></th><code id="0uaae"></code><abbr id="0uaae"><delect id="0uaae"><tr id="0uaae"></tr></delect></abbr><kbd id="0uaae"></kbd><dfn id="0uaae"></dfn><kbd id="0uaae"></kbd><sup id="0uaae"></sup><abbr id="0uaae"></abbr><dfn id="0uaae"></dfn><td id="0uaae"></td><source id="0uaae"></source><noframes id="0uaae"><del id="0uaae"><tfoot id="0uaae"></tfoot></del></noframes><abbr id="0uaae"></abbr><abbr id="0uaae"></abbr><cite id="0uaae"></cite><samp id="0uaae"><tbody id="0uaae"><object id="0uaae"></object></tbody></samp><strong id="0uaae"></strong><samp id="0uaae"><th id="0uaae"><object id="0uaae"></object></th></samp><strike id="0uaae"><menu id="0uaae"></menu></strike></div>
</html>