导图社区 HTML标签种类
- 34
- 1
- 1
- 举报
HTML标签种类
这是一篇关于HTML标签种类的思维导图，主要内容包括：三、Body内部常用的标签，二、HTML文档基本结构，一、HTML是什么又不是什么？。
编辑于2024-04-26 15:22:04- 前端
- html
- H5
- 网页开发
- 相似推荐
- 大纲
html标签
script标签
一、放置在<head>标签中
由于 HTML 文档是由浏览器从上到下依次载入的，如果你将JavaScript代码放置在<head>标签里时，JavaScript无法从<body>标签中获取所需要的元素，就会出现DOM还未被页面渲染，JavaScript无法执行的情况。所以将JavaScript代码放置在<head>标签中，一般用于提前载入以响应用户的动作，不影响HTML 文档的浏览器显示内容，可以保证脚本在任何调用之前被加载。
二、放置在<body>标签中
位于<body>标签内的<script>标签，可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），需要将<script>标签放在该网页元素之后。
三、放置在<body>标签后
当准备解释这里的JavaScript代码时，整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合。
rel=nofollow
nofollow标签是禁止蜘蛛爬行跟踪本链接
meta robots标签是禁止蜘蛛爬行跟踪或索引整个页面链接
https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html
常用标签
https://blog.csdn.net/qq_46137324/article/details/131971697
主题
标准化的 HTML5 元素
根元素
Element Description <html> 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
文档元数据
Element Description <head> 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。 <title> 定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。 <base> 定义页面上相对 URL 的基准 URL。 <link> 用于链接外部的 JavaScript 或 CSS 到该文档。 <meta> 定义其他 HTML 元素无法描述的元数据。 <style> 用于内联 CSS。
脚本
Element Description <script> 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。 <noscript> 定义当浏览器不支持脚本时显示的替代文字。 <template> 通过 JavaScript 在运行时实例化内容的容器。
章节
Element Description <body> 代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。 <section>  定义文档中的一个章节。 <nav>  定义只包含导航链接的章节。 <article>  定义可以独立于内容其余部分的完整独立内容块。 <aside>  定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 标题元素实现了六层文档标题，<h1> 是最大的标题，<h6> 是最小的标题。标题元素简要地描述章节的主题。 <header>  定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 <footer>  定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 <address> 定义包含联系信息的一个章节。 <main> 定义文档中主要或重要的内容。
组织内容
Element Description <p> 定义一个段落。 <hr> 代表章节、文章或其他长内容中段落之间的分隔符。 <pre> 代表其内容已经预先排版过，格式应当保留 。 <blockquote> 代表引用自其他来源的内容。 <ol> 定义一个有序列表。 <ul> 定义一个无序列表。 <li> 定义列表中的一个列表项。 <dl> 定义一个定义列表（一系列术语和其定义）。 <dt> 代表一个由下一个 <dd> 定义的术语。 <dd> 代表出现在它之前术语的定义。 <figure>  代表一个和文档有关的图例。 <figcaption>  代表一个图例的说明。 <div> 代表一个通用的容器，没有特殊含义。
文字形式
Element Description <a> 代表一个链接到其他资源的超链接 。 <em> 代表强调 文字。 <strong> 代表特别重要 文字。 <small> 代表注释 ，如免责声明、版权声明等，对理解文档不重要。 <s> 代表不准确或不相关 的内容。 <cite> 代表作品标题 。 <q> 代表内联的引用 。 <dfn> 代表一个术语包含在其最近祖先内容中的定义 。 <abbr> 代表省略 或缩写 ，其完整内容在 title 属性中。 <data>  关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。 <time>  代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。 <code> 代表计算机代码 。 <var> 代表代码中的变量 。 <samp> 代表程序或电脑的输出 。 <kbd> 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。 <sub>,<sup> 分别代表下标 和上标 。 <i> 代表一段不同性质 的文字，如技术术语、外文短语等。 <b> 代表一段需要被关注 的文字。 <u> 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。 <mark>  代表一段需要被高亮的引用 文字。 <ruby>  代表被ruby 注释 标记的文本，如中文汉字和它的拼音。 <rt>  代表ruby 注释 ，如中文拼音。 <rp>  代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。 <bdi>  代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。 <bdo> 指定子元素的文本方向 ，显式地覆盖默认的文本方向。 <span> 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。 <br> 代表换行 。 <wbr>  代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。
编辑
Element Description <ins> 定义增加 到文档的内容。 <del> 定义从文档移除 的内容。
嵌入内容
Element Description <img> 代表一张图片 。 <iframe> 代表一个内联的框架 。 <embed>  代表一个嵌入 的外部资源，如应用程序或交互内容。 <object> 代表一个外部资源 ，如图片、HTML 子文档、插件等。 <param> 代表 <object> 元素所指定的插件的参数 。 <video>  代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。 <audio>  代表一段声音 ，或音频流 。 <source>  为 <video> 或 <audio> 这类媒体元素指定媒体源 。 <track>  为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕） 。 <canvas>  代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。 <map> 与 <area> 元素共同定义图像映射 区域。 <area> 与 <map> 元素共同定义图像映射 区域。 <svg>  定义一个嵌入式矢量图 。 <math>  定义一段数学公式 。
表格
Element Description <table> 定义多维数据 。 <caption> 代表表格的标题 。 <colgroup> 代表表格中一组单列或多列 。 <col> 代表表格中的列 。 <tbody> 代表表格中一块具体数据 （表格主体）。 <thead> 代表表格中一块列标签 （表头）。 <tfoot> 代表表格中一块列摘要 （表尾）。 <tr> 代表表格中的行 。 <td> 代表表格中的单元格 。 <th> 代表表格中的头部单元格 。
表单
Element Description <form> 代表一个表单 ，由控件组成。 <fieldset> 代表控件组 。 <legend> 代表 <fieldset> 控件组的标题 。 <label> 代表表单控件的标题 。 <input> 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。 <button> 代表按钮 。 <select> 代表下拉框 。 <datalist>  代表提供给其他控件的一组预定义选项 。 <optgroup> 代表一个选项分组 。 <option> 代表一个 <select> 元素或 <datalist> 元素中的一个选项 <textarea> 代表多行文本框 。 <keygen>  代表一个密钥对生成器 控件。 <output>  代表计算值 。 <progress>  代表进度条 。 <meter>  代表滑动条 。
交互元素
Element Description <details>  代表一个用户可以(点击)获取额外信息或控件的小部件 。 <summary>  代表 <details> 元素的综述 或标题 。 <menuitem>  代表一个用户可以点击的菜单项。 <menu>  代表菜单。
HTML标签种类
1. 一、HTML是什么又不是什么？
1.1、HTML是什么
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
网页文件的扩展名：.html或.htm
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
1.2、HTML不是什么
HTML是一种标记语言（markup language），它不是一种编程语言。HTML使用标签来描述网页。
2. 二、HTML文档基本结构
基本结构示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
对HTML基本格式的说明
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
2.1、head内部常用标签
<!--标签的分类<h1></h1>--> <!DOCTYPE html> <!--lang="en" 表示网页的主要语言是英语--> <html lang="zh-CN"> <head> <!--定义网页原信息--> <meta charset="UTF-8"> <!--方便搜索引擎查找的，一个是keywords搜索关键字可以引导到到该网页，description相当于摘要--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> <!--标签页上显示的内容--> <title>My First HTML</title> <!--定义a标签的样式--> <style> a{ color:darkred; } </style> <!-- 定义JS代码或引入外部JS文件 <script>alert("Hello World")</script> --> <!--引入外部样式表文件text.css将a标签的颜色变为绿色--> <link rel="stylesheet" href="text.css"> <!-- 2秒后跳转到对应的网址，注意引号 <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head>
2.1.1、对Meta标签的再补充
• <meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。 • <meta>标签位于文档的头部，不包含任何内容。 • <meta>提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性:
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
3. 三、Body内部常用的标签
3.1、基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--> <hr>
3.2、img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
img标签中除了自带的属性，我们还可以给它添加一些自定义的属性
<img format="jpg" sx="自定义的属性" src="图片的路径" >
3.3、a标签
3.3.1、a标签的介绍
a标签也就是我们常见的超链接标签，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置， 还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
3.3.2、a标签的语法格式
<a href="http://www.oldboyedu.com" target="_blank" id="自定义的ID值">点我</a>
href属性指定目标网页地址。该地址可以有几种类型： • 绝对URL - 指向另一个站点（比如 href="http://www.jd.com） • 相对URL - 指当前站点中确切的路径（href="index.htm"） • 锚URL - 指向页面中的锚（href="#top"）
target 属性： • _blank表示在新标签页中打开目标网页 • _self表示在当前标签页中打开目标网页
id 属性: id 属性可用于创建一个 HTML 文档书签。提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
在HTML文档中插入ID: <a id="ID为1">现在是ID为1的位置</a>
3.4、HTML中特殊字符
虽然 html 不区分大小写，但实体字符对大小写敏感。
3.5、div和span标签
span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。
span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
3.6、重点：标签的分类
3.6.1、第一种：块级标签
特点：标签独占一行，可指定宽、高。
特性： • 能够识别宽高 • margin和padding的上下左右均对其有效 • 可以自动换行 • 多个块状元素标签写在一起，默认排列方式为从上至下 • 可以使用margin:0 auto居中对齐
常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
3.6.2、第二种： 内敛标签(行内标签)
特点：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
特性： • 无法设置宽高 • margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。 • 不会自动换行
常用的内联元素有： <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3.7、列表标签
列表标签的属性大概有以下几种
3.7.1、无序列表 ul 的相关属性
type属性： • disc（实心圆点，默认值） • circle（空心圆圈） • square（实心方块） • none（无样式）
<ul type="disc"> <li>实心圆点-默认值</li> </ul> <ul type="circle"> <li>实心圆圈</li> </ul> <ul type="square"> <li>实心方块</li> </ul> <ul type="none"> <li>无样式</li> </ul>
输出示例：
3.7.2、有序列表 ol 的相关属性
有序列表type属性值 并不是有序列表只能用1、2、3 ……来表示序列。也可以使用下面的方式：
有序列表的其他属性
3.7.3、标题列表的相关属性
<dl> <dt>标题一</dt> <dd>标题一下的内容1</dd> <dt>标题二</dt> <dd>标题二下的内容1</dd> <dd>标题二下的内容2</dd> </dl>
输出示例
3.8、文本格式化标签
https://blog.csdn.net/qq_44891434/article/details/113371490
https://blog.csdn.net/qq_46137324/article/details/131971697