前端基础：通过HTML技术布局《李白诗词赏析》

前端，就是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端一般遵循W3C标准，W3C的意思是万维网联盟（World Wide Web Consortium）。Web标准不是指一个标准，而是一系列的标准。网页主要有三部分组成： 结构，行为，表现，对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

这里先以HTML技术进行前端基础的讲解，通过HTML标签进行布局《李白诗词赏析》。

该项目是初次使用html基本框架进行设计的demo项目，将实现html制作网页的基本元素，实现简单的流线性布局形势。

根据具体的简单布局流程，搭建html框架，再根据具体的元素位置进行相应的位置设定。

先看效果图如下所示。

HTML全称HyperText Markup Language，超文本标记语言。

HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

基本HTML页面以标签开始，以结束。在它们之间，整个页面有两部分－－标题和正文。

标题词－－夹在和标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在和之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。

所有的html网页的框架都建立在以下代码的基础上。

在这样的代码基础之上进行网页布局的加工：

（1）在和之间可以使用去定义网页的标题栏。

（2）在和之间可以通守

和

加工后的代码如下。

李白诗词赏析大会

这样代码被存储成“html”为扩展名的文件后，在浏览器中被打开，效果图如下。

针对目前的页面,可以直接根据页面特点进行从上至下的元素标签转换。

这个文字是可以利用HTML的标题标签，HTML一共提供了六种标题标签，定义了不同的字号大小，-标签可定义标题。定义最大的标题。定义最小的标题。“李白”这两个字可以用或标签来定义，代码如下。

在 HTML 中，图像由  标签定义。

是单标签，意思是说，它只包含属性，并且不需要进行闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

谈到URL，也就不得不提一下相对路径和绝对路径。

（1）首先，绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

（2）然后，我要补充一下，类似这种带域名的文件的完整路径也是绝对路径

下面这个图就很好的说明了本地的绝对路径含义：

以里面的image2.jpg为例：其绝对路径是C:网站1网站2image2.jpg。即从根目录（如上面的C:）为起点到你所在的目录(如上例中的image2.jpg)。也就是说，如果想在html文件里插入这个图片。输入

就可以了。

接下来，谈一下相对路径：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。可以从三点上来说。

（1）同目录文件引用。

"."——代表目前所在的目录。

例如上图中的处于同一个文件夹的网页2.html里想插入这个图片。一个简便的方法是：

并且这个'.'可以省略。也就是写成

（2）文件在上级目录

"../"——代表上一级目录。../../表示源文件所在目录的上上级目录，以此类推。例如：网页1.html引用图片下的Image1.jpg。那么就要先返回上一级目录先找到图片文件夹，再找Image1.jpg。

（3）文件在下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。网页1.html引用网站2文件夹下的Image2.jpg。

或者

这里引用李白的图片，与html文件是在同一个文件夹下，可以直接使用李白图片的文件名。代码如下。

注意，img中的width和height属性是由于李白的图片太大，需要把图片进行宽和高上的调整，HTML中可以用width和height定义所有元素的宽和高。

《静夜思》的题目比较特别一点，如下图所示。

显示文字可以直接用HTML的P标签或者用h1-h6的标题标签来定义。不过要注意的是，《静夜思》的题目在页面中有居中的效果，这可以在p标签的属性中使用 align="center"使p标签包围的元素进行居中。凡是能够写在标签开始的“”之间规定的内容都叫做属性。属性总是以名称/值对的形式出现，比如：name="value"。

《静夜思》文字的特别之处不仅表现在居中上，还体现在字体上采用了隶书的效果，html可以使用标签来定义字体，在开始标签中定义属性，规定文本的字体、字体尺寸、字体颜色。size="3"定义字体，color="blue"定义字体颜色，face=隶书"定义显示的字体名称，这样，《静夜思》古诗题目的代码可以这样实现。

静夜思

《静夜思》的诗词与《静夜思》题目的字体是一样的，也是居中来显示，不同的是字号的大小。如下图所示。

对于这样的效果，在HTML标签上不用引入新的标签就可以实现，只不过在标签中所对应的size属性不同而已。代码如下。

静夜思 李白 窗前明月光，疑是地上霜。 举头望明月，低头思故乡。

上述代码中的 表示可插入一个简单的换行符，标签也是单标签，意味着它没有结束标签,其实对于br标签比较特别，写成