章
目
录
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> | 这个元素用于提供水平线。 (无需结束标签) |