【前端开发从零学起】HTML页面布局常用的基础标签

上一篇《【前端开发从零学起】初识HTML与其基本标签的作用》中讲述过标签内的内容会被显示出来。因此我们要在body标签中写入各种类型的标签来完成整个HTML页面的布局。由于HTML的标签元素众多,为了节省大家的学习时间,本篇将会选择常用的标签进行讲解,使大家能够尽快的上手。

HTML元素语法

在将常用标签之前,请务必搞清楚HTML元素的语法。所有的HTML标签必须使用正确的语法才能正常的显示内容,如果不严格的遵循语法书写,会造成无法想象的页面错位BUG。

HTML元素都是以开始标签和结束标签成对匹配组合的,例如<div>与</div>是一对开始与结束标签。基本上在<body>内的绝大多数元素都遵循这一语法规律,所以请养成书写习惯。在编写HTML代码时,建议使用DreamWeaver工具编写,其代码自动提示功能可以有效的避免语法与标签的使用问题。

某些HTML元素具有空内容,例如<br />标签,其自身为开始与结束标签,该标签的功能被浏览器定义为换行。其实<br>、<br />都可以正常被浏览器解译为换行。但是使用<br />更为规范。

HTML的元素标签内可以加入对应的属性,例如我们在其他网页中常见的 class=”main” 它写在标签内,就是该标签的属性,例如<p class=”main”></p>。关于HTML标签的属性,会在后面的课程中讲解。

<div>标签

div标签用于定义文档的分区或节,其英文缩写为division/section。该标签的主要作用是将HTML页面文档分割为不同的部分,从而划分布局区块,实现内容的分块管理。div中可以配合css样式进行管理更为有效,常见的div中多以使用id、calss、style属性对其显示样式进行修改与管理。

div是块级元素,每个div在默认的样式下,会在内容中自动换行,从而独立的显示为新的一行。如果需要修改div自动换行的属性,可以通过修改其样式进行调整。(css样式将在后面的课程中提到)

<p>标签

P标签与div标签一样,都属于块级元素。该元素会在内容中自动换行,成为新的独立的一行内容。

P标签主要用来定义文章的段落,通过每一组P标签将文中分割为若干个段落,例如:

<p>文章第一段内容……此处省略几百字</p>

<p>文章的第二段内容…….此处再省略几百字</p>

文章使用P标签后被分为了两个段落,自成两行提高文章的可读性。

由于P标签具有块级元素的特性,因此也能够用来做小范围的布局。不过为了代码的美观性与工整性,建议还是使用div标签布局吧。

<a>标签

a标签用于定义锚点。a标签的起始标签与结束标签之间的内容被称为锚文本,用户可以通过点击锚文本来触发a标签的href属性对应的地址。

例如代码:

<a href=”http://kids.codepku.com”> 点击进入编程少年首页<a>

实际效果演示:点击进入编程少年首页

从上面的实例可以看出,a标签是由锚文本 和 href 属性组成。有了这两个属性,用户就可以通过设置的锚文本进行页面跳转。


结语:本节课程主要希望读者能够了解HTML的语法,元素属性的书写方式,常用的布局标签div、p、a 。可以通过本节所学的内容,尝试性地将一片文章编写为HTML页面,并通过P标签进行段落分配,通过A标签实现页面跳转。

作者:品味人生 来源:前端开拓者(www.frontopen.com)

登录或注册后发布评论