4.块元素

块元素：无论宽度大小，始终会占据页面中它高度范围内的那一整行空间，不会与其他元素共享。同时你可以任意控制块元素的宽高度，内填充等。常见的块元素有div，p，ul，li，h1~h6系列标签等。

2.4.1 标题块元素
为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：

<hn align="对齐方式">标题文本</hn>

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题标记</title></head><body><h1>你有没有见过你妈妈羡慕别人的眼神？</h1><h2>你有没有见过你妈妈羡慕别人的眼神？</h2><h3>你有没有见过你妈妈羡慕别人的眼神？</h3><h4>你有没有见过你妈妈羡慕别人的眼神？</h4><h5>你有没有见过你妈妈羡慕别人的眼神？</h5><h6>你有没有见过你妈妈羡慕别人的眼神？</h6></body>
</html>

2.4.2 段落块元素
最常用的段落块元素有p(段落)元素 和pre（原样显示文字）元素，hr(水平线)。

1．P元素
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：

<p align="对齐方式">段落文本</p> <!-- align 是可选属性 -->

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>p标签</title></head><body><p>宇宙山河浪漫，生活点滴温暖，都值得我前进。</p><p align="left">忙碌的日子特别好，没有辜负早起的床，中午的大碗饭，和夜晚的好睡眠。所以人一定要前进。</p> <!-- 左对齐 --><p align="center">原来万物皆有裂痕，那是光照进来的地方 ——科恩</p> <!-- 居中对齐 --><p align="right">那些杀不死我们的，终将让我们更强大。——尼采</p> <!-- 右对齐 --></body>
</html>

*注意:在元素内容中用空格或换行符进行排版都是无效的。

2.pre元素
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre元素与p元素基本相同，唯一区别是，该元素中的文字内容将保留空格和换行符，并且元素中的英文字符都将统一用等宽字体，以便对齐，格式如下：

<pre>  pre 标签可以对空行和空格进行保留控制。 </pre>

例如：

3. hr元素
<hr />标记在 HTML 页面中创建一条水平线
例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hr标记</title></head><body><h3 align="center">书到用时方恨少，事非经过不知难。</h3><hr size="2" color="#bf1e2f" /><h5 align="center">上面一根线属性是 size="2" color="#bf1e2f"</h5><hr align="center" width="60%" size="4" color="#b2969f" /><h5 align="center">上面一根线属性是 align="center" width="60%" size="4" color="#b2969f" </h5></body>
</html>

2.4.3 通用块元素
       div元素是一个最常用的通用块元素，它用于包住一些元素和文字内容，以便进一步用CSS进行排版处理。
       <div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
       <div>标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div元素</title></head><body><div>   <h2>静夜思</h2>   <hr>   <pre>   窗前明月光，   疑是地上霜。   举头望明月，   低头思故乡。    </pre>   </div>   <div>   <h2>下江陵</h2>   <hr>   <pre>   朝辞白帝彩云间，千里江陵一日还。    两岸猿声啼不住，轻舟已过万重山。</pre></div></body>
</html>

2.4.4 语义块元素

曾几何时，前端的页面布局一直采用div，但是div本身并没有实际的意义，它只是定义了一个区域，而且这个区域是做什么的浏览器并不知道，不利于页面的SEO优化。因此HTML5中新增的语义化标签就很好的解决了这个问题，如下图所示：

传统方式布局与html5语义标签的对比

1.herader元素

HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：

<header>
<h1>网页主题</h1>
...
</header>

nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>nav元素</title></head><body><nav><ul><li><a href="#">首页</a></li><li><a href="#">公司概述</a></li><li><a href="#">产品展示</a></li><li><a href="#">联系我们</a></li></ul></nav></body>
</html>

article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>article元素</title></head><body><article><header>    <h2>第一章</h2>    </header>    <section>    <header>    <h2>第1节</h2>    </header>    </section>    <section>    <header>    <h2>第2节</h2>    </header>    </section>    </article>    <article>    <header>    <h2>第二章</h2>   </header></article></body>
</html>

aside元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。 aside元素的用法主要分为两种：

(1)被包含在article元素内作为主要内容的附属信息。

(2)在article元素之外使用，作为页面或站点全局的附属信息部分。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>aside元素</title></head><body><article>   <header>   <h1>标题</h1>   </header>   <section>文章主要内容</section>   <aside>其他相关文章</aside>   </article>   <aside>右侧菜单</aside></body>
</html>

在例子中定义了两个aside元素，其中第1个aside元素位于article元素中，用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。

section元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点：

(1)不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。

(2)如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。

(3)没有标题的内容区块不要使用section元素定义。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>section元素</title></head><body><article>   <header>   <h2>小张的个人介绍</h2>   </header>   <p>小张是一个好学生，是一个帅哥……</p>   <section>   <h2>评论</h2>   <article>   <h3>评论者：A</h3>   <p>小张真的很帅</p>   </article>   <article>   <h3>评论者：B</h3>   <p>小张是一个好学生</p>   </article>   </section>   </article></body>
</html>

footer元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。HTML元素的许多属性不仅可以用于块元素，而且可以用于大多数HTML元素，因此称其为HTML的“ 通用属性”，这里先介绍id（元素标识）属性和title(提示)属性两种通用属性，在后续模块节中，还会继续介绍其他通用属性。
（1）id(元素标识) 属性在HTML中，每个元素都可以有一个标识，但每个标识名在整个HTML文档中必须是唯一的。例如以下示例代码。

<div id="myid">........</div><p   id="myId">...........</p>

标识名对大小写是敏感的，即“myid”与”myId”是不一样的。HTML的id属性在CSS和JavaScript的应用中起到了很重要的作用。
（2）title(提示)属性
元素的title属性在HTML的网页中起到了提示的作用。如果元素设置了title属性，当将鼠标指针移动到该内容上时，就可以看到title值的内容。

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>title属性</title></head><body><div  id="zgxw"  title="《增广贤文》之劝学篇">   <h2 align="left">《增广贤文》之劝学篇</h2>  <hr width="40%" align="left" color="#DB7093">   <pre>   枯木逢春犹再发，人无两度再少年。不患老而无成，只怕幼而不学。长江后浪推前浪，世上今人胜古人。若使年华虚度过，到老空留后悔心。有志不在年高，无志空长百岁。少壮不努力，老大徒伤悲。好好学习，天天向上。坚持不懈，久炼成钢。三百六十行，行行出状元。冰生于水而寒于水，青出于蓝而胜于蓝。书到用时方恨少，事非经过不知难。   </pre>   </div>   <p >注意: 将鼠标移动"《增广贤文》之劝学篇"诗上，就可以看到title的属性值</p></body>
</html>

2.4.5 常用列表块元素
常用列表元素有ul元素、ol元素、dl元素及li、dl、dt元素。

ul元素
ul无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>...... </ul>

ol元素

ol有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：

<ol  type=""   start="">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>

dl 元素
定义dl列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl> <dt>名词1</dt>     <dd>名词1解释1</dd>     <dd>名词1解释2</dd>     ...     <dt>名词2</dt>     <dd>名词2解释1</dd>     <dd>名词2解释2</dd>     ...
</dl>

案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表元素的嵌套使用</title></head><body><h2>饮品</h2><ul><li>咖啡<ol>                    <!--有序列表的嵌套--><li>拿铁</li><li>摩卡</li></ol></li><li>茶<ul>                     <!--无序列表的嵌套--><li>碧螺春</li><li>龙井</li></ul></li></ul></body>
</html>

第二章第4节——块元素相关推荐

传热学环肋肋效率matlab程序,传热学第二章第四节通过肋片的导热.pdf
传热学第二章第四节通过肋片的导热第四节通过肋片的导热第二章导热基本定律及稳态导热传热学第一节导热基本定律 (Heat Transfer ) 第二节导热微分方程式 (Heat Tr ...
第二章第四节：替换和切割
Python基础入门(全套保姆级教程) 第二章第四节:替换和切割 strip() 去掉字符串左右两端的空白符(空格, \t, \n) s = " 你好, 我叫周杰伦 " s1 ...
谈谈在计算机系统中引入操作系统,初中信息技术第一册第二章第1节《操作系统简介》教学设计...
广州市初中信息技术第一册第二章第1节<操作系统简介>教学设计一.学习者分析学生通过第一章的学习,对计算机的软.硬件知识有了初步的了解,同时对操作系统的作用也有了简单的认识.但由于学生普 ...
【重识云原生】第二章计算第一节——计算虚拟化技术总述
云平台计算领域知识地图: 楔子:计算虚拟化技术算是云计算技术的擎天之柱,其前两代技术的演进一直引领着云计算的发展,即便到了云原生时代,其作用依然举足轻重. 一.计算虚拟化技术总述 1.1 虚拟化技 ...
计算机软件硬件的会计处理,重庆会计从业考试《会计电算化》第二章第四节计算机软件...
2014年重庆会计从业资格考试备考工作已经开始,中华会计网校为了帮助参加2014年重庆会计从业资格考试的学员巩固知识,提高备考效果,整理了会计从业资格考试复习资料供大家参考,希望对广大考生有所帮助,祝 ...
第二章：第一节数据清洗及特征处理-自测
回顾&引言]前面一章的内容大家可以感觉到我们主要是对基础知识做一个梳理,让大家了解数据分析的一些操作,主要做了数据的各个角度的观察.那么在这里,我们主要是做数据分析的流程性学习,主要是包括了数 ...
第二章：第一节数据清洗及特征处理-课程
[回顾&引言]前面一章的内容大家可以感觉到我们主要是对基础知识做一个梳理,让大家了解数据分析的一些操作,主要做了数据的各个角度的观察.那么在这里,我们主要是做数据分析的流程性学习,主要是包括了 ...
（数据库系统概论|王珊）第二章关系数据库-第一节：关系数据结构及其形式化定义
文章目录一:关系 (1)域 (2)笛卡尔积 (3)关系 A:基本概述 B:码相关概念 C:关系的三种类型二:关系模式三:关系数据库 (1)基本概念 (2)关系数据库的型与值前面说过,数据模型由 ...
WEB前台架构教程（原创）第二章（第一节PS切图规划）
转自:http://hi.baidu.com/phpidea/blog/item/9666a754d8d05259574e0013.html 我在第一章介绍了页面设计要关注的几个点,重点位置突出.分栏 ...

第二章第4节——块元素

4.块元素

第二章第4节——块元素相关推荐

最新文章

热门文章

第二章 第4节——块元素

4.块元素

第二章 第4节——块元素相关推荐

最新文章

热门文章

第二章第4节——块元素

第二章第4节——块元素相关推荐