首页教程软件教程正文

HTML元素

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 576 浏览 1975 个字

摘要 :

文章目录示例无内容元素：嵌套的HTML元素：块级和内联HTML元素块级元素：内联元素： HTML文件由元素组成。这些元素负责创建网页并定义网页中的内容。HTML中的元……

文
章
目
录

示例

无内容元素：
嵌套的HTML元素：
块级和内联HTML元素
块级元素：
内联元素：

HTML文件由元素组成。这些元素负责创建网页并定义网页中的内容。HTML中的元素通常由起始标签<标签名称>、结束标签</标签名称>和插入在它们之间的内容组成。从技术上讲，元素是起始标签、属性、结束标签和它们之间的内容的集合。

例如：

<p> Hello world!!! </p>

注意：有些元素没有结束标签和内容，这些元素被称为空元素或自闭合元素或无内容元素。

示例

<!DOCTYPE html>  
<html>  
<head>  
    <title>WebPage</title>  
</head>  
<body>  
   <h1>This is my first web page</h1>  
    <h2> How it looks?</h2>  
     <p>It looks Nice!!!!!</p>  
</body>  
</html>

示例中body元素之间的所有内容都在网页上可见。

无内容元素：

HTML中的所有元素都不需要具有起始标签和结束标签，一些元素没有内容和结束标签，这些元素被称为空元素或无内容元素。这些元素也称为未配对的标记。

一些无内容元素是<br>（表示换行），<hr>（表示水平线）等。

嵌套的HTML元素：

HTML可以嵌套，这意味着一个元素可以包含另一个元素。

块级和内联HTML元素

为了在HTML中进行默认显示和样式设置，所有元素被分为两个类别：

块级元素
内联元素

块级元素：

这些元素通过将页面划分为连贯的块来构建网页的主要部分。块级元素总是以新行开始，并占据整个网页的宽度，从左到右。这些元素可以包含块级元素和内联元素。以下是HTML中的块级元素：

<address>、<article>、<aside>、<blockquote>、<canvas>、<dd>、<div>、<dl>、<dt>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>-<h6>、<header>、<hr>、<li>、<main>、<nav>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>和<video>。

注意：所有这些元素将在后面的章节中进行描述。

示例：

<!DOCTYPE html>  
<html>  
             <head>  
    </head>  
<body>  
    <div style=\"background-color: lightblue\">This is first div</div>  
    <div style=\"background-color: lightgreen\">This is second div</div>  
    <p style=\"background-color: pink\">This is a block level element</p>  
</body>  
</html>

在上面的示例中，我们使用了标签，它定义了网页中的一个部分，并占据整个页面的宽度。我们使用了style属性，用于对HTML内容进行样式设置，背景颜色显示它是块级元素。

内联元素：

内联元素是那些区分给定文本的一部分并为其提供特定功能的元素。
这些元素不以新行开始，根据需要占据宽度。
内联元素通常与其他元素一起使用。

以下是HTML中的内联元素：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<button>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<map>、<object>、<q>、<samp>、<script>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<time>、<tt>、<var>。

示例：

<!DOCTYPE html>  
<html>  
    <head>  
    </head>  
<body>  
    <a href=\"https://www.javatpoint.com/html-tutorial\">Click on link</a>  
    <span style=\"background-color: lightblue\">this is inline element</span>  
    <p>This will take width of text only</p>  
 </body>  
</html>

以下是HTML中使用的一些主要元素的列表：

起始标签	内容	结束标签	描述
<h1> … <h6>	这些是HTML的标题	</h1> … </h6>	这些元素用于提供页面的标题。
<p>	这是段落	</p>	这个元素用于以段落形式显示内容。
<div>	这是div部分	</div>	这个元素用于在网页中提供一个部分。
<br>			这个元素用于提供换行。（无需结束标签）
<hr>			这个元素用于提供水平线。（无需结束标签）