前面发的两篇关于html和css的文章，不知道大家看会了没有呢，私下有没有操作呢。俗话说，学以致用，只学不用和没学没什么区别。
今天就用前两节的知识教大家一个简单的网页制作，可能有些陌生的知识，自行百度哦。
今天制作的就是关于茉莉花的，上面是图片下面是诗歌，先不给大家展示结果图片哦，嘿嘿嘿......（留一点神秘感），在文章的最后展示效果图。
教程：
1，打开记事本，并在其中输入必要信息，完整代码如下：
!DOCTYPEhtmlhtmlheadmetacharset=utf-8title/title
bodyheaderimgsrc=molihua.jpgwidth=height=/headerarticleheaderh2茉莉花/h2p作者：宋·刘克庄/p/headerhr/p曾与瑶姬约。恍相逢、翠裳摇曳，珠韝联络。风露青冥非人世，揽结玉龙骖鹤。
爱万朵、千条纤弱。
祷祝花神怜惜取，问开时、晴雨须斟酌。枝上雪，莫消却。
恼人匹似中狂药。
凭危栏、烛光交映，乐声遥作。身上春衫香薰透，看到参横月落。
算茉莉、犹低一著。坐有缑山王郎子，倚玉箫、度曲难为酢。君不饮，铸成错。/ph3清平乐/h3p冰轮万里。云卷天如洗。先向海山生大士。却诞卯金之子。冰盆荔子堪尝。胆瓶茉莉尤香。震旦人人炎热，补陀夜夜清凉。/pdldt《浣溪沙》/dtdd南国幽花比并香。直从初夏到秋凉/dddt《鹧鸪天》/dtdd携靓侣，泛轻航。棹歌惊起野鸳鸯/dddt《真珠帘》/dtdd茉莉芰荷香，拍满笙箫院。/dd
/dl/articlefooter.9.6/footer/body/html
启动浏览器运行后，大家会发现界面并不美观，文字看着也比较乱。
为了解决这个问题，可以在界面添加css规则，让界面更好看，更标准化，将下面的代码块添加到记事本中，位置在head和head/也就是头部之间：
styletype=text/cssbody{background:gray;}h2{text-align:center;}header{text-align:center;}articlep{text-indent:2em;}footer{font-size:12px;font-align:center;}/style
再次保存和预览，是不是看着美观多了
是不是非常简单呢，大家可以尝试一下。不懂的可以在下面评论中问哦