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简写。