【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（stron
- 创业
- 2025-09-15 11:27:01
HTML结构
一个HTML包含以下部分：
文档类型声明html元素 head元素body元素例（CSDN）：
一、文档类型声明HTML最一方的文档称为：文档类型声明，用于声明文档类型。即：<!DOCTYPE html>
<!DOCTYPE html> 的作用：
HTML文档声明，用于告诉浏览器是HTML5页面。让浏览器用HTML5的标准去解析。必须放在最最前面，不可以省略。否则可能有兼容性问题。 二、html元素 1、 <html>元素表示一个HTML 文档的根（顶级元素），也成为根元素。 其他元素必须是这个元素的后代。
2、一般都会加一个 lang属性lang属性的作用：
定义当前HTML文档的语言帮助语音合成工具确定要使用的发音。帮助翻译工具确定要使用的翻译规则。常用lang属性的规则：
lang="zh-CN"：表示这个HTML文档的语言是中文。lang="en"：表示这个HTML文档的语言是英文。例（CSDN）：
三、head元素 1、 <head>元素规定文档的配置信息（也成为元数据），包括文档的标题，引用的文档样式、脚本信息等等。
元数据：描述数据的数据，可以理解为整个页面的配置。常见的设置：
title元素 设置网页的标题。meta元素 设置网页的编码。即：<meta charset=utf-8">，一般都是utf-8编码。 ⭐meta元素是用来让机器识别元数据的。 ⭐有各种元素类型。例如name & content可以指定元数据的名称（这部分对 SEO 非常有用）等等。例（CSDN）：
四、body元素body元素里面的内容是 在浏览器窗口中看到的东西，也就是网页的具体内容和结果。
五、常用元素 h元素 h：即heading，标题。 作用：将一些重要文字作为标题。<h1> 到 <h6>：六种不同级别。 <h1>级别最高，<h6>级别最低。h元素通常和SEO优化有关。
p元素 p：即paragraph，段落。 作用：表示文本的一个段落的时候使用。多个段落之间会存在间距。 img元素作用：将图片嵌入文档。告诉浏览器显示图片。
<img>常见的两个属性：
src属性： 是必须的。 包含你想嵌入图片的路径。
alt属性 不是强制的。有两个作用： ①如果图片加载失败（图片地址错误或者图片不存在），那么会显示这段文本。 ②屏幕阅读器会都这段文字给使用者，指导这张图的含义。
其他属性也都可以，例如：width属性
图片的路径src
网络图片：给一个网络的URL就行。很简单。本地图片：己电脑上的图片。 本地图片的地址分两种： ①绝对路径（几乎不用） 从电脑的本目录开始一直找到资源路径。 ②相对路径 对于当前文件而言的一个路径。 .：代表当前文件夹，可省略。 ..：代表上一层的文件夹，可省略。注意路径分割都是/。 <img src="./../images/test.jpg" alt=""> img支持的图片格式 a元素作用：需要跳转到某个链接的时候使用a元素。
<a>元素：定义超链接，用于打开新的URL。
<a>元素两个，常见的属性：
href属性 指定要打开的URL。 也可以是一个本地地址。target属性 指定在何处显示链接的资源。 ①_self：在当前窗口打开。 ②_blank：在新的窗口打开。 ③_parent：在父窗口打开。（单独使用没效果，需要和iframe元素配合使用。） ④_top：在最顶层窗口打开。（单独使用没效果，需要和iframe元素配合使用。）a元素：设置锚点链接
作用：跳到网页的某个位置。（例如：目录跳转）具体步骤： ①在要跳的的元素上定义一个id属性 ②定义a元素，让他的href指向对应的id。a元素：设置图片链接
作用：点击某个图片，跳转到指定链接。具体步骤： ①定义a元素，它的内容放一个img元素。（也就是img元素就是a元素的内容。） ②指定href，设置想跳转的地址。 iframe元素在一个HTML文档中嵌入另一个HTML文档。
div元素 div元素：就是一个容器，或者说盒子。用来包裹内容。作用： ①div包裹的内容在不同行显示。包裹的这部分是一个整体。 ②把网页分割成多个独立的部分。 span元素 span元素：就是一个容器，或者说盒子。用来包裹内容。作用： ①span包裹的内容在同一行显示。包裹的这部分和普通文本没区别。 ②用于区分特殊文本和普通文本，主要用来显示关键字。 六、不常用元素 strong元素 作用：内容加粗，强调。 通常都是用css来完成。 i元素 作用：内容倾斜。 通常都是用css来完成。 code元素 作用：用于显示代码 br元素 作用：换行【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（stron由讯客互联创业栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（stron”
