HTML常用元素 - 技术栈

前言

🙈上篇文章我们讲解了HTML的基本结构，所以这篇文章我们来讲解下HTML中常用的元素，本文章的性质是个人学习笔记和基础教程，前端老鸟请绕路~

🐸上一篇文章我们从宏观上了解了HTML，这篇文章将会讲解一个HTML的常用元素，首先我们先看下一个完整的HTML包含哪几个部分。

文档声明：<!DOCTYPE html>就是HTML的文档声明，主要的作用是声明当前文档的类型。
html元素：整个HTML文档的根元素，页面中的内容都要书写在这个元素内部，html元素有一个lang属性主要的作用是帮助语音工具确定发音，帮助翻译工具确定翻译规则，比如常用的规则lang="en"表示英文lang="zh-CN"表示中文简体。
head元素：主要是在此元素内部对HTML文档进行一些配置，比如设置网页的标题title``meata等等。
body元素：body元素中的内容就是你在浏览器的页面看到的内容。

🙈HTML本身的元素有很多但是常用的就那么几个，我们只需要记住常用的不常用的用到时候查文档即可。

常用的元素：p元素 h元素 img元素 a元素 iframe元素 div元素 span元素
下阶段学习：ul/ol/li元素 button元素 input元素 table元素 thead元素 tbody元素 th元素 tr元素 td元素

🐻‍❄️常见元素h元素，主要作为六个不同级别的标题，分别是h1到h6，需要注意的是h标签通常与SEO优化相关。

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

🐙常用元素p元素，表示一个段落，如果你想表示一个段落的时候可以使用p元素，p元素多个段落之间存在一定差距。

html 复制代码

<p>这个是段落的内容</p>

😳我们如何在浏览器中显示一张图片哪？答案就是img元素，img元素本质上是一个可替换元素。

🙈img元素常见的两个属性：

👺常见元素a元素：我们有时候需要从一个页面跳转到另外一个页面，这个时候我们就需要使用到a超链接标签，超链接标签有两个常用的属性，

😳a锚点链接：

🙈a锚点图片链接：

🐣a元素-其他URL地址，超链接标签不仅仅可以用来跳转网页，还可以用来做其他事情比如

🦝iframe元素，利用iframe可以让一个HTML页面嵌入到另外一个HTML中。

🙈在HTML中有两个特殊的元素div和span他们产生的历史

🐓我们的页面理论上可以没有div和span也可以全部都是div和span。

🐣div和span元素的区别：

🐸学习了这么多内容，我们能够发现在某些属性只能设置在具体的元素中，这样的属性我们称之为全局属性，常见的全局属性如下：

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；
style：给元素添加内联样式；
title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。

🤣这篇文章我们学习了常见的HTML元素，我们之后的开发中基本就是写的这些内容，我们通过这些基本的元素就可以进行简单的页面开发了~