html的基本標籤彙總
<html> <head> <!-- <base href="http://www.w3school.com.cn/i/" /> --> <basefont color="red" size="5" /> <base target="_blank" />
<script> function jump() { window.location.href = "http://www.baidu.com"; }
function myFunction() { var x = document.getElementById("myDetails"); x.open=true; }
function myFunction1() { var x = document.getElementById("myDialog"); x.open = true; }
function myFunction2() { var x = document.getElementById("myDialog"); x.open = false; } </script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com" /> -->
<style type="text/css"> /*h1 {color: red}*/ p {color: blue} span.red { color:red; } </style> </head>
<body background=“me.jpg”>
<header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header>
<h1 align="center" >學習</h1>
<p >我的第一個段落。</p>
<a href="http://www.w3school.com.cn">This is a link</a>
<br><br /> <!-- <img src="me.jpg" width="104" height="142" /> -->
<div id="real-container"> <p>Real DOM</p> <div>cannot update</div> <ul> <li className="item">Item 1</li> <li className="item">Item 2</li> <li className="item">Item 3</li> </ul> </div>
<p >The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p>
<address> Written by <a href="mailto:[email protected]">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA
<footer> <p>Posted by: W3School</p> <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p> </footer> </address>
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（簡稱 IE9）於 2011 年 3 月 14 日釋出.....</p> </article>
<audio src="S01E01 Winter Is Coming (1080p x265 Joy).m4v" controls="controls"> Your browser does not support the audio element. </audio>
<p>這是普通文字 - <b>這是粗體文字</b>。</p>
<!-- <img src="me.jpg" /><br /> --> <p>請注意，我們已經為影象規定了一個相對地址。由於我們已經在 head 部分規定了一個基準 URL，瀏覽器將在如下地址尋找圖片：</p> <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br /> <p><a href="http://www.w3school.com.cn" >W3School</a></p> <p>請注意，連結會在新視窗中開啟，即使連結中沒有 target="_blank" 屬性。這是因為 base 元素的 target 屬性已經被設定為 "_blank" 了。</p>
<bdo dir="rtl"> <big>Here </big>is <small>some</small> Hebrew text </bdo>
<p>Here comes a long quotation:</p>
<blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote>
<button type="button" onclick="jump()">Click Me!</button>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
<h4>這個表格有一個標題，以及粗邊框：</h4> <table border="6" bgcolor="red" cellpadding="10" frame="vsides"> <caption>我的標題</caption> <tr> <td bgcolor="blue" aligh="right">1</td> <td>20000000</td> <td align="right">30</td> </tr> <tr> <td align="right">400</td> <td>500</td> <td>600</td> </tr> </table> <center>表格</center> <cite>大發發發發發發</cite> <code>aadafafd adaag </code> <kbd>aadaadfafa</kbd>
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> <br /> <br /> <br /> <br /> <br />
<dl> <dt>計算機</dt> <dd>用來計算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示資訊的裝置 ... ...</dd> </dl>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<!-- details js的表示方式 --> <details id="myDetails"> <summary>Copyright 2011.</summary> Some additional details... </details> <p>點選按鈕來顯示額外的細節。</p> <button onclick="myFunction()">試一下</button>
<h3>演示如何訪問 Dialog 元素</h3> <p>點選按鈕來開啟對話視窗。</p> <button onclick="myFunction1()">開啟</button> <button onclick="myFunction2()">關閉</button> <p><b>註釋：</b>目前只有 Chrome Canary 和 Safari 6 支援 <dialog> 元素。</p> <dialog id="myDialog">This is an open dialog window</dialog>
<h1>NEWS WEBSITE</h1> <p>some text. some text. some text...</p>
<div class="news"> <h2>News headline 1</h2> <p>some text. some text. some text...</p> </div>
<div class="news"> <h2>News headline 2</h2> <p>some text. some text. some text...</p> </div>
<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <figcaption>拍攝者：W3School 專案組，拍攝時間：2010 年 10 月</figcaption> <br> <img src="me.jpg" width="40" height="60" />
</figure>
<h1><font face="verdana">A heading</font></h1> <p><font size="5" face="arial" color="red">A paragraph.</font></p>
<h1>這是標題 1</h1> <hr /> <h2>這是標題 2</h2> <i> <h3>這是標題 3</h3></i> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6>
<form> 我喜歡自行車： <input type="checkbox" name="Bike"> <br /> 我喜歡汽車： <input type="checkbox" name="Car"> </form>
<form> <fieldset> <legend>健康資訊</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset> </form>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件傳送到 W3School。</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 電郵：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 內容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> 地址：<br /> <input type="text" name="comment" value="address" size="40"> <br /><br /> <input type="submit" value="傳送"> <input type="reset" value="重置">
</form>
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
<form> <fieldset> <legend>健康資訊</legend> 身高：<input type="text" /> <br/> 體重：<input type="text" /> </fieldset> </form>
<img src="me.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,110,260" href ="me.jpg" target ="_blank" alt="Sun" />
</map>
<p>顯示度量值：</p> <meter value="3" min="0" max="100"></meter><br> <meter value="0.9"></meter>
<script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript>
<h4>數字列表：</h4> <ol> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol>
<h4>字母列表：</h4> <ol type="A"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol>
<h4>小寫字母列表：</h4> <ol type="a"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol>
<h4>羅馬字母列表：</h4> <ol type="I"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol>
<h4>小寫羅馬字母列表：</h4> <ol type="i"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol>
<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
<pre> for i = 1 to 10 print i next i </pre>
下載進度： <progress value="22" max="100"> </progress>
<samp>ae</samp>
<p><span>some text.</span>some other text.</p>
<p> This text contains <sub>subscript</sub> </p> <p> This text contains <sup>superscript</sup> </p>
<textarea rows="3" cols="20"> </textarea> <p>如果文字不是超連結，就不要<u>對其使用下劃線</u>。</p> <h2> 如果想學習 AJAX，<span class="red">重要的</span>那麼您必須熟悉adafafaafadadgagagagafaafafafaafaafafadsddsadagagagaga如果想學習 AJAX，那麼您必須熟悉adafafaafadadfaafafafaafaafafadsddsadagagagaga <wbr>XMLHttpRequest<wbr> 物件。 </h2> <h1>我的<span class="red">重要的</span>標題</h1> <a href="http://www.baidu.com"> <img border="0" src="me.jpg" /> </a> </body> </html>
上面包含了絕大多數html的標籤，自己的總結。