详细整理！！html5常用标签

文章目录

前言
一、HTML简介
- 1.HTML文件结构
- 2.各标签意义
二、HTML标签介绍
- 1.标题标签
- 2.段落标签
- 3. 换行标签
- 4.hr标签
- 5. span标签
- 6.div标签
- 7.img标签
- 8.超链接标签
- 9.注释标签
- 10.空格
- 11.格式化标签
- 12.sup上标和sub下标
- 13. pre预格式化标签
- 14.table 表格标签
- - table 标签基础内容
  - 合并单元格
- 15.列表标签
三、行内元素、行内块元素和块级元素
- 1. display 属性
- - 块级元素转行内元素示例
  - 行内元素转块级元素示例
- 2.什么是行内元素、块级元素和行内块元素？
- - 行内元素（inline element）
  - 行内块元素
  - 块元素（block element）

前言

在学习 HTM L之前，首先了解什么是 HTML：

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。

HTML代码是由标签构成的，标签名放到“< >”中。
大部分标签都是成对出现，例如：以<body>为开始标签，以</body>为结束标签。少数标签只有开始标签的被称为“单标签”。

一、HTML简介

1.HTML文件结构

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

2.各标签意义

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、HTML标签介绍

1.标题标签

标题标签的默认样式是 自动加粗 的，字体一级标题最大，六级标题最小，每个标题标签独占一行；
标题标签是 块元素

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

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title></head><body><h1>一级标题</h1><h2>二级标题</h2> <h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

页面效果：
在这里插入图片描述

2.段落标签

段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；
它代表着一个自然段；
段落标签是 块元素。

<p></p>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>注意：doctype声明是不区分大小写的，用来告知web浏览器页面使用了那种HTML版本。对于中文网页需要使用 charset="utf-8" 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 charset="gbk" 。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。</p><p>这是一个注意事项。</p><p>这是一个注意事项。</p>
</body></html>

页面展示：
在这里插入图片描述

3. 换行标签

换行标签br的作用是，强制换行。br 是 单标签。

<br/>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body>第一行<br/>第二行<br/>第三行<br/>
</body></html>

页面展示：
在这里插入图片描述

4.hr标签

hr标签：给页面添加一个分割线
hr标签，可以添加样式

<hr>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head>
<style>div>hr {height: 20px;background-color: red;}
</style><body>第一行<br /><hr><div>第二行<br /><hr></div>第三行
</body></html>

页面展示：

在这里插入图片描述

5. span标签

<span></span>

span 用于对文档中的行内元素进行组合；
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span 应用样式，那么span 元素中的文本与其他文本不会任何视觉上的差异；
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式；
span 标签不同于p 标签是一个行内元素（不独占一行）

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><span>1234</span><span>5678</span>
</body></html>

页面效果：
在这里插入图片描述

6.div标签

<div></div>

div 标签可以看出是一个盒子容器，这里面可以放别的标签
div 标签是一个块元素

页面效果：

在这里插入图片描述

如上图控制台所示（打开控制台的方式：F12）：div 标签里面可以包含 p 标签， p 标签，里面不可以放div 标签

7.img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">src的路径分为：网上的图片路径和本地的图片路径

8.超链接标签

<a></a>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><a href="http://www.baidu.com" target="_blank">百度</a>
</body></html>

作用：点击文字跳到链接的地方
a是行内元素
href：规定链接的目标URL
target：（链接窗口的打开方式）
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

9.注释标签

<!-- 这是一行注释 -->

10.空格

html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要特殊字符才能显示出空格效果。

html 的几种空格形式：

&nbsp;        它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了&nbsp;，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。&ensp;         它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其 占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。&emsp;        它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其 占据的宽度正好是1个中文宽度，而且基本上不受字体影响。&thinsp;         它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。&zwnj; 它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &#8204;&zwj;它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &#8205; &zwj;）。

11.格式化标签

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><ins>下划线</ins><u>下划线</u>
</body></html>

页面展示：

在这里插入图片描述

<strong> 和 <b> 都是加粗文本，但是<strong>的语义更加强列

12.sup上标和sub下标

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>x<sup>2</sup></p><p>log<sub>2</sub>10</p></body></html>

页面展示：

在这里插入图片描述

13. pre预格式化标签

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><pre>我是一个 有样式的文字</pre>
</body></html>

页面展示：
在这里插入图片描述

可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

14.table 表格标签

table 标签基础内容

table标签包含 tr, tr 标签包含 td 和 th：

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域, 范围是比 th 大
tbody：表格得到主体区域

表格标签的属性可以用于设置边框大小等，但需要放到 table 标签中：

align：是表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)
border：表示边框，1表示有边框(数字越大, 边框越粗)，“” 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认为 2 像素
width / height：设置尺寸

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td></tr><tr><td>张三</td><td>男</td></tr></table>
</body></html>

页面展示：

在这里插入图片描述

合并单元格

先确定跨行还是跨列，找好目标单元格(跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)，删除的多余的单元格。
跨行合并: rowspan=“n”
跨列合并: colspan=“n”

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><table width="100%" align="center" border="1"><tr align="center"><th colspan="6">财务周期表</th></tr><tr><th colspan="3" align="left" style="border-right-style: hidden;">商品类型：JJJ</th><th colspan="3" align="left" style="border-left-style: hidden;">商品编号：AAAA</th></tr><tr align="center"><th width="17%">成本</th><th width="17%">损耗</th><th width="17%">保全价值</th><th width="17%">成本</th><th width="17%">损耗</th><th width="17%">保全价值</th></tr><tr align="center"><td width="17%">100</td><td width="17%">233</td><td width="17%">345</td><td width="17%">467</td><td width="17%">523</td><td width="17%">64</td></tr></table>
</body></html>

页面展示：

在这里插入图片描述

15.列表标签

无序列表：ul，li有序列表：ol，li自定义列表：dl（总标签），dt（小标题），dd

注：元素之间是并列关系：

ul/ol中只能放li不能放其他标签
dl中只能放dt和dd
li中可以放其他标签

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><h2>无序列表</h2><ul><li>111</li><li>222</li><li>333</li></ul><h2>有序列表</h2><ol><li>111</li><li>222</li><li>333</li></ol><h2>自定义列表</h2><dl><dt>111</dt><dd>222</dd><dd>333</dd><dd>444</dd></dl>
</body></html>

页面展示：

在这里插入图片描述

三、行内元素、行内块元素和块级元素

HTML 可以将元素分类方式分为 行内元素、块级元素和行内块元素。

1. display 属性

使用 display 属性能够将三者任意转换：

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

块级元素转行内元素示例

p 标签是块级元素：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>第一段</p><p>第二段</p>
</body></html>

上面代码的页面展示如图：
在这里插入图片描述
通过 display:inline; 将其转化为行内元素：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p style="display:inline">第一段</p><p style="display:inline">第二段</p>
</body></html>

页面展示如图：
在这里插入图片描述

行内元素转块级元素示例

<span style="text-align: center;">这是行内元素</span>

此时的页面展示如下，因为 text-align 修饰的是块级元素：
在这里插入图片描述
当通过 display:block; 转化为块级元素时：

<span style="text-align: center;display: block;">这是行内元素</span>

页面展示如下：
在这里插入图片描述

text-indent/text-align 都是修饰块级元素

2.什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

特点：1.不会独占一行，它是自左向右排列，一行排满再换行2.行内元素的宽和高，默认是被内容撑开的3.对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效4.不会自动进行换行常用行内元素：span em strong a i ......

行内块元素

特点：1.兼具块元素和行内元素特点2.不会独占一行，可自定义宽高3.默认排序方式为从左到右

块元素（block element）

特点：1.能够识别宽高2.margin 和 padding 的上下左右均对其有效3.独占一行4.多个块级元素标签写在一起，默认排序方式为从上至下常用块元素：div h1-h6 p header footer nav......

拓展内容：

HTML5基础知识