<!--HTML5 大多以<xxxx></xxxx>的形式存在-->
<!DOCTYPE html> <!--HTML5 文档-->
<html><!-- 页面的根元素-->
<head><!-- 页面的头,或者可以理解为一些属性-->
<meta charset="utf-8"><!--网页编码格式为 utf-8-->
<title>测试</title>
<base href="./images/" target="_blank"><!--描述了基本的链接地址/链接目标-->
<link rel="stylesheet" type="text/css" href="./css/style.css"><!--链接css目标-->
<meta name="PangCoder" content="Learn HTML"><!--定义网页的一些信息-->
<meta http-equiv="refresh" content="30"><!--30s刷新网页-->
</head>
<body>
<!--h1 大标题,共有<h1> ... <h6> -->
<!--align 设置对其方式,align="value" -->
<!--align="left" ,左对齐内容(默认值)-->
<!--align="right" ,右对齐内容-->
<!--align="center" ,居中对齐内容-->
<!--align="justify" ,对行进行伸展,这样每行都可以有相等的长度-->
<h1 align="center">这是第一个大标题,它的标识是h1,我使用了align="center"来使它居中</h1>
<!--p 段落,在段落中我们还可以调整一些效果 -->
<p align="left">这是第一个段落,它的标识是p,我使用了align="left"来使它开头在左侧</p>
<!--下列在段落中使用的标识也可以单独拿出来使用 -->
<!--p 段落,b 粗体文本 -->
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
<b>这也是粗体文本</b>
<!--p 段落,i 斜体文本 -->
<p>这是普通文本 - <i>这是斜体文本</i>。</p>
<!--p 段落,small 小号字 -->
<p>这是普通文本 - <small>这是小号字</small>。</p>
<!--p 段落,strong 加重文本(和b基本一致,为了适应不同的标签) -->
<p>这是普通文本 - <strong>这是加重文本</strong>。</p>
<!--p 段落,sub 下标字 -->
<p>这是普通文本 - <sub>这是下标字</sub>。</p>
<!--p 段落,sup 上标字 -->
<p>这是普通文本 - <sup>这是上标字</sup>。</p>
<!--p 段落,ins 插入字 -->
<p>这是普通文本 - <ins>这是插入字</ins>。</p>
<!--p 段落,del 删除字 -->
<p>这是普通文本 - <del>这是删除字</del>。</p>
<!--hr 用于绘制一条水平线,用于分隔内容-->
<hr>
<!--br 标识用于换行 ,中间文字可以添加或者省略-->
<br>链接</br>
<!--<a> 标签中必须提供 href 属性或 name 属性 -->
<!--<a> 属性值本身就含有双引号,那么您必须使用单引号 -->
<!--href 属性用于指定超链接目标的 URL -->
<a href="http://www.pangcoder.cn">这个是一个网页链接,它的标识是a</a>
<br>
<!--target 点击链接后的新窗口打开链接-->
<a href="http://www.pangcoder.cn" target="_self">当前窗口打开链接(默认)</a>
<br>
<a href="http://www.pangcoder.cn" target="_blank">新窗口打开链接</a>
<br>
<a href="http://www.pangcoder.cn" target="_parent">父框架打开链接</a>
<br>
<a href="http://www.pangcoder.cn" target="top">窗口主体打开链接</a>
<!--hr 用于绘制一条水平线,用于分隔内容-->
<hr>
<!--多行分割-->
<p>这个段落<br>演示了<br>分行的效果</p>
<!--加载图片,使用img标识-->
<img loading="lazy" src="An.jpg" width="227" height="230" />
</body>
</html>