Coursera 笔记

Module 02 · CSS Overview & HTML5 ElementsCSS 概述与 HTML5 元素

Module 2 Cheatsheet: CSS Overview & HTML5 Elements模块 2 速查表：CSS 概述与 HTML5 元素

Coursera ↗

Element Description Example
<!DOCTYPE html> All HTML documents must start with this declaration. It tells the browser what document type to expect. Note that this element has no ending tag.
所有 HTML 文档都必须以这个声明开始。它告诉浏览器期望的文档类型。请注意，这个元素没有结束标签。		 <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<a href="path"> This tag, called an "anchor tag" creates hyperlinks using the href attribute. In place of path enter the URL or path name to the page you want to link to.
这个标签被称为“锚点标签”，它通过 href 属性创建超链接。在路径处输入您想要链接到的页面的 URL 或路径名称。		 <a href="https://www.ibm.com">IBM</a>
<article> Identifies a self-contained piece of content that could be distributed to other websites and platforms as a stand- alone unit. Similar to <div> tag in that it does not render as anything special in the browser unless it is styled with CSS.
识别一个自包含的内容单元，可以作为一个独立单位分发到其他网站和平台。类似于 <div> 标签，除非用 CSS 进行样式化，否则在浏览器中不会以特殊方式渲染。		 <article class="CSS-Style-Reference">
<h2>HTML</h2>
<p>HTML stands for Hypertext Markup Language.
It is a standardized system for tagging text files to display specific
font, color, graphics, and hyperlinks on World Wide Web pages.</p>
</article>
<aside> Defines some content aside from the content it is placed in. Similar to <div> tag in that it does not render as anything special in the browser unless it is styled with CSS.
定义了一些除其放置内容之外的内容。类似于 <div> 标签，除非用 CSS 进行样式化，否则在浏览器中不会以特殊方式渲染。		 <aside>
Use the aside tag to represent a section of a page that consists
of content tangentially related to the content.
</aside>
<body> Contains the contents of the HTML document. It should contain all other tags besides the <head> element to display the body of the document.
包含 HTML 文档的内容。它应包含除 <head> 元素之外的所有其他标签，以显示文档的主体。		 <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<div> Often used to separate sections in the body of a document in order to style that content with CSS.
常用于在文档主体中分隔部分，以便使用 CSS 对该内容进行样式化。		 <div>
This element has no particular semantic meaning but is often used
in conjunction with CSS for styling purposes.
</div>
<fieldset> Groups related elements in a form and puts a box around them.
将相关元素分组并以框框起来。		 <form action="/script.php">
<fieldset>
<legend>User:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<figcaption> Used in conjunction with the <figure> tag to mark up an image. <figure>
<img src="durham.jpg">
<figcaption>Fig.1 - Durham, NC</figcaption>
</figure>
<figure> Used to mark up an image in conjunction with the <figcaption> tag.
用于与 <figcaption> 标签一起标记图像。		 <figure>
<img src="durham.jpg">
<figcaption>Fig.1 - Durham, NC</figcaption>
</figure>
<footer> Contains a footer of a document and often contains information such as authoring, copyright info, contact info, sitemap, and related documents.
包含文档页脚，通常包含作者信息、版权信息、联系方式、网站地图和相关文档等信息。		 <footer>
<p>Author: Christopher Moore</p>
</footer>
<form> Creates an HTML form for user input.
创建用于用户输入的 HTML 表单。		 <form action="/script.php">
<fieldset>
<legend>User:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<h1> Adds a level 1 heading to the HTML document.
添加一级标题到 HTML 文档中。		 <h1>Thomas J. Watson</h1>
<head> Contains metadata and should be placed after the <html> tag and before the <body> tag.
包含元数据，应放置在 <html> 标签之后和 <body> 标签之前。		 <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<header> A container for introductory content such as heading elements, logo, or authoring information.
容器，用于存放引言内容，如标题元素、标志或作者信息。		 <header>
<h1>Header tag example</h1>
<p>It works as a container for introductory content such as heading elements, logo, or authoring information.</p>
<p>Author: Christopher Moore</p>
</header>
<html> The root element of an HTML document. All other tags in the document should be contained in this tag.
HTML 文档的根元素。文档中的所有其他标签都应该包含在这个标签内。		 <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<img src="path" width="dim1" height="dim2"> This tag is used to place an img. In place of path insert a URL or a relative file path to the image location. Other optional attributes include width and height of the image in pixels.
此标签用于放置一个 img。在路径位置插入图像位置的 URL 或相对文件路径。其他可选属性包括图像的像素宽度和高度。		 <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg" width="300" height="300">
<input type="?"> Specifies an input field on a form with the type attribute. Common input types include: "color," "date," "datetime- local," "email," "number," "range," "search," "url," "tel," "datalist," "select," "text," "option," and "placeholder."
指定表单上的一个输入字段，具有类型属性。常见的输入类型包括："颜色"、"日期"、"日期时间-本地"、"电子邮件"、"数字"、"范围"、"搜索"、"网址"、"电话"、"数据列表"、"选择"、"文本"、"选项"和"占位符"。		 <form action="/script.php">
<fieldset>
<legend>User:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<li> Element that creates bulleted line items in an ordered or unordered list. Should be used in conjunction with the <ul> or <ol> tags.
元素，用于在有序或无序列表中创建项目符号项。应与 <ul> 或 <ol> 标签一起使用。		 <ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
<link> Used to link a CSS document to an HTML document.
用于将 CSS 文档链接到 HTML 文档。		 <head>
<link rel="stylesheet" href="styles.css">
</head>
<meta> Used to provide metadata about the HTML document.
用于提供 HTML 文档的元数据。		 <head>
<meta name="author" content="Christopher Moore">
</head>
<nav> Used to define a set of navigational elements.
用于定义一组导航元素。		 <nav>
<a href="home.html">Home</a>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
</nav>
<ol> Element that creates an ordered list using numbers. Should be used in conjunction with the <li> tag.
创建有序列表的元素。应与 <li> 标签一起使用。		 <ol>
<li>Numbered bullet point 1</li>
<li>Numbered bullet point 2</li>
</ol>
<p> This tag is used to identify a paragraph. It places a line break after the text it is enclosed in.
此标签用于标识一个段落。它在包含的文本之后放置一个换行符。		 <p>Thomas J. Watson, Sr. is the American
industrialist, who built the International Business
Machines Corporation (IBM) into the largest
manufacturer of electric typewriters and data processing equipment in the world. </p>
<script> Used to embed Javascript in an HTML document.
用于在 HTML 文档中嵌入 JavaScript。		 <script>
alert("Hello World");
</script>
<section> Defines an important section of a document. Can be used within headers and footers as well.
定义文档的一个重要部分。也可以在页眉和页脚中使用。		 <section>
<h2>Introduction</h2>
<p>This document provides some examples of how to
use a variety of HTML elements</p>
</section>
<style> Used to apply simple CSS to an HTML document.
用于将简单的 CSS 应用于 HTML 文档。		 <head>
<style>
p {color:red}
</style>
</head>
<body>
<p>This paragraph will be red because I've styled
the paragraph tag with CSS.</p>
</body>
<table> This tag is used to denote a table. Should be used with <tr> (defines a table row) and <td> (defines a table cell within a row) tags. The <th> tag can also be used to define the table header row.
此标签用于表示表格。应与 <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> Denotes a cell within a row, within a table.
表示表格中行内的单元格。		 <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>
<th> Denotes the header cells within a row within a table.
表示表格中某行内的表头单元格。		 <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> Defines the title of the HTML document displayed in the browser's title bar and tabs. It is required in all HTML documents. It should be contained in the <head> tag.
定义在浏览器标题栏和标签页中显示的 HTML 文档的标题。在所有 HTML 文档中都是必需的。它应包含在 <head> 标签中。		 <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<tr> Denotes a row within a table.
表示表格中的一行。		 <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> Element that creates an unordered list using bullets. Should be used in conjunction with the <li> tag.
元素，用于创建使用项目符号的无序列表。应与 <li> 标签一起使用。		 <ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>

Source: https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZF9pbnN0cnVjdGlvbnNfdXJsIjoiaHR0cHM6Ly9jZi1jb3Vyc2VzLWRhdGEuczMudXMuY2xvdWQtb2JqZWN0LXN0b3JhZ2UuYXBwZG9tYWluLmNsb3VkL0lCTURldmVsb3BlclNraWxsc05ldHdvcmstQ0QwMTAxRU4tU2tpbGxzTmV0d29yay9DaGVhdHNoZWV0cy9DMk0zX2NoZWF0c2hlZXRfdjEuMi5tZCIsInRvb2xfdHlwZSI6Imluc3RydWN0aW9uYWwtbGFiIiwiYXRsYXNfZmlsZV9pZCI6MjQ0NjgsImFkbWluIjpmYWxzZSwiaWF0IjoxNzMyMDk2MTc5fQ.v9hLOD0mk3yca4J0l6c7Z9mD_SuuwzKd96Zb39wsbG8