html:file标签_解释HTML元素：什么是HTML标签以及如何使用它们？
html:file标签
什么是HTML元素？ (What are 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元素的名称。 元素通常具有一个开始标签和一个结束标签，并提供有关它们包含的内容的信息。 两者之间的区别在于，结束标记带有正斜杠。
Let's look at some specific examples of HTML tags.
让我们看一些HTML标记的特定示例。
p元素 (p Element)
The <p> tag stands for paragraph, which is the most common tag used to create lines of text inside an HTML document.
<p>标签代表段落，这是用于在HTML文档中创建文本行的最常用标签。
The use of the <p> is compatible with other tags, allowing to add hyperlinks (<a>) and bold (<strong>) text, among other things.
<p>的使用与其他标签兼容，除其他功能外，还允许添加超链接( <a> )和粗体( <strong> )文本。
例 (Example)
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<p>
This is a paragraph. It is the first of many.
</p>
<p>
This is another paragraph. It will appear on a separate line.
</p>
</body>
</html>You can also nest an anchor element <a> within a paragraph.
您也可以将锚元素<a>嵌套在段落中。
例 (Example)
<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>标题元素 (Heading Elements)
There are six heading elements — <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
有六个标题元素- <h1> ， <h2> ， <h3> ， <h4> ， <h5> ， <h6> 。
Heading elements are used to signify the importance of the content below them. The lower the number of the heading, the higher the importance.
标题元素用于表示其下方内容的重要性。 标题的数量越少，重要性越高。
For example, the <h1> element represents the main heading of the page, and there should only be one per page. This helps search engines understand the main topic of the page. <h2> elements have less importance, and should be below the higher level <h1> element.
例如， <h1>元素表示页面的主标题，并且每页应该只有一个。 这有助于搜索引擎了解页面的主要主题。 <h2>元素的重要性较低，应低于较高级别的<h1>元素。
例 (Example)
<h1>This is main heading.</h1>
<h2>This is subheading h2.</h2>
<h3>This is subheading h3.</h3>
<h4>This is subheading h4.</h4>
<h5>This is subheading h5.</h5>
<h6>This is subheading h6.</h6>一个元素 (a Element)
The anchor (<a>) element creates a hyperlink to another page or file. In order to link to a different page or file the <a> tag must also contain a href attribute, which indicates the link's destination.
锚( <a> )元素创建到另一个页面或文件的超链接。 为了链接到其他页面或文件， <a>标记还必须包含href属性，该属性指示链接的目的地。
The text between the opening and closing <a> tags becomes the link. This text should be a meaningful description of the link destination, and not a generic phrase such as "Click here". This better enables users with screen readers to navigate among the various links on a page and understand what content each one will link to.
开头<a>和结尾<a>标记之间的文本成为链接。 该文本应该是链接目标的有意义的描述，而不是诸如“单击此处”之类的通用短语。 这样，具有屏幕阅读器的用户可以更好地在页面上的各个链接之间导航，并了解每个链接到的内容。
By default, a linked page is displayed in the current browser window unless another target is specified. The default link styles are as follows:
默认情况下，除非指定了另一个目标，否则链接页面将显示在当前浏览器窗口中。 默认链接样式如下：
- An unvisited link is underlined and blue 未访问的链接带有下划线并显示为蓝色
- A visited link is underlined and purple 已访问的链接带有下划线和紫色
- An active link is underlined and red 活动的链接带有下划线和红色
例子 (Examples)
<a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>You can also create a link to another section on the same page:
您还可以在同一页面上创建指向另一部分的链接：
<h1 id="top"></h1>
<a href= "#top">Go to top</a>An image can also be turned into a link by enclosing the <img> tag in an <a> tag:
通过将<img>标记<a>在<a>标记中，图像也可以变成链接：
<a href= "https://guide.freecodecamp.org/"><img src="logo.svg"></a>列出元素 (List Elements)
There are two main types of lists in HTML: ordered (<ol>) and unordered (<ul>). All lists must contain one or more list elements (<li>).
HTML中的列表主要有两种类型：有序( <ol> )和无序( <ul> )。 所有列表必须包含一个或多个列表元素( <li> )。
无序列表 (Unordered list)
The unordered list starts with <ul> tag and list items start with the <li> tag. In unordered lists all the list items marked with bullets by default.
无序列表以<ul>标记开头，列表项以<li>标记开头。 默认情况下，在无序列表中，所有标记有项目符号的列表项。
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>Output:
输出：
- Item 项目
- Item 项目
- Item 项目
订购清单 (Ordered list)
The ordered list starts with <ol> tag and list items start with the <li> tag. In ordered lists all the list items are marked with numbers.
有序列表以<ol>标记开头，列表项以<li>标记开头。 在有序列表中，所有列表项都标有数字。
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>Output:
输出：
- First Item 第一项
- Second Item 第二项
- Third Item 第三项
em元素 (em Element)
The <em> element is used to emphasize text in an HTML document. This can be done by wrapping the text you would like to be emphasized in an <em> tag and an </em> tag respectively. Most browsers will render text wrapped in an <em> tag as italicized.
<em>元素用于强调 HTML文档中的文本。 可以通过将要强调的文本分别包装在<em>标签和</em>标签中来完成。 大多数浏览器会以斜体显示包裹在<em>标记中的文本。
Note: The <em> tag should not be used to stylistically italicize text. The <em> tag is used to stress emphasis on text. Typically, CSS formatting is used to stylistically italicize text.
注意： <em>标记不应用于在样式上以斜体显示文本。 <em>标签用于强调文本。 通常，CSS格式用于在样式上将文本斜体化。
例 (Example)
<body>
<p>
Text that requires emphasis should go <em>here</em>.
</p>
</body>我元素 (i Element)
The <i> element is used to denote text that is set apart from its surrounding text in some way. By default, text surrounded by <i> tags will be displayed in italic type.
<i>元素用于表示以某种方式与其周围文本分开的文本。 默认情况下，用<i>标记括起来的文本将以斜体显示。
In previous HTML specifications, the <i> tag was solely used to denote text to be italicized. In modern semantic HTML, however, tags such as <em> and <strong> should be used where appropriate.
在以前HTML规范中， <i>标记仅用于表示要斜体的文本。 但是，在现代语义HTML中，应在适当的地方使用诸如<em>和<strong>标记。
You can use the class attribute of the <i> element to state why the text in the tags is different from the surrounding text. You may want to show that the text or phrase is from a different language:
您可以使用<i>元素的class属性来说明为什么标记中的文本与周围的文本不同。 您可能想证明文本或短语是另一种语言的：
<p>The French phrase <i class="french">esprit de corps</i> is often
used to describe a feeling of group cohesion and fellowship.</p>强元素 (strong Element)
The <strong> element is used to denote text that is of strong importance or urgency. Most browsers will render text wrapped in an <strong> tag as bold.
<strong>元素用于表示非常重要或紧迫的文本。 大多数浏览器会将包裹在<strong>标记中的文本显示为粗体。
Note: The <strong> tag should not be used to style the text as bold. Use CSS to do that.
注意：不应使用<strong>标记将文本设置为粗体。 使用CSS来做到这一点。
例： (Example:)
<body>
<p>
<strong>This</strong> is really important.
</p>
</body>img元素 (img Element)
A simple HTML <img> element can be included in an HTML document like this:
一个简单HTML <img>元素可以包含在HTML文档中，如下所示：
<img src="path/to/image/file" alt="this is a cool picture" title="Some descriptive text goes here">Note that <img> elements are self-closing, and do not require a closing tag.
请注意， <img>元素是自闭合的，不需要结束标记。
alt tags provide alternate text for an image. One use of the alt tag is for visually impaired people using a screen reader; they can be read the alt tag of the image in order to understand the image's meaning.
alt标签为图像提供替代文本。 alt标签的一种用法是使用屏幕阅读器供视障人士使用。 可以读取图像的alt标签以了解图像的含义。
The title attribute is optional and will provide additional information about the image. Most browsers display this information in a tooltip when the user hovers over it.
title属性是可选的，将提供有关图像的其他信息。 当用户将鼠标悬停在工具提示上时，大多数浏览器会在工具提示中显示该信息。
Note that the path to the image file can be either relative or absolute. Also, remember that the img element is self-closing, meaning that it does not close with the </img> tag and instead closes with just a single >.
请注意，图像文件的路径可以是相对路径，也可以是绝对路径。 另外，请记住， img元素是自动关闭的，这意味着它不会使用</img>标签关闭，而是仅使用一个>来关闭。
例子 (Examples)
<img src="https://example.com/image.png" alt="my picture" title="This is an example picture">(This is assuming that the HTML file is at https://example.com/index.html, so it's in the same folder as the image file)
(这是假设HTML文件位于https://example.com/index.html ，因此它与图像文件位于同一文件夹中)
is the same as:
是相同的：
<img src="image.png" alt="my picture" title="This is an example picture">Sometimes an <img> element will also use two other attributes to specify its size, height and width, as shown below:
有时<img>元素还会使用其他两个属性来指定其大小， height和width ，如下所示：
<img src="image.png" alt="my picture" width="650" height="400" />The values are specified in pixels, but the size is usually specified in CSS rather than HTML.
值以像素为单位指定，但是大小通常以CSS而不是HTML指定。
导航元素 (nav Element)
The <nav> element is intended for major block of navigation links. NOT all links of a document should be inside a <nav> element.
<nav>元素用于导航链接的主要块。 并非文档的所有链接都应在<nav>元素内。
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
浏览器(例如，供残障用户使用的屏幕阅读器)可以使用此元素来确定是否忽略此内容的初始呈现。
例 (Example)
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>标头元素 (header Element)
The <header> tag is a container which is used for navigational links or introductory content. It may typically include heading elements, such as <h1>, <h2>, but may also include other elements such as a search form, logo, author information, and so on.
<header>标记是一个容器，用于导航链接或介绍性内容。 它通常可以包含标题元素，例如<h1> ， <h2> ，但是还可以包含其他元素，例如搜索表单，徽标，作者信息等。
Although not required, the <header> tag is intended to contain the surrounding sections heading. It may also be used more than once in an HTML document. It is important to note that the <header> tag does not introduce a new section, but is simply the head of a section.
尽管不是必需的，但<header>标记旨在包含周围的节标题。 它也可以在HTML文档中多次使用。 重要的是要注意， <header>标记不会引入新的节，而只是节的开头。
例 (Example)
<article>
<header>
<h1>Heading of Page</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>textarea元素 (textarea Element)
The HTML textarea tag allows you to enter a box that will contain text for user feedback or interaction. In most cases, it is common to see the textarea used as part of a form.
HTML textarea标记允许您输入一个包含用于用户反馈或交互的文本的框。 在大多数情况下，通常会将文本区域用作表单的一部分。
Programmers use textarea tag to create multiline field for user input (useful especially in case when user should be able to put on the form longer text). Programmers may specify different attributes for textarea tags.
程序员使用textarea标记创建用于用户输入的多行字段(特别是在用户应该可以在表单上放置较长文本的情况下很有用)。 程序员可以为textarea标签指定不同的属性。
例 (Example)
<form>
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
</form>Most common attributes: row and cols attributes determine the height and width of the textarea placeholder attribute specifies the text which is visible to the user, it helps the user to understand what data should be typed in maxlength attribute determines the maximum length of the text which can be typed in the textarea, user cannot submit more characters required attribute means that this field must be filled in before the form submission.
最常见的属性： row和cols属性决定了高度和文本区域的宽度placeholder属性指定这是对用户可见的文本，它可以帮助用户了解哪些数据应该在键入maxlength属性决定了文本的最大长度可以在文本区域中键入，用户不能提交更多required字符属性表示必须在提交表单之前填写此字段。
标签元素 (label Element)
The <label> tag defines a label for an <input> element.
<label>标签为<input>元素定义标签。
A label can be bound to an element either by using the “for” attribute, or by placing the element inside the element.
通过使用“ for”属性或将元素放置在元素内，可以将标签绑定到元素。
例 (Example)
<label for="id">Label</label>
<input type="text" name="text" id="id" value="yourvalue"><br>As you can see, the for attribute of the tag should be equal to the id attribute of the related element to bind them together.
如您所见， 标记的for属性应等于相关元素的id属性，以将它们绑定在一起。
平台支援 (Platform Support)
属性 (Attributes)
全局属性 (Global Attribute)
The <label> tag supports the Global Attributes in HTML.
<label>标记支持HTML中的全局属性。
事件属性 (Event Attribute)
The <label> tag supports the Event Attributes in HTML.
<label>标记支持HTML中的事件属性。
The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
<label>元素不会呈现为用户的任何特殊内容。 但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素内的文本，它将切换控件。
元标记 (Meta Tag)
The <meta> tag provides the metadata about the HTML document.
<meta>标记提供有关HTML文档的元数据。
This metadata is used to specify a page’s charset, description, keywords, the author, and the viewport of the page.
此元数据用于指定页面的字符集，描述，关键字，作者和页面的视口。
This metadata will not appear on the website itself, but it will be used by the browers and search engines to determine how the page will display content and assess search engine optimization (SEO).
该元数据不会出现在网站本身上，但是浏览器和搜索引擎将使用它来确定页面如何显示内容并评估搜索引擎优化(SEO)。
例 (Example)
<head>
<meta charset="UTF-8">
<meta name="description" content="Short description of website content here">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jane Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user's visible area of a web page. A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. -->
</head>div元素 (div Element)
The <div> tag is a generic container that defines a section in your HTML document. A <div> element is used to group sections of HTML elements together and format them with CSS.
<div>标记是一个通用容器，用于定义HTML文档中的部分。 <div>元素用于将HTML元素的各个部分组合在一起，并使用CSS格式化它们。
A <div> is a block-level element. This means that it takes up its own line on the screen. Elements right after the <div> will be pushed down to the line below. For similar grouping and styling that is not block-level, but inline, you would use the <span> tag instead. The tag is used to group inline-elements in a document.
<div>是块级元素。 这意味着它在屏幕上占据了自己的一行。 <div>之后的元素将被下推到下面的行。 对于不是块级而是内联的类似分组和样式，应改为使用<span>标记。 标签用于对文档中的行内元素进行分组。
例 (Example)
Here is an example of how to display a section in the same color:
这是如何以相同颜色显示部分的示例：
<div style="color:#ff0000">
<h3>my heading</h3>
<p>my paragraph</p>
</div>节元素 (section Element)
The <section> element defines a section where there isn't a more specific semantic HTML element to represent it. Typically, a <section> element will include a heading element (<h1> - <h6>) as child element.
<section>元素定义了一个节，在该节中没有更具体的语义HTML元素来表示它。 通常， <section>元素将包括标题元素( <h1> - <h6> )作为子元素。
For example, a web page could be divided into various sections such as welcome, content and contact sections.
例如，网页可以分为多个部分，例如欢迎，内容和联系部分。
A <section> element should not be used in place of a <div> element if a generic container is needed. It should be used to define sections within an HTML page.
如果需要通用容器，则不应使用<section>元素代替<div>元素。 它应该用于定义HTML页面中的部分。
<html>
<head>
<title>Section Example</title>
</head>
<body>
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
</body>
</html>页脚元素 (footer Element)
The <footer> tag denotes the footer of an HTML document or section. Typically, the footer contains information about the author, copyright information, contact information, and a sitemap. Any contact information inside of a <footer> tag should go inside an <address> tag.
<footer>标签表示HTML文档或节的页脚。 通常，页脚包含有关作者的信息，版权信息，联系信息和站点地图。 <footer>标记内的任何联系信息都应放在<address>标记内。
例 (Example)
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<footer>
<p>© 2017 Joe Smith</p>
</footer>
</body>
</html>音频元素 (audio Element)
The <audio> tag defines an audio element, that can be used to add audio media resource to an HTML document that will be played by native support for audio playback built into the browser rather than a browser plugin.
<audio>标记定义一个audio元素，该元素可用于将音频媒体资源添加到HTML文档中，该文档将由对浏览器(而非浏览器插件)内置的音频播放的本机支持来播放。
The audio tag currently supports three file formats OGG, MP3 and WAV which can be added to your html as follows.
音频标签当前支持三种文件格式OGG，MP3和WAV，可以将其添加到html中，如下所示。
添加一个OGG (Adding an OGG)
<audio controls>
<source src="file.ogg" type="audio/ogg">
</audio>添加MP3 (Adding an MP3)
<audio controls>
<source src="file.mp3" type="audio/mpeg">
</audio>添加WAV (Adding a WAV)
<audio controls>
<source src="file.wav" type="audio/wav">
</audio>It may contain one or more audio sources, represented using the src attribute or the source element.
它可能包含一个或多个使用src属性或source元素表示的音频源。
添加多个音频文件 (Adding Multiple Audio Files)
<audio controls>
<source src="file-1.wav" type="audio/wav">
<source src="file-2.ogg" type="audio/ogg">
<source src="file-3.mp3" type="audio/mpeg">
</audio>浏览器对不同文件类型的支持如下 (Browser Support for different file types is as follows)
支持的属性 (Supported Attributes)
iframe元素 (iframe Element)
The HTML <iframe> element represents an inline frame, which allows you to include an independent HTML document into the current HTML document. The <iframe> is typically used for embedding third-party media, your own media, widgets, code snippets, or embedding third-party applets such as payment forms.
HTML <iframe>元素表示一个内联框架，该框架允许您将独立HTML文档包含到当前HTML文档中。 <iframe>通常用于嵌入第三方媒体，您自己的媒体，窗口小部件，代码段或嵌入第三方小程序(例如付款表格)。
属性 (Attributes)
Listed below are some of the <iframe>’s attributes:
下面列出了<iframe>的一些属性：
Iframe tags are used to add an existing web page or app to your website within a set space.
iframe代码用于在设置的空间内将现有网页或应用添加到您的网站。
When using the iframe tags the src attribute should be used to indicate the location of the web page or app to use within the frame.
使用iframe标记时，应使用src属性来指示要在框架中使用的网页或应用的位置。
<iframe src="framesite/index.html"></iframe>You can set the width and height attributes to limit the size of the frame.
您可以设置width和height属性以限制框架的大小。
<iframe src="framesite/index.html" height="500" width="200"></iframe>Iframes have a border by default, if you wish to remove this you can do so by using the style attribute and setting CSS border properties to none.
iframe默认具有边框，如果要删除该边框，可以通过使用style属性并将CSS border属性设置为none来实现。
<iframe src="framesite/index.html" height="500" width="200" style="border:none;"></iframe>例子 (Examples)
Embedding a YouTube video with an <iframe>:
嵌入带有<iframe>的YouTube视频：
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
frameborder="0" allowfullscreen></iframe>Embedding Google Maps with an <iframe>:
使用<iframe>嵌入Google Maps：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>替代文字 (Alternative Text)
The content between the opening and closing <iframe> tags is used as alternative text, to be displayed if the viewer’s browser does not support iframes.
如果查看器的浏览器不支持iframe，则开始<iframe>和结束<iframe>标签之间的内容将用作替代文本，以显示这些内容。
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>在链接中定位iframe (Targeting an iframe in a Link)
Any anchor element can target the content of an <iframe> element. Rather than redirect the browser window to the linked webpage, it will redirect the <iframe>. For this to work, the target attribute of the <a> element must match the name attribute of the <iframe>.
任何锚点元素都可以定位<iframe>元素的内容。 而不是将浏览器窗口重定向到链接的网页，它将重定向<iframe> 。 为此， <a>元素的target属性必须与<iframe>的name属性匹配。
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>This example will show a blank <iframe> initially, but when you click the link above it will redirect the <iframe> to show a YouTube video.
此示例最初将显示空白的<iframe> ，但是当您单击上方的链接时，它将重定向<iframe>以显示YouTube视频。
JavaScript和iframe (JavaScript and iframes)
Documents embedded in an <iframe> can run JavaScript within their own context (without affecting the parent webpage) as normal.
嵌入<iframe>中的文档可以正常在其自身上下文中运行JavaScript(而不影响父网页)。
Any script interaction between the parent webpage and the content of the embedded <iframe> is subject to the same-origin policy. This means that if you load the content of the <iframe> from a different domain, the browser will block any attempt to access that content with JavaScript.
父网页与嵌入式<iframe>内容之间的任何脚本交互<iframe>遵循同源策略。 这意味着，如果您从其他域加载<iframe>的内容，则浏览器将阻止任何使用JavaScript访问该内容的尝试。
翻译自: https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/
html:file标签