当前位置：
文档之家› 1、HTML基本标签实验报告
1、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常用于布局的块级标签
</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>
海南软件职业技术学院实验报告
姓名：郭敬添学号：04实验时间：2012-02-20
专业名称
网络系统管理
班级名称
11网络系统管理301
课程名称
Web客户端技术
指导教师
白蕾
实验名称
HTML基本标签
实验
目的
及
要求
1使用HTML的基本结构创建网页
2使用行级和块级标签组织页面内容
3使用图像标签实现图文并茂的页面
<title>郭敬添--常用于页面布局的块级标签</title>
</head>
<body>
<h1>商品信息</h1>
<h2>产品类别</h2>
<hr/>
<ul>
<li>数码
<ul>
<li>笔记本</li>
<li>手机</li>
<li>家电</li>
</ul>
</li>
<li>美容</li>
<li>服装</li>
<li>确认收货</li>
<li>付款给买家</li>
<li>双方评价</t;/body>
</html>
2.2编辑截图
2.3调试截图
2.4效果截图
3行级标签
3.1代码
3.2编辑截图
3.3调试截图
3.4效果截图
个人
收获
与
体会
1.HTML标签分为块级和行级标签。块级标签按“块”显示，行级标签按“行”逐一显示
实验
内容
描述
1基本块级标签
2常用于布局的块级标签
3行级标签
实验
方法
与
步骤
1基本块级标签
1.1代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
4.2 div-dl-dt-dd：常用于图文混编的场合
4.3 table-tr-td：常用于图文布局或显示数据
4.4 form-table-tr-td：常用于布局表单
5.行级标签包括图片标签<img />、范围标签<span>、换行标签<br />等，插入图片时，要求“src”和“alt”属性必选，“title”和”alt”属性推荐同时使用
2.1代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6.编写HTML文档注意遵守W3C相关标准，W3C提倡内容和结构分离，HTML结构具有语义化
教
师
评
语
教师评分：教师签名：批改时间：
2.基本的块级标签包括段落标签<p>、标题标签<h1>~<h6>、水平线标签<hr />等
3.常用的用于布局的块级标签包括无序列表标签<ul>、有序列表标签<ol>、定义列表标签<dl>、分区标签<div>等
4.实际应用中，常使用如下四种块级标签
4.1 div-ul(ol)-li：常用于分类导航或菜单等
