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>