本文详细介绍了HTML的声明方式、中文编码、基础实例、标题、段落、文本格式化和样式的应用，包括超链接、图片、颜色、字体样式等，并提供了多个代码示例。此外，还探讨了如何在新窗口打开链接和在页面内部创建链接。文章最后提出了关于硬盘分区的问题供读者讨论。
HTML实例
一、HTML声明方式
1、HTML5
<!DOCTYPE html>
2、HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3、XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
二、中文编码
<!DOCTYPE html>
<html>
<head>
<!--设置编码格式，解决乱码问题-->
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!--h1标题标签【h1~h6】-->
<h1>我的第一个标题</h1>
<!--段落标签【h1~h6】-->
<p>我的第一个段落。</p>
</body>
</html>
三、HTML实例
1、HTML 基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML基础</title>
</head>
<body>
<!--1、基础页面-->
<p>这是基础的HTML页面！基础页面内也可以是body标签为空</p>
<!--2、标题标签-->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!--3、段落标签-->
<p>这是段落1。</p>
<p>这是段落2。</p>
<p>这是段落3。</p>
<!--4、超链接标签-->
<a href="https://www.baidu.com">点击跳转百度</a>
<!--5、图片标签-->
<img src="/images/logo.png" width="258" height="39" />
</body>
</html>
2、HTML 标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!--2、注释标签-->
<!--这是一个注释，注释在浏览器中不会显示-->
<!--3、水平线标签-->
<p>hr 标签定义水平线：</p>
<hr />
<p>这是水平线1。</p>
<hr />
<p>这是水平线2。</p>
<hr />
<p>这是水平线3。</p>
</body>
</html>
3、HTML 段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签</title>
</head>
<body>
<!--1、段落标签-->
<p>这是段落1。</p>
<p>这是段落2。</p>
<p>这是段落3。</p>
<!--2、多个段落-->
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
<!--3、换行效果-->
<p>这个<br>段落<br>演示了分行的效果</p>
<!--4、忽略段落的排版-->
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
4、HTML 文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式化</title>
</head>
<body>
<!--1、文本格式化-->
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<!--2、pre 标签-->
<pre>pre 标签</pre>
<!--3、计算机输出结果-->
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
<!--4、删除线和下划线标签-->
<p>
<!--删除线-->
<del>blue</del>
<!--下划线-->
<ins>red</ins>!</p>
</body>
</html>
5、HTML 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML样式</title>
<!--内部设置CSS样式-->
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<!--引入外部CSS样式-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body style="background-color:yellow;">
<!--1、HTML Style 元素-->
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span></div>
<div style="color:#000000;">and more...</div>
</div>
<!--2、背景颜色-->
<h2 style="background-color:red;">这是标题背景颜色</h2>
<p style="background-color:green;">这是段落背景颜色。</p>
<!--3、字体样式，颜色，大小-->
<h1 style="font-family:verdana;">字体的样式</h1>
<p style="font-family:arial;color:red;font-size:20px;">字体样式，颜色，大小。</p>
<!--4、居中对齐-->
<h1 style="text-align:center;">居中对齐的标题</h1>
<!--5、设置字体大小百分比-->
<h1 style="font-size:200%">This is a heading</h1>
<!--6、设置字体颜色-->
<h1 style="color:blue">This is a heading</h1>
<!--7、HTML使用不同样式-->
<h1>这是红色文字标题</h1>
<p>这是蓝色文字段落。</p>
<!--8、无下划线链接-->
<a href="//www.baidu.com/" style="text-decoration:none;">访问百度!</a>
<!--9、外部引入CSS样式-->
<h1>这是绿色文字标题</h1>
<p>这是红色文字段落。</p>
</body>
</html>
6、HTML 链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接</title>
</head>
<body>
<!--1、创建超级链接-->
<p><a href="/index.html">本文本</a>是一个指向本网站中的一个页面的链接。</p>
<p><a href="//www.baidu.com/">本文本</a> 是一个指向baidu的页面的链接。</p>
<!--2、图像作为链接-->
<p>创建图片链接:<a href="跳转地址"><img border="10" src="图片资源" alt="名称" width="32" height="32"></a></p>
<p>无边框的图片链接:<a href="跳转地址"><img border="0" src="图片资源" alt="名称" width="32" height="32"></a></p>
<!--3、在新的浏览器窗口打开链接-->
<a href="https://www.baidu.com/" target="_blank">访问baidu!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
<!--4、链接到同一个页面的不同位置-->
<p><a href="#C4">查看章节 4</a></p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<!--5、跳回主页-->
<p>在当前页跳回需要的页面</p>
<a href="//www.baidu.com/" target="_top">点击这里!</a>
</body>
</html>
总结：
在HTML中的常用标签非常的多，我把常用的一些HTML标签的实例罗列出来了，这篇还没有完全罗列玩，明天HTML的篇章才能结束！也留一些时间进行学习总结，这样才能够持续的进步哦！
今天帮我的一个兄弟分了一下盘，我的兄弟前一阵网购的电脑到手了，雷神911M野王手感真心的不错！还可以设置键盘上的背光颜色，真心的爱了爱了！可惜我当初买电脑有些心切，买了一个商务本，除了续航真的就一无是处了！比较恶心的是键盘没有背光，晚上打字得靠盲打，这就十分考验打字能力了！雷神911M野王对新手来说价位也比较合理！我绝对没有打广告！真心测试过，鲁大师跑分46000多！有兴趣的小伙伴们可以入手一台哦！
给大家留一个问题：如果买来的电脑自带500G固态硬盘，如果分为5个盘，每个盘100G，那么该怎么样分盘？每个盘分多少MB？ 欢迎大家在博客底下评论指点和讨论！
如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
2021年6月14日夜
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
