一 效果图
二 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="D:/test2.png"> <!-- 地址栏左侧显示logo等图片-->
<title>Html 初识1</title>
<style type="text/css">
a {color:blue}
</style>
</head>
<body> <!-- 文档主体-->
<h1>大标题1</h1>
<font size="6">6号字体</font>
<h2>大标题2</h2>
<font size="5">5号字体</font>
<p>段落<br>1</p> <!-- 换行的段落1-->
<hr> <!-- 水平线-->
<p>段落2</p>
<a href="https://www.baidu.com">百度网址</a>
<br/> <!-- 换行 相当于<br>..</br>-->
<img src="D:/test.png" width="25" height="39" />
<br/>
<a href="https://www.baidu.com">
<img src="D:/test2.png" width="70" height="39" />
</a> <!-- 将图片替换成文本-->
<br/>
<p>
<a href="https://www.microsoft.com/">本文本</a>
万维网上页面链接。</p>
<br/>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为_blank, 链接将在新窗口打开。</p>
<br/>
<p>
<a href="#C4">查看章节 4</a> <!-- 书签-->
</p>
<br/>
<b>这个文本是加粗的</b>
<br/>
<strong>这个文本是加粗的</strong>
<br/>
<big>这个文本字体放大</big>
<br/>
<em>这个文本是斜体的</em>
<br/>
<i>这个文本是斜体的</i>
<br/>
<small>这个文本是缩小的</small>
<br/>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<br/>
<h2><a id="C4">章节 4</a></h2> <!-- 书签-->
<p>这边显示该章节的内容……</p>
<br/>
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<p>WWF's goal is to: <!-- 块引用-->
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>