index.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>目录</h1>
<h2>第一项</h2>
<p>img标签的alt属性：<a href="826-1.html">效果展示</a></p>
<hr />
<h2>第二项</h2>
<p>img标签的title属性：<a href="826-2.html">效果展示</a></p>
<hr />
<h2>第三项</h2>
<p>通过图片实现页面跳转：<a href="826-3.html">效果展示</a></p>
<hr />
<h2>第四项</h2>
<p>常用的文本编辑标签：<a href="826-4.html">效果展示</a></p>
<hr />
<!-- 8.28 -->
<h2>第五项</h2>
<p>无序列表：<a href="828-1.html">效果展示</a></p>
<hr />
<h2>第六项</h2>
<p>有序列表：<a href="828-2.html">效果展示</a></p>
<hr />
<h2>第七项</h2>
<p>有序列表：<a href="828-2.html">效果展示</a></p>
<hr />
<h2>第八项</h2>
<p>空格属性以及格式排版：</p><a href="829-1.html">效果展示</a>
<hr />
<h2>第九项</h2>
<p>target定义新网页打开方式：</p><a href="829-2.html">效果展示</a>
<hr />
<h2>第十项</h2>
<p>图片下载：</p><a href="829-3.html">效果展示</a>
<hr />
<h2>第十一项</h2>
<p>目录跳转：</p><a href="829-4.html">效果展示</a>
<hr />
</body>
</html>829-1
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<p>1 2</p>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
</body>
</html>829-2
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<hr />
<!--
target：定义链接的打开方式。
_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接（默认）。
-->
<a href="index.html">默认页面</a>
<br />
<a href="index.html" target="_blank">默认页面_blank</a>
<br />
<a href="index.html" target="_self">默认页面_self</a>
<br />
</body>
</html>829-3
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<hr />
<!-- 下载图片 -->
<a href="2.png" download="111.png">下载文件</a>
</body>
</html>829-4
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<hr />
<!-- 目录跳转 -->
<h1 id="section0">目录</h1>
<a href="#section1">跳转到第1部分</a><hr />
<a href="#section2">跳转到第2部分</a><hr />
<a href="#section3">跳转到第3部分</a><hr />
<!-- 链接到页面中的某个部分 -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="section1">这是第1部分</div><a href="#section0">返回目录</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="section2">这是第2部分</div><a href="#section0">返回目录</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="section3">这是第3部分</div><a href="#section0">返回目录</a>
</body>
</html>828-1
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<br />
<ul>
<li>第一章</li>
<li>第二章</li>
</ul>
<hr />
<p>总结：</p>
</body>
</html>828-2
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<br />
<h4>编号列表：</h4>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
<hr />
<h4>大写字母列表：</h4>
<ol type="A">
<li>第一章</li>
<li>第二章</li>
</ol>
<hr />
<h4>小写字母列表：</h4>
<ol type="a">
<li>第一章</li>
<li>第二章</li>
</ol>
<hr />
<h4>罗马数字列表：</h4>
<ol type="I">
<li>第一章</li>
<li>第二章</li>
</ol>
<hr />
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>第一章</li>
<li>第二章</li>
</ol>
<hr />
<p>总结：</p>
</body>
</html>826-1
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<!-- <img src="1.png"/> -->
<p>img的alt属性的作用：当src对应的图片不存在是，展示文字描述</p>
<p>1.无alt效果展示：<img src="2.png"/></p>
<hr />
<p>2.有alt效果展示：<img src="2.png" alt="百度logo"/></p>
<hr />
<p>3.图片存在，且有alt效果展示：<img src="1.png" alt="百度logo"/></p>
<hr />
<p>4.图片存在，且无alt效果展示：<img src="1.png"/></p>
<hr />
<p>结论：alt只在图片无法显示时生效</p>
</body>
</html>826-2
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<p>img的title属性作用：当鼠标悬停在图片上时，展示描述信息（本例：www.baidu.com）</p>
<img src="1.png" title="www.baidu.com"/>
<img src="2.png" title="www.baidu.com"/>
</body>
</html>826-3
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<hr />
<p>实现点击图片跳转至某一页面</p>
<p>通过文字跳转：<a href="https://www.baidu.com/">百度</a></p>
<hr />
<p>通过图片跳转：<a href="https://www.baidu.com/"><img src="1.png"/></a></p>
</body>
</html>826-4
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="index.html">返回目录</a>
<hr />
<p>1-文本加粗<b></p>
<p>大数据<b>可视化</b>技术及应用</p>
<hr />
<p>2-设置斜体<i></p>
<p><i>大数据</i>可视化技术及应用</p>
<hr />
<p>3-下划线<ins></p>
<p>大数据可视化<ins>技术及应用</ins></p>
<hr />
<p>4-删除线<del></p>
<p>大数据可视化技术<del>及</del>应用</p>
<hr />
<p>5-上标<sup></p>
<p>大数据可视化技术及应用<sup>[1]</sup></p>
<hr />
<p>6-下标<sub></p>
<p>大数据可视化技术及应用<sub>[1]</sub></p>
</body>
</html>