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

前端基础：通过HTML技术布局《李白诗词赏析》前端，就是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端一般遵循W3C标准，W3C的意思是万维网联盟（World Wide Web Consortium）。Web标准不是指一个标准，而是一系列的标准。网页主要有三部分组成：结构，行

play_big_knife

11750人浏览 · 2021-04-05 13:36:40

play_big_knife · 2021-04-05 13:36:40 发布

前端基础：通过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基本框架的搭建

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

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

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

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

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

<html>
        <head>
        </head>
        <body>
        </body>
</html>

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

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

（2）在<body>和<body>之间可以通守<p></p>标签来显示文字，P标签就是HTML的段落标签，被显示的文字在<p>和</p>标签之间。

加工后的代码如下。

<html>
    <head>
        <title>李白诗词赏析</title>
    </head>
    <body>
        <p>李白诗词赏析大会</p>
    </body>
</html>

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

四、《李白诗词赏析》页面基本布局

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

1、首先是标题李白，如下图所示。

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

<h2>李白</h2>

2、接下来根据页面的特点,是李白的图片。如下图所示。

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

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

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

定义图像的语法是：

<img src="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文件里插入这个图片。输入

<img src="C:\网站1\网站2\image2.jpg">

就可以了。

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

（1）同目录文件引用。

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

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

<img src=".image2.jpg">

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

<img src="image2.jpg">

（2）文件在上级目录

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

<img src=”../图片/Image1.jpg”>

（3）文件在下级目录

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

<img src=” ./网站2/Image2.jpg”/>

或者

<img src=” 网站2/Image2.jpg”/>

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

<img src="lb.jpg" width=200 height=200/>

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

3、根据页面的需求，接下来显示李白《静夜思》的题目。

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

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

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

<p align="center">
<font face="隶书" size="7" color="#000000" align="center">静夜思</font>
</p>

4、李白古诗《静夜思》诗词显示

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

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

<p align="center">
        <font face="隶书" size="7" color="#000000" align="center">静夜思</font><br>
        <font face="隶书" size="5" color="#000000" align="center">李白</font><br>
        <font face="隶书" size="6" color="#000000" align="center">窗前明月光，疑是地上霜。</font><br>
        <font face="隶书" size="6" color="#000000" align="center">举头望明月，低头思故乡。</font>
</p>

上述代码中的
表示可插入一个简单的换行符，<br>标签也是单标签，意味着它没有结束标签,其实对于br标签比较特别，写成<<br/>、</br>、<br>这几种写字法都可以实现换行，br这两个字母出现多少次，就形成几次换行。

5、在页面中加入一条水平线

根据页面的效果需求，下面需要在页面中加入一条水平线，如下图所示。

对于这样一条水平线，HTML可以使用<hr></hr>来进行水平线的设置，在标签开始也可以使用width去定义水平线的长度。对应代码如下。

<hr>

6、脚注标题的显示

对于《李白诗词赏析》的脚部有一些脚注做解释说明，如下图所示。

对于由“【】”括起来的脚注标题可以使用h1-h6中任一个标题标签来定义，这里字段稍微小了一点，可以使有由h4开始的后面的标签去定义，不用“【】”括起来的脚注内容可以使用p标签来定义。代码如下。

<h4>【诗词欣赏】</h4>
    &nbsp;&nbsp;&nbsp;&nbsp;这首诗表达了李白的思乡之情。
<h4>【词语注释】</h4>

注意，HTMl中有一些特殊字符(Html语法字符)的表达方式。“&nbsp”是“空格”的意思，记忆方法可以把nbsp理解成“牛逼三炮”的缩写。

7、列表式脚注内容

最后在“【词语注释】”中显示的脚注内容中前面有个圆点，如下图所示。

这可以通过<ul>和<li>两个标签相互作用。

HTML为了使某些有关系的元素显示得整齐、整洁、有序，采用了一种列表的技术来解决问题。有这几种列表的形式。

（1）类似于新闻这种没有顺序的，不用排队，先到先得，后发布先显示。如下图所示。

对于这样的有序整洁的一系列数据，HTML使用<ul>和<li>配合定义成无序列表，即各个列表项之间没有顺序级别之分，是并列的。基本语法格式如下：

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

（2）类似于榜单这种有着排列顺序的列表，其各个列表项按照一定的顺序排列定义，如下图所示。

有序列表的基本语法格式如下:

<ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
</ol>

有序列表ol的所有特性基本与ul 一致。

在《李白诗词赏析》中两个脚注内容显示的是没有顺序的“圆点”标志，这里使用ul无序列表即可。代码如下。

<ul>
        <li>李白：唐代诗人。</li>
        <li>地上霜：泛指月光。</li>
</ul>

五、《李白诗词赏析》页面布局的全部代码

对于《李白诗词赏析》布局分析的全部代码如下。

<html>

        <head>

                <title>李白诗词赏析</title>
        </head>
        <body>
                <h2>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp李白</h2>
                <img src="lb.jpg" width=200 height=200/>
                <p align="center">
                        <font face="隶书" size="7" color="#000000" align="center">静夜思</font><br>
                        <font face="隶书" size="5" color="#000000" align="center">李白</font><br>
                        <font face="隶书" size="6" color="#000000" align="center">窗前明月光，疑是地上霜。</font><br>
                        <font face="隶书" size="6" color="#000000" align="center">举头望明月，低头思故乡。</font>

                </p>
                <hr>
                <h4>【诗词欣赏】</h4>
                &nbsp;&nbsp;&nbsp;&nbsp;这首诗表达了李白的思乡之情。
                <h4>【词语注释】</h4>
                <ul>
                        <li>李白：唐代诗人。</li>
                        <li>地上霜：泛指月光。</li>
                </p>
        </body>
</html>