当前位置：首页 > news >正文

HTML基础2-空元素，元素属性与页面的结构

news 来源：原创 2025/8/16 7:26:10

空元素（Void Element）

元素属性（Attribute）

页面结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网页</title>
</head><body><h1>我的第一个网页</h1></body></html>

HTML文件中，head元素与body元素放在<html></html>里面。这一种把元素放到其他元素之中——这被称作嵌套。细心的小伙伴应该发现了之所以能够嵌套，那是因为有被嵌入的元素中有开始标签与结束标签。

空元素（Void Element）

在HTML里面存这么一种元素，只有开始标签，是的，没有结束标签，也没有内容。因此它不不能作为被嵌入的元素，只能作为嵌入的元素。如上面的meta元素以及下面的img元素。

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />

在上面的h1元素后面添加上面的img元素，代码如上，在浏览器中将会更新logo图片

HTML 中，在一个空元素的标签末尾可以不添加 "/"，然而，这也是一种兼容的做法，当你希望HTML 被当做XML使用时也有效。也就是说你其实可以写成下面这样子

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" >

元素属性（Attribute）

在上面的img元素中，有 src="https://www.baidu.com/img/flexible/logo/pc/result.png"在开始标签中，这一串东西是img元素的属性。src是属性名称，而等号后面是属性的值，也就是"https://www.baidu.com/img/flexible/logo/pc/result.png"。

属性必须包含：

一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号（""）引起来。

下面是给img元素再添加一个属性title，在src属性值后面加上空格隔开。当鼠标放在logo上时，会出现title的属性值“我是一个logo”。

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" title="我是一个logo" />

页面结构

无论是阅读故事、报纸、大学教科书还是杂志等，大多数结构化文本都由标题和段落组成。

段落在英文paragraph，对应的是p元素；标题在HTML中有h1,h2,h3,h4,h5,h6,六个等级，标题的字体大小逐渐减小，而对应的英文是heading 。

    <h1>开心<h1><h2>开心<h2><h3>开心</h3><h4>开心</h4><h5>开心</h5><h6>开心</h6>

举个小说的例子使用一个p元素与h元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网页</title>
</head><body><h1>西游记</h1><p>吴承恩</p><h2>第一回 灵根育孕源流出 心性修持大道生</h2><p>盖闻天地之数，有十二万九千六百岁为一元。将一元分为十二会，乃子、丑、寅、卯、辰、巳（sì）、午、未、申、酉、戌、亥之十二支也。每会该一万八百岁......</p><h2>第二回 悟彻菩提真妙理 断魔归本合元神</h2><p>神话表美猴王得了姓名，怡然踊跃，对菩提前作礼启谢。那祖师即命大众引孙悟空出二门外，教他洒扫应对，进退周旋之节。众仙奉行而出......</p><h2>第三回 四海千山皆拱伏 九幽十类尽除名</h2><p>却说美猴王荣归故里，自剿了混世魔王，夺了一口大刀。逐日操演武艺，教小猴砍竹为标，削木为刀，治旗幡（fān），打哨子，一进一退，安营下寨，顽耍多时。……</p></body></html>

空元素（Void Element）

元素属性 （Attribute）

页面结构

相关文章：

元素属性（Attribute）