网页编程技术二（块级元素和行内标签）
Posted zkai-007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页编程技术二（块级元素和行内标签）相关的知识，希望对你有一定的参考价值。
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>
以上是关于网页编程技术二（块级元素和行内标签）的主要内容，如果未能解决你的问题，请参考以下文章