html5教程

HyperText Markup Language (HTML) is a markup language used to construct online documents and is the foundation of most websites today. A markup language like HTML allows us to

超文本標記語言(HTML)是用于構造在線文檔的標記語言，并且是當今大多數網站的基礎。 HTML之類的標記語言使我們能夠

create links to other documents,
創建指向其他文檔的鏈接，
structure the content in our document, and
整理文檔中的內容，并
ascribe context and meaning to the content of our document.
將上下文和含義賦予我們的文檔內容。

An HTML document has two aspects to it. It contains structured information (Markup), and text-links (HyperText) to other documents. We structure our pages using HTML elements. They are constructs of the language providing structure and meaning in our document for the browser and the element links to other documents across the internet.

HTML文檔有兩個方面。它包含結構化信息(標記)和指向其他文檔的文本鏈接(超文本)。我們使用HTML元素構造頁面。它們是語言的結構，在瀏覽器的文檔中提供了結構和含義，并且該元素鏈接了整個互聯網上的其他文檔。

The internet was originally created to store and present static (unchanging) documents. The aspects of HTML discussed above were seen perfectly in these documents which lacked all design and styling. They presented structured information that contained links to other documents.

互聯網最初是用來存儲和呈現靜態(不變)文檔的。在缺少所有設計和樣式的這些文檔中，可以完美地看到上面討論HTML方面。他們介紹了結構化信息，其中包含指向其他文檔的鏈接。

HTML5 is the latest version, or specification, of HTML. The World Wide Web Consortium (W3C) is the organization responsible for developing standards for the World Wide Web, including those for HTML. As web pages and web applications grow more complex, W3C updates HTML’s standards.

HTML5是HTML的最新版本或規范。萬維網聯盟(W3C)是負責開發萬維網標準(包括HTML標準)的組織。隨著網頁和Web應用程序變得越來越復雜，W3C更新了HTML的標準。

HTML5 introduces a host of semantic elements. Though we discussed how HTML helped to provided meaning to our document, it wasn’t until HTML5s’ introduction of semantic elements that its potential was realized.

HTML5引入了許多語義元素。盡管我們討論了HTML如何幫助我們為文檔提供含義，但是直到HTML5引入語義元素后，它的潛力才得以實現。

HTML文檔的簡單示例 (A simple example of HTML Document)

<!DOCTYPE html>
<html>
<head><title>Page Title</title>
</head>
<body><h1>My First Heading</h1><p>My first paragraph.</p></body>
</html>

!DOCTYPE html: Defines this document to be HTML5

！DOCTYPE html：將此文檔定義為HTML5

html: The root element of an HTML page

html：HTML頁面的根元素

head: The element contains meta information about the document

head：元素包含有關文檔的元信息

title: The element specifies a title for the document

title：元素指定文檔的標題

body: The element contains the visible page content

正文：該元素包含可見的頁面內容

h1: The element defines a large heading

h1：元素定義大標題

p: The element defines a paragraph

p：元素定義一個段落

HTML和HTML5入門教程 (Tutorials for starting with HTML and HTML5)

The best place to start learning HTML is with freeCodeCamp's 2-hour intro to HTML tutorial.

開始學習HTML的最佳地方是freeCodeCamp的2小時HTML教程簡介。

Then, if you're feeling more adventurous, we have an entire 12-hour course that covers HTML, HTML5, and CSS in detail.

然后，如果您感到更冒險，我們將提供完整的12小時課程，詳細介紹HTML，HTML5和CSS 。

頁面結構 (Page Structure)

To create your pages in HTML, you need to know how to structure a page in HTML. Basically, the structuring of a page follows the order below:

要用HTML創建頁面，您需要知道如何用HTML構建頁面。基本上，頁面的結構遵循以下順序：

<!DOCTYPE html>
<html><head><title>Title of the Page</title></head><body><!-- Content --></body>
</html>

1 - The <!DOCTYPE html> statement must always be the first to appear on an HTML page and tells the browser which version of the language is being used. In this case, we are working with HTML5.

1- <!DOCTYPE html>語句必須始終是第一個出現在HTML頁面上的語句，并告訴瀏覽器正在使用哪種版本的語言。在這種情況下，我們正在使用HTML5 。

2 - The <html> and </html> tags tell the web browser where the HTML code starts and ends.

2- <html>和</html>標記告訴Web瀏覽器HTML代碼的開始和結束位置。

3 - The <head> and </head> tags contains information about the web site, for ?example: style, meta-tags, scripts, etc…

3- <head>和</head>標記包含有關網站的信息，例如：樣式，元標記，腳本等…

4 - The <title> and </title> tags tell the browser what the page title is. The title can be seen by identifying the tab in your internet browser. The text that is defined between these tags is also the text that is used as title by the search engines when they present the pages in the results of a search.

4- <title>和</title>標記告訴瀏覽器頁面標題是什么。可以通過在Internet瀏覽器中標識選項卡來查看標題。在這些標簽之間定義的文本也是搜索引擎在搜索結果中顯示頁面時用作標題的文本。

5 - Between the <body> and </ body> tags the page content is placed, which is what is displayed in the browser.

5-在<body>和</ body>標記之間放置頁面內容，這是瀏覽器中顯示的內容。

HTML5的變化 (Changes in HTML5)

語義標簽介紹 (Introduction of semantic tags)

Instead of using <div> for every other container, there are several semantic (these tags help screenreaders which are used by visually impaired) tags such as <header> <footer> . So it is advisable to use these tags instead of the generic <div>.

代替使用的<div>每隔一個容器，有標記，如幾個語義(其中使用由視覺受損這些標記的幫助屏幕閱讀) <header> <footer> 。因此，建議使用這些標簽代替通用的<div> 。

HTML元素 (HTML Elements)

Elements are the building blocks of HTML that describe the structure and content of a web page. They are the “Markup” part of HyperText Markup Language (HTML).

元素是HTML的基石，它們描述了網頁的結構和內容。它們是超文本標記語言(HTML)的“標記”部分。

HTML syntax uses the angle brackets (”<” and ”>”) to hold the name of an HTML element. Elements usually have an opening tag and a closing tag, and give information about the content they contain. The difference between the two is that the closing tag has a forward slash.

HTML語法使用尖括號(“ <”和“>”)保存HTML元素的名稱。元素通常具有一個開始標簽和一個結束標簽，并提供有關它們包含的內容的信息。兩者之間的區別在于，結束標記帶有正斜杠。

Here’s an example using the p element (<p>) to tell the browser that a group of text is a paragraph:

這是一個使用p元素 ( <p> )的示例，它告訴瀏覽器一組文本是一個段落：

<p>This is a paragraph.</p>

Opening and closing tags should match, otherwise the browser may display content in an unexpected way.

打開和關閉標簽應匹配，否則瀏覽器可能會以意外方式顯示內容。

自閉合元件 (Self-closing Elements)

Some HTML elements are self-closing, meaning they don’t have a separate closing tag. Self-closing elements typically insert something into your document.

一些HTML元素是自動關閉的，這意味著它們沒有單獨的結束標記。自閉合元素通常會在文檔中插入一些內容。

An example is the br element (<br>), which inserts a line break in text. Formerly, self-closing tags had the forward slash inside them (<br />), however, HTML5 specification no longer requires this.

一個示例是br元素 ( <br> )，它在文本中插入一個換行符。以前，自閉合標簽在其內部使用正斜杠( <br /> )，但是HTML5規范不再要求這樣做。

HTML元素功能 (HTML Element Functionality)

There are many available HTML elements. Here’s a list of some of the functions they perform:

有許多可用HTML元素。這是它們執行的一些功能的列表：

give information about the web page itself (the metadata)
提供有關網頁本身的信息(元數據)
structure the content of the page into sections
將頁面內容分為幾部分
embed images, videos, audio clips, or other multimedia
嵌入圖像，視頻，音頻片段或其他多媒體
create lists, tables, and forms
創建列表，表格和表單
give more information about certain text content
提供有關某些文本內容的更多信息
link to stylesheets which have rules about how the browser should display the page
鏈接到樣式表，這些樣式表具有有關瀏覽器應如何顯示頁面的規則
add scripts to make a page more interactive and dynamic
添加腳本以使頁面更具交互性和動態性

嵌套HTML元素 (Nesting HTML Elements)

You can nest elements within other elements in an HTML document. This helps define the structure of the page. Just make sure the tags close from the inside-most element first.

您可以將元素嵌套在HTML文檔中的其他元素中。這有助于定義頁面的結構。只需確保標簽首先從最里面的元素關閉即可。

Correct: <p>This is a paragraph that contains a <span>span element.</span></p>

正確： <p>This is a paragraph that contains a <span>span element.</span></p>

Incorrect: <p>This is a paragraph that contains a <span>span element.</p></span>

錯誤： <p>This is a paragraph that contains a <span>span element.</p></span>

塊級和內聯元素 (Block-level and Inline Elements)

Elements come in two general categories, known as block-level and inline. Block-level elements automatically start on a new line while inline elements sit within surrounding content.

元素分為兩大類，稱為塊級和內聯。內嵌元素位于周圍內容中時，塊級元素會自動從新行開始。

Elements that help structure the page into sections, such as a navigation bar, headings, and paragraphs, are typically block-level elements. Elements that insert or give more information about content are generally inline, such as links or images.

有助于將頁面分為幾部分的元素，例如導航欄，標題和段落，通常是塊級元素。插入或提供有關內容的更多信息的元素通常是內聯的，例如鏈接或圖像。

HTML元素 (The HTML Element)

There’s an <html> element that’s used to contain the other markup for an HTML document. It’s also known as the “root” element because it’s the parent of the other HTML elements and the content of a page.

有一個<html>元素，用于包含HTML文檔的其他標記。它也被稱為“根”元素，因為它是其他HTML元素和頁面內容的父元素。

Here’s an example of a page with a head element, a body element, and one paragraph:

這是一個帶有head元素， body元素和一個段落的頁面示例：

<!DOCTYPE html>
<html><head></head><body><p>I'm a paragraph</p></body>
</html>

HEAD元素 (The HEAD Element)

This is the container for processing information and metadata for an HTML document.

這是用于處理HTML文檔的信息和元數據的容器。

<head><meta charset="utf-8">
</head>

身體元素 (The BODY Element)

This is a container for the displayable content of an HTML document.

這是HTML文檔可顯示內容的容器。

<body>...</body>

P元素 (The P Element)

Creates a paragraph, perhaps the most common block level element.

創建一個段落，可能是最常見的塊級元素。

<p>...</p>

A(鏈接)元素 (The A(Link) Element)

Creates a hyperlink to direct visitors to another page or resource.

創建超鏈接以將訪問者定向到另一個頁面或資源。

<a href="#">...</a>

HTML中的圖像 (Images in HTML)

You can define images by using the <img> tag. It does not have a closing tag since it can contain only attributes. To insert an image you define the source and an alternative text which is displayed when the image can not be rendered.

您可以使用<img>標記定義圖像。它沒有結束標簽，因為它只能包含屬性。要插入圖像，您需要定義源以及當無法渲染圖像時顯示的替代文本。

src - This attribute provides the url to the image present either on your P.C./Laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.

src此屬性提供您的PC /筆記本電腦上存在的圖像的URL或要包含在其他網站上的圖像的URL。請記住，提供的鏈接不應中斷，否則圖像將不會在您的網頁上產生。

alt - This attribute is used to overcome the problem of broken image or incapability of your browser to produce image on webpage. This attribute, as the name suggests, provides an “Alternative” to an image which is some ‘TEXT’ describing the image.

alt此屬性用于解決圖像損壞或瀏覽器無法在網頁上生成圖像的問題。顧名思義，此屬性為圖像提供“替代”，即描述該圖像的某些“文字”。

例 (Example)

<img src="URL of the Image" alt="Descriptive Title" />

要定義圖像的高度和寬度，可以使用height和width屬性： (To define height and width of an image you can use the height and width attribute:)

<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>

您還可以定義邊框粗細(0表示沒有邊框)： (You can also define border thickness (0 means no border):)

<img src="URL of the Image" alt="Descriptive Title" border="2"/>

對齊圖像： (Align an image:)

<img src="URL of the Image" alt="Descriptive Title" align="left"/>

您還可以在style屬性中使用樣式： (You are also able to use styles within a style attribute:)

<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>

如何使用HTML中的鏈接 (How to use links in HTML)

In HTML you can use the <a> tag to create a link. For example you can write <a href="https://www.freecodecamp.org/">freeCodeCamp</a> to create a link to freeCodeCamp’s website.

在HTML中，可以使用<a>標記創建鏈接。例如，您可以編寫<a href="https://www.freecodecamp.org/">freeCodeCamp</a>來創建指向freeCodeCamp網站的鏈接。

Links are found in nearly all web pages. Links allow users to click their way from page to page.

在幾乎所有網頁中都可以找到鏈接。鏈接允許用戶單擊頁面之間的方式。

HTML links are hyperlinks. You can click on a link and jump to another document.

HTML鏈接是超鏈接。您可以單擊鏈接并跳至另一個文檔。

When you move the mouse over a link, the mouse arrow will turn into a little hand.

將鼠標移到鏈接上時，鼠標箭頭會變成一只小手。

Note: A link does not have to be text. It can be an image or any other HTML element.

注意：鏈接不必是文本。它可以是圖像或任何其他HTML元素。

In HTML, links are defined with the tag:

在HTML中，鏈接是使用標記定義的：

<a href="url">link text</a>

Example

例

<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>

The href attribute specifies the destination address (https://www.freecodecamp.org) of the link.

href屬性指定鏈接的目標地址( https://www.freecodecamp.org )。

The link text is the visible part (Visit our site for tutorials).

鏈接文本是可見的部分(請訪問我們的網站以獲取教程)。

Clicking on the link text will send you to the specified address.

單擊鏈接文本將把您發送到指定的地址。

如何在HTML中使用列表 (How to Use Lists in HTML)

Lists are used to specify a set of consecutive items or related information in a well formed and semantic way, such as a list of ingredients or a list of procedural steps.

列表用于以格式正確且語義明確的方式指定一組連續的項目或相關信息，例如成分列表或過程步驟列表。

HTML markup has three different types of lists - ordered, unordered and description lists.

HTML標記有三種不同類型的列表- 有序 ，unord e 紅色和說明列表。

有序列表 (Ordered Lists)

An ordered list is used to group a set of related items, in a specific order. This list is created with <ol> tag. Each list item is surrounded with <li> tag.

有序列表用于按特定順序對一組相關項進行分組。該列表是用<ol>標記創建的。每個列表項都用<li>標記包圍。

碼 (Code)

<ol><li>Mix ingredients</li><li>Bake in oven for an hour</li><li>Allow to stand for ten minutes</li>
</ol>

例 (Example)

Mix ingredients
混合配料
Bake in oven for an hour
在烤箱里烤一個小時
Allow to stand for ten minutes
靜置十分鐘

無序列表 (Unordered Lists)

An unordered list is used to group a set of related items, in no particular order. This list is created with <ul>tag. Each list item is surrounded with <li> tag.

無序列表用于將一組相關項按無特定順序進行分組。該列表是用<ul>標記創建的。每個列表項都用<li>標記包圍。

碼 (Code)

<ul><li>Chocolate Cake</li><li>Black Forest Cake</li><li>Pineapple Cake</li>
</ul>

例 (Example)

Chocolate Cake
巧克力蛋糕
Black Forest Cake
黑森林蛋糕
Pineapple Cake
菠蘿蛋糕

說明清單 (Description Lists)

A description list is used to specify a list of terms and their descriptions. This list is created with <dl> tag. Each list item is surrounded with <dd> tag.

描述列表用于指定術語及其描述的列表。該列表是用<dl>標簽創建的。每個列表項都用<dd>標記括起來。

碼 (Code)

<dl><dt>Bread</dt><dd>A baked food made of flour.</dd><dt>Coffee</dt><dd>A drink made from roasted coffee beans.</dd>
</dl>

輸出量 (Output)

Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.

面包由面粉制成的烘烤食品。咖啡由烤咖啡豆制成的飲料。

樣式表 (Styling List)

You can also control the style of the list. You can use list-style property of lists. Your list can be bullets, squares, in Roman numerals, or can be images if you want.

您還可以控制列表的樣式。您可以使用list-style屬性。您的列表可以是項目符號，正方形，羅馬數字，也可以是圖像(如果需要)。

list-style property is shorthand for list-style-type, list-style-position, list-style-image.

list-style屬性是list-style-type ， list-style-position ， list-style-image簡寫。