这篇博客介绍了HTML的基础，包括HTML的基本结构、常用标签如段落、标题、换行、图片、超链接等，并提供了多个练习案例，帮助读者通过实践加深理解。
目录
一、什么是HTML？
1.
HTML
是用来描述网页的一种语言。
2.
HTML
指的是超文本标记语言
:
HyperText
Markup Language
3.
HTML
不是一种编程语言，而是一种标记语言
4.
标记语言是一套标记标签
(markup tag)
5.
HTML
使用标记标签来描述网页
6.
HTML
文档包含了
HTML
标签及文本内容
7.
HTML
文档也叫做
web
页面
二、HTML的基本结构
<!DOCTYPE html>
<html>
<head>
<title>html的基本结构</title>
<meta charset="utf-8">
</head>
<body>
Hello word!
</body>
</html>
注：
- <!DOCTYPE html>指声明为HTML5文档；
- html指HTML页面的根元素；
- head指头部元素，<meta charset="utf-8"> 定义网页编码格式为 utf-8，为防止乱码；
- title指文档名称；
- body指可见的网页面内容，如上下图所示
三、基本标签
1.段落标签
<p></p>
2.标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> 相同点：一级到六级标题都具有加粗的作用
不同点：字号依次减小
3.换行标签
<br />
4.水平线标签
<hr>
5.图片引用
<img src="" title="" alt="">
6.超链接
<a href="" target="_blank"></a>
5.加粗
<b></b> （单纯变粗）或<strong></strong> （有强调意义）
6.倾斜
<i></i>（单纯变斜）或<em></em> （有强调意义）
7.下划线
<u></u> （单纯加个下划线）或<ins></ins> （有强调意义）
8.删除线
<s></s> （单纯加个删除线）或<del></del> （有强调意义）
9.特殊符号
空格号：   
大于号：>
小于号：<
版权号：©
双引号：&quto;
四、小练习
1.清平乐练习
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李清照-清平乐</title>
</head>
<body>
<h3>清平乐</h3>
<hr>
<p>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣<br>清泪！</P>
<P>今年海角天涯，萧萧两鬓生华。</P>
<P>看取晚来风势，故应难看梅花</P>
</body>
</html>效果图
2.李清照简介
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李清照简介</title>
</head>
<body>
<h1>人物简介</h1>
<p><b>李清照</b><i>（1084年3月13日~1155年5月12日）</i>，
宋代女词人，号易安居士，婉约词派代<br/>表，有“千古第一才女”之称。
早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。<br/>
所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。
形式上善用白描手法，自辟<br/>途径，语言清丽。论词强调协律，
崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br/>法作词，
留有诗集《易安居士文集》、《易安词》等。</p>
<hr/>
<span>©**版权所有</span>
</body>
</html>效果图
3.超链接练习
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<!-- 页面链接 -->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.bilibili.com/" target="_blank" >bilibili</a>
<!-- target:
值：_blank 在新的页面中打开链接
_self 在原页面中打开链接
-->
<!-- 锚链接 -->
<a href="#ten" target="_self" >锚链接</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 />
<p id="ten">有一天原本平静的村庄突然受到不明寄生生命体的袭击！“快逃！”“可是……” 快找出怪兽玛格尼亚的弱点，欢迎收看迪迦奥特曼的下集大雾来了。
</p>
<p style="text-align: center;line-height: 50px;">蔚蓝的星球是我们不变的守候<br />
期待你永远的奥特曼<br />
大地渐渐苏醒<br />
一丝晨光打破了夜的寂静<br />
炙热的心在跳动<br />
祈祷和平降临<br />
我们一起追寻前途弥漫荆棘和险峻<br />
心中呐喊无边天际放射光明<br />
看那蔚蓝色的星球<br />
是我们永远的守候<br />
我伫立在这里倾听风的声音<br />
来吧我的热情在飞翔<br />
带着那灿烂的希望<br />
我们携手并肩穿越时空界限<br />
冲破黑暗<br />
YOU ARE ALWAYS MY HERO<br />
大地渐渐苏醒<br />
一丝晨光打破了夜的寂静<br />
炙热的心在跳动<br />
祈祷和平降临<br />
我们一起追寻前途弥漫荆棘和险峻<br />
心中呐喊无边天际放射光明<br />
看那蔚蓝色的星球<br />
是我们永远的守候<br />
我伫立在这里倾听风的声音<br />
来吧我的热情在飞翔<br />
带着那灿烂的希望<br />
我们携手并肩穿越时空界限<br />
冲破黑暗<br />
YOU ARE ALWAYS MY HERO<br />
</p>
</body>
</html>效果图
五、总结
读万卷书不如行万里路，只要多敲代码，多记知识点，才能更好的吸收为自己的东西，加油！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
