Module 01 · HTML OverviewHTML 概述

Module 1 Cheatsheet: HTML5 Overview模块 1 速查表：HTML5 概述

元素	说明	示例
`<!-- -->`	表示 HTML 注释。浏览器不会显示注释，但可用它隐藏代码或为代码添加说明。	`<!-- This is a comment -->`
`<!DOCTYPE html>`	所有 HTML 文档都必须以此声明开头。它告诉浏览器应当处理哪种文档类型。注意，此元素没有结束标签。	`<!DOCTYPE html>` `<html>` `<head>` `<!-- Metadata Here -->` `</head>` `<body>` `<!-- Document Body Here -->` `</body>` `</html>`
`<a href="path">link name</a>`	称为“锚标签”，通过 `href` 属性创建超链接。将 `path` 替换为目标页面的 URL 或路径。	`<a href="https://www.ibm.com">IBM</a>`
`<body>`	包含 HTML 文档的内容。除 `<head>` 元素外，其他用于显示文档主体的标签都应包含在其中。	`<!DOCTYPE html>` `<html>` `<head>` `<!-- Metadata Here -->` `</head>` `<body>` `<!-- Document Body Here -->` `</body>` `</html>`
`<div>`	常用于划分文档主体中的各个区域，以便使用 CSS 为其内容设置样式。	`<div>` `This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.` `</div>`
`<h1>`	为 HTML 文档添加一级标题。	`<h1>Thomas J. Watson</h1>`
`<head>`	包含元数据，应放在 `<html>` 标签之后、`<body>` 标签之前。	`<!DOCTYPE html>` `<html>` `<head>` `<!-- Metadata Here -->` `</head>` `<body>` `<!-- Document Body Here -->` `</body>` `</html>`
`<html>`	HTML 文档的根元素。文档中的其他所有标签都应包含在其中。	`<!DOCTYPE html>` `<html>` `<head>` `<!-- Metadata Here -->` `</head>` `<body>` `<!-- Document Body Here -->` `</body>` `</html>`
`<img src="path" width="dim1" height="dim2">`	用于放置图片。将 `path` 替换为图片的 URL 或相对文件路径。其他可选属性包括以像素为单位的图片宽度和高度。	`<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg" width="300" height="300"/>`
`<li>`	在有序或无序列表中创建列表项，应与 `<ul>` 或 `<ol>` 标签配合使用。	`<ul>` `<li>Bullet point 1</li>` `<li>Bullet point 2</li>` `</ul>`
`<link>`	将外部文档（如 CSS 文件）链接到 HTML 文档。	`<head>` `<link rel="stylesheet" href="styles.css">` `</head>`
`<meta>`	提供 HTML 文档的元数据。	`<head>` `<meta name="author" content="Christopher Moore">` `</head>`
`<ol>`	创建使用数字编号的有序列表，应与 `<li>` 标签配合使用。	`<ol>` `<li>Numbered bullet point 1</li>` `<li>Numbered bullet point 2</li>` `</ol>`
`<p>`	标识一个段落，会在其包围的文本之后换行。	`<p>This is a paragraph of text. It can be as short or as long as needed.</p>`
`<script>`	在 HTML 文档中嵌入 JavaScript。	`<script>` `alert("Hello World");` `</script>`
`<table>`	表示表格，应与 `<tr>`（定义表格行）和 `<td>`（定义行内单元格）标签配合使用。也可使用 `<th>` 标签定义表头行。	`<table>` `<tr>` `<th>Header cell 1</th>` `<th>Header cell 2</th>` `</tr>` `<tr>` `<td>First row first cell</td>` `<td>First row second cell</td>` `</tr>` `<tr>` `<td>Second row first cell</td>` `<td>Second row second cell</td>` `</tr>` `</table>`
`<td>`	表示表格某一行中的单元格。	`<td>Cell Content</td>`
`<th>`	表示表格某一行中的表头单元格。	`<table>` `<tr>` `<th>Header cell 1</th>` `<th>Header cell 2</th>` `</tr>` `<tr>` `<td>First row first cell</td>` `<td>First row second cell</td>` `</tr>` `<tr>` `<td>Second row first cell</td>` `<td>Second row second cell</td>` `</tr>` `</table>`
`<title>`	定义显示在浏览器标题栏和标签页中的 HTML 文档标题。所有 HTML 文档都需要它，且它应包含在 `<head>` 标签内。	`<!DOCTYPE html>` `<html>` `<head>` `<title>Document Title</title>` `</head>` `<body>` `<!-- Document Body Here -->` `</body>` `</html>`
`<tr>`	表示表格中的一行。	`<table>` `<tr>` `<th>Header cell 1</th>` `<th>Header cell 2</th>` `</tr>` `<tr>` `<td>First row first cell</td>` `<td>First row second cell</td>` `</tr>` `<tr>` `<td>Second row first cell</td>` `<td>Second row second cell</td>` `</tr>` `</table>`
`<ul>`	创建使用项目符号的无序列表，应与 `<li>` 标签配合使用。	`<ul>` `<li>Bullet point 1</li>` `<li>Bullet point 2</li>` `</ul>`