HTML标签分类
通过上节博客我们知道了网页的组成：文字 图片 连接 视频 音频。现在我们需要用代码来表示这些元素。在HTML中带有<>符号的元素被称之为HTML标签，如上面提到的<html> <head><body>都是HTML标签。
1.双标签
<标签名>内容</标签名>
该语法中<标签名>表示该标签的作用开始，一般称为开始标签。</标签名>表示该标签的作用结束，一般称为“结束标签”。和开始标签知识在前面加了一个关闭符 “/”。
比如：
<body>我是文字</body>
2.单标签
<标签名/>
单标签也成空标签，是指一个标签符号即可完整的描述某个功能的标签。
比如：
<br/> （换行的意思）
HTML标签关系
标签的相关关系分为两种：
1.嵌套关系
<head> <title></title> </head>
父与子的关系 <head>是 <title>的父标签。
2.并列关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>n</div>
<div>n</div> </body> </html>
这个时候<head>与<body>是并列关系，两个<div>是并列关系。也就是兄弟标签。
HTML标签的语义化
白话：所谓标签语义化，就是指标签的含义。
为什么要有语义化标签：
1.方便代码的阅读与维护
2.同时让浏览器或者网络爬虫可以很好地解析，从而好的分析其中的内容。
3.使用语义化标签会具有更好地搜索引擎优化。
HTML标签
首先HTML和css是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。
排版标签
排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
标题标签（熟记）
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即。
<h1><h2><h3><h4><h5>和<h6>
标题标签语义：作为标题使用，并且依据重要性递减。
基本语法格式如下：
<hn> 标题文本 <hn>
注意：h1标签因为重要，尽量少用，不要动不动就像你扔一个h1。一般h1都是给logo使用。、
在sublime输入每个等级的标签代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>来自星星的我</h1> <h2>来自星星的我</h2> <h3>来自星星的我</h3> <h4>来自星星的我</h4> <h5>来自星星的我</h5> </body> </html>
在浏览器打开如下：
段落标签：
单词缩写：paragraph 段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落。
段落标签：
<p> 文本内容 </p>
实例，输入以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>教父简介</h1> <p> 《教父》是由弗朗西斯·福特·科波拉执导，马龙·白兰度、阿尔·帕西诺等主演的黑帮电影，于1972年3月24日在美国上映。 该片改编自马里奥·普佐的同名小说，讲述了以维托·唐·柯里昂为首的黑帮家族的发展过程以及柯里昂的小儿子迈克如何接任父亲成为黑帮首领的故事。1973年该片获得第45届奥斯卡奖最佳电影、最佳男主角、最佳改编剧本奖 [1] 。2007年被美国电影协会选为“百年百佳影片第二位”。 </p> </body> </html>
在浏览器展开效果图如下：
<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器的窗口大小自动换行。
水平线标签
在网页中常常看到一些水平线将段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现。也可以简单通过标记来完成。<hr/>就是创建横跨网页的标记。其基本语法格式如下。
<hr/> 是单标记
实例：
输入以下HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>教父简介</h1> <hr/> <p> 《教父》是由弗朗西斯·福特·科波拉执导，马龙·白兰度、阿尔·帕西诺等主演的黑帮电影，于1972年3月24日在美国上映。 该片改编自马里奥·普佐的同名小说，讲述了以维托·唐·柯里昂为首的黑帮家族的发展过程以及柯里昂的小儿子迈克如何接任父亲成为黑帮首领的故事。1973年该片获得第45届奥斯卡奖最佳电影、最佳男主角、最佳改编剧本奖 [1] 。2007年被美国电影协会选为“百年百佳影片第二位”。 </p> </body> </html>
展示效果如下：
可以看出多出一个横线。
换行标签
首先看一下代码，然后能更加清晰的了解什么是换行标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> *********中国四大帅哥********** 1.郭富城 2.刘德华 3.张国荣 4.本博主 </body> </html> </html>
我们这样来看是 一共是五行，一个是 *********中国四大帅哥**********标题。另外四个是四大帅哥的名字。结构比较清晰。
然后我们在浏览器打开显示如下：
结果发现这五行字体，竟然在一行显示，横着过来了。
如果 我们想让他们换行怎么办呢？看如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h3>*********中国四大帅哥**********</h3>> <p>1.郭富城</p> <br/> <p>2.刘德华</p> <br/> <p>3.张国荣</p> <br/> <p>4.本博主</p> </body> </html> </html>
浏览器打开运行结果为：
div span标签
div span 是没有语义的 是我们网页布局主要的两个盒子。
div :就是divsion的缩写分隔，分区的意思 其实很多div来组合网页。
span:跨度，跨距；范围
语法如下：
<div> 这是div标签 </div> <span>这是sapn标签</div>
输入以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 你好 <div>这是div标签</div> 你好 <span>这是span标签</span> </body> </html> </html>
在浏览器中展示如下：
转载于:https://www.cnblogs.com/Chamberlain/p/11048774.html