HTML语言
来源：乌哈旅游
实验1HTML语言
本实验的目的：是让学生学会利用HTML语言设计网页，包括HTML文件的建立、标记设置、使用、超链接、文字与表格的建立。实验难点和重点：HTML语言的运用实验步骤：一、页面布局1、建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序”→“附件”→“记事本”，并打开“记事本”窗口。（2）在记事本中，输入如图3-1所示的HTML语句。图3-1在记事本中输入HTML语句图3-2在浏览器中打开1-1htm页面文件（3）执行“文件”→“保存”命令，将文件保存为3-l.htm。（4）在浏览器中打开所建立的HTML文件，效果如图3-2所示。2、常用的HTML标记设置操作步骤：（1）在文本文件编辑器中编写HTML文件（可参考下面的示例编写）。（2）保存HTML文件。（3）在浏览器中预览所编辑的HTML文件的效果。例1．标顾标记【示例1】标题标记，在记事本中输入以下HTML语句，保存后浏览效果，如图3-3所示；我的花店<／head>欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！<／body>图3-3标题标记浏览效果标记符用于定义段落标题的大小级数。最大的标题级数是〈h1〉，最小的标题级是.使用标记符的align属性可控制文字的对齐方式，属性值可以是left（左对齐）、center（居中对齐）或者right（右对齐）。例2．段落标记符【示例2】段落标记符，输入HTML语句如下，保存后的浏览效果如图3-4所示。
我的花店我的花店欢迎您访问我的花店！
花可以传情，可表达思念之情，亲情，感恩的心情，衷心的祝福！〈/p〉居室之内，放上一束瓶插花，可增添幽雅，清静，舒适之感〈/p〉祝愿进入我的花店的朋友天天有好心情！〈/p〉版权归“我的花店”所有〈/p〉<／body>图3-4段落标记1图3-4段落标记2标记符用于划分段落，控制文本的位置。
是成对标记符，用于定义内容从新一行开始，并与上段之间有一个空行，其align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left（左对齐）、center（居中对齐）或者right（右对齐）。例3．
换行标记【示例3】换行标记，将示例2中相应段落中的段落标记
替换为换行标记
，HTML语句如下，保存后的浏览效果如图3-5所示。注意段落标记
和换行标记
预览效果的不同。
我的花店我的花店欢迎您访问我的花店！<／P>花可以传情，可表达思念之情，亲情，感恩的心情，衷心的祝福！
居室之内，放上一束瓶插花，可增添幽雅，清静，舒适之感。
祝愿进入我的花店的朋友天天有好心情！
版权归“我的花店”所有.<／html>图3-5换行标记1图3-5换行标记2例4．列表标记【示例4】项目列表标记，HTML语句如下，保存后的浏览效果如图1-6所示。花语花语<／font><／hl>各种花所代表的含义如下：
玫瑰：纯洁的爱剑兰：用心坚固百合：百年好和满天星：爱怜菊花：吉祥康乃馨：亲情思念郁金香：爱的表白紫罗兰：永恒之美勿忘我：爱到永远<／body><／html>图3-6项目列表标记1图3-6项目列表标记2列表标记包括“项目列表”标记，“编号列表”标记。和标记都是成对标记。在标记之间还可以使用<1i>标记来设定项目内容，其type属性可以显示不同形状的项目符号，取值有：（1）不加type属性。项目符号显示为●（默认值）。（2）type=\"circle\"。项目符号显示为〇。（3）type=\"square\"。项目符号显示为■。3、链接标记的设置【示例5】链接标记，输入如下所示的HTML语句，保存后的浏览效果如图3-7所示。花语
花节
友情连接
与我联系
图3-7链接标记1图3-7链接标记2HTML是通过标记符来实现超链接的，它是成对标记符，主要属性有：（1）hrefo链接文件的地址。（2）target.链接目标的位置。A．指向电子邮件的链接与我联系B．指向站点内文件的链接花节C．指向其他网站文件的链接友情链接（二）文字与表格1、建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序”→“附件”→“记事本”，打开“记事本”窗口。（2）在记事本中输入HTML语句。（3）执行“文件”→“保存”命令，将文件保存为htm或html格式。（4）在浏览器中预览所建立的HTML文件。2、标记的设置【示例6】字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图3-8所示。我的花店我的花店欢迎您访问我的花店！花可以传情，可表达思念之情，亲情，感恩的心情，衷心的祝福！居室之内，放上一束瓶插花，可增添幽雅，清静，舒适之感.祝愿进入我的花店的朋友天天有好心情！版权归“我的花店”所有<／body>图3-8字体标记1图3-8字体标记2标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：（1）face属性：定义文字所使用的字体，如face=“隶书”。（2）size属性：定义文字的大小，属性值为1-7，也可使用相对大小来设置，如size=“+5”、size=“0-5\"（3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如：color=“red”；也可使用16进制的RGB代码来表示颜色，color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。此外，字体标记符还包括…粗体标记符、...斜体标记符等。3、表格标记的设置【示例7】表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图3-9所示。花节<／title></head><bodybgcolor=\"#FFFF99\"><tablewidth=\"210\"border=\"1\"align=\"center\"><tralign=\"center\"><tdcolspan=\"2\">节日</td><td>名称</td></td><tralign=\"center\"><tdrowspan=\"3\">5月</td><td>1日</td><td>国际劳动节</td></td><tralign=\"center\"><td>4日</td><td>中国青年节</td></td><tralign=\"center\"><td>12日</td><td>护士节</td></td><tralign=\"center\"><tdcolspan=\"2\">6月1日</td><td>国际儿童节</td></td></table><／body></html>此单元格跨3行Rowspan=”3”<p>此单元格跨2列Colspan=”2”<p>图3-9表格标记1图3-9表格标记2在<table>和</table>之间放置表格内容，<table>标记是成对标记。在表格中，行是用<tr>…</tr>标记来定义的，一行使用一个<tr>...</tr>标记，每行中的列是用<td>...</td>标记定义的；一列使用一个<td>...</td>标记。<table>，<tr>，<td>标记符都有相应的属性，用来定义表格中内容的显示方式。<table>表格标记的主要属性有：（l）rowspan。定义该单元格所跨行数。（2）colspan。定义该单元格所跨列数。 <div class="preview-ft">
<div class="preview-title">
<p style="color: red;"><strong>因篇幅问题不能全部显示，请点此查看更多更全内容</strong></p>
<div class="model-fold-cover-bd"><a href="https://m.tang5.com/mluuie/nreoixeegau/" target="_blank"><span>查看全文</span><i class="iconfont icon-chakangengduo"></i></a></div>
</div>
</div>
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/detail_left.js"></script>
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/detail_gg2.js"></script>
</div>
<div class="gl_prev">
</div>
</div>
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/detail_foot.js"></script>
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/share_cebian_gg1.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_xgyd.js"></script>
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/share_cebian_gg2.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_rmtj.js"></script>
<footer class="footer">
Copyright © 2019-<span class="currentYear"></span> 版权所有<br>
</footer>
<script>
var swiper = new Swiper('.i_banner .swiper-container', {
pagination: '.i_banner .swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
});
</script>
<!--弹窗开始-->
<script type="text/javascript">
$(function () {
//弹窗2
$('.menu_icon').click(function () {
$('.tbox').show();
})
//关闭
$('.close').click(function () {
$('.tbox').hide();
})
})
</script>
<!--弹窗结束-->
<script type="text/javascript" src="https://jss.wuhaninfo.cn/mobile/foot_foot.js"></script>
<script type="text/javascript">
const currentYear = new Date().getFullYear();
$('.currentYear').html(currentYear)
</script>
<script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot.js"></script>
</body>
</html>