网页编程技术二（块级元素和行内标签）

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=1start用于设置编号的起始值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标签只是表示计算机代码,但是浏览器只会显示等宽字体,不会保留代码 格式,需要配合&lt;pre&gt;&lt;/pre&gt;标签使用</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

网页编程技术二（块级元素和行内标签）相关推荐

HTML 块级元素、行内元素和行内块级元素
一.块级元素.行内元素和行内块级元素在 HTML 5 标准前,HTML 中的元素可以分为块级元素.行内元素(又称行级元素)和行内块级元素三种类型 ,它们的主要区别在于它们在文档流中所占据的空间和如何 ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
php行内块,块级元素和行内块元素是什么？
在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识,很多学生都感觉不重要,都不去学习,其实也是不正确的选择,下面我们来讲述一下块级元素和行内块元素是什么? 很多学生 ...
HTML学习之块级元素和行内元素的特征和区别（一）
这几天在学习HTML,这里总结一下块级元素和行内元素的特征和区别,本文也是来自于其他同行的一些文章,在这里感谢一下那些作者,下面先把这些原文粘贴出来 http://www.cnblogs.com/Ja ...

网页编程技术二（块级元素和行内标签）

网页编程技术二（块级元素和行内标签）相关推荐

最新文章

热门文章