HTML元素

前端 潘老师 4个月前 (10-14) 87 ℃ (0) 扫码查看

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

版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9576.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】