基于HTML5的网页设计及应用（第2版）实验指导（全套）.docx

实验一 文本和图像标签的联系 一、实验学时 2学时 二、实验目的 (一) 掌握常见的文本标签； (二) 掌握图像标签的用法 (三) 掌握简单的图文混排 三、实验要求 在E盘下建立一个文件夹，命名为网页设计基础实验，在网页设计基础实验文件夹下建立文件夹实验一，将本次实验中建立的所有的网页文件都保存在该文件夹下面。 四、实验内容： 打开记事本，输入如下代码，保存为1-1.html，运行，熟悉HTML文件的基本结构以及b标记的含义。（本题10分，每错误一处扣5分） html head titletest/title /head body b 互联网，我来了！ /b /body /html 新建html文档，输入如下代码，熟悉h1~h6标记的含义，保存为1-2.html。（本题10分，每错误一处扣5分） !DOCTYPE html html lang=en head title标题标记/title /head body !-- 以下为标题样式： -- h1H1标题大小/h1 h2H2标题大小/h2 h3H3标题大小/h3 h4H4标题大小/h4 h5H5标题大小/h5 h6H6标题大小/h6 /body /html新建html文档，输入如下代码，熟悉p、i 、b标记的作用，注意各标记之间的嵌套关系，保存为1-3.html。（本题20分，每错误一处扣5分） !DOCTYPE html html lang=en head meta charset=UTF-8 title关山月/title /head body h1 align=center关山月/h1 h3 align=center[唐]nbspnbspnbsp李白/h3 hr align=center color=blue size=5 width=200 p align=center !-- font color=green size=18 -- b长风几万里，吹度玉门关。/b br i 汉下白登道，胡窥青海湾。/ibr del由来征战地，不见有人还。/delbr ins戍客望边色，思归多苦颜。/insbr strong 高楼当此夜，叹息未应闲。/strong br /p hr align=center color=blue size=5 width=200 /body /html 效果如图所示： 新建html文档，保存为1-4.html。熟悉img标记的作用，理解img标记的src属性的路径设置方法设置方法。（可以自己调整图片的大小和，让图片显示在一行）（本题20分，每错误一处扣5分） !DOCTYPE html html lang=en head meta charset=UTF-8 title图像和路径问题/title /head body !-- 同一个文件夹 -- img src=haust.png alt=河南科技大学校徽 title=河南科技大学 width=200 !-- 下一个文件夹 -- img src=images/河南科技大学校门.jpg alt=河南科技大学校门 !-- 上一个文件夹 -- img src=../2022xuejing1.jpg alt=河南科技大学雪景 width=50% /body /html 综合练习图文混排完成如下效果图 保存为1-5.html。（本题30分，和下图效果差别一处扣5分） !DOCTYPE html html lang=en head ? ? meta charset=UTF-8 ? ? title河南科技大学简介/title /head body ? ? h2 align=center河南科技大学简介/h2 ? ? hr size=2 color=#cccccc ? ? img src=images/haust.jpg alt=河南科技大学 vspace=10 hspace=20 align=left border=1 ? ? pnbspnbspnbspnbsp strong河南科技大学/strong (简称河科大，英文简称：HAUST)坐落于“千年帝都，牡丹花城”、中原城市群副中心城市—洛阳，是国家国防科工局与河南省人民政府共建高校、国家中西部高校基础能力建设工程支持高校、全国深化创新创业教育改革示范高校、国家级专业技术人员继续教育基地、教育部首批高等学