《1HTML基本标签实验报告.docVIP

海南软件职业技术学院实验报告 姓名： 郭敬添 学号： 2011020404 实验时间：2012-02-20 专业名称 网络系统管理 班级名称 11网络系统管理301 课程名称 Web客户端技术 指导教师 白蕾 实验名称 HTML基本标签 实验 目的 及 要求 1 使用HTML的基本结构创建网页 2 使用行级和块级标签组织页面内容 3 使用图像标签实现图文并茂的页面 实验 内容 描述 1 基本块级标签 2 常用于布局的块级标签 3 行级标签 实验 方法 与 步骤 1基本块级标签 1.1代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head title郭敬添--唐诗三百首/title /head body h1唐诗三百首/h1 hr / h2目录/h2 p第一首;静夜思/p p第二首;忆江南/p p第三首;长恨歌/p hr /h3静夜思/h3 p作者;李白/p p床前明月光，疑是地上霜。举头望明月，低头思故乡。/p hr / h3【李白简介】/h3 p李白，字太白，号青莲居士，自称与李唐皇室同宗，祖籍陇西成纪（今甘肃天水附近），剩余暗喜碎叶（遗址在今库尔吉斯坦境内的啊克别希姆）。五岁随父迁居绵漳明县....../p /body /html 1.2编辑截图 1.3调试截图 1.4效果截图 2常用于布局的块级标签 2.1 代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title郭敬添--常用于页面布局的块级标签 /title /head body h1商品信息 /h1 h2产品类别 /h2 hr/ ul li数码 ul li笔记本 /li li手机 /li li家电 /li /ul /li li美容 /li li服装 /li /ul hr/ dl dt联想电脑 /dt dd产品型号：联想Ideapad Y450A-TFU(NBA纪念版)/dd dd价格：4999元 /dd dd所在地：北京 /dd /dl hr/ h2购物流程 /h2 ol li确认购买信息 /li li付款到贵美 /li li确认收货 /li li付款给买家 /li li双方评价 /li /ol /body /html 2.2编辑截图 2.3 调试截图 2.4 效果截图 3行级标签 3.1 代码 3.2编辑截图 3.3 调试截图 3.4 效果截图 个人 收获 与 体会 HTML标签分为块级和行级标签。块级标签按“块”显示，行级标签按“行”逐一显示 基本的块级标签包括段落标签p、标题标签h1~h6、水平线标签hr /等 常用的用于布局的块级标签包括无序列表标签ul、有序列表标签ol、定义列表标签dl、分区标签div等 实际应用中，常使用如下四种块级标签 4.1 div-ul(ol)-li ：常用于分类导航或菜单等 div-dl-dt-dd ：常用于图文混编的场合 table-tr-td ：常用于图文布局或显示数据 form-table-tr-td：常用于布局表单 行级标签包括图片标签img /、范围标签span、换行标签br /等，插入图片时，要求“src”和“alt”属性必选，“title”和”alt”属性推荐同时使用 编写HTML文档注意遵守W3C相关标准，W3C提倡内容和结构分离，HTML结构具有语义化 教 师 评 语 教师评分： 教师签名： 批改时间：