1. \n
      \nThe Web browser is ignored space,?? line breaks, and other formatting characters of text.\nIf you wanted some?? format then tag or attribute must have used every time.\nPre tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.\nIt is?? changed when CSS tags are applied.\nPre tag in HTML shows the? preformatted text of the content.\n<\/pre>\n<\/body>\n<\/html><\/pre>\n

      輸出:<\/strong><\/p>\n

      \"HTML<\/p>\n

      上面代碼的解釋:<\/strong>展示上面的例子。當預標記應用于內容的所需部分時,內容看起來按原樣格式化。當前置標簽應用于文本時,空格和下一行不會被忽略。<\/p>\n

      2.在 Html 中不使用 Pre 標記<\/h4>\n

      代碼:<\/b><\/p>\n

      \n\n\n using pre tag in html <\/title>\n<\/head>\n<body>
      <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\nThe Web browser is ignored space, line breaks, and other\nformatting characters of text.\nIf you wanted some format then tag or attribute must have\nused every time.\nThis tag is used to remove this drawback. Pre tag used to\nkeep text format as it is. It is changed when CSS tags are applied.\nThis pre tag shows the preformatted text of the content.\n<\/body>\n<\/html><\/pre>\n<p><strong>輸出:<\/strong><\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543832530930.jpg\" alt=\"HTML 中的預標記\" ><\/p>\n<p><strong>上面代碼的解釋:<\/strong>展示上面的例子,這是沒有使用它的。自動忽略空格、換行符和換行符。網頁根據他們的要求顯示內容。為了留出空間并打破界限,我們必須使用 HTML 標簽。<\/p>\n\n\n<h4>3.使用 HTML 其他標簽<\/h4>\n<p><b>代碼:<\/b><\/p>\n<pre><!DOCTYPE>\n<html>\n<head>\n<title> using pre tag in html <\/title>\n<\/head>\n<body>\nThe Web browser is ignored space,         line breaks, and other formatting characters of text.<br>\nIf you wanted some    ? format then tag or attribute must have used every time.<br>\nThis is used to remove its drawback. Pre tag used to keep text format as it is.<br> It is changed when CSS tags are applied. <br>\nIt shows preformatted text of the content.<br>\n<\/body>\n<\/html><\/pre>\n<p><strong>輸出:<\/strong><\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543832754208.jpg\" alt=\"HTML 中的預標記\" ><\/p>\n<p><strong>上述代碼說明:<\/strong>顯示上面的示例,該示例沒有使用 pre 標簽。但我們沒有使用 pre 標簽,而是使用其他 HTML 標簽。 <br>標簽用于換行, ?用于空格的字符。<\/p>\n<h3>預標簽的使用<\/h3>\n<ul>\n<li>如果我們不使用標簽和屬性,網頁會忽略空格和換行符。但每一行,我們都必須使用這些屬性。<\/li>\n<li>Pre 標簽保留原始內容格式。<\/li>\n<li>開發(fā)者可以為該塊使用一個標簽,而不是使用多個標簽。減少編碼,易于理解。<\/li>\n<\/ul>\n<p>Pre Tag 支持以下網絡瀏覽器:<\/p>\n<ul>\n<li>谷歌瀏覽器<\/li>\n<li>Internet Explorer<\/li>\n<li>火狐<\/li>\n<li>歌劇<\/li>\n<li>野生動物園<\/li>\n<\/ul>\n<h3>實施示例<\/h3>\n<p>下面是其中的實現示例:<\/p>\n<h4>示例#1<\/h4>\n<p>將 Pre Tag 與 CSS 標簽一起使用。<\/p>\n<p><strong>代碼:<\/strong><\/p>\n\n\n<pre><!DOCTYPE>\n<html>\n<head>\n<title> using pre tag with CSS <\/title>\n<style>\npre {\nfont-family: Arial;\ncolor: yellow;\nborder: solid black;\nbackground-color: black;\n}\n<\/style>\n<\/head>\n<body>\n<pre>\nThe Web browser is ignored space, line breaks, and other formatting characters of text.\nIf you wanted some format then tag or attribute must have used every time.\nThis tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.\nIt is changed when CSS tags are applied.\nThis tag in HTML shows the preformatted text of the content.\n<\/pre>\n<\/body>\n<\/html><\/pre>\n<p><strong>輸出:<\/strong><\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543832995577.jpg\" alt=\"HTML 中的預標記\" ><\/p>\n<p><strong>上面代碼的解釋:<\/strong>顯示上面的例子是與CSS樣式標簽一起使用的。如果您使用 pre 標簽,那么 CSS 樣式標簽也可以更改內容的格式。樣式標簽使用CSS中的字體樣式、邊框和文本顏色。<\/p>\n<h4>示例#2<\/h4>\n<p>下面的例子。這是其他 HTML 標簽和 pre 標簽與 CSS 的組合。<\/p>\n<p><strong>?代碼:<\/strong><\/p>\n<pre><!DOCTYPE>\n<html>\n<head>\n<title> using pre tag in html? with CSS <\/title>\n<style>\npre {\nfont-family: Arial;\ncolor: yellow;\nborder: solid black;\nbackground-color:black;\n}\n<\/style>\n<\/head>\n<body>\n<p>\nThe Web browser is ignored space, line breaks, and other formatting characters of text.\nIf you wanted some format then tag or attribute must have used every time.\nThis tag used to remove this drawback. Pre tag used to keep text format as it is.\nIt is changed when CSS tags are applied.\nIt shows the preformatted text of the content.\n<\/p>\n<pre>\nThe Web browser is ignored space, line breaks, and other formatting characters of text.\nIf you wanted some format then tag or attribute must have used every time.\nThis tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.\nIt is changed when CSS tags are applied.\nThis tag in HTML shows the preformatted text of the content.\n<\/pre>\n<\/body>\n<\/html><\/pre>\n<p><strong>輸出:<\/strong><\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543833296074.jpg\" alt=\"HTML 中的預標記\" ><\/p>\n<h3>結論<\/h3>\n<p>開發(fā)者使用此標簽來減少編碼并獲取格式化內容。網絡不能忽略 pre 標簽內內容的格式。<\/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/zh/" 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="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
                          <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
                                  <a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
                                  <a href="http://www.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="學習" class="head_nava head_nava-template1_1">學習</a>
                          <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
                                  <a href="http://www.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
                          <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
                                  <a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網站源碼" class="languagechoosea">網站源碼</a>
                                  <a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a>
                                  <a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                                  <a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網站素材" class="languagechoosea on">網站素材</a>
                                  <a href="http://www.miracleart.cn/zh/toolset/extension-plug-ins" title="擴展插件" class="languagechoosea on">擴展插件</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="http://www.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
                          <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
                                  <a href="http://www.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>
      
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
                          <div   id="377j5v51b"   class="head_search">
                      <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                      <a href="javascript:;" title="搜索"  onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
                  </div>
                      <div   id="377j5v51b"   class="head_right">
                  <div   id="377j5v51b"   class="haed_language">
                      <a href="javascript:;" class="layui-btn haed_language_btn">簡體中文<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:;" title="簡體中文" class="languagechoosea">簡體中文</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:setlang('de');" 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">目錄</div>
      						<div   id="377j5v51b"   class="Article_Details_main1L2" id="Article_Details_main1L2">
      							<!-- 左側懸浮,文章定位標題1 id="Article_Details_main1L2s_1"-->
      															<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#預標記在-HTML-中如何工作" title="預標記在 HTML 中如何工作?" >預標記在 HTML 中如何工作?</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#在-Html-中使用-Pre-標簽" title="1.在 Html 中使用 Pre 標簽" >1.在 Html 中使用 Pre 標簽</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#在-Html-中不使用-Pre-標記" title="2.在 Html 中不使用 Pre 標記" >2.在 Html 中不使用 Pre 標記</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#使用-HTML-其他標簽" title="3.使用 HTML 其他標簽" >3.使用 HTML 其他標簽</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#預標簽的使用" title="預標簽的使用" >預標簽的使用</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#實施示例" title="實施示例" >實施示例</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#示例" title="示例#2" >示例#2</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#結論" title="結論" >結論</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/zh/" title="首頁"
      							class="phpgenera_Details_mainL1a">首頁</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      												<a href="http://www.miracleart.cn/zh/web-designer.html"
      							class="phpgenera_Details_mainL1a">web前端</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      												<a href="http://www.miracleart.cn/zh/div-tutorial.html"
      							class="phpgenera_Details_mainL1a">html教程</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      						<span>HTML 中的預標記</span>
      					</div>
      					
      					<div   id="377j5v51b"   class="Articlelist_txts">
      						<div   id="377j5v51b"   class="Articlelist_txts_info">
      							<h1 class="Articlelist_txts_title">HTML 中的預標記</h1>
      							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
      								<div   id="377j5v51b"   class="author_info">
      									<a href="http://www.miracleart.cn/zh/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/zh/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
                                      										</div>
      								</div>
                      			</div>
      							<span id="377j5v51b"    class="Articlelist_txts_time">Sep 04, 2024 pm	 04:25 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>Web 瀏覽器會忽略空格、換行符和其他文本格式字符。如果您想要某種格式,那么每次都必須使用標簽或屬性。它就是用來消除這個缺點的。 Pre 標簽用于保持文本格式不變。當應用 CSS 標簽時它會發(fā)生變化。它顯示內容的預格式化文本。</p>
      
      
      
      
      
      
      
      
      
      
      
      
      
      <p><strong>語法:</strong></p>
      
      
      <p>HTML 有許多用于不同目的的標簽。</p>
      <p><strong>示例:</strong></p>
      <ul>
      <li><br></li>
      <li><p></li>
      <li><pre class="brush:php;toolbar:false">等</pre></li>
      </ul>
      <p>前置標簽與其他 HTML 標簽一樣有一個開始標簽和一個結束標簽。</p>
      <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"> content of web </pre></pre>
      <p>上面的語法用于我們需要內容的預格式化文本的地方。</p>
      <h3 id="預標記在-HTML-中如何工作">預標記在 HTML 中如何工作?</h3>
      <p>以下是 Pre 標簽如何工作的說明:</p>
      <h4 id="在-Html-中使用-Pre-標簽">1.在 Html 中使用 Pre 標簽</h4>
      <p><b>代碼:</b></p>
      <pre class="brush:php;toolbar:false"><!DOCTYPE>
      <html>
      <head>
      <title> using pre tag in html </title>
      </head>
      <body>
      <pre class="brush:php;toolbar:false">
      The Web browser is ignored space,?? line breaks, and other formatting characters of text.
      If you wanted some?? format then tag or attribute must have used every time.
      Pre tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
      It is?? changed when CSS tags are applied.
      Pre tag in HTML shows the? preformatted text of the content.
      </pre>
      
      </body>
      </html></pre>
      <p><strong>輸出:</strong></p>
      <p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543832336092.jpg" class="lazy" alt="HTML 中的預標記" ></p>
      <p><strong>上面代碼的解釋:</strong>展示上面的例子。當預標記應用于內容的所需部分時,內容看起來按原樣格式化。當前置標簽應用于文本時,空格和下一行不會被忽略。</p>
      <h4 id="在-Html-中不使用-Pre-標記">2.在 Html 中不使用 Pre 標記</h4>
      <p><b>代碼:</b></p>
      <pre class="brush:php;toolbar:false"><!DOCTYPE>
      <html>
      <head>
      <title> using pre tag in html </title>
      </head>
      <body>
      The Web browser is ignored space, line breaks, and other
      formatting characters of text.
      If you wanted some format then tag or attribute must have
      used every time.
      This tag is used to remove this drawback. Pre tag used to
      keep text format as it is. It is changed when CSS tags are applied.
      This pre tag shows the preformatted text of the content.
      </body>
      </html></pre>
      <p><strong>輸出:</strong></p>
      <p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543832530930.jpg" class="lazy" alt="HTML 中的預標記" ></p>
      <p><strong>上面代碼的解釋:</strong>展示上面的例子,這是沒有使用它的。自動忽略空格、換行符和換行符。網頁根據他們的要求顯示內容。為了留出空間并打破界限,我們必須使用 HTML 標簽。</p>
      
      
      <h4 id="使用-HTML-其他標簽">3.使用 HTML 其他標簽</h4>
      <p><b>代碼:</b></p>
      <pre class="brush:php;toolbar:false"><!DOCTYPE>
      <html>
      <head>
      <title> using pre tag in html </title>
      </head>
      <body>
      The Web browser is ignored space,         line breaks, and other formatting characters of text.<br>
      If you wanted some    ? format then tag or attribute must have used every time.<br>
      This is used to remove its drawback. Pre tag used to keep text format as it is.<br> It is changed when CSS tags are applied. <br>
      It shows preformatted text of the content.<br>
      </body>
      </html></pre>
      <p><strong>輸出:</strong></p>
      <p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543832754208.jpg" class="lazy" alt="HTML 中的預標記" ></p>
      <p><strong>上述代碼說明:</strong>顯示上面的示例,該示例沒有使用 pre 標簽。但我們沒有使用 pre 標簽,而是使用其他 HTML 標簽。 <br>標簽用于換行, ?用于空格的字符。</p>
      <h3 id="預標簽的使用">預標簽的使用</h3>
      <ul>
      <li>如果我們不使用標簽和屬性,網頁會忽略空格和換行符。但每一行,我們都必須使用這些屬性。</li>
      <li>Pre 標簽保留原始內容格式。</li>
      <li>開發(fā)者可以為該塊使用一個標簽,而不是使用多個標簽。減少編碼,易于理解。</li>
      </ul>
      <p>Pre Tag 支持以下網絡瀏覽器:</p>
      <ul>
      <li>谷歌瀏覽器</li>
      <li>Internet Explorer</li>
      <li>火狐</li>
      <li>歌劇</li>
      <li>野生動物園</li>
      </ul>
      <h3 id="實施示例">實施示例</h3>
      <p>下面是其中的實現示例:</p>
      <h4 id="示例">示例#1</h4>
      <p>將 Pre Tag 與 CSS 標簽一起使用。</p>
      <p><strong>代碼:</strong></p>
      
      
      <pre class="brush:php;toolbar:false"><!DOCTYPE>
      <html>
      <head>
      <title> using pre tag with CSS </title>
      <style>
      pre {
      font-family: Arial;
      color: yellow;
      border: solid black;
      background-color: black;
      }
      </style>
      </head>
      <body>
      <pre class="brush:php;toolbar:false">
      The Web browser is ignored space, line breaks, and other formatting characters of text.
      If you wanted some format then tag or attribute must have used every time.
      This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
      It is changed when CSS tags are applied.
      This tag in HTML shows the preformatted text of the content.
      </pre>
      </body>
      </html></pre>
      <p><strong>輸出:</strong></p>
      <p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543832995577.jpg" class="lazy" alt="HTML 中的預標記" ></p>
      <p><strong>上面代碼的解釋:</strong>顯示上面的例子是與CSS樣式標簽一起使用的。如果您使用 pre 標簽,那么 CSS 樣式標簽也可以更改內容的格式。樣式標簽使用CSS中的字體樣式、邊框和文本顏色。</p>
      <h4 id="示例">示例#2</h4>
      <p>下面的例子。這是其他 HTML 標簽和 pre 標簽與 CSS 的組合。</p>
      <p><strong>?代碼:</strong></p>
      <pre class="brush:php;toolbar:false"><!DOCTYPE>
      <html>
      <head>
      <title> using pre tag in html? with CSS </title>
      <style>
      pre {
      font-family: Arial;
      color: yellow;
      border: solid black;
      background-color:black;
      }
      </style>
      </head>
      <body>
      <p>
      The Web browser is ignored space, line breaks, and other formatting characters of text.
      If you wanted some format then tag or attribute must have used every time.
      This tag used to remove this drawback. Pre tag used to keep text format as it is.
      It is changed when CSS tags are applied.
      It shows the preformatted text of the content.
      </p>
      <pre class="brush:php;toolbar:false">
      The Web browser is ignored space, line breaks, and other formatting characters of text.
      If you wanted some format then tag or attribute must have used every time.
      This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
      It is changed when CSS tags are applied.
      This tag in HTML shows the preformatted text of the content.
      </pre>
      </body>
      </html></pre>
      <p><strong>輸出:</strong></p>
      <p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543833296074.jpg" class="lazy" alt="HTML 中的預標記" ></p>
      <h3 id="結論">結論</h3>
      <p>開發(fā)者使用此標簽來減少編碼并獲取格式化內容。網絡不能忽略 pre 標簽內內容的格式。</p><p>以上是HTML 中的預標記的詳細內容。更多信息請關注PHP中文網其他相關文章!</p>
      
      
      						</div>
      					</div>
      					<div   id="377j5v51b"   class="wzconShengming_sp">
      						<div   id="377j5v51b"   class="bzsmdiv_sp">本站聲明</div>
      						<div>本文內容由網友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容,請聯系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>熱門文章</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821119.html" title="指南:恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恒星刀片保存文件位置/保存文件丟失/不保存</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By DDD</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>1 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821436.html" title="沙丘:覺醒 - 高級行星學家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級行星學家Quest演練</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821278.html" title="約會一切:德克和哈珀關系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切:德克和哈珀關系指南</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      														</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      								<a href="http://www.miracleart.cn/zh/article.html">顯示更多</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>熱AI工具</h2>
      								</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
      													<h3>Undress AI Tool</h3>
      												</a>
      												<p>免費脫衣服圖片</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
      													<h3>Undresser.AI Undress</h3>
      												</a>
      												<p>人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
      													<h3>AI Clothes Remover</h3>
      												</a>
      												<p>用于從照片中去除衣服的在線人工智能工具。</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
      													<h3>Clothoff.io</h3>
      												</a>
      												<p>AI脫衣機</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
      													<h3>Video Face Swap</h3>
      												</a>
      												<p>使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!</p>
      											</div>
      										</div>
      																</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      									<a href="http://www.miracleart.cn/zh/ai">顯示更多</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>熱門文章</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821119.html" title="指南:恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恒星刀片保存文件位置/保存文件丟失/不保存</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By DDD</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>1 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821436.html" title="沙丘:覺醒 - 高級行星學家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級行星學家Quest演練</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/1796821278.html" title="約會一切:德克和哈珀關系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切:德克和哈珀關系指南</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 周前</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      														</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      								<a href="http://www.miracleart.cn/zh/article.html">顯示更多</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>熱工具</h2>
      								</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/toolset/development-tools/92" title="記事本++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="記事本++7.3.1" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
      													<h3>記事本++7.3.1</h3>
      												</a>
      												<p>好用且免費的代碼編輯器</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" 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漢化版" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
      													<h3>SublimeText3漢化版</h3>
      												</a>
      												<p>中文版,非常好用</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 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="禪工作室 13.0.1" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
      													<h3>禪工作室 13.0.1</h3>
      												</a>
      												<p>功能強大的PHP集成開發(fā)環(huán)境</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/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/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
      													<h3>Dreamweaver CS6</h3>
      												</a>
      												<p>視覺化網頁開發(fā)工具</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" 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版" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
      													<h3>SublimeText3 Mac版</h3>
      												</a>
      												<p>神級代碼編輯軟件(SublimeText3)</p>
      											</div>
      										</div>
      																	</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      									<a href="http://www.miracleart.cn/zh/ai">顯示更多</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>熱門話題</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/gmailyxdlrkzn" title="gmail郵箱登陸入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail郵箱登陸入口在哪里</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>8637</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/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</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>1783</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/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</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>1728</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/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</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>1577</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>28</span>
      										</div>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</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>1442</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/zh/faq/zt">顯示更多</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/zh/faq/1796829177.html" title="構建網頁的HTML元素是什么?" 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="構建網頁的HTML元素是什么?" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796829177.html" title="構建網頁的HTML元素是什么?" class="phphistorical_Version2_mids_title">構建網頁的HTML元素是什么?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 03, 2025 am	 02:34 AM</span>
      								<p class="Articlelist_txts_p">網頁結構需核心HTML元素支撐,1.頁面整體結構由、、構成,其中為根元素,存放元信息,展示內容;2.內容組織依賴標題(-)、段落()及區(qū)塊標簽(如、)以提升條理與SEO;3.導航通過與實現,常用組織鏈接并輔以aria-current屬性增強可訪問性;4.表單交互涉及、、與,確保用戶輸入與提交功能完整。正確使用這些元素能提升頁面清晰度、維護性及搜索引擎優(yōu)化。</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務器序列事件處理重新連接和錯誤。" 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="使用HTML5服務器序列事件處理重新連接和錯誤。" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務器序列事件處理重新連接和錯誤。" class="phphistorical_Version2_mids_title">使用HTML5服務器序列事件處理重新連接和錯誤。</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 03, 2025 am	 02:28 AM</span>
      								<p class="Articlelist_txts_p">使用HTML5SSE時,處理重連和錯誤的方法包括:1.了解默認重連機制,EventSource默認在連接中斷后3秒重試,可通過retry字段自定義間隔;2.監(jiān)聽error事件以應對連接失敗或解析錯誤,區(qū)分錯誤類型并執(zhí)行相應邏輯,如網絡問題依賴自動重連、服務器錯誤手動延遲重連、認證失效刷新token;3.主動控制重連邏輯,如手動關閉并重建連接、設置最大重試次數、結合navigator.onLine判斷網絡狀態(tài)以優(yōu)化重試策略。這些措施可提升應用穩(wěn)定性與用戶體驗。</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現代頁面宣布正確的HTML5 Doctype。" 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="為現代頁面宣布正確的HTML5 Doctype。" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現代頁面宣布正確的HTML5 Doctype。" class="phphistorical_Version2_mids_title">為現代頁面宣布正確的HTML5 Doctype。</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 03, 2025 am	 02:35 AM</span>
      								<p class="Articlelist_txts_p">Doctype是告訴瀏覽器用哪種HTML標準解析頁面的聲明,現代網頁只需在HTML文件最開頭寫。其作用是確保瀏覽器以標準模式而非怪異模式渲染頁面,且必須位于第一行,前面不能有空格或注釋;正確寫法僅有一種,不推薦使用舊版本或其他變體;其他如charset、viewport等應放在部分。</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實現客戶端表單驗證。" 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="使用HTML屬性實現客戶端表單驗證。" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實現客戶端表單驗證。" class="phphistorical_Version2_mids_title">使用HTML屬性實現客戶端表單驗證。</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 03, 2025 am	 02:31 AM</span>
      								<p class="Articlelist_txts_p">client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1)useRequiredToEnforCemandatoryField.2)validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl,orusepatternwithRegegexforCustomAlorurl</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796828942.html" title="用HTML5語義標記和微數據改善SEO。" 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/175147660275182.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="用HTML5語義標記和微數據改善SEO。" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796828942.html" title="用HTML5語義標記和微數據改善SEO。" class="phphistorical_Version2_mids_title">用HTML5語義標記和微數據改善SEO。</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 03, 2025 am	 01:16 AM</span>
      								<p class="Articlelist_txts_p">使用HTML5語義標簽和Microdata可提升SEO,因為它幫助搜索引擎更好理解頁面結構與內容含義。1.使用HTML5語義標簽如、、、、和來明確頁面區(qū)塊功能,有助于搜索引擎建立更準確的頁面模型;2.添加Microdata結構化數據標注具體內容,例如文章作者、發(fā)布日期、商品價格等,使搜索引擎能識別信息類型并用于富媒體摘要展示;3.注意正確使用標簽避免混淆、避免重復標記、測試結構化數據有效性、定期更新以適應schema.org的變化,并結合其他SEO手段長期優(yōu)化。</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項分組?" 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="如何使用HTML將選項分組?" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項分組?" class="phphistorical_Version2_mids_title">如何使用HTML將選項分組?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 04, 2025 am	 03:16 AM</span>
      								<p class="Articlelist_txts_p">在HTML中使用標簽可以對下拉菜單中的選項進行分組。具體方法是用包裹一組元素,并通過label屬性定義組名,如:1.包含蘋果、香蕉、橙子等選項;2.包含胡蘿卜、西蘭花等選項;3.每個為一個獨立分組,組內選項自動縮進。注意事項包括:①不支持嵌套;②可通過disabled屬性禁用整個組;③樣式受限需結合CSS或第三方庫美化;可使用Select2等插件增強功能。</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實現可點擊按鈕" 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="使用HTML按鈕元素實現可點擊按鈕" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實現可點擊按鈕" class="phphistorical_Version2_mids_title">使用HTML按鈕元素實現可點擊按鈕</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 07, 2025 am	 02:31 AM</span>
      								<p class="Articlelist_txts_p">要使用HTML的button元素實現可點擊按鈕,首先需掌握其基本用法與常見注意事項。1.使用標簽創(chuàng)建按鈕,并通過type屬性定義行為(如button、submit、reset),默認為submit;2.通過JavaScript添加交互功能,可內聯寫法或通過ID綁定事件監(jiān)聽器以提升維護性;3.利用CSS自定義樣式,包括背景色、邊框、圓角及hover/active狀態(tài)效果,增強用戶體驗;4.注意常見問題:確保未啟用disabled屬性、正確綁定JS事件、避免布局遮擋,并借助開發(fā)者工具排查異常。掌握這</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結構有效整合。" 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="將CSS和JavaScript與HTML5結構有效整合。" />
      								</a>
      								<a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結構有效整合。" class="phphistorical_Version2_mids_title">將CSS和JavaScript與HTML5結構有效整合。</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 12, 2025 am	 03:01 AM</span>
      								<p class="Articlelist_txts_p">HTML5、CSS和JavaScript應通過語義化標簽、合理加載順序與解耦設計高效結合。1.使用HTML5語義化標簽如、提升結構清晰度與可維護性,利于SEO和無障礙訪問;2.CSS應置于中,使用外部文件并按模塊拆分,避免內聯樣式與延遲加載問題;3.JavaScript推薦放在前引入,使用defer或async異步加載以避免阻塞渲染;4.減少三者間強依賴,通過data-*屬性驅動行為、類名控制狀態(tài),統(tǒng)一命名規(guī)范提升協(xié)作效率。這些方法能有效優(yōu)化頁面性能與團隊協(xié)作。</p>
      							</div>
      													</div>
      
      													<a href="http://www.miracleart.cn/zh/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>公益在線PHP培訓,幫助PHP學習者快速成長!</p>
              </div>
              <div   id="377j5v51b"   class="footermid">
                  <a href="http://www.miracleart.cn/zh/about/us.html">關于我們</a>
                  <a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責聲明</a>
                  <a href="http://www.miracleart.cn/zh/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="ndphb" class="pl_css_ganrao" style="display: none;"><listing id="ndphb"><dfn id="ndphb"><var id="ndphb"><font id="ndphb"></font></var></dfn></listing><tbody id="ndphb"></tbody><ol id="ndphb"></ol><option id="ndphb"></option><video id="ndphb"><strike id="ndphb"></strike></video><address id="ndphb"></address><small id="ndphb"></small><nobr id="ndphb"></nobr><strong id="ndphb"><em id="ndphb"><label id="ndphb"><xmp id="ndphb"></xmp></label></em></strong><ruby id="ndphb"></ruby><pre id="ndphb"></pre><strong id="ndphb"></strong><pre id="ndphb"><mark id="ndphb"></mark></pre><button id="ndphb"><dl id="ndphb"></dl></button><s id="ndphb"></s><kbd id="ndphb"></kbd><menu id="ndphb"><dd id="ndphb"><style id="ndphb"></style></dd></menu><ul id="ndphb"><code id="ndphb"><video id="ndphb"></video></code></ul><kbd id="ndphb"><p id="ndphb"><mark id="ndphb"></mark></p></kbd><optgroup id="ndphb"><big id="ndphb"><video id="ndphb"><strike id="ndphb"></strike></video></big></optgroup><progress id="ndphb"></progress><style id="ndphb"><delect id="ndphb"><small id="ndphb"><progress id="ndphb"></progress></small></delect></style><legend id="ndphb"></legend><strong id="ndphb"><em id="ndphb"><label id="ndphb"><em id="ndphb"></em></label></em></strong><nobr id="ndphb"><address id="ndphb"><u id="ndphb"><center id="ndphb"></center></u></address></nobr><dfn id="ndphb"><thead id="ndphb"><abbr id="ndphb"><div id="ndphb"></div></abbr></thead></dfn><dl id="ndphb"><video id="ndphb"><pre id="ndphb"><em id="ndphb"></em></pre></video></dl><strike id="ndphb"><video id="ndphb"></video></strike><legend id="ndphb"></legend><rp id="ndphb"></rp><optgroup id="ndphb"></optgroup><output id="ndphb"><ol id="ndphb"><font id="ndphb"><object id="ndphb"></object></font></ol></output><ul id="ndphb"></ul><dl id="ndphb"><sup id="ndphb"><strong id="ndphb"></strong></sup></dl><sup id="ndphb"></sup><strike id="ndphb"></strike><ins id="ndphb"></ins><nobr id="ndphb"></nobr><span id="ndphb"></span><i id="ndphb"></i><dfn id="ndphb"></dfn><td id="ndphb"><form id="ndphb"></form></td><thead id="ndphb"></thead><strong id="ndphb"></strong><style id="ndphb"><small id="ndphb"><strike id="ndphb"><ins id="ndphb"></ins></strike></small></style><address id="ndphb"></address><cite id="ndphb"></cite><big id="ndphb"><video id="ndphb"></video></big><optgroup id="ndphb"><xmp id="ndphb"><li id="ndphb"><meter id="ndphb"></meter></li></xmp></optgroup><delect id="ndphb"><small id="ndphb"><ins id="ndphb"></ins></small></delect></div>
      
      </html>