HTML学习(八):语法规则:双标签

双标签由开始标签、网页显示内容部分、结束标签三部分组成。

  • 开始标签
  • 网页显示内容部分
  • 结束标签

1、<a> 标签

<a> 标签定义超链接,用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。

<a href="http://www.google.com.cn">Google</a>

2、<abbr> 标签

<abbr> 标签指示简称或缩写,能够为浏览器、拼写检查和搜索引擎提供有用的信息。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

3、<address> 标签

<address> 标签定义文档或文章的作者/拥有者的联系信息。<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

  • 如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
  • 如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<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>

4、<article> 标签

<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>

5、<aside> 标签

<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

6、<audio> 标签

<audio> 标签定义声音,比如音乐或其他音频流。

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

7、<b> 标签

<b> 标签规定粗体文本。

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

8、<bdi> 标签

<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。bdi 指的是 bidi 隔离。

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

9、bdo 标签

bdo 标签可覆盖默认的文本方向。

<bdo dir="rtl">Here is some text</bdo>

10、<blockquote> 标签

<blockquote> 标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

<blockquote>
Here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

11、<body> 标签

body 标签定义文档的主体。body 标签包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

12、<button> 标签

<button> 标签定义一个按钮。

在 button 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

<button type="button">Click Me!</button>

13、<canvas> 标签

<canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

<canvas id="myCanvas"></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>

14、<caption> 标签

caption 标签定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

15、<colgroup> 标签

<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

<colgroup> 标签只能在 table 元素中使用。

<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>
</table>

16、<command> 标签

command 标签表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

17、<data> 标签

<data> 标签用于添加给定内容的机器可读翻译。该标签既为数据处理器提供了机器可读的值,又为浏览器中的渲染提供了人类可读的值。

提示:如果内容与时间或日期相关,请改用 <time> 元素。

<ul>
  <li><data value="21053">圣女果</data></li>
  <li><data value="21054">牛肉番茄</data></li>
  <li><data value="21055">零食番茄</data></li>
</ul>

18、<datalist> 标签

<datalist> 标签定义选项列表。

使用 input 元素的 list 属性来绑定 datalist,来定义 input 可能的值。datalist 及其选项不会被显示出来,仅仅是合法的输入值列表。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

19、<dd> 标签

<dd> 在定义列表中定义条目的定义部分。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

20、 <del> 标签

定义文档中已被删除的文本。与 <ins> 标签配合使用,来描述文档中的更新和修正。

a dozen is <del>20</del> 12 pieces

21、<details> 标签

<details> 标签用于描述文档或文档某个部分的细节。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

22、<dialog> 标签

<dialog> 标签定义对话框或窗口。

<table border="1">
<tr>
  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

23、<dir> 标签

<dir> 标签定义目录列表。

<dir>
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</dir>

24、<div> 标签

<div> 可定义文档中的分区或节(division/section)。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

25、<dl> 标签

<dl> 标签定义了定义列表(definition list)。 <dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

26、<dt> 标签

<dt> 标签定义了定义列表中的项目(即术语部分)。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

27、<fieldset> 标签

fieldset 标签可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

28、<figcaption> 标签

<figcaption> 标签定义 figure 元素的标题(caption)。 "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

29、<figure> 标签

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

30、<font> 标签

<font> 规定文本的字体、字体尺寸、字体颜色。

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

31、<footer> 标签

<footer> 标签定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

32、<form> 标签

<form> 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

33、<frameset> 标签

<frameset> 标签可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>

34、<h1> - <h6> 标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

35、<head> 标签

<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。 <title> 定义文档的标题,它是 head 部分中唯一必需的元素。

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

36、<header> 标签

<header> 标签定义文档的页眉(介绍信息)。

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

37、<html> 标签

<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。

<html>

<head>
  这里是文档的头部 ... ...
  ...
</head>

<body>
  这里是文档的主体 ... ...
  ...
</body>

</html>

38、<i> 标签

<i> 标签显示斜体文本效果。

<i>这是斜体字</i>

39、<ins> 标签

<ins> 标签定义已经被插入文档中的文本。与 <del> 一同使用,来描述文档中的更新和修正。

a dozen is <del>20</del> <ins>12</ins> pieces

40、<label> 标签

<label> 标签为 input 元素定义标注(标记)。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

label 标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<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>

41、<legend> 标签

legend 标签为 fieldset 元素定义标题(caption)。

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

42、<li> 标签

<li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

43、<main> 标签

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器,发布于 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器,发布于 2004 年。</p>
  </article>
</main> 

44、<map>标签

<map>标签定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

45、<mark> 标签

<mark> 标签定义带有记号的文本。在需要突出显示文本时使用 <m> 标签。

<p>Do not forget to buy <mark>milk</mark> today.</p>

46、<meter> 标签

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 

47、<nav> 标签

<nav> 标签定义导航链接的部分。

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

48、<noframes> 标签

noframes 标签可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

<frameset cols = "25%, 25%,*">
  <noframes>
  <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src ="venus.htm" />
  <frame src   ="sun.htm" />
  <frame src ="mercur.htm"   />
</frameset>

49、<noscript> 标签

noscript 标签用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

50、<object> 标签

<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素,这一点并未实现。

不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

51、<ol> 标签

<ol> 标签定义有序列表。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

52、<optgroup> 标签

<optgroup> 标签定义选项组。optgroup 标签用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

<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>

53、 <option> 标签

option 标签定义下拉列表中的一个选项(一个条目)。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

54、<output> 标签

<output> 标签定义不同类型的输出,比如脚本的输出。

<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> 

55、<p> 标签

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。

<p>This is some text in a very short paragraph</p>

56、<param>标签

<param>标签允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 或者 <applet> 标签提供参数。

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

57、<picture> 标签

<picture> 标签包含两个标签:一个或多个 <source> 标签和一个 <img> 标签。

 <img> 元素是 <picture> 元素的最后一个子元素,如果没有 source 标签匹配,则作为后备选项。<picture> 标签的最常见用途是在响应式设计中用于艺术指导。可以设计多个图像来更好地填充浏览器视口,而不是根据视口宽度缩放一个图像。

<picture>
  <source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
  <source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
  <img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>

58、<pre> 标签

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

pre 标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

pre 标签中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。

可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。

<pre>
&lt;html&gt;

&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>

在上面的代码中,<pre> 标签中的特殊符号被转换为符号实体,比如 "&lt;" 代表 "<","&gt;" 代表 ">"。

59、<progress> 标签

<progress> 标签标示任务的进度(进程)。

<progress value="22" max="100"></progress> 

60、<q> 标签

<q> 标签定义短的引用。

<q>Here is a short quotation here is a short quotation</q>

61、<rp> 标签

<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

62、<rt> 标签

<rt> 标签定义字符(中文注音或字符)的解释或发音。

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

63、<ruby> 标签

<ruby> 标签定义 ruby 注释(中文注音或字符)。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

64、<script> 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

<script type="text/javascript">
document.write("Hello World!")
</script>

65、<section> 标签

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

66、<select> 标签

select 标签可创建单选或多选菜单。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

67、<span> 标签

<span> 标签被用来组合文档中的行内元素。

<p><span>some text.</span>some other text.</p>

68、<style> 标签

<style> 标签用于为 HTML 文档定义样式信息。

在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

<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>

69、<sub> 标签

<sub> 标签可定义下标文本。

这段文本包含 <sub>下标</sub>

70、<summary> 标签

<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

71、<sup> 标签

<sup> 标签可定义上标文本。

这段文本包含 <sup>上标</sup>

72、<svg> 标签

<svg> 标签定义 SVG 图形的容器。

SVG 有几种绘制路径、框、圆、文本和图形图像的方法。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

73、<table> 标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

74、<tbody> 标签

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

75、<td> 标签

<td> 标签定义 HTML 表格中的标准单元格。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

76、<template> 标签

<template> 标签用作容纳页面加载时对用户隐藏的 HTML 内容的容器。

<template> 中的内容可以稍后使用 JavaScript 呈现。如果有一些需要重复使用的 HTML 代码,则可以使用 <template> 标记。如果在没有 <template> 标记的情况下执行此操作,必须使用 JavaScript 创建 HTML 代码,以防止浏览器呈现这些代码。

<button onclick="showContent()">显示被隐藏的内容</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

77、<textarea> 标签

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="3" cols="20">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>

78、<tfoot> 标签

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

79、<th> 标签

<th> 标签定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:

  • 表头单元格 - 包含表头信息(由 th 元素创建)
  • 标准单元格 - 包含数据(由 td 元素创建)

th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。

<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>

80、<thead> 标签

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

81、<time> 标签

<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

82、<title> 标签

<title> 标签可定义文档的标题。

<html>
 
  <head>
    <title>XHTML Tag Reference</title>
  </head>

  <body>
    The content of the document......
  </body>

</html>

83、<tr> 标签

<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

84、<u> 标签

<u> 标签可定义下划线文本。

<p>如果文本不是超链接,就不要<u>对其使用下划线</u>。</p>

85、<ul> 标签

<ul> 标签定义无序列表。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

86、<video> 标签

<video> 标签定义视频,比如电影片段或其他视频流。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

87、 <wbr> 标签

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http</wbr>Request 对象。
</p>

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值