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 us 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 ud to create lines of text inside an HTML document.
<p>标签代表段落,这是⽤于在HTML⽂档中创建⽂本⾏的最常⽤标签。
The u 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 parate line.
</p>
</body>
</html>
You can also nest an anchor element <a> within a paragraph.
您也可以将锚元素<a>嵌套在段落中。
例 (Example)
<p>Here's a <a href="freecodecamp">link to freeCodeCamp</a>.</p>
五年级数学下标题元素 (Heading Elements)
There are six heading elements — <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
有六个标题元素- <h1> , <h2> , <h3> , <h4> , <h5> , <h6> 。
ps旋转图层
Heading elements are ud 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 reprents the main heading of the page, and there should only be one per page. This helps arch 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 phra such as "Click here". This better enables urs 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 browr 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= "guide.freecodecamp/">freeCodeCamp</a>
You can also create a link to another ction 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>标记中,图像也可以变成链接:40个经典励志小故事
<a href= "guide.freecodecamp/"><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:
输出:
1. First Item
第⼀项
2. Second Item
第⼆项
3. Third Item
第三项
em元素 (em Element)
The <em> element is ud 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 browrs will render text wrapped in an <em> tag as italicized.
<em>元素⽤于强调 HTML⽂档中的⽂本。 可以通过将要强调的⽂本分别包装在<em>标签和</em>标签中来完成。 ⼤多数浏览器会以斜体显⽰包裹在<em>标记中的⽂本。
Note: The <em> tag should not be ud to stylistically italicize text. The <em> tag is ud to stress emphasis on text. Typically, CSS formatting is ud 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 ud to denote text that is t 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 ud to denote text to be italicized. In modern mantic HTML, however, tags such as <em> and <strong> should be ud where appropriate.
在以前HTML规范中, <i>标记仅⽤于表⽰要斜体的⽂本。 但是,在现代语义HTML中,应在适当的地⽅使⽤诸如<em>和<strong>标记。
You can u 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 phra is from a different language:
您可以使⽤<i>元素的class属性来说明为什么标记中的⽂本与周围的⽂本不同。 您可能想证明⽂本或短语是另⼀种语⾔的:
<p>The French phra <i class="french">esprit de corps</i> is often
ud to describe a feeling of group cohesion and fellowship.</p>
强元素 (strong Element)
The <strong> element is ud to denote text that is of strong importance or urgency. Most browrs will render text wrapped in an <strong> tag as bold.
<strong>元素⽤于表⽰⾮常重要或紧迫的⽂本。 ⼤多数浏览器会将包裹在<strong>标记中的⽂本显⽰为粗体。
Note: The <strong> tag should not be ud to style the text as bold. U 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 lf-closing, and do not require a closing tag.
请注意, <img>元素是⾃闭合的,不需要结束标记。
alt tags provide alternate text for an image. One u 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 browrs display this information in a tooltip when the ur 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 lf-closing, meaning that it does not clo with the </img> tag and instead clos with just a single >.
请注意,图像⽂件的路径可以是相对路径,也可以是绝对路径。 另外,请记住, img元素是⾃动关闭的,这意味着它不会使⽤</img>标签关闭,⽽是仅使⽤⼀个>来关闭。
例⼦ (Examples)
<img src="/image.png" alt="my picture" title="This is an example picture">
is the same as:
是相同的:
<img src="image.png" alt="my picture" title="This is an example picture">
Sometimes an <img> element will also u two other attributes to specify its size, height and width, as shown below:
有时<img>元素还会使⽤其他两个属性来指定其⼤⼩, height和width ,如下所⽰: