HTML 中可以用來包裹或呈現文字的標籤非常豐富。以下為您整理出最常見、最主要的 HTML 文字與排版標籤，並依照功能進行分類： <pre> 一、 標題與段落標籤 (Block-level Text Elements) 用來組織文章結構與段落的區塊元素。 <<!>h1> 至 <<!>h6>：標題標籤。<<!>h1> 層級最高，<<!>h6> 層級最低。 p：段落標籤 (Paragraph)，用於包覆一般的文字段落。 blockquote：長引言標籤，通常用於引用大段的外部文字。 pre：預格式化文本，會保留空白字元與換行符號（通常用於顯示程式碼）。 二、 行內文字樣式標籤 (Inline Text Elements) 用來改變局部文字樣式或賦予特定語意（SEO 或無障礙設計）的行內元素。 <span><<!>span>：通用行內容器,常用來加上 CSS 樣式。</span> <strong><<!>strong>：加粗，瀏覽器通常會以粗體顯示。</strong> <b><<!>b>：粗體標籤，單純讓文字變粗，無特殊語意。</b> <em><<!>em>：斜體（強調語意），表示語氣上的強調，瀏覽器通常會以斜體顯示。</em> <i><<!>i>：斜體標籤，單純讓文字變斜（常用於專有名詞、外語或心裡想法）。</i> <u><<!>u>：底線標籤（Underline）。</u> <s><<!>s> 或 strike：刪除線標籤（Strikethrough）</s>。 <del><<!>del>：刪除文字（Deleted text）</del>。 <ins><<!>ins>：插入文字（Inserted text），語意上表示文件後來新增的內容</ins>。 <mark><<!>mark>：標記/螢光筆標籤，用於醒目提示（Highlight）某段文字</mark>。 small：小號字體標籤，通常用於版權聲明、免責聲明或附註小字。 sub 與 sup：下標與上標標籤（例如化學式 H_2O 或數學平方）。 code：程式碼片段，用於顯示電腦程式碼。 kbd：鍵盤輸入，表示使用者的鍵盤按鍵動作。 samp：程式輸出，表示程式或腳本的輸出結果。 var：變數，用於數學運算式或程式碼中的變數名稱。 abbr：縮寫標籤（Abbreviation），可透過 title 屬性滑鼠懸停顯示完整名稱。 data：機器可讀資料，將特定文字與機器可讀的值（如 value 屬性）進行關聯。 time：時間與日期，專門用來標記時間、日期或時間區間。 q：短引言（Quote），用於行內的小段引用文字（通常會自動加上引號）。 cite：作品標題，用於引用書籍、電影、論文等作品的名稱。 dfn：定義詞，表示該詞彙正在被定義。 ruby、rt、rp：注音與拼音標籤，常用於漢字上方標註注音或羅馬拼音（如日文假名）。 bdo：雙向文字覆蓋（Bi-directional Override），用於強制改變文字的書寫方向（由左至右或由右至左）。 bdi：雙向文字隔離，隔離可能受周圍文字方向影響的文字段落。 br：強制換行（Line Break），行內標籤。 wbr：建議換行點（Word Break Opportunity），告訴瀏覽器如果文字太長，可以在此處安全換行。 </pre> <style> pre { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; font-size:20px;} r { color:red;} </style>

00

Edit

parentElement 父元素 / children 子元素

<pre><b>nodeObject.children 子元素</b> <<c>div id="Mdiv"> <<c>div> 111 <<c>/div> <<c>a> 222 <<c>/a> <<c>h1> 333 <<c>/h1> <<c>p> 444 <<c>/p> <<c>/div> <div id="dp"></div> </pre> <div id="Mdiv"> <div>111</div> <a>222</a> <h1>333</h1> <p>444</p> </div> <script> var txt="" ; txt += "Mdiv.children.length = " + Mdiv.children.length ; txt += "<br>" ; txt += "<br>Mdiv.children[0].nodeName= " + Mdiv.children[0].nodeName; txt += "<br>Mdiv.children[1].nodeName= " + Mdiv.children[1].nodeName; txt += "<br>Mdiv.children[2].nodeName= " + Mdiv.children[2].nodeName; txt += "<br>Mdiv.children[3].nodeName= " + Mdiv.children[3].nodeName; txt += "<br>" ; txt += "<br>Mdiv.children[0].innerHTML= " + Mdiv.children[0].innerHTML ; txt += "<br>Mdiv.children[1].innerHTML= " + Mdiv.children[1].innerHTML ; txt += "<br>Mdiv.children[2].innerHTML= " + Mdiv.children[2].innerHTML ; txt += "<br>Mdiv.children[3].innerHTML= " + Mdiv.children[3].innerHTML ; dp.innerHTML =txt; </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

password

<input type='type' id='PWNO139' value='1234' > <input type='button' id='Button139' value='加密' onclick='Cha()' > <br> <br> <input type='type' id='DP139' value='加密內容' > <br> <br> <pre id="DIV">function Aencode(str,key) 功能 傳回 字串/文章 編碼加密， str = 需要 編碼加密 字串/文章， key = 密碼。 function Adecode(str,key) 功能 傳回 將加密編碼還原為 字串/文章， str = 加密後編碼， key = 密碼。 例 : Aencode("銀行","123456") 傳回 "ad9ff3c40c7372664ff58ce086420010015de271" 例 : Adecode("ad9ff3c40c....086420010015de271","123456") 傳回 "銀行" </pre> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var textarea =document.createElement('textarea') ; textarea.innerHTML = DIV.innerHTML ; textarea.id="TT139" ; DIV.parentNode.replaceChild(textarea, DIV) ; function Cha(){ //alert( DP139.value) ; if(Button139.value == '加密'){ DP139.value = Aencode(DP139.value, PWNO139.value) ; TT139.value = Aencode(TT139.value, PWNO139.value) ; Button139.value='解碼' ;return } if(Button139.value == '解碼'){ DP139.value = Adecode(DP139.value, PWNO139.value) ; TT139.value = Adecode(TT139.value, PWNO139.value) ; Button139.value='加密' ;return } } function Aencode(str,key){ str=btoa(escape(str)); var l=""; for(var c=0;c<key.length;c++){ l+=key.charCodeAt(c).toString()} var g=Math.floor(l.length/5); var b=parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5)); var a=Math.ceil(key.length/2);var h=Math.pow(2,31)-1; var d=Math.round(Math.random()*1000000000)%100000000; l+=d; while(l.length>10){l=(parseInt(l.substring(0,10))+parseInt(l.substring(10,l.length))).toString()}l=(b*l+a)%h; var e=""; var k=""; for(c=0;c<str.length;c++){ e=parseInt(str.charCodeAt(c)^Math.floor((l/h)*255)); if(e<16){k+="0"+e.toString(16)} else{k+=e.toString(16)} l=(b*l+a)%h}d=d.toString(16); while(d.length<8){d="0"+d} ; k+=d; //Astr.value = k; return k } function Adecode(encodeStr,key){ var l=""; for(var c=0;c<key.length;c++){l+=key.charCodeAt(c).toString() } ; var g=Math.floor(l.length/5); var b= parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5)); var a=Math.round(key.length/2); var h=Math.pow(2,31)-1; var d=parseInt(encodeStr.substring(encodeStr.length-8,encodeStr.length),16);encodeStr=encodeStr.substring(0,encodeStr.length-8); l+=d; while(l.length>10){l=(parseInt(l.substring(0,10))+parseInt(l.substring(10,l.length))).toString()}; l=(b*l+a)%h; var e=""; var k=""; for(c=0;c<encodeStr.length;c+=2){ e=parseInt(parseInt(encodeStr.substring(c,c+2),16)^Math.floor((l/h)*255)); k+=String.fromCharCode(e);l=(b*l+a)%h} if(encodeURIComponent(k).charAt(0)=="%" || encodeURIComponent(k).charAt(1)=="%" || encodeURIComponent(k).charAt(2)=="%" ) {alert("密碼錯誤 \n wrong password")} return unescape(atob(k)) ; } </script> <style> #TT139 {width: 95%; height: 650px; font-size: 18px ;} #PWNO139{font-size: 20px ;} #Button139{font-size: 20px ;} #DP139{font-size: 20px ;} </style>

00

Edit

color code

color code

Edit

querySelectorAll

<style>.pcss{color:red}</style> <pre> <span class="pcss"><<!>span class="pcss"><<!>/span></span> <span class="pcss"><<!>span class="pcss"><<!>/span></span> <span class="pcss"><<!>span class="pcss"><<!>/span></span> </pre> <input onclick="Ccolor(1)" type="button" value="red" class="inred"> <input onclick="Ccolor(2)" type="button" value="red" class="inyellow"> <script> function Ccolor(x){ var cc = document.querySelectorAll('.pcss'); if(x==2){ cc.forEach(el => { el.style.color = 'blue';}); } if(x==1){ cc.forEach(el => { el.style.color = 'red';}); } } </script> <style> .pcss{color:red} .inyellow{color:blue;width:120px} .inred {color :red;width:120px} </style> <pre> <<!>input onclick="Ccolor(1)" type="button" value="red" class="inred"> <<!>input onclick="Ccolor(2)" type="button" value="red" class="inyellow"> <<!>script> function Ccolor(x){ var cc = document.querySelectorAll('.pcss'); if(x==2){ cc.forEach(el => { el.style.color = 'blue';});} if(x==1){ cc.forEach(el => { el.style.color = 'red';}); } } <<!>/script> cc=document.querySelectorAll('pcss') cc 選取網頁中所有符合指定 CSS 選擇器的元素， 傳一個清單（NodeList）。 cc.forEach(el => { el.style.color = 'blue';}) 这是 JavaScript 数组或列表的循环方法, 在循环的过程中，把当前正在处理的那个元素临时命名为 el（代表 element/元素）。 </pre>

00

Edit

閱讀更多

<input onclick="ReadALL(this)" type="button" value="閱讀更多...." class="ReadAll"> <div class="aaa" style="display: none;"> <pre> <<!>input onclick="ReadALL(this)" type="button" value="閱讀更多...." class="ReadAll"> <<!>div class="aaa" style="display: none;"> ............ ... 內容 ... ............ <<!>/div> <<!>style> .ReadAll{ background:#e5eecc; border: solid 3px #c3c3c3; cursor: pointer; font-size: 16px; text-align: center; width: 100% } <<!>/style> <<!>script> function ReadALL(xx){//alert(); var x = document.querySelectorAll('.aaa'); if(xx.value == '閱讀更多....'){ xx.value ='關閉全文....' x.forEach(el => { el.style.display = 'block';}); } else { xx.value ='閱讀更多....' x.forEach(el => {el.style.display = 'none';}); } } <<!>/script> </pre> </div> <style> .ReadAll{ background: #e5eecc; border: solid 3px #c3c3c3; cursor: pointer; font-size: 16px; text-align: center; width: 100%} </style> <script> function ReadALL(xx){//alert(); var x = document.querySelectorAll('.aaa'); if(xx.value == '閱讀更多....'){ xx.value ='關閉全文....' x.forEach(el => { el.style.display = 'block';}); } else { xx.value ='閱讀更多....' x.forEach(el => { el.style.display = 'none';}); } } </script>

00

Edit

html 測試 單入 單出

html 測試 單入 單出

<pre style="white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all"> <<!>div id="THIS_ID"> <<!>textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical"> HTML input <<!>/textarea> <<!>div class="DP">00<<!>/div><<!>/div> <!-------------------------------------> <<!>script> WWFT('THIS_ID','400'); <<!>/script> </pre>

00

 
<style>
  
.LLtext, .LLif{  width:100%; background-color:azure;font-size:18px}

.LRC { background-color:azure;
     cursor:pointer;     
     float:left; display:     
     table-cell;
     vertical-align: middle;   
     text-align: center;   
     width: 80px;   
     border: thin solid black;
     font-size:18px }
</style>

<script>/* --------單入 單出-----LOAD-----------*/
function WWFT(x,w1){
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar+= "<table border='2' style='width: 100%;'>";
strVar+= "<tbody >";
strVar+= "<tr >";
strVa += "<form>";
strVar+= "<div class='LRC' id='" + x + "AL1' onclick='WWdp(this.id)'>預覽</div>";
strVar+= "<div class='LRC' id='" + x + "AL2' onclick='WWin(this.id)'>寫程式</div>";
strVar+= "<div class='LRC' id='" + x + "AL3' onclick='WWrs(this.id)'>還原</div>
";
strVar += "<textarea style='height:" + w1 + "px' class='LLtext' id='" + x+ "TTL' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + w1 + "px' class='LLif' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
WWrs(x+"AL1");
}
</script>


<script>/* --------單入 單出-----DP-----------*/
function WWdp(qq1){
var Mid= qq1.substring(0,qq1.length-3);
document.getElementById(Mid+'AL1').style.backgroundColor = "azure";
document.getElementById(Mid+'AL2').style.backgroundColor = "gainsboro";

document.getElementById(Mid+'TTL').style.display='none';
document.getElementById(Mid+'ifL').style.display='block';
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();}
</script>

<script>/* --------單入 單出-----rs-----------*/
function WWrs(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
WWdp(qq1);}
</script>

<script>/* --------單入 單出-----input-----------*/
function WWin(qq1){
var Mid= qq1.substring(0,qq1.length-3);

document.getElementById(Mid+'AL1').style.backgroundColor = "gainsboro";
document.getElementById(Mid+'AL2').style.backgroundColor = "azure";
document.getElementById(Mid+'TTL').style.display='block';
document.getElementById(Mid+'ifL').style.display='none';
}
</script>

Edit