HTML5标签-html教程-PHP中文网

我们都知道HTML的标准缩写，即超文本标记语言。所以，HTML5是HTML的最新版本。产品开发出来后；显然，HTML 将会有许多版本，并伴随着许多新的发展。因此，HTML5 具有新的属性和行为。 HTML5 标签不再是一种编程语言，而是一种标记语言。现在，什么是标记语言？使用文档中的标签定义元素属性是一种标记语言。现在，让我们详细了解如何定义标签和创建网页。

HTML5 标签

标签是显示内容的规范。一般来说，会有开始和结束标签。此外，很少有标签不需要结束标签，例如，这意味着换行，显示下一行中该标签旁边的数据。在这里，让我们看看 HTML5 中的一些新元素。

在HTML5中，我们一般可以将标签分为两类。

语义元素：这些元素的例子很少；、、等等
非语义元素： 这里的例子是；
、
等等
下面讨论的标签是 HTML5 版本中新引入的标签。它们是不同类型的标签，都可以分类。

1.结构标签

以下是结构标签的类型及示例：

a。文章： 这是一个最常用的标签，类似于 head 标签。主要用于表单、博客、新闻报道等示例。

代码：
```
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
```
登录后复制
输出：

b。旁白： 类似于我们普通标签的东西，它将内容与周围的内容相关联，就像文章中的侧边栏。而且这个标签只有在使用8以上的IE版本时才有意义。

c.详细信息：该标签用于向用户提供一些附加数据。这可以是一个可以隐藏或显示细节的交互平台。我们可以在summary标签下看到这个tab的用法。

d。标题：此标签与标题部分相关，包含标题信息。它必须有开始标签和结束标签。

代码：
```
<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>
```
登录后复制
输出：

e。 hgroup: 该标签用于描述一组标头。让我们看一下例子。

代码：
```
<html>
<body>
<hgroup>
<h1>Let’s check size of this h1 </h1>
<h2> Let’s check size of this h2 </h2>
<h3> Let’s check size of this h3</h3>
<h4> Let’s check size of this h4</h4>
<h5> Let’s check size of this h5</h5>
</hgroup>
</body>
</html>
```
登录后复制
输出：

f。页脚： 这个标签就是那个，它被放置在页面的末尾。它涉及版权、历史相关信息或数据等内容。让我们看下面的一个小例子。

代码：
```
<html>
<body>
<footer>
<nav>
<p><a href="#">Copy Rights</a> | <a href="#">Come back soon</a></p>
</nav>
<p>Please subsribe for more learning content</p>
</footer>
</body>
</html>
```
登录后复制
输出：

g。 nav: 此标签用于提供所有链接的一部分进行导航。

代码：
```
<html>
<body>
<nav>
<ul>
<li><a href="https://www.educba.com/">EDUCBA Home</a></li>
<li><a href="https://www.educba.com/about-us/">About EDUCBA</a></li>
<li><a href="https://www.educba.com/courses/">Courses in EDUCBA</a></li>
</ul>
</nav>
</body>
</html>
```
登录后复制
输出：

在练习时编写代码后，请单击链接进行检查。

h。部分： 正如名称所示，该标签定义了代码的正文、页眉、页脚等部分。这里，开始标签和结束标签都是必需的。让我们看下面的一个小例子：

代码：
```
<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>
```
登录后复制
输出：

我。摘要：此标签与详细信息选项卡并行使用。在详细信息标签下，我们有一个摘要标签来总结概念。以下示例：

代码：
```
<html>
<body>
<details>
<summary>How is this Summary tag defined?</summary>
<p>By clicking the arrow beside the Summary question I got displayed</p>
</details>
<p> The data after the display tag is displayed like this.</p>
</body>
</html>
```
登录后复制
输出：

现在展开摘要标签数据，我们得到以下内容。

2.表单标签

以下是不同类型的表单标签，并举例说明：

a。 Datalist： 此标签的使用方式类似于下拉列表，其中有预定义的值供用户选择。让我们看一下下面的小例子：

代码：
```
<html>
<body>
<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
```
登录后复制
输出：

鼠标悬停时会弹出下拉菜单。

b. Keygen: This is for the encryption. It is for generating an encrypted key for passing the data in an encrypted format. Only the start tag is enough/required for this element, and the end tag is not mandatory.

c. Meter: This tag would give us the measurement of the data which is present in a given range.

Code:
```
<html>
<body>
<meter value="25" min="0" max="100">25 out of 100</meter><p> This is 25 out of 100 </p><br>
<meter value="0.7">70%</meter><p> This is the range for 70%</p>
</body>
</html>
```
登录后复制
Output:

3. Formatting Tags

Below are the types of formatting tag with examples:

a. BDI: This is Bi-directional isolation. As the name already suggests, this tag can be used to isolate a part of the text and give it different styles from that of other text.

b. Mark: This tag can help us highlight a specific text.

Code:
```
<html>
<body>
<p>This is how you can <mark>mark or highlight</mark> a text.</p>
</body>
</html>
```
登录后复制
Output:

c. Output: As the name already shows us, it gives the result of any calculation.

Code:
```
<html>
<body>
<form oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
<input type="number" id="x”> +
<input type="number" id="y" value="350"> =
<output name="sum" for="x y"></output>
</form>
</body>
</html>
```
登录后复制
Output:

Make sure that you notice the form attribute of oninput. Once you input the attribute ‘x’ value, then the output gets displayed.

d. Progress: This tag gives us the progress of a particular task.

Code:
```
<html>
<body>
<progress value="80" max="100"></progress><p> This progress bar is 80% completed</p>
</body>
</html>
```
登录后复制
Output:

e. Rp: This is used when the ruby tags are not supported.

f. Rt: It is used with the tag ruby. Mostly this is used in pronunciation in both Japanese and Chinese languages.

g. Ruby: This tag is used with the rt and rp tags where the annotations with respect to the two languages, Chinese and Japanese, are pronounced.

h. Wbr: This tag is for the word break. It is mainly used to check how a word breaks when the window size is resized.

4. Embedded Content Tags

Here are the types of embedded content tag explained below with examples:

a. Audio: As the name already suggests, this tag would help us to incorporate audio files in the HTML document.

b. Canvas: Defines a place on the web page where graphics or shapes, or graphs are present or can be defined. Here is an example.

Code:
```
<html>
<body>
<canvas id="run" ></canvas>
<script type="text/javascript">
window.onload = function(){
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
};
</script>
</body>
</html>
```
登录后复制
Output:

c. Dialog: This tag gives us a default box, especially if we wanted to have data in a box.

Code:
```
<html>
<body>
<p> Trying dialog here <dialog open>How does dialog box come up?</dialog> </p>
</body>
</html>
```
登录后复制
Output:

d. Embed: This tag can be used for getting in any external file to the HTML file. We can have only the start tag, and the end tag is not mandatory here. There are different attributes that can be used with this tag, namely, width, height, src, and type.

e. Figure and Figcaption: This, as already in its name, can incorporate the images and can give a caption to that image.

f. Source: This tag can implement multiple audio and video files by providing the location of the files using this source tag.

g. Time: This tag, as the name already notifies, is a tag for displaying the time. And note that this tag is not functional in the cases of internet explorer version 8 and below.

h. Video: With the name of the tag, we can obviously get to know where this tag is used. For specifying the video files, we have this tag. Inside this Audio/Video tags, we define the source tags in specifying the files and their locations.

Input Elements of HTML5 Tags

Here are some input elements which we are using in HTML5 tags:

1. Email: This is one of the input elements in HTML5. This element takes in only email addresses as the input.

2. Number: This input element only accepts the number.

3. Range: As the name already explains, this tag contains a range of numbers.

4. URL: This input tag accepts the input field for the URL address. In this input type, we can only enter the URL.

5. Placeholder: This is one of the attributes for the input type as text or text area or any number. This place holder value shows the value to be given as the input.

Code:
```
<html>
<body>
Enter Date of birth : <input type = "text" name = "dob"
placeholder = "dd/mm/yyyy"/>
</body>
</html>
```
登录后复制
Output:

6. Autofocus: This attribute automatically focuses on a particular field where this element has been declared inside the input tag. This attribute is supported only by the latest versions of Chrome, Safari, and Mozilla only. The syntax is like this:
```
<input type = “textarea” name=”focus” autofocus/>
Tag <dd>: This tag represents a description of a definition.
Tag <del>: This tag deletes a specified text.
Tag <marquee>: This tag helps to display data in a scrolling manner.
<html>
<body>
<marquee> This texxt is in a scrolling manner </marquee>
</body>
</html>
```
登录后复制
Output:

7. : This is one of the basic tags that would help the browser understand the HTML version in which the program is being written. The declaration of this tag is to be written before the HTML tag.

8. : This Meta tag describes the description of the HTML document. It contains the author’s name, date, and modifications, etc.

In this HTML5, we even have an opportunity to get the GeoLocation of a device. There are different methods that can be helpful in making this location tagging easy. There are also different fonts and colors available in HTML5. Below are the few tags that are removed from the HTML usage from this HTML5 version.

Acronym, Applet, big, dir, font, frameset, center, tt (TeleType text), basefont, center, strike, frame, u (underlined text), isindex, noframes, etc. Few attributes that are removed are below:

Align, bgcolor, cellpadding, cellspacing, border, link, shape, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, size, width, etc.

9.

HTML5标签

HTML5 标签

1.结构标签

2.表单标签

3. Formatting Tags

4. Embedded Content Tags

Input Elements of HTML5 Tags