<!DOCTYPE>
用法:声明文档类型
实例:
<!DOCTYPE html><!--声明这个是html文档--> <html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html>
<!--...--> 标签
用法:在源代码中插入注释。注释不会显示在浏览器中。
实例:
<!--这是一段注释。注释不会在浏览器中显示。--> <p>这是一段普通的段落。</p>
<a> 标签
用法:用于从一张页面链接到另一张页面
实例:
<a href="https://www.cnblogs.com/XiaoJun6/">筱君的园子</a>
<!--href是a标签最重要的属性,它指示链接的目标-->
<abbr> 标签
用法:指示简称或缩写,比如 "WWW" 或 "NATO"。
实例: <abbr title="Personal Computer">PC</abbr>
<address> 标签
用法:定义文档或文章的作者的联系信息
实例:
<address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
<audio> 标签
用法:定义声音,比如音乐或其他音频流。
实例:
<audio src="http://suo.im/5FcCbR">Save Me</audio>
<b> 标签
用法:规定粗体文本。
实例:
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
<bdo> 标签
用法:定义文本的方向。
实例:
<bdo dir="rtl">Here is some text</bdo>
<big> 标签
用法:呈现大号字体效果。
实例:
<big>大号字体</big>
<body> 标签
用法:定义文档的主体
实例:
<html> <head> <title>文档的标题</title> </head> <body> 文档的内容... ... </body> </html>
<br> 标签
用法:可插入一个简单的换行符
实例:
<html> <body> <p> To break<br />lines<br />in a<br />paragraph,<br />use the br tag. </p> </body> </html>
<button> 标签
用法:定义一个按钮。
实例:
<html> <body> <button type="button">Click Me!</button> </body> </html>
<canvas> 标签
用法:定义图形,比如图表和其他图像。
实例:
<!DOCTYPE HTML> <html> <body> <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> </body> </html>
<caption> 标签
用法:定义表格标题。
实例:
<html> <body> <h4>这个表格有一个标题,以及粗边框:</h4> <table border="6"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>
<center> 标签
用法:对其所包括的文本进行水平居中。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <center>居中文本</center> </body> </html>
<col> 标签
用法:为表格中一个或多个列定义属性值。
实例:
<html> <body> <table width="100%" border="1"> <col align="left" /> <col align="left" /> <col align="right" /> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html>
<colgroup> 标签
用法:对表格中的列进行组合,以便对其进行格式化。
实例:
<html> <body> <table width="100%" border="1"> <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000FF;"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html>
<datalist> 标签
用法:定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
实例:
<!DOCTYPE HTML> <html> <body> <input list="cars" /> <datalist id="cars"> <option value="第一"> <option value="第二"> <option value="第三"> </datalist> </body> </html>
<del> 标签
用法:定义文档中已被删除的文本。
实例:
<html> <body> <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p> <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> </body> </html>
<div> 标签
用法:定义文档中的分区或节
实例:
<html> <body> <h3>This is a header</h3> <p>This is a paragraph.</p> <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div> </body> </html>
<fieldset> 标签
用法:可将表单内的相关元素分组。
实例:
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高:<input type="text" /> 体重:<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框,说明您的浏览器太老了。</p> </body> </html>
<font> 标签
用法:规定文本的字体、字体尺寸、字体颜色。
实例:
<html> <body> <h1><font face="verdana">A heading</font></h1> <p><font size="5" face="arial" color="red">A paragraph.</font></p> </body> </html>
<form> 标签
用法:用于为用户输入创建 HTML 表单。
实例:
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="提交"> </form> <p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p> </body> </html>
<frame> 标签
用法:定义 frameset 中的一个特定的窗口(框架)。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <frameset cols="25%,50%,25%"> <frame src="http://baidu.com/"/> <frame src="https://www.runoob.com/" /> <frame src="https://www.cnblogs.com/XiaoJun6/" /> </frameset> </body> </html>
<frameset> 标签
用法:可定义一个框架集。它被用来组织多个窗口(框架)。
实例:
<html> <frameset cols="25%,50%,25%"> <frame src="http://baidu.com/"> <frame src="https://www.cnblogs.com/XiaoJun6/"> <frame src="https://blog.csdn.net/"> </frameset> </html>
<h1> 到 <h6> 标签
用法:可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
实例:
<html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p> </body> </html>
<head> 标签
用法:用于定义文档的头部,它是所有头部元素的容器。
实例:
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> <p>title 元素的内容会显示在浏览器的标题栏中。</p> </body> </html>
<header> 标签
用法:定义文档的页眉(介绍信息)。
实例:
<!DOCTYPE html> <html> <body> <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> </body> </html>
<hr> 标签
用法:在 HTML 页面中创建一条水平线。
实例:
<html> <body> <p>hr 标签定义水平线:</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> </body> </html>
<html> 标签
用法:告知浏览器其自身是一个 HTML 文档。
实例:
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> <p>title 元素的内容会显示在浏览器的标题栏中。</p> </body> </html>
<i> 标签
用法:显示斜体文本效果。
实例:
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <i>斜字</i> </body> </html>
<iframe> 标签
用法:创建包含另外一个文档的内联框架(即行内框架)。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <iframe src="https://baidu.com/"></iframe> </body> </html>
<img> 标签
用法:向网页中嵌入一幅图像。
实例:
<html> <body> <img src="http://suo.im/5MNDQ1" alt="太空" /> </body> </html>
<input> 标签
用法:用户可以在其中输入数据的输入字段。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 输入<input type="text" value=""/> </body> </html>
<label> 标签
用法:用于标记。
实例:
<html> <body> <p>请点击文本标记之一,就可以触发相关控件:</p> <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> </body> </html>
<legend> 标签
用法:为 fieldset 元素定义标题
实例:
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高:<input type="text" /> 体重:<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框,说明您的浏览器太老了。</p> </body> </html>
<li> 标签
用法:定义列表项目。
实例:
<html> <body> <p>有序列表:</p> <ol> <li>打开冰箱门</li> <li>把大象放进去</li> <li>关上冰箱门</li> </ol> <p>无序列表:</p> <ul> <li>雪碧</li> <li>可乐</li> <li>凉茶</li> </ul> </body> </html>
<link> 标签
用法:定义文档与外部资源的关系。
实例:
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" ><!--自行修改文件路径--> </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样!</p> </body> </html>
<mark> 标签
用法:定义带有记号的文本。
实例:
<!DOCTYPE HTML> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
<meta> 标签
用法:可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html>
<meter> 标签
用法:定义已知范围或分数值内的标量测量。
实例:
<!DOCTYPE html> <html> <body> <p>显示度量值:</p> <meter value="3" min="0" max="10">3/10</meter><br> <meter value="0.6">60%</meter> <p><b>注释:</b>Internet Explorer 不支持 meter 标签。</p> </body> </html>
<nav> 标签
用法:定义导航链接的部分。
实例:
<!DOCTYPE html> <html> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </body> </html>
<noframes> 标签
用法:可为那些不支持框架的浏览器显示文本。
实例:
<html> <frameset cols="25%,50%,25%"> <frame src=""><!--自行添加链接--> <frame src=""> <frame src=""> <noframes> <body>您的浏览器无法处理框架!</body> </noframes> </frameset> </html>
<ol> 标签
用法:定义有序列表。
实例:
<!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html>
<optgroup> 标签
用法:定义选项组。
实例:
<html> <body> <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> </body> </html>
<option> 标签
用法:定义下拉列表中的一个选项。
实例:
<!DOCTYPE html> <html> <body> <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> </body> </html>
<output> 标签
用法:定义不同类型的输出,比如脚本的输出。
实例:
<!DOCTYPE html> <html> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><b>注释:</b>Internet Explorer 不支持 <output> 标签。</p> </body> </html>
<p> 标签
用法:定义一个段落。
实例:
<html> <body> <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
<progress> 标签
用法:标示任务的进度。
实例:
<!DOCTYPE html> <html> <body> 下载进度: <progress value="22" max="100"> </progress> <p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p> </body> </html>
<q> 标签
<html> <body> <p>Here comes a short quotation: <q>This is a short quotation</q></p> <p>请注意,浏览器在引用的周围插入了引号。</p> </body> </html>
<rp> 标签
用法:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
实例:
<!DOCTYPE HTML> <html> <body> <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> </body> </html>
<rt> 标签
用法:定义字符(中文注音或字符)的解释或发音。
实例:
<!DOCTYPE HTML> <html> <body> <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> </body> </html>
<ruby> 标签
用法:定义 ruby 注释(中文注音或字符)。
实例:
<!DOCTYPE HTML> <html> <body> <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> </body> </html>
<script> 标签
用法:用于定义客户端脚本,比如 JavaScript。
实例:
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
<section> 标签
用法:定义文档中的节。
实例:
<!DOCTYPE html> <html> <body> <section> <h1>WWF</h1> <p> The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. </p> </section> <section> <h1>WWF's Panda symbol</h1> <p> The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF. </p> </section> </body> </html>
<select> 标签
用法:创建单选或多选菜单。
实例:
<!DOCTYPE html> <html> <body> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> </html>
<small> 标签
用法:呈现小号字体效果。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <big>大号字体</big> <small>小号字体</small> </body> </html>
<source> 标签
用法:为媒介元素(比如 <video> 和 <audio>)定义媒介资源
实例:
<!DOCTYPE html> <html> <body> <audio controls> <source src="/i/horse.ogg" type="audio/ogg"><!--链接地址自行修改--> <source src="/i/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
<span> 标签
用法:用来组合文档中的行内元素。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <span> <big>大号字体</big> <small>小号字体</small> </span> </body> </html>
<style> 标签
用法:用于为 HTML 文档定义样式信息。
实例:
<html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html>
<sub> 标签
用法:可定义下标文本。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <sub>下标字体</sub> </body> </html>
<table> 标签
用法:定义 HTML 表格。
实例:
<html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
<tbody> 标签
用法:表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
实例:
<html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> </body> </html>
<td> 标签
用法:定义 HTML 表格中的标准单元格。
实例:
<html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
<textarea> 标签
用法:定义多行的文本输入控件。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <textarea rows="3" cols="20"> 在w3school,你可以找到你所需要的所有的网站建设教程。 </textarea> </body> </html>
<tfoot> 标签
用法:定义表格的页脚(脚注或表注)。
实例:
<html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> </body> </html>
<th> 标签
用法:定义表格内的表头单元格。
实例:
<html> <body> <table border="1"> <tr> <th>Company</th> <th>Address</th> </tr> <tr> <td>Apple, Inc.</td> <td>1 Infinite Loop Cupertino, CA 95014</td> </tr> </table> </body> </html>
<thead> 标签
用法:定义表格的表头。
实例:
<html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> </body> </html>
<time> 标签
用法:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
实例:
<!DOCTYPE HTML> <html> <body> <p> 我们在每天早上 <time>9:00</time> 开始营业。 </p> <p> 我在 <time datetime="2010-02-14">情人节</time> 有个约会。 </p> </body> </html>
<title> 标签
用法:可定义文档的标题。
实例:
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> <p>title 元素的内容会显示在浏览器的标题栏中。</p> </body> </html>
<tr> 标签
用法:定义 HTML 表格中的行。
实例:
<html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
<u> 标签
用法:可定义下划线文本。
实例:
<html> <body> <p>如果文本不是超链接,就不要<u>对其使用下划线</u>。</p> </body> </html>
<ul> 标签
用法:定义无序列表。
实例:
<html> <body> <h4>一个无序列表:</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
<video> 标签
用法:定义视频,比如电影片段或其他视频流。
实例:
<!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls"><!--链接自行修改--> your browser does not support the video tag </video> </body> </html>