前端基础：通过HTML技术布局《李白诗词赏析》
前端基础：通过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网页的框架都建立在以下代码的基础上。
在这样的代码基础之上进行网页布局的加工：
（1）在
和之间可以使用（2）在
和之间可以通守标签来显示文字，P标签就是HTML的段落标签，被显示的文字在和
标签之间。加工后的代码如下。
李白诗词赏析
李白诗词赏析大会
这样代码被存储成“html”为扩展名的文件后，在浏览器中被打开，效果图如下。
四、《李白诗词赏析》页面基本布局
针对目前的页面,可以直接根据页面特点进行从上至下的元素标签转换。
1、首先是标题李白，如下图所示。
这个文字是可以利用HTML的标题标签，HTML一共提供了六种标题标签，定义了不同的字号大小，
-标签可定义标题。定义最大的标题。定义最小的标题。“李白”这两个字可以用或标签来定义，代码如下。
李白
2、接下来根据页面的特点,是李白的图片。如下图所示。
定义最大的标题。定义最小的标题。“李白”这两个字可以用或标签来定义，代码如下。
李白
2、接下来根据页面的特点,是李白的图片。如下图所示。
或标签来定义，代码如下。
李白
2、接下来根据页面的特点,是李白的图片。如下图所示。
李白
2、接下来根据页面的特点,是李白的图片。如下图所示。
在 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定义所有元素的宽和高。
3、根据页面的需求，接下来显示李白《静夜思》的题目。
《静夜思》的题目比较特别一点，如下图所示。
显示文字可以直接用HTML的P标签或者用h1-h6的标题标签来定义。不过要注意的是，《静夜思》的题目在页面中有居中的效果，这可以在p标签的属性中使用 align="center"使p标签包围的元素进行居中。凡是能够写在标签开始的“<>”之间规定的内容都叫做属性。属性总是以名称/值对的形式出现，比如：name="value"。
《静夜思》文字的特别之处不仅表现在居中上，还体现在字体上采用了隶书的效果，html可以使用标签来定义字体，在开始标签中定义属性，规定文本的字体、字体尺寸、字体颜色。size="3"定义字体，color="blue"定义字体颜色，face=隶书"定义显示的字体名称，这样，《静夜思》古诗题目的代码可以这样实现。
静夜思
4、李白古诗《静夜思》诗词显示
《静夜思》的诗词与《静夜思》题目的字体是一样的，也是居中来显示，不同的是字号的大小。如下图所示。
对于这样的效果，在HTML标签上不用引入新的标签就可以实现，只不过在标签中所对应的size属性不同而已。代码如下。
静夜思
李白
窗前明月光，疑是地上霜。
举头望明月，低头思故乡。
上述代码中的
表示可插入一个简单的换行符，
标签也是单标签，意味着它没有结束标签,其实对于br标签比较特别，写成<
、、
这几种写字法都可以实现换行，br这两个字母出现多少次，就形成几次换行。
5、在页面中加入一条水平线
根据页面的效果需求，下面需要在页面中加入一条水平线，如下图所示。
对于这样一条水平线，HTML可以使用
来进行水平线的设置，在标签开始也可以使用width去定义水平线的长度。对应代码如下。
6、脚注标题的显示
对于《李白诗词赏析》的脚部有一些脚注做解释说明，如下图所示。
对于由“【】”括起来的脚注标题可以使用h1-h6中任一个标题标签来定义，这里字段稍微小了一点，可以使有由h4开始的后面的标签去定义，不用“【】”括起来的脚注内容可以使用p标签来定义。代码如下。
【诗词欣赏】
这首诗表达了李白的思乡之情。
【词语注释】
注意，HTMl中有一些特殊字符(Html语法字符)的表达方式。“ ”是“空格”的意思，记忆方法可以把nbsp理解成“牛逼三炮”的缩写。
7、列表式脚注内容
最后在“【词语注释】”中显示的脚注内容中前面有个圆点，如下图所示。
这可以通过
- 和
- 两个标签相互作用。
HTML为了使某些有关系的元素显示得整齐 、整洁、 有序，采用了一种列表的技术来解决问题。有这几种列表的形式。
（1）类似于新闻这种没有顺序的，不用排队，先到先得，后发布先显示。如下图所示。
对于这样的有序整洁的一系列数据，HTML使用
- 和
- 配合定义成无序列表，即各个列表项之间没有顺序级别之分，是并列的。基本语法格式如下：
- 列表项1
- 列表项2
- 列表项3
（2）类似于榜单这种有着排列顺序的列表，其各个列表项按照一定的顺序排列定义，如下图所示。
有序列表的基本语法格式如下:
- 列表项1
- 列表项2
- 列表项3
有序列表ol的所有特性基本与ul 一致。
在《李白诗词赏析》中两个脚注内容显示的是没有顺序的“圆点”标志，这里使用ul无序列表即可。代码如下。
- 李白：唐代诗人。
- 地上霜：泛指月光。
五、《李白诗词赏析》页面布局的全部代码
对于《李白诗词赏析》布局分析的全部代码如下。
李白诗词赏析 李白
静夜思
李白
窗前明月光，疑是地上霜。
举头望明月，低头思故乡。
【诗词欣赏】
这首诗表达了李白的思乡之情。【词语注释】
- 李白：唐代诗人。
- 地上霜：泛指月光。
- 配合定义成无序列表，即各个列表项之间没有顺序级别之分，是并列的。基本语法格式如下：