一、HTML概述
-
HTML指的是超文本标记语言
-
超文本：是指页面内可以包含图片、链接、声音、视频等内容
-
标记：标签（通过标记符号来告诉浏览器页面该如何显示）
我们可以打开浏览器，右击页面，点击查看网页源代码，来方便了解HTML标签通过浏览器解析称为网页的这一过程。
-
-
例如Microsoft Edge
-
HTML文档的声明
我们会发现很多页面源代码都会出现<!DOCTYPE html>，这是HTML5文档的声明。如果不声明文档类型会产生一些不可预期的行为。
除了HTML5文档的声明：<!DOCTYPE html>还有HTML4的文档声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
二、HTML基本语法
-
基本结构
-
标签
HTML中的标记指的是标签。HTML使用标记标签来描述网页。
-
结构:<标签名>标签内容</标签名> 闭合标签(有标签内容)
<标签名/> 自动闭合标签(无标签内容)
-
标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如:<body text="red">
-
属性的格式:属性名="属性名"
-
属性的位置：<标签名 属性名="属性值">xxx</标签名>
-
添加多个属性:<标签名 属性名="属性值" 属性名="属性值">xxx</标签名>
-
-
-
常用标签
-
标题标签：<h1></h1>…..<h6></h6>
如：
<h1>HTML在线考试题</h1>
-
段落标签：<p></p>
如：
<p align="center">静夜思是诗人李白所做的一首五言古诗</p>
-
换行标签:
-
列表:无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
如：
列表无序列表<ul type="square"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul>有序列表<ol type="1"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ol>结果:
-
超链接: <a></a>
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。
-
图像标签：<img/>
注意图片的路径最好放在HTML文档的同一路径，或者同一路径下的文件夹内。
-
特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在html中使用字符转义。
-
表格(有例子方便理解)
-
表格的标签
table标签:表格的标签
tr标签:表格中的行
th标签:表格的表头
td标签；表格单元格
-
表格的基本结构
定义表格 
-
表格属性
width设置宽
height:设置高
align:设置对齐位置
cellspacing:表格单元格间距设置
cellpadding:规定的是单元边沿与单元内容之间的空间。
valign:规定单元格中内容的垂直排列方式。
cospan：单元格应跨越的列数(可以理解为合并列数)。
rowspan:单元格应跨越的行数(可以理解为合并行数)。
bgcolor:设置单元格的背景颜色。
-
-
表格例子：
创造一个有如下效果的表格（要用到:align左对齐，中央对其。cellspacing,cellpadding,bgcolor等属性）
代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- table-- 表格标签border="1" 边框宽度width="400" 表格宽度cellspacing="0" 设置单元格与单元格之间的距离cellpadding="0" 设置单元格内容到边框的距离tr -- 表格行 align="left / center / right" 水平位置valign="top / middle /bottom" 垂直位置th -- 单元格(表头 居中 加粗)td -- 普通的单元格align="center" valign="middle"表格中的内容只能放在单元格--><table border="1" cellspacing="0" cellpadding="0"><tr bgcolor="red"><th width="150" height="50" >姓名</th><th width="100">语文</th><th width="100">数学</th><th width="100">英语</th></tr><tr><td bgcolor="green" height="50" align="center" valign="middle">张三</td><td>90</td><td>80</td><td>70</td></tr><tr><td>李四</td><td>90</td><td>80</td><td>70</td></tr><tr align="center" valign="bottom" height="50"><td>王五</td><td>90</td><td>80</td><td>70</td></tr></table></body>
</html>
![[zabbix] zabbix监控其他](https://img-blog.csdnimg.cn/direct/5e2ec9e265984b4cb0c8c7bfc67b8cb1.png)
