2020-9-21 HTML的学习2

HTML第二天

---

一、HTML标签——表格

caption
	<caption>表示表格的标题信息 
colgroup 
	列分组 
thead 
	<thead>表示表头，包含了<tr>以及<td>
tbody 
	<tbody>表示表格的表体，包含了很多<tr>
tfoot
	<table>表示表脚，包含了对表的总结信息 
tr
	<tr> 表示表格的行，可以包含<td>,<th>元素
td/th 
	<td>表示表格用来包含数据的单元格。
	<th>常用于表头单元格，th单元格内的 内容有居中加粗的效果。 
属性
	colspan 跨列数 
	rowspan 跨行数 
	width 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的 时候会适当的调整
colgroup 
	<colgroup>定义一个表中的一组列， 只能作为table的子元素，位于 <caption>元素后，其他元素之前。 col 
	<col>定义一个表中的列，并用于在所 有公共单元上定义通用语义，经常作 为<colgroup>元素的子元素。 
span 跨列数，即规定有几列可以作为同一 列

二、HTML5新增标签

1.header

是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面 内的一个内容区块的标题，但也可以包含搜索表单或logo。
代码如下（示例）：

<header>
	<h1>Main Page Title</h1>
	<img src="mdn-logo-sm.png" alt="MDN logo">
</header>

2.nav

是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页 面的其他部分。
代码如下（示例）：

<nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contant</a></li>
        </ul>
    </nav>

3.artical

代表文档，页面或应用程序中 独立的，完整的，可以独自被外部引用 的内容，也可以嵌套使用。可以是一篇 博客或者报刊中的文章，一篇论坛帖子 ，一段用户评论或者独立的插件，或其 他任和独立的内容。
代码如下（示例）：

<article class="user_review">
        <p>I agree,dinos are my favorite.</p>
        <footer>
            <p>
                Posted on
                <time datetime="2020-09-21 19:36">Sep 21</time>
                by Tom.
            </p>
        </footer>
    </article>

4.section

作为Html文档独立的功能。
代码如下（示例）：

<section>
        <h1>Heading</h1>
        <p>Bunch of awesome content</p>
    </section>

5.aside

元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主 要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的 部分。

6.footer

元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其 相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似， 一个页面中也未限定footer元素的个数。

7.address

元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他 们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所 有联系信息。

8.figure& figcaption

figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独 立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素 所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件， 统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书 写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是 允许放置多个其他元素
代码如下（示例）：

<figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
         alt="An awesome picture">
         <figcaption>Fig1. MDN Logo</figcaption>
    </figure>

9.details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。 details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供 的详细数据表格。 nopen属性 当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false 时，其内部的子元素应该被收缩起来不显示。默认值为false lsummary子元素 summary元素从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元 素，浏览器会提供默认文字(详细信息)以供单击。
代码如下（示例）：

<details>
        <summary>Some details</summary>
        <p>More info about the details.</p>
    </details>