HTML-元素_长沙大云汉it学院-优快云博客

本文链接：https://blog.youkuaiyun.com/dayunhanIT/article/details/90715220

一、<caption>标签
定义和用法：
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

   <html>
      <body>
        <h4>这个表格有一个标题，以及粗边框：</h4>
        <table border="6">
        	<caption>大云汉IT教育</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>
  </html>

效果图：
在这里插入图片描述
二、<details>标签
定义和用法：
<details> 标签用于描述文档或文档某个部分的细节。

<!DOCTYPE HTML>
<html>
  <body>
    <details>
      <summary>Copyright 2011.</summary>
      <p>大云汉IT教育.</p>
    </details>
  </body>
</html>

效果图：
在这里插入图片描述
三、<font>标签
定义和用法:

<font> 规定文本的字体、字体尺寸、字体颜色。
<html>
  <body>
    <h1><font face="verdana">Head 大云汉IT</font></h1>
    <p><font size="5" face="arial" color="red">A paragraph.</font></p>
  </body>
</html>

效果图:
在这里插入图片描述
四、＜frame＞标签
定义和用法：
<frame> 标签定义 frameset 中的一个特定的窗口（框架）。frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

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

在这里插入图片描述五、＜iframe＞标签
定义和用法：
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<html>
  <body>
    <iframe src="/i/eg_landscape.jpg"></iframe>
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持，iframe 是不可见的。</p>
  </body>
</html>

效果图：
在这里插入图片描述
六、＜legend＞标签
定义和用法：
legend 元素为 fieldset 元素定义标题（caption）。

  <!DOCTYPE HTML>
    <html>
      <body>
        <form>
          <fieldset>
            <legend>健康信息</legend>
            身高：<input type="text" />
            体重：<input type="text" />
          </fieldset>
        </form>
        <p>如果表单周围没有边框，说明您的浏览器太老了。</p>
      </body>
    </html>

效果图：
在这里插入图片描述
七、＜nav＞标签
定义和用法：
<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>

效果图：
在这里插入图片描述
八、＜section＞标签
定义和用法：
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<!DOCTYPE html>
<html>
  <body>
    <section>
      <h1>大云汉IT</h1>
      <p>
      大云汉IT教育
      </p>
    </section>
    <section>
      <h1>大云汉IT</h1>
      <p>
      大云汉IT教育
      </p>
    </section>
  </body>
</html>

效果图：
在这里插入图片描述
九、<header>标签
定义和用法：
<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

<!DOCTYPE html>
<html>
  <body>
    <article>
      <header>
        <h1>大云汉IT教育在哪里?</h1>
        <p>大云汉IT教育地址:</p>
      </header>
      <p>湖南省长沙市望城区雷锋大道1389号大云汉IT学院</p>
    </article>
  </body>
</html>

效果图：
在这里插入图片描述
十、<footer>标签
定义和用法
<footer>标签定义文档或者文档的一部分区域的页脚。
<footer>元素应该包含它所包含的元素的信息。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个<footer>元素。

<!DOCTYPE html>
<html>
  <body>
    <footer>
      <p>Posted by: 大云汉IT教育</p>
      <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </footer>
  </body>
</html>

效果图：
在这里插入图片描述