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