项目1 文本与段落标记的应用
知识点：
（1）换行br标记
<br> <!--插入单个换行-->
（2）空格与特殊符号
向网页中添加空格和特殊符号可以使用&符号加上相应的英文单词的缩写，以分号结束，如© ;表示版权， ； 表示空格
（3）注释comment标记
<!--注释内容--> /*方法一*/<comment>注释内容</comment> /*尽量不使用这种方式，其他浏览器会显示出来*/
（4）文本标记
<strong>表示重要</strong> <!--替代原来的<b></b>--><em>表示强调></em> <!--替代原来的<i></i>--><u>下画线</u> <del>表示删除线</del> <sup>上标</sup><sub>下标</sub><address>地址</address>
（5）预格式（已编排格式）pre标记
<pre>预设格式</pre>
（6）块引用blockquote标记
<blockquote>块引用</blockquote> <!--向右缩进5个英文字符的位置-->
（7）拼音/音标注释ruby和rt标记
<ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>
（8）字体font标记
<font face=" " size=" " color=" ">文字</font>
实训过程：
<!DOCTYPE html><html lang = "en"><head><meta charset="utf-8"><meta name="keywords" content="Web前端开发，网页设计"><title>格式化文本信息</title><style type = "text/css">p{font-size: 30px;color:blue;text-indent: 4em;}</style></head><body><strong>1.标题字应用</strong><h1 align = "center"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h2><h2 align = "left"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h2><h4 align = "right"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h2><hr color = "#ff3333"><strong>2.段落、字体、标记应用</strong><p align="center">网页的本质就是超级文本标记语言，通过结合使用其他的web技术（如脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。</p><strong>3.文本标记应用</strong><br><strong>2x<sup>2</sup>+3x=9</strong><em>x<sub>1</sub>+x<sub>2</sub>=10</em><address地址：>江苏省南京市珠江路1924号</address><blockquote>超文本表达语言，即为超文本标记语言，简称为HTML。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</blockquote><strong>4.其他排版标记应用</strong><pre><font size="7">登 高</font><font size="5">——杜甫风急天高猿啸哀⑵， 渚清沙白鸟飞回⑶。无边落木萧萧下⑷， 不尽长江滚滚来。万里悲秋常作客⑸，百年多病独登台⑹。艰难苦恨繁霜鬓⑺， 潦倒新停浊酒杯⑻。【评析】此诗前四句写登高见闻。首联对起。诗人围绕夔州的特定环境，用“风急”二字带动全联，一开头就写成了千古流传的佳句。夔州向以猿多著称，峡口更以风大闻名。秋日天高气爽，这里却猎猎多风。诗人登上高处，峡中不断传来“高猿长啸”之声，大有“空谷传响，哀转久绝”（《水经注·江水》）的意味。诗人移动视线，由高处转向江水洲渚，在水清沙白的背景上，点缀着迎风飞翔、不住回旋的鸟群，真是一幅精美的画图。其中天、风，沙、渚，猿啸、鸟飞，天造地设，自然成对。不仅上下两句对，而且还有句中自对，如上句“天”对“风”，“高”对“急”；下句“沙”对“渚”，“白”对“清”，读来富有节奏感。经过诗人的艺术提炼，十四个字，字字精当，无一虚设，用字遣辞，“尽谢斧凿”，达到了奇妙难名的境界。更值得注意的是：对起的首句，末字常用仄声，此诗却用平声入韵。沈德潜因有“起二句对举之中仍复用韵，格奇而变”（《唐诗别裁》）的赞语。</font></pre><hr color="#ff00ff" size="3"></body></html>
效果如下：
项目2 高效资讯新闻条目设计
实训要求：
利用无序列表设计“中国教育和科研计算机网”主页中的“高校资讯”新闻条目。
知识点：
（1）无序列表ul标记
<ul type="disc"><li type="">列表项</li><li>列表项</li><li>列表项</li></ul>
（2）图层div标记
<html><body><h3>This is a header</h3><p>This is a paragraph.</p><div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p></div></body></html>
文档中的一个部分会显示为绿色：
（4）样式的应用
注意：使用开始符为“.”（点号）的样式是类样式，引用时使用标记的class属性，使用开始符为“#”的样式是id样式，引用时使用标记的id属性
实训过程：
<!DOCTYPE html><html lang = "en"><head><meta charset="utf-8"><meta name="keywords" content="Web前端开发，网页设计"><title>无序列表</title><style type = "text/css">.bt{font-size:22px;/*设置字体大小*/font-family: 黑体;/*设置字体系列*/margin:0 auto:;/*设置边界，上下为0，左右为自动*/padding: 0 20px;/*设置填充，上下为0，左右为20px*/}.div1{width:530px;/*设置宽度*/height:280px;/*设置高度*/border:1px solid #ccff99;/*设置边框样式，粗细为1px、实线、颜色为#ccff99*/}ul{list-style-type: disc;/*设置列表符号类型，默认值*/line-height: 33px;/*设置行高*/color: blue;/*设置颜色*/}h2{font-size: 32px;/*设置字体大小*/background: #ebebeb;/*设置背景颜色*/color: #000099;/*设置前景颜色*/margin: 0 auto 10px auto;/*设置边界，上、右、下、左边界值*/}</style></head><body><div class="div1"><h2>科研发展</h2><p class="bt">高效资讯 科技前沿 成果展示 学术会议</p><ul><li>咖啡</li><li>茶</li><li>牛奶</li><li>香蕉</li></ul></div></body></html>
效果如下：
项目3 设计制度宣传面板
实训要求： （1）学会使用有序列表 （2）学会使用< p >、< div >、< ol >等标记实现页面效果
实训知识点： （1）有序列表ol标记
<ol type = "A" start = "3"><li type = "1" value = "5">列表项</li><li type = "" value = "">列表项</li><li type = "" value = "">列表项</li></ol>
实训过程：
<!DOCTYPE html><html lang = "en"><head><meta charset="utf-8"><meta name="keywords" content="Web前端开发，网页设计"><title>有序列表</title><style type = "text/css">body{text-align: center;/*设置文本居中对齐方式*/font-size: 20px;/*设置字体大小*/font-weight: bold;/*设置字体标准粗体*/}.div1{width:663px;/*设置宽度*/height:940px;/*设置高度*/text-align: left;/*设置文本居左对齐*/padding: 50px;/*设置填充*/background: url("prj_background.png");/*设置背景图像*/letter-spacing: 1px;/*设置字符间距*/}h1{font-size: 32px;/*设置字体大小*/background: #9999ff;/*设置背景颜色*/height: 62px;/*设置高度*/color: white;/*设置前景颜色*/text-align: center;/*设置文本居中对齐*/padding-top: 15px;/*设置顶部填充*/font-family: "arial black";/*设置字体系列*/}</style></head><body><div class="div1"><h1>大型分析仪器管理方法</h1><ol><li>大型仪器必须由专人保管，须配有稳压电源，使用前须先检查仪器同各电路连接情况，再开稳压电源，然后再启动仪器开关。</li><li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，经发现，停止使用资格一周。</li><li>使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li><li>仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内，方可离开。</li><li>下次使用者，在开机前，首先检查仪器是否清洁卫生、是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管理员,并找上一次使用者问明情况，知情不报者追查当次使用者责任。</li><li>若在操作使用期间出现故障，应及时关闭电源,并向有关管理人员报告,严禁擅自处理、拆卸、调整仪器主要部件，凡自行拆卸者一经发现将给子严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。</li><li>所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。</li><li>保持仪器清洁，仪器的放置要远离强酸强碱等腐蚀性物品，远离水源、火源、气源等不安全源。</li><li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理充电、维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。</li><li>仪器不能随意搬动，更不能借给外单位使用:校内人员经实验室主任批准后可在实验室按上述规定使用。</li></ol><h3 align="right">大型仪器管理办公室</h3></div></body></html>
效果如下：
项目4 设计饭店菜单价目表
实训要求： （1）利用 （2）使用style标记给body、div、dt、dd、h3标记定义样式定义列表标记制作饭店菜单价目表
知识点：
（1）定义列表dl标记
<dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl>
定义和用法： < dl > 标签定义了定义列表（definition list） < dl > 标签用于结合 < dt > （定义列表中的项目）和 < dd > （描述列表中的项目）
实训过程：
<!DOCTYPE html><html lang = "en"><head><meta charset="utf-8"><meta name="keywords" content="Web前端开发，网页设计"><title>有序列表</title><style type = "text/css">body{background:url(prj_background.png) no-repeat;}.div1{width:663px;height:940px;text-align: left;padding-left: 50px;}dt{font:bold 24px;}dd{font:"book antiqua" 18px;}h3{font:bold 32px;color:red;}</style></head><body><div class="div1"><h3>绿景饭店菜单价目表</h3><dl><dt>心满意粥</dt><dd>菜心粒肉片粥......6元</dd><dd>蔬菜牛肉粥......5元</dd><dd>蔬菜牛肉粥......5元</dd><dd>蔬菜牛肉粥......5元</dd><dd>蔬菜牛肉粥......5元</dd><dd>蔬菜牛肉粥......5元</dd><dd>蔬菜牛肉粥......5元</dd><dt>饮料</dt><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dd>可口可乐......2.5元</dd><dt>红酒</dt><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd><dd>特饮干红......100元</dd></dl></div></body></html>
