1、块级元素
顾明思义，块级标签在网页中显示为块；块级标签一般独占一行，新的块级标签将从新的一行开始排列，它可以容纳其他块级元素和内联元素。
常见的会计标签：
1.1标题标签：<h1></h1> ~ <h6></h6>，从1级到6级每级标题的字体依次递减
1.2水平线标签：<hr/>,添加水平分隔线，让页面更容易区分段落；该标签是单个出现，不是成对出现；
1.3段落标签：<p></p>,使用段落标签区分段落，不同的段落之间会自动增加换行符，段落上下方各会有一个空行的空格
1.4换行标签：<br/>,使用换行标签可以控制段落中文字的换行显示，一般浏览器会根据窗口的宽度自动将文本进行换行显示
1.5引用标签：<blockquote></blockquote>,用于表示引用文字，同时会将标签内的文字进行缩进显示，其cite属性用于表明引用的来源。
1.6预格式标签：<pre></pre>,将文字按照原始的排列方式进行显示，例如绘制一个三角形
1.7无需列表标签:<ul><li></li></ul>,无序列表是将文字段落向内缩进，并在每个列表前面加上实心圆形、空心圆形以及方形等符号，已达到醒目的效果；无序列表没有顺序 编号，而是采用符号的形式，所以又被称为符号列表
???????<ul type="disc"> ???<!--实心圆形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul> ???????<ul type="circle"> ???<!--空心圆形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul> ???????<ul type="square"> ??<!--方形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul>
1.8有序列表:<ol><li></li></ol>,有序列表将文字以特定的顺序进行排列,每个列表之前都会向内缩进，并且它们之间以编号来标记，比如1、2、3、...
??????? 说明：
??????? type用于设置编号样式,可以取值：1、A、a、I、i;默认值type=1
??????? start用于设置编号的起始值
??????? reversed用于反向排序
<ol type="1"> ???<!--以数字进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="a"> ???<!--以小写字母进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="A"> ???<!--以大写字母进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="i"> ???<!--小写罗马数字--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="I"> ???<!--大写罗马数字--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="1" start="5"> ???????<!--以数字进行排序，初始值为5--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="1" reversed="reversed"> ???<!--以数字进行反向排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol>
1.9定义列表标签:<dl></dl>,适用于对名称、概念或主题的定义，第一部分是名称、概念或主题，并且通常只有一项，第二部分是相应的解释和描述
<dl> ???????????<dt>这是定义列表的标题</dt> ???????????<dd>描述第一项</dd> ???????????<dd>描述第二项</dd> ???????????<dd>描述第三项</dd> ???????</dl>
1.10分区标签:<div></div>,定义文档中的分区节点，将文档分割为独立的、不同的部分.可以用于组合其他H5标签的容器,其为块级元素浏览器会在其前后换行显示,常见用途是文档布局;可以取代使用的表格布局的老方法。
全部代码介绍说明：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????1、块级元素 ???????????????顾明思义，块级标签在网页中显示为块；块级标签一般独占一行，新的块级标签将从新的一行开始排列，它可以容纳其他 ???????块级元素和内联元素。 ??? 常见的会计标签： ???????--> ???</head> ???<body> ???????<!-- ???????????????????????1.1标题标签：<h1></h1> ~ <h6></h6>，从1级到6级每级标题的字体依次递减 ???????--> ???????<h1>这是一个标题</h1> ???????<h2>这是一个标题</h2> ???????<h3>这是一个标题</h3> ???????<h4>这是一个标题</h4> ???????<h5>这是一个标题</h5> ???????<h6>这是一个标题</h6> ???????????????<!-- ???????????1.2水平线标签：<hr/>,添加水平分隔线，让页面更容易区分段落；该标签是单个出现，不是成对出现； ???????--> ???????<span>我在水平线上面</span> ???????<hr /> ???????<span>我在水平线下面</span> ???????????????<!-- ??????` ???1.3段落标签：<p></p>,使用段落标签区分段落，不同的段落之间会自动增加换行符，段落上下方各会有一个空行的空格 ???????????????????--> ???????<p>我是一段文字</p> ???????<p>我是一段文字</p> ???????????????<!-- ???????????1.4换行标签：<br/>,使用换行标签可以控制段落中文字的换行显示，一般浏览器会根据窗口的宽度自动将文本进行换行显示 ???????--> ???????<p> ???????????你好吗，我很好。 ???????</p> ???????<p> ???????????你好吗,<br />我很好。 ???????</p> ???????????????<!-- ???????????1.5引用标签：<blockquote></blockquote>,用于表示引用文字，同时会将标签内的文字进行缩进显示，其cite属性用于表明引用的来源。 ???????????--> ???????<p> ???????????第一段参考文字 ???????????????????????<blockquote cite="http://www.jredu100.com">引用的文字</blockquote> ???????????第二段参考文字 ???????</p> ???????????????<!-- ???????????1.6预格式标签：<pre></pre>,将文字按照原始的排列方式进行显示，例如绘制一个三角形 ???????--> ???????<pre>需要按原格式显示的文字</pre> ???????<pre> ???????????????* ??????????????*** ?????????????***** ????????????******* ???????????********* ???????</pre> ???????????????<!-- ???????????1.7无需列表标签:<ul><li></li></ul> ???????????????无需列表是将文字段落向内缩进，并在每个列表前面加上实心圆形、空心圆形以及方形等符号，已达到醒目的效果；无序列表没有 ???????????顺序编号，而是采用符号的形式，所以又被称为符号列表 ???????--> ???????<ul type="disc"> ???<!--实心圆形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul> ???????<ul type="circle"> ???<!--空心圆形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul> ???????<ul type="square"> ??<!--方形--> ???????????<li>第一项</li> ???????????<li>第二项</li> ???????????<li>第三项</li> ???????</ul> ???????????????<!-- ???????????1.8有序列表:<ol><li></li></ol>,有序列表将文字以特定的顺序进行排列,每个列表之前都会向内缩进，并且它们之间以编号来标 ???????????记，比如1、2、3、... ???????????说明： ???????????????type用于设置编号样式,可以取值：1、A、a、I、i;默认值type=1 ???????????????start用于设置编号的起始值 ???????????????reversed用于反向排序 ??????????--> ??????????<ol type="1"> ???<!--以数字进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="a"> ???<!--以小写字母进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="A"> ???<!--以大写字母进行排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="i"> ???<!--小写罗马数字--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="I"> ???<!--大写罗马数字--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="1" start="5"> ???????<!--以数字进行排序，初始值为5--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ??????????<ol type="1" reversed="reversed"> ???<!--以数字进行反向排序--> ??????????????<li>第一项</li> ??????????????<li>第二项</li> ??????????????<li>第三项</li> ??????????</ol> ?????????????????????<!-- ??????????????1.9定义列表标签:<dl></dl>,适用于对名称、概念或主题的定义，第一部分是名称、概念或主题，并且通常只有一项，第二部分是相应 ??????????????的解释和描述 ???????--> ???????<dl> ???????????<dt>这是定义列表的标题</dt> ???????????<dd>描述第一项</dd> ???????????<dd>描述第二项</dd> ???????????<dd>描述第三项</dd> ???????</dl> ???????????????<!-- ???????????1.10分区标签:<div></div>,定义文档中的分区节点，将文档分割为独立的、不同的部分.可以用于组合其他H5标签的容器,其为块级元素 ???????????浏览器会在其前后换行显示,常见用途是文档布局;可以取代使用的表格布局的老方法 ???????--> ???????<div>这是一个div</div> ???</body></html>
2、行级标签
??????? 与块级元素不同，行级标签在页面中可以与其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素
???????常见的行级元素有：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????2、行级标签 ???????????与块级元素不同，行级标签在页面中可以与其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含 ???????????其他元素 ???????????常见的行级元素有： ???????--> ???</head> ???<body> ???????<!-- ???????????2.1图片标签：<img/>,网页中除了文本，还有一种重要的传递信息的方式就是图片,适当显示图片可以增加网页的展现了，吸引用户注 ???????????意;一般选择的图片大小不会太大,图片太大会影响加载效率,过小内容模糊则失去加载图片的意义,常见的图片格式有GIF、PNG、JPG ???????????主要有五个属性： ???????????1、src标识引用图片的路径地址,可以分为相对路径、绝度路径和网络地址 ???????????????相对路径是以当前文件为基准去寻找图片,与当前文件处于同一层的图片可以直接写图片的名字,不在同一层的可以寻找文件夹进行 ???????????查找,(如:../是回退上级目录) ???????????????绝对路径只在当前计算机有效,若将网站转移至服务器,则路径会失效,绝对路径打开图片使用的是filr协议，但是网页中使用的是http ???????????协议，因此会出现跨域问题，导致图片无法加载(加载本地计算机某个磁盘文件夹下的图片) ???????????????网络地址是使用网络上的图片链接,一般不会使用网络地址;因为网络图片可能会被删除、替换或转移导致图片无法打开 ???????????????????????2、width和height,用于指定图片的宽度和高度的;推荐使用CSS(style="width:100px;height:100px;")替代 ???????????3、title设置图片标题,鼠标滑过或悬浮时的提示信息 ???????????4、alt设置当图片无法加载时显示的文字信息 ???????????5、align设置图片周围的文字相对图片的位置,通常属性值有top、center、bottom、 ???????????????????????????????????--> ???????<img src="../src/img/app-l.png" alt="二维码图片" title="二维码" /> ???????????????<!-- ???????????2.2超链接标签<a></a>,一个网站由多个页面组成,不同页面之间的跳转则采用超链接,<a></a>标签可以设置一个超链接，单击超链接可以跳转 ???????????至一个新的文档或者当前文档中的某个部分 ???????????超链接标签属性描述： ???????????1、href用于描述链接地址,改地址可以是网络的也可以是本地文件,当用#号时,表示一个空的链接 ???????????2、target用于指定通过超链接打开的文档在何处显示,常用的两个属性分别是_self(在与链接相同的文档中打开被链接的文档)和_blank(在 ???????????新窗口中打开链接),默认属性值为_self; ???????????锚点的用法如下: ???????????????本页面锚点： ???????????????1、设置锚点 <a name="top"></a> ???????????????2、在超链接上使用#name跳转至对应的锚点 ???????????????页面间锚链接 ???????????????1、在即将跳转页面的指定位置设置锚点 ???????????????2、在超链接的href属性中使用"页面地址.html#name" ???????--> ???????<a name="top">锚点</a> ???????<br /> ???????<a href="#top" target="_self">这是一个超链接</a> ???????<br /> ???????<a href="../index.html#weixin">跳转到新页面的指定位置</a> ???????<br /> ???????<!-- ???????????2.3其他常用的行级元素,<span></span>(常被用于组合文档中的行内元素)、<em></em>、<strong></strong>、<i></i>、<b></b> ???????--> ???????????????<em>em标签侧重点强调,可以嵌套使用,嵌套个数越多,强调级别越高</em> ???????<br /> ???????<strong>strong标签标示内容的重要性,嵌套递增重要的级别</strong> ???????<br /> ???????<small>small标签为旁注,可以用在免责声明,使用条款和版权信息等需要小字体的场景</small> ???????<br /> ???????<s>s标签为有误文本,文本上加删除线的样式</s> ???????<br /> ???????<b>b标签粗体文本</b> ???????<br /> ???????<i>i标签标示为斜体</i> ???????<br /> ???????<cite>cite标签浏览器显示为斜体,长用作书、画作、作品的引用</cite> ???????<br /> ???????<q>q标签标示短引用,显示文字用""引起来</q> ???????<br /> ???????<code>code标签只是表示计算机代码,但是浏览器只会显示等宽字体,不会保留代码 格式,需要配合<pre></pre>标签使用</code> ???</body></html>
特殊说明：
块级标签和行级标签的区别：
1、块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右一次显示
??????? 2、块级标签的宽度默认是100%;行级标签的宽度由文字内容撑开
??????? 3、块级标签可以设置宽度、高度、边距等属性;行级标签不能设置上述属性.
3、H5新增标签
H5新增的结构标签,使用结构标签可以提升网页文档的可读性,并且有利于搜索引擎优化;常见成结构化语句有：<section></section>、<article></article>、<header></header>、<hgroup></hgroup>、<footer></footer>、<nav></nav>、<aside></aside>等,像新增的标签还有<canvas></canvas>、<video></video>、<audio></audio>等。
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.header,.hgroup,.nav,.aside,.section,.article,.footer{border: 1px solid red;text-align: center;} ???????????.clearfix:after {content: " ";display: block;clear: both;height: 0;} ???????????.clearfix {zoom: 1;} ???????????.left {float: left;} ???????????.right{float: right;} ???????????.header-height{height: 70px;} ???????????.header-hgroup{width: 29%;height: 68px;font-size: 24px;line-height: 68px;} ???????????.header-nav{width: 70%;line-height: 68px;} ???????????.left-nav{width: 20%;height: 400px;} ???????????.section-content{width: 79%;height: 98px;} ???????????.article-content{width: 79%;height: 298px;} ???????????.article-header{height: 98px;} ???????????.article-section{height: 148px;} ???????????.article-footer{height: 48px;} ???????????.footer-height{height: 50px;} ???????</style> ???????<!-- ???????????3、H5新增标签 ???????????????H5新增的结构标签,使用结构标签可以提升网页文档的可读性,并且有利于搜索引擎优化;常见成结构化语句有： ???????????????<section></section>、<article></article>、<header></header>、<hgroup></hgroup>、<footer></footer>、<nav></nav>、<aside></aside>等, ???????????????像新增的标签还有<canvas></canvas>、<video></video>、<audio></audio>等 ???????????????<section>section表示页面中的一个内容区块,文档的主体部分,用于将网页和文章划分章节、区块</section> ???????????????<article>article表示页面中的一块与上下文不相干的内容,如博客中的一篇文章</article> ???????????????<aside>aside表示article元素内容之外的,与article元素内容相关的辅助信息</aside> ???????????????<header>header网页和文章的头部</header> ???????????????<footer>footer网页和文章的底部</footer> ???????????????<nav>nav表示页面中导航链接部分</nav> ???????????????<hgroup>hgroup将整个页面或页面中一个内容区块的标题进行组合</hgroup> ???????????????????????????布局效果参考： ???????????--> ???</head> ???<body> ???????<div> ???????????<header class="header header-height clearfix"> ???????????????<hgroup class="hgroup header-hgroup left"> ???????????????????hgroup ???????????????</hgroup> ???????????????<nav class="nav right header-nav"> ???????????????????nav ???????????????</nav> ???????????</header> ???????????<div class="clearfix"> ???????????????<aside class="aside left-nav left"> ???????????????<nav>nav</nav> ???????????????</aside> ???????????????<section class="section right section-content">section</section> ???????????????<article class="article right article-content"> ???????????????????<header class="header article-header">header</header> ???????????????????<section class="section article-section">section</section> ???????????????????<footer class="footer article-footer">footer</footer> ???????????????</article> ???????????</div> ???????????<footer class="footer footer-height">footer</footer> ???????</div> ???</body></html>4、章节案例实现：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????4、章节案例实现 ???????--> ???</head> ???<body> ???????<h1>促销信息</h1> ???????<dl> ???????????<dt> ???????????????<img src="./images/computer.png" width="260px" height="200px" title="computer" /> ???????????</dt> ???????????<dd>笔记本拍卖</dd> ???????????<dd>四核,4G内存,256G硬盘</dd> ???????????<dd>跳楼疯抢价<span style="font-size: 36px; color: red;">100</span>元起</dd> ???????</dl> ???????这台笔记本<span style="color: red;">不错</span>,快速<span style="font-size: 30px;color: green;">抢购</span>吧！ ???</body></html>
网页编程技术二（块级元素和行内标签）
原文地址：https://www.cnblogs.com/zkai-007/p/9893365.html