一、表格
HTML 表格是用于展示结构化数据的重要元素,它允许将数据以行和列的形式组织和显示。
基本结构和常见元素:
1. <table>
元素
<table>
元素是 HTML 表格的根元素,它用于定义整个表格的开始和结束。
2. <thead>
、<tbody>
、<tfoot>
元素
<thead>
表示表格的头部,通常包含表头行(<tr>
)。<tbody>
表示表格的主体,包含了表格的主要内容行(<tr>
)。<tfoot>
表示表格的脚注部分,通常包含一些汇总信息或者其他备注。
这些部分可以让浏览器更好地理解表格的结构,并且有助于实现一些特定的样式和行为。
3. <tr>
元素
<tr>
元素表示表格中的一行(Table Row),它包含了一系列的表格单元格(<td>
或 <th>
)。
4. <td>
和 <th>
元素
<td>
表示表格中的数据单元格(Table Data),用于显示实际的数据内容。<th>
表示表格中的表头单元格(Table Header),用于标识每列的标题。
<th>
和 <td>
的区别在于 <th>
通常用于表头行,用以标识每列的标题,而 <td>
则用于表格的主体部分,显示实际的数据内容。
示例:
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>USA</td> </tr> <tr> <td>Maria</td> <td>25</td> <td>Spain</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Footer information</td> </tr> </tfoot> </table> </body> </html>
运行结果
二、列表
HTML 列表用于在网页中显示项目的有序或无序集合。有三种主要类型的列表:无序列表,有序列表和定义列表。
1. 无序列表
无序列表用于表示项目之间没有特定顺序关系的列表。在 HTML 中,无序列表使用 <ul>
元素表示,每个列表项使用 <li>
元素表示。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
在浏览器中渲染后,无序列表将呈现为一个项目符号(通常是圆点)开头的列表,每个项目使用 <li>
元素包裹。
2. 有序列表
有序列表用于表示项目之间有特定顺序关系的列表,例如按照数字或字母顺序排列。在 HTML 中,有序列表使用 <ol>
元素表示,每个列表项同样使用 <li>
元素表示。
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
在浏览器中显示,有序列表将呈现为按照特定顺序排列的列表,每个项目前面会有相应的数字或字母表示顺序。
3. 定义列表
定义列表用于表示项目及其相关定义或描述。在 HTML 中,定义列表使用 <dl>
元素表示,每个项目由一个术语(<dt>
)和其定义(<dd>
)组成。
<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>
在浏览器显示,定义列表将呈现为一系列术语及其相应的定义。
三、区块
区块元素(Block-level Elements)用于创建页面中的块级结构,通常用于组织和布局页面的内容。这些元素会在页面中占据一整行,相邻的区块元素会各自占据一行,因此它们会在页面上显示为独立的块。
一些常见的 HTML 区块元素及其作用:
1. <div>
元素
<div>
元素用于在 HTML 页面中创建一个分隔块,它是最常用的区块级元素之一。<div>
元素通常用于组织页面结构和布局,并且可以通过 CSS 样式进行样式化。
<div>
<!-- 这里放置内容 -->
</div>
运行显示:
2. <p>
元素
<p>
元素用于定义段落,它会在页面上显示为一个文本段落,通常会在前后插入一些空白来区分不同的段落。
<p>This is a paragraph.</p>
运行显示:
3. <header>
、<footer>
和 <section>
元素
这些元素用于在页面中定义特定的区块,如页眉、页脚和主要内容区块。
<header>
<h1>Header</h1>
</header><section>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</section><footer>
<p>Copyright © 2024</p>
</footer>
运行显示:
4. <nav>
元素
<nav>
元素用于定义导航链接的区块,通常用于包含网站导航菜单。
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
运行显示:
5. <article>
元素
<article>
元素用于定义页面中独立的内容块,如博客文章、新闻报道等。
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
运行显示: