html5标签大全 html标签大全及用法

编程之家2026-05-27962次浏览

各位老铁们，大家好，今天由我来为大家分享html5标签大全，以及html标签大全及用法的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

介绍几个常用的HTML5标签

一、Html的基本结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

网页的文本、图片等信息；

</body>

</html>

二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型)refresh(网页定时刷新)set-cookie(设置浏览器cookie缓存)需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者）keywords（网页关键字）description（网页描述）这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。

②<hr/>：水平线标签，添加一条水平线。

③<p></p>:段落标签，

④<br/>:换行标签，

⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html文件中空格的表示： 

2、基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：<ol></ol>列表项：<li></li>

②无序列表：<ul></ul>列表项：<li></li>

③定义列表（实现图文混排）:<dl></dl>

列表<dt>一般只有一项</dt>

列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img/>图片

<figcaption></figcaption>图片的标题

例如：<figure>

<figcaption>探险家伊泽瑞尔</figcaption>

</figure>

4、分区标签：<div></div>

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是<span style="color: red;font-size: 36px;">span</span>中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:file:///盘符：/文件夹/图片名，但是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

<2>em（倾斜强调）

<3>strong（加粗强调）

<4>b（加粗）

<5>i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义。H5要求标签尽可能实现语义化。

<6>q（短引用）

<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

<8>a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎会利用该属性获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：<a name="top"></a>

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

<a rel="external nofollow" href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220给指定QQ发送息

<9>s标签，有误文本：删除线

<s>这是S标签中的文字</s><br/>

<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br/>

<11>code:计算机代码，不保留代码格式

<pre>

</pre>

<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br/>

<13>sup:上标文本，sub:下标文本

x<sub>6</sub><br/>

©©空格 

©©空格 <br/>

<14>u:下划线

<u>这是下划线</u><br/>

mark:高亮或标记文本，浏览器显示为黄色背景

html5 一共多少标签

结构标签：(块状元素)有意义的div

<article>标记定义一篇文章

<header>标记定义一个页面或一个区域的头部

<nav>标记定义导航链接

<section>标记定义一个区域

<aside>标记定义页面内容部分的侧边栏

<hgroup>标记定义文件中一个区块的相关信息

<figure>标记定义一组媒体内容以及它们的标题

<figcaption>标签定义 figure元素的标题。

<footer>标记定义一个页面或一个区域的底部

<dialog>标记定义一个对话框(会话框)类似微信

多媒体交互标签

<video>标记定义一个视频

<audio>标记定义音频内容

<source>标记定义媒体资源

<canvas>标记定义图片

Web应用标签

<menu>命令列表

<menuitem>menu命令列表标签 FF（嵌入系统）

<command> menu标记定义一个命令按钮

<meter>状态标签(实时状态显示:气压、气温)C、O

<progress>状态标签(任务过程:安装、加载) C、F、O

<datalist>为input标记定义一个下拉列表,配合option F、O

<details>标记定义一个元素的详细内容，配合dt、dd C

注释标签

<ruby>标记定义注释或音标

<rp>告诉那些不支持 Ruby元素的浏览器如何去显示

<rt>标记定义对ruby的注释内容文本

其他标签

<keygen>标记定义表单里一个生成的键值(加密信息传送)O、F

<mark>标记定义有标记的文本(黄色选中状态)

<output>标记定义一些输出类型,计算表单结果配合oninput事

删除的HTML标签

纯表现的元素：

basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：

frame，frameset，noframes；

产生混淆的元素：

acronym，applet，isindex，dir

重新定义的HTML标签

<b>代表内联文本，通常是粗体，没有传递表示重要的意思

<i>代表内联文本，通常是斜体，没有传递表示重要的意思

<dd>可以同details与figure一同使用，定义包含文本，dialog也可用

<dt>可以同details与figure一同使用，汇总细节，dialog也可用

<hr>表示主题结束，而不是水平线，虽然显示相同

<menu>重新定义用户界面的菜单，配合commond或者menuitem使用

<small>表示小字体，例如打印注释或者法律条款

<strong>表示重要性而不是强调符号

HTML5是下一代的 HTML。

html5基础标签有哪些

<article>定义页面独立的内容区域。

<aside>定义页面的侧边栏内容。

<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command>定义命令按钮，比如单选按钮、复选框或按钮

<details>用于描述文档或文档某个部分的细节

<dialog>定义对话框，比如提示框

<summary>标签包含 details元素的标题

<figure>规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption>定义<figure>元素的标题

<footer>定义 section或 document的页脚。

<header>定义了文档的头部区域

<mark>定义带有记号的文本。

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！

java数据库连接失败？java连接sqlserver数据库失败高级编程语言有哪些(20种常用编程语言)