本文介绍了HTML的基础知识，包括标签的分类（单标签与多标签）、标签间的关系（嵌套与并列），强调了标签语义化的意义，并详细讲解了排版标签如<h1>到<h6>、<p>、<hr>、<br>，以及文本格式化标签<b>、<i>、<s>、<u>和<div>、<span>的使用。同时，提到了标签属性的设置及其重要性。
一：标签的分类
标签主要分为单标签和多标签。
单标签是单个出现的，像我们常用的换行标签<br />
多标签是成对出现的，像我的html骨架中的<head></head>
二：标签之间的关系
标签之间的关系分为两种：嵌套关系和并列关系
嵌套关系：嵌套关系也叫做父子关系，是说一个标签在另有一个标签的内部，例如我们骨架中所学到的<head><title></title></head>
并列关系：并列关系也叫做兄弟关系，是指一个标签在另一个标签的下面，例如我们骨架中所学到的<head></head><body></body>
建议：如果标签与标签之间是嵌套关系，那么为了方便查看和维护，可以将子标签缩进一个Tab键的身位，如果两个标签是并列关系，那么，希望两个标签能够对齐。
三：标签语义化
- 为了方便代码的阅读和维护
- 让浏览器或网络爬虫更好的解析，从而更好地分析内容
- 使用语义化标签会具有更好的搜索引擎优化
四：html标签
- 排版标签
标题标签：<h1></h1> <h2></h2>........<h6></h6>。
标题标签主要包含6个，从一级标题到六级标题字号依次变小。
建议一级标题尽量少用，一级标题要给Logo使用。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h1到h6标题标签用例</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
效果：
段落标签： <p></p>
段落标签的p，主要是由paragraph而来
在文本中可以自动换行
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签练习</title>
</head>
<body>
<p>情深深雨蒙蒙</p>
<p>缩少楼台烟雨中</p>
<p>记得当初你侬我侬</p>
</body>
</html>
结果：
水平线标签：<hr />
水平线标签就是在网页中加入一条直线
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标签练习</title>
</head>
<body>
<hr />
</body>
</html>
效果：
换行标签：<br />
在代码中，如果我们输入一段段文字，即使我们在代码中加了回车，在网页中的效果也是不进行换行的，这时就用到了换行标签
换行标签和段落标签都具有换行的作用，但是，使用换行标签的段落比使用段落标签的段落更加紧凑
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换行标签练习</title>
</head>
<body>
情深深雨蒙蒙<br />
多少楼台烟雨中<br />
记得当初你侬我侬<br />
<br />
<br />
<p>情深深雨蒙蒙</p>
<p>缩少楼台烟雨中</p>
<p>记得当初你侬我侬</p>
</body>
</html>
效果：
div和span
div和span是没有语义的，是我们网页布局的主要盒子
div由division而来，分割区的意思
span是跨度，跨距，范围的意思
小练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排版标签小练习</title>
</head>
<body>
<h1>将快乐写在手心</h1>
<p>作者: 李瑞华 2017年03月10日 美文阅读</p>
<hr />
<p>岁月流逝，生活中不快的事自然也就多了。每逢遇到不快乐的事情，总会让人懊恼很长时间，伤了自己，也怠慢了家人。我这个人心里藏不住事，因为不开心，常常是进家后也拉着个脸，郁郁寡欢的，弄得一家人也没有了情绪。</p>
<p>我时常为之而烦恼，一日将这些讲给一位朋友听。朋友笑道：“要想摆脱这些烦恼其实很简单，你可以在每天下班前将‘快乐’两个字写在手心，进家门前看一眼，并用手心捂一下胸口，这样你就会忘掉种种不快，放松身心进家门”。</p>
<p>一试，果然有效，我的不快再也不想过去那样影响家里的祥和了。仔细想想，真觉得这个简单的做法确实充满许多意趣。</p>
<p>不高兴的时候，我还喜欢独自一人去僻静处走走。一个人闲庭信步在城外，在橘黄色的月光中，一任柔柔的秋风轻撩鬓发轻戏薄裳……烦躁的心竟然有了片刻的宁静和惬意——恰似炎炎夏日偶然触摸着一丝清泉的冰凉，那种快乐在霎那间释放迸发了出来……哦，原来快乐始终追随在我的身边，只不过是由于自己的疏忽一直没发觉而已！</p>
<p>细细想来：人生的大舞台变换莫测，身处喧闹的红尘之中，学会陶然自得，不啻为一种潇洒一种享受更是一种快乐！</p>
<p>所谓的快乐，其实就是每一个人心中的最舒适满意的感受！它无处不在——轻啜一杯香茗，倚窗倾听鸟儿婉转；闲立玉阶，陶醉春花娇艳冬梅银装！早披晨露待红日，晚沐清风踏月光！抑或信手轻拈一本最钟爱的书刊，聆听一首最喜欢的优美舒缓的乐曲！甚至，在闭目养神的小憩中都能得到片刻的安逸享受和快乐……快乐并不神秘，快乐也不遥远！问题是你怎么去发现，怎么用心去寻找。</p>
<p>我们终究是为了什么才去忍受那样多的不快乐的事情呢？眼睁睁的看着时光一点一滴的从我们生命中溜走，眼睁睁看着那些我们爱着的、牵挂于心的人从我们生命中消失，未来的我们如何还可能真正的拥有快乐呢？都说放得下才能走得远，可是当我们真正的放下了，我们还是自己吗？”很多人都无比的怀念童年的时光，觉得只有童年时的快乐才是最纯粹的，也许只是因为童年时的我们还未曾懂得什么是失去，什么是烦恼，什么是无奈，什么是永远吧。</p>
<p>生活有太多的东西需要我们去学习，它总是在我们觉得已经小有所成的时候让我们突然知道其实还差很远，当我们自认为已经把快乐握在手心的时候让我们明白还需付出更多的代价。真的，其实我们并不是那样贪心，只需要那么一点点的快乐就足够让我们珍惜一生了，为什么依旧不能长久？</p>
<p>人的一生，也许你不能控制别人，可是你能把握自己！也许你不能左右出身，可是你能改变命运！也许，你会遇到很多的挫折和考验，可是只要你始终拥有一颗淡泊致远快乐知足的心，那么，困难最终会臣服在你的脚下！你永远都是生活的强者——你也就收获到了永远的快乐！</p>
<p>也许，快乐并不神秘，存在于我们放开心扉的每一个瞬间；也许，快乐可以很简单，伴随着与我们爱着的和爱着我们的人在一起的每一天；也许，快乐从来就不可能永远，只有失去的时候才让我们知道什么才是生命中最珍贵的；也许，快乐从来都不可能与痛苦隔绝，如同生和死……也许，在这个充斥着欲望的世界上，只有放下所有的心事，才能得到快乐。也许，在这个浮躁忧郁的红尘中，只有将快乐捂在胸口，挂在心头，才能像无忧无虑的小鸟一般，愉悦地飞进幸福的小巢。</p>
</body>
</html>
效果：
- 文本格式化标签
加粗标签：<b></b> <strong></strong>
这两个都能使文字加粗，但是推荐使用Strong，它还具有强调作用。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加粗标签</title>
</head>
<body>
<b>我是加粗标签b</b>
<br />
<strong>我是加粗标签strong</strong>
</body>
</html>
效果：
文字斜体：<i></i> <em></em>
斜体标签可以使文字倾斜，建议使用em标签
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倾斜标签</title>
</head>
<body>
<i>我是倾斜标签i</i>
<br />
<em>我是倾斜标签em</em>
</body>
</html>
效果：
加删除线标签：<s></s> <del></del>
给文字加上删除线，建议使用第二个
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加删除线标签</title>
</head>
<body>
<s>我是加删除线标签s</s>
<br />
<del>我是加删除线标签del</del>
</body>
</html>
效果：
加下划线标签：<u></u> <ins></ins>
该标签的作用是给文字添加下划线，推荐第二个。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加下划线练习</title>
</head>
<body>
<u>我是添加下划线u标签</u>
<br />
<ins>我是添加下划线ins标签</ins>
</body>
</html>
效果：
- 标签属性
标签属性是可以给标签添加属性的，例如可以设置下划线的颜色，下划线的长度，下划线的宽度
基本格式：<标签名 属性1="属性值1" 属性2=“属性值2”></标签名>
一个标签可以拥有多个属性，必须属于开始标签，在标签名之后
属性之间部分先后顺序，标签名和属性，属性和属性之间必须以空格分开
任何属性都有默认值，省略属性不设置则取属性的默认值
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性练习</title>
</head>
<body>
<hr width="300px" color="brown" align="left"/>
</body>
</html>
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
