使用HTML制作网页(精)
使用HTML制作网页
台州电大工程技术系钱莹
HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言。
HTML语言是由 HTML标记组成的描述性文本，HTML 标记可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部 (Head)、主体 (Body) 两大部分。
头部描述浏览器所需的信息，主体包含所要说明的具体内容。
通过使用HTML，我们可以制作出精美的页面，同时，它也是设计功能更强大的电子商务网站的基础。
通过本章节的学习，要求同学掌握Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记的使用规则，熟悉标记中各类属性的含义及使用方法。
在本章节的学习中，我们将围绕HTML标记学习，通过一个实际案例制作（台州旅游网主页），依次学习Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记；在对以上标签进行介绍同时，辅以实际案例制作，使学习过程中能够理论与实际相结合，提高教学效果。
台州旅游网
Tab标签
< html>< /html>其间为所有的页面元素代码
< head>< /head> 放置页面的一些属性，如meta等
< title>< /title>设定网页的标题
< body>< /body>整个页面的主体部分，可设定背景色，文本等
例:< body bgcolor="颜色代码" background="图片地址" onload="" text=""
link="" vlink="已访问后的颜色" alink="单击时的颜色">
HTML标记示例
<html>
<head>
<title>台州旅游信息网</title>
</head>
<body>
台州旅游信息网制作步骤一：熟悉（HTML,HEAD,TITLE,BODY）标记</body>
</html>
步骤一程序
功能：通过示例，使学生对HTML标记功能产生直观印象。
重点：
html标记必须成对使用，譬如<html></html>
各标记的功能
标记的嵌套关系
2.字标题标签
< h1>< /h1>放标题1,2……表显示的大小
< h2>< /h2>
·
< h7>< /h7>
此外还有< hr>< /hr>可以插入一个横线，当然，你业可以修改此线的相关属性.
字标题标记示例
要点：
字标题标签的使用方法
<h1><h2>…<h7>字体的大小排列
3.文本
< p>< /p>定义一行且空出一行 < p align="center/right/left">< /p>
< br>换行
< font size="2" color="#FFFFFF" face="宋体">文本< /font>
< b>加粗如:< font>< b>文本< /b>< /font>
< I>< /I>使倾斜
< u>< /u>下划线
步骤三示例
要点：
1、<p></p>标记与<br>标记的区别
2、<B><I><U>标记的使用
3、<font>标记及其各属性使用方法，color属性使用方法
4.链接
< a href="地址">文本< /a> 比较常规，其中可以对文字进行修饰
< a href="mailto:vastmaster@">发送邮件< /a>
< a href="" title="文字">< /a> title说明鼠标放到上面时显示的文字
超连接示例
5.图片链接
< img src="地址" alt="欢迎访问" width="200" height="200" border="0" align="center">
只需将上面的的加入< a href="">< /a>中就可以了
图片使用示例
6.表格
< th>表格头< /th>常是黑体居中的文字
< table>< /table>
< tr>< /tr>定义行标签
< td>< /td>
< tbody>< /tbody>
<table width="100%" height="600" border="0" cellspacing="" cellpadding="">
cellspacing为相邻单元表格间距，celladding为边框同内容间距
< tr align="">水平对齐方式
< tr vlign="">竖直对齐方式
表格使用示例
重点：
1、<table>,<tr>,<td>等标记使用方法
2、表格高度，宽度，边框等属性设置方法
3、灵活使用表格进行网页排版。
7.使用以上各类标记，设计出“台州旅游网”页面
精美网页。
HTML教程(最全的图文并茂教程)
小结
请说出实际开发常用的4种块状结构是什么？ 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单
行级标签—图像标签
提供搜索关键字和内容描述 信息，方便搜索引擎的搜索
HTML页面中的块和行
HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计
行级：包 括文字、 图片等
块级： 块内包含 多行
块级标签
根据使用场合，块级标签又细分为：
ቤተ መጻሕፍቲ ባይዱ
W3C
制定统一的web标准
Netscape 的图标
W3C提倡的Web结构
不规范的示例
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3 存在问题： 1、内容和表现没分离，后期很难 维护和修改 2、HTML代码不能表示页面的内 容语义，不利于搜索引擎搜索
W3C提倡的Web结构
规范的示例
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul>
html简单网页代码模板
html简单网页代码模板在现代社会中，人们越来越喜欢在互联网上寻找信息，并通过互联网进行交流和娱乐。
因此，学习如何编写网页代码成为必不可少的一项技能。
HTML是一种网页编程语言，是创建网站和网页应用程序的基础。
掌握HTML知识，就可以建立自己的个人博客、网页等。
下面为大家提供一份HTML简单网页代码模板。
<! DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title></head><body><header><nav><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></nav></header><main><section><h1>欢迎来到我的网站</h1><p>在这里，您可以找到关于技术、旅行和时尚的最新信息。
</p></section><section><h2>技术</h2><p>这里可以了解最新的技术新闻和产品发布。
</p></section><section><h2>旅行</h2><p>我喜欢旅行，并在这里分享我的旅行经验和照片。
用HTML编写淘宝页面
⽤HTML编写淘宝页⾯<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/reset.css"/><link rel="stylesheet" href="../css/taobao.css"/></head><!--导航栏--><header><nav><span><a href="">亲，请登录</a><a href="">免费注册</a><a href="">⼿机逛淘宝</a></span><span><a href="">我的淘宝<ol><li>淘宝</li><li>账户</li><li>清单</li></ol></a><a href="">购物车</a><a href=""><img src="../images/nav-start.png" alt=""/>收藏夹</a><a href="">商品分类</a><a href="">卖家中⼼</a><a href="">联系客服</a><a href=""><img src="../images/nav-ham.png" alt=""/>⽹站导航</a></span></nav></header><!--淘宝⽹--><div class="taobaowang"><div class="taobaowang-top"><img src="../images/logo.png" alt=""/><div><div class="sousuo"><div class="baobei"><a href="">宝贝</a><a href="">天猫</a><a href="">店铺</a></div><div class="shuru"><form action="#" method="post"><input type="text" name="username" placeholder=" 家居摆设添欣喜"/><button>搜索</button><span class="gaoji">⾼级搜索</span> </form></div></div><div class="xinkuan"><a href="">新款连⾐裙</a><a href="">四件套</a><a href="">潮流T桖</a><a href="">时尚⼥靴</a><a href="">短裤</a><a href="">半⾝裙</a><a href="">男⼠外套</a><a href="">墙纸</a><a href="">⾏车记录仪</a><a href="">新款男靴</a><a href="">⽿机</a><a href="">更多></a></div></div></div><div class="taobaowang-bottom"><div><p><strong>主题市场</strong> <img src="../images/menu-item-ham.png" alt=""/></p></div><div><a href="">天猫</a><a href="">聚划算</a><a href="">天猫超市</a><a href="">淘抢购</a><a href="">电器城</a><a href="">司法拍卖</a><a href="">中国制造</a><a class="tese" href="">特⾊中国</a><a href="">飞猪旅⾏</a><a href="">智能⽣活</a><a href="">苏宁易购</a></div></div></div><!--主题市场--><div class="zhuti"><div class="zhongjian"><div class="zhuti-left"><div><div class="nvzhuang"><ul><li><span><img src="../images/menu-item-icon.png" alt=""/>⼥装 /</span><span>男装 /</span><span>内⾐  ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>鞋靴 /</span><span>箱包 /</span><span>配件  ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>童装玩具 /</span> <span>孕产 /</span><span>⽤品 ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>家电 /</span><span>数码 /</span><span>⼿机   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>美妆 /</span><span>洗护 /</span><span>保健品  ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>珠宝 /</span><span>眼镜 /</span><span>⼿表   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>运动 /</span><span>户外 /</span><span>乐器   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>游戏 /</span><span>动漫 /</span><span>影视   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>美⾷ /</span><span>⽣鲜 /</span><span>零⾷   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>鲜花 /</span><span>宠物 /</span><span>农资   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>房产 /</span><span>装修 /</span><span>建筑   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>家居 /</span><span>家饰 /</span><span>家纺   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>汽车 /</span><span>⼆⼿车 /</span><span>⽤品   ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>办公 /</span><span>DIY /</span><span>五⾦电⼦ ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>百货 /</span><span>餐厨 /</span><span>家庭保健 ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>学习/</span><span>卡卷/</span><span>本地服务></span></li></ul><img src="../images/qietu.png" alt=""/></div><div class="tianmao"><img src="../images/qietu01.png" alt=""/><img class="yanyuan" src="../images/qietu02.png" alt=""/><div><img src="../images/little-tmall.png" alt=""/><span><strong>天猫必逛</strong></span><span>热门品牌，天天上天猫！</span></div><div class="xinji"><div><p>星级好睡眠</p><p>⽤新去宠你</p><a href=""><p>狂欢速抢</p></a><img src="../images/01-(2)_03.gif" alt=""/></div><div><p>⼩⽶超品⽇</p><p>平衡车出游热卖</p><a href=""><p>关注赢⼩⽶6！</p></a><img src="../images/01-(88)_03.gif" alt=""/></div><div><p>价格直降</p><p>冰洗爆款返场</p><a href=""><p>享免息分期</p></a><img src="../images/01-(66)_03.gif" alt=""/></div><div><p>厨卫⼤牌管</p><p>品质放⼼</p><a href=""><p>装修省⼼</p></a><img src="../images/01-(2)_05.gif" alt=""/></div></div><div class="jinri"><div><a href=""><p>今⽇热卖</p></a><img class="yanyuan" src="../images/qietu03.png" alt=""/></div></div></div></div><div class="shudaizi"><div><img src="../images/qietu04.png" alt=""/><div><p>书呆⼦</p><p>书卷⽓更迷⼈</p><i></i> <img src="../images/qietu23.png" alt=""/> <span>⼈⽓248006</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>理想家</p><p>想要这个家</p><img src="../images/qietu23.png" alt=""/> <span>⼈⽓2038770</span></div></div><div><img src="../images/qietu04.png" alt=""/><div><p>⽔中飞鱼</p><p>你属鱼的吧</p><img src="../images/qietu23.png" alt=""/> <span>⼈⽓285040</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>韩范⼩妖精</p><p>实⼒了欧巴</p><img src="../images/qietu23.png" alt=""/> <span>⼈⽓5862134</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>家有萌娃</p><p>宝贝快长⼤</p><img src="../images/qietu23.png" alt=""/> <span>⼈⽓248006</span> </div></div></div></div><div class="zhuti-right"><div><img src="../images/login-header.png" alt=""/></div><div></div><div></div><div></div></div></div></div><!--我常逛的--><div class="guangwu"><div class="zuiyoubian"><div class="diyitiao"><img src="../images/tkbktbtc.png" alt=""/><a href="">更多></a><div><img src="../images/01-(11112)_03.gif" alt=""/><span><strong>⼯作需要放松，享受下午时光</strong></span><p>你有吃下午茶的习惯吗？最早关于下午茶的由来，可以最疏导英国17世纪</p> </div></div><div><img src="../images/ybhkho.png" alt=""/><div><img src="../images/01-6666_03.gif" alt=""/><span><strong>丹麦Mat⼿⼯⽪⾰隔热</strong></span><p>⽪⾰质地能隔热，触感细腻独特，造型简约⼤⽅，质感</p></div></div><div><img src="../images/01-6666_07.gif" alt=""/><span><strong>⼴东特产红⾖饼糕点</strong></span><p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p></div><div><img src="../images/01-6666_10.gif" alt=""/><span><strong>⼴东特产红⾖饼糕点</strong></span><p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p></div><div><img src="../images/01-6666_12.gif" alt=""/><span><strong>⼴东特产红⾖饼糕点</strong></span><p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p></div><div><img src="../images/01-6666_13.gif" alt=""/><span><strong>⼴东特产红⾖饼糕点</strong></span><p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p></div><div><img src="../images/01-6666_14.gif" alt=""/><span><strong>⼴东特产红⾖饼糕点</strong></span><p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p></div></div><div class="zuizuobian"><div class="guangwu-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>我常逛的</strong></span> <a href="">更多></a></div><div class="yidong"><div class="guangwu-bottom"><img src="../images/qietu05.png" alt=""/><div><ul><li><p><strong>热门TOP</strong></p></li><li><a href="">童装新款</a></li><li><a href="">新⽣⼉礼</a></li><li><a href="">连⾐裙</a></li><li><a href="">男童外套</a></li><li><a href="">男童裤⼦</a></li><li><a href="">打底裤</a></li><li><a href="">遮阳帽</a></li><li><a href="">亲⼦装</a></li><li><a href="">⼉童T斜</a></li><li><a href="">演出服</a></li></ul></div></div><div class="guangwu-bottom-tupian"><div><div class="baosui"><div><img src="../images/qietu06.png" alt=""/></div><div><img src="../images/qietu06.png" alt=""/></div></div><div class="gaohuitou"><img src="../images/qietu07.png" alt=""/></div><div class="tongxie"><img src="../images/qietu08.png" alt=""/></div></div><div class="qinbaobie"><img src="../images/qietu09.png" alt=""/><img src="../images/qietu10.png" alt=""/><img src="../images/qietu11.png" alt=""/></div></div></div><div><div class="guangwu-bottom1"><img src="../images/qietu05.png" alt=""/><div><ul><li><p><strong>热门TOP</strong></p></li><li><a href="">⾯膜</a></li><li><a href="">⾹⽔</a></li><li><a href="">化妆品</a></li><li><a href="">修复⾯膜</a></li><li><a href="">洗发⽔</a></li><li><a href="">⼝红 bb霜</a></li><li><a href="">防晒霜</a></li><li><a href="">⼿⼯皂</a></li><li><a href="">护肤套装</a></li><li><a href="">彩妆</a></li></ul></div></div><div class="guangwu-bottom1-tupian"><div><div class="baosui"><div><img src="../images/01-(6662)_03.gif" alt=""/></div><div><img src="../images/01-(6662)_03.gif" alt=""/></div></div><div class="gaohuitou"><img src="../images/01-(2222)_03.gif" alt=""/></div><div class="tongxie"><img src="../images/qietu08.png" alt=""/></div></div><div class="qinbaobie"><img src="../images/01-(2888)_07.gif" alt=""/><img src="../images/qietu10.png" alt=""/><img src="../images/qietu11.png" alt=""/></div></div></div></div><div class="tianmaoku"><img src="../images/qietu12.png" alt=""/></div><div class="shishangbao"><div class="shishang-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>时尚爆料王</strong></span> <a href="">更多></a></div><div class="shishang-bottom"><div><div class="zuihao"><div><img src="../images/fashion-logo.png" alt=""/></div><div class="zhenzixian"><div><img src="../images/pcldmzzi.png" alt=""/><a href=""><p>软萌针织衫</p></a></div><div><img src="../images/bkviblb.png" alt=""/><div><img src="../images/nyufvjxt.png" alt=""/></div></div></div></div><div class="border"><div><img src="../images/fashion-logo.png" alt=""/></div><div><div><img src="../images/kbhs.png" alt=""/><img src="../images/kbhs.png" alt=""/></div><div><img class="lki" src="../images/xdlm.png" alt=""/><img src="../images/uvhu.png" alt=""/></div></div></div></div><div><div><div class="zuihao"><div><img src="../images/fashion-logo.png" alt=""/></div><div class="zhenzixian"><div><img src="../images/pcldmzzi.png" alt=""/><a href=""><p>软萌针织衫</p></a></div><div><img src="../images/bkviblb.png" alt=""/><div><img src="../images/nyufvjxt.png" alt=""/></div></div></div></div><div class="border"><div><img src="../images/fashion-logo.png" alt=""/></div><div><div><img src="../images/kbhs.png" alt=""/><img src="../images/kbhs.png" alt=""/></div><div><img class="lki" src="../images/xdlm.png" alt=""/><img src="../images/uvhu.png" alt=""/></div></div></div></div></div></div></div><div class="caoliu"><img src="../images/qietu13.png" alt=""/></div></div><!--热卖单品--><div class="remai"><div class="remai-top"><img src="../images/fire.png" alt=""/><span><strong>热卖单品</strong></span> </div><div class="remai-center"><ul><li><a href="">客厅灯</a></li><li><a href="">床垫</a></li><li><a href="">沙发垫</a></li><li><a href="">⾐柜</a></li><li><a href="">电脑架</a></li><li><a href="">沙发</a></li><li><a href="">凉席</a></li><li><a href="">男内裤</a></li><li><a href="">蚊帐</a></li><li><a href="">拉杆箱</a></li><li><a href="">鞋柜</a></li><li><a href="">防晒⾐</a></li><li><a href="">窗帘</a></li><li><a href="">运动鞋</a></li><li><a href="">凉鞋男</a></li><li><a href="">夹克</a></li><li><a href="">电风扇</a></li><li><a href="">⽜仔裤</a></li><li><a href="">电脑桌</a></li><li><a href="">t学男</a></li><li><a href="">男T恤</a></li><li><a href="">男包</a></li><li><a href="">真丝裙</a></li></ul></div><div class="remai-bottom"><div><div><div class="zhenpibao"><img src="../images/qietu14.png" alt=""/><div><p>$798.00</p><p>⽉销2笔</p><a href="">真⽪时尚</a><a href="">⾼档⽪包</a><a href="">头层⽜⽪包</a><a href="">欧美时尚鳄鱼纹</a><a href="">⽓质⼥包</a></div></div><div class="pibao-top"><div ><img src="../images/qietu15.png" alt=""/><div><p>$799.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销9笔</p></div></div><div class="xiaohai"><img src="../images/qietu15.png" alt=""/><div><p>$799.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销9笔</p></div></div></div></div><div><div><div class="zhenpibao"><img src="../images/qietu14.png" alt=""/><div><p>$546.00</p><p>⽉销27笔</p><a href="">井⼝尼龙⾯料</a><a href="">防泼⽔</a><a href="">⾹港品牌⼥包</a><a href="">轻盈</a></div></div><div class="pibao-top"><div><img src="../images/qietu15.png" alt=""/><div><p>$149.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销320笔</p></div></div><div class="xiaohai"><img src="../images/qietu15.png" alt=""/><div><p>$728.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销58笔</p></div></div></div></div></div><div><div><div class="zhenpibao"><img src="../images/qietu14.png" alt=""/><div><p>$198.00</p><p>⽉销446笔</p><a href="">优质橡胶材料制作的⼤时尚的</a><a href="">⾏⾛的时候解压⼒很好</a></div></div><div class="pibao-top"><div><img src="../images/qietu15.png" alt=""/><div><p>$128.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销202笔</p></div></div><div class="xiaohai"><img src="../images/qietu15.png" alt=""/><div><p>$19.00</p><p><img src="../images/qietu16.png" alt=""/>⽉销9206笔</p></div></div></div></div></div></div><div class="remai-last"><img src="../images/add-two.png" alt=""/><img src="../images/add-three.png" alt=""/><img src="../images/ad-one.png" alt=""/></div></div></div><!--消费者保障--><div class="xiaofeizhe"><div><img src="../images/about-icon1.png" alt=""/> <span>消费者保障</span> <p><a href="">保障范围</a><a href="">退货款流程</a><a href="">服务中⼼</a><a href="">更多特⾊服务</a></p></div><div><img src="../images/about-icon1.png" alt=""/> <span>新⼿上路</span> <p><a href="">新⼿专区</a><a href="">消费警⽰</a><a href="">交易安全</a><a href="">24⼩时在线帮助</a><a href="">免费开店</a></p></div><div><img src="../images/about-icon1.png" alt=""/> <span>付款⽅式</span> <p><a href="">快捷⽀付</a><a href="">信⽤卡</a><a href="">余额宝</a><a href="">蚂蚁花呗</a><a href="">货到付款</a></p></div><div><img src="../images/about-icon1.png" alt=""/> <span>淘宝特⾊</span> <p><a href="">⼿机淘宝</a><a href="">旺旺/旺信</a><a href="">⼤众评审</a></p></div></div><!--页脚--><div class="green"><a href=""><p>我常逛的</p></a><a href=""><p>时尚</p></a><a href=""><p>品质</p></a><a href=""><p>特⾊</p></a><a href=""><p>实惠</p></a><a href=""><p>猜你喜欢</p></a><a href=""><p>反馈</p></a><a href=""><p>恐怖举报</p></a></div><footer><div><ul class="zuihou"><li>阿⾥巴巴集团</li><li>淘宝⽹</li><li>天猫</li><li>聚划算</li><li>全球速卖通</li><li>阿⾥巴巴国际交易市场</li><li>1688</li><li>阿⾥妈妈</li><li>飞猪</li><li>阿⾥云计算</li><li>yunOs</li><li>阿⾥通信</li><li>⼀淘</li><li>万⽹</li><li>⾼德</li><li>US</li><li>友盟</li><li>虾⽶</li><li>阿⾥星球</li><li>钉钉</li><li>⽀付宝</li><li>优酷</li><li>⼟⾖</li><li>阿⾥健康</li><li>阿⾥影业</li><li>阿⾥体育</li><li>⽹商银⾏</li></ul></div><div><div>。
第2章 HTML入门(网页制作案例教程课件)
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
大一网页设计作业代码html
大一网页设计作业代码htmlHTML是一种标记语言，被广泛用于创建网页。
在大一的网页设计作业中，我们需要编写一段HTML代码来实现特定的网页设计。
本文将涵盖大约1200字的HTML代码。
首先，我们需要一个HTML文档的骨架，它定义了文档的基本结构。
以下是一个基本的HTML文档骨架：```html<!DOCTYPE html><html><head><title>网页设计作业</title></head><body><!-- 在这里编写页面内容 --></body></html>```在`<body>`标签内，我们可以编写实际的页面内容。
下面是一个简单的网页设计示例：```html<!DOCTYPE html><html><head><title>网页设计作业</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个大一网页设计作业的示例。
</p><h2>页面布局</h2><p>在这个作业中，我采用了响应式布局。
通过使用CSS媒体查询，页面会根据设备的宽度进行自适应布局。
</p><h2>颜色主题</h2><p>我选择了蓝色和白色作为网页的主要颜色。
这种清新的配色方案使得页面看起来简洁而现代。
</p><h2>导航栏</h2><p>我在页面的顶部创建了一个导航栏，用于导航到不同的页面部分。
导航栏包含了页面的主要链接。
</p><h2>内容区域</h2><p>在内容区域，我展示了一些图片和文字。
HTML精品教程资料：05-项目案例：制作1号店网站
任务描述 制作1号店网站
首页 搜索列表页 商品详情页 登录页 注册页
3/38
问题分析1：整体开发思路
网页制作步骤
制作网站公用部分（网站导航和版权部分） 制作1号店首页（index.html） 制作搜索列表页（searchList.html） 制作商品详情页（ detail.html ） 制作登录页（ loginpage.html） 制作注册页（ registerpage.html）
移入时设置放大动画[25分钟]
}
11/38
开发计划3-1
用例1：制作网站公用部分
网站导航
完成时间：30分钟
网站版权
完成时间：20分钟
用例2：制作网站首页
全部商品分类
完成时间：20分钟
轮播图
完成时间：20分钟
快讯
完成时间：15分钟
热门产品
完成时间：20分钟
进口生鲜
完成时间：25分钟
12/38
开发计划3-2
用例3：制作搜索列表页
使用过渡给“天天低价”列表项添加动画
讲解需求说明
15/38
用例1：网站公用部分3-2
分析 使用无序列表制作顶部导航和主导航菜单 使用过渡给“天天低价”列表项添加动画
提示
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
项目案例： 制作1号店网站
本课目标
学完本次课程后，你能够：
实验一做一个简单的html网页
实验报告学生姓名：学号：一、实验室名称：软件大楼302二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。
（3）超链接是网页中的特殊标记。
它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上，也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。
在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microso ft Word等。
保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。
HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。
头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPage，dreamwerver，notepad以FrontPage为例，它是一种简单易学的Web管理和网页制作的软件。
Front Page2000的窗口，如图1.1所示。
好看实用的六个html登录页面实例
一、欢迎界面登入页面1.1 页面布局简洁大方，欢迎语句体现了亲切的氛围。
1.2 提供了用户名和密码的输入框，方便用户输入登入信息。
1.3 设有忘记密码和注册账号的信息，提高了用户体验。
二、带有动画效果的登入页面2.1 页面采用了动态的背景图片和渐变色，给人一种时尚感。
2.2 在输入框中添加了动态的图标，增加了趣味性和用户操作的吸引力。
2.3 登入按钮添加了点击时的动画效果，提升了用户的互动体验。
三、响应式设计的登入页面3.1 页面布局采用了响应式设计，适应了不同设备的屏幕尺寸。
3.2 输入框和按钮的样式经过调整，在不同屏幕大小下都能够很好地展示。
3.3 采用了流体布局和媒体查询，使页面在不同分辨率下能够自动调整，保证了用户的良好体验。
四、简约风格的登入页面4.1 页面采用了简约的设计风格，去除了多余的装饰，注重了内容的直观性和信息的清晰度。
4.2 输入框和按钮的风格简洁大方，整体视觉效果非常舒适。
4.3 页面配色搭配合理，不刺眼，符合现代审美。
五、个性化定制的登入页面5.1 页面提供了用户头像上传功能，使用户在登入页面即可展示个性。
5.2 输入框和按钮样式可以自定义，用户可以根据自己的喜好进行操作。
5.3 提供了账号设置和个人资料编辑的入口，方便用户进行个性化设置。
六、整合社交媒体的登入页面6.1 页面提供了利用社交账号快捷登入的功能，方便用户使用已有的社交账号进行登入。
6.2 登入页面上有社交媒体的图标，方便用户直接点击进行快捷登入。
6.3 用户可以方便地将登入信息共享到社交媒体，增加了页面的互动性和社交性。
以上是六个好看实用的HTML登入页面实例，它们在设计和使用上都有各自的优势，可以根据实际需求进行选择。
希望这些实例可以帮助到您，同时也希望未来能够有更多个性化且实用的登入页面出现，为用户带来更好的体验。
七、密码保护性强的登入页面7.1 在密码输入框中添加密码强度提示，能够根据用户输入的内容动态地显示密码的强度，提醒用户选择更安全的密码。
html网页设计教程(推荐)
<P>标签的属性
<P Align= 参数> 其中,Align是<p>标签的属性，参数的取值为：
Left 左对齐
Center 居中对齐 Right 右对齐.
居中对齐标签center
格式： <center>……</center>
水平分隔线标签<hr>
<hr>标签是单独使用的标签，是水平线标签，用于段落与段落之间 的分隔，使文档结构清晰明了，使文字的编排更整齐。
在记事本里输入html文件代码 保存成*.html或*.htm为扩展名的文件。 如果要修改编辑，在菜单里打开“查看—源文件”。修改完后再保存。
Meta标签
Meta:about,关于。关于文档的概要信息。 比如说作者，关键字，内容提要，编码等信息。 比如gb3212是编码信息，简体中文 Big5:繁体中文 Author, password,
建立超链接
本节要点 关于超链接 链接标记 内部链接的建立 书签链接的建立 外部链接的建立
关于超链接
HTML文件中最重要的应用之一就是超链接，超 链接（hyper link)是一个网站的灵魂，web上的 网页是互相链接的，单击被称为超链接的文本或 图形就可以链接到其它页面。
如何创建一个HTML文档
HTML只是一个纯文本文件。 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个 WEB浏览器。 编辑：HTML编辑器是用于生成和保存HTML文档的应用程序：记事 本、word、Frontpage、Dreamweaver 浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB 资源的客户端程序。
工作报告之html网页制作实验报告
html网页制作实验报告【篇一：html实验报告】武夷学院实验报告课程名称：电子商务网站设计与开发_ 项目名称：_基于html的网页设计姓名：林元卿专业：旅游管理班级：3班学号：20136031005实验操作成绩（百分制）__________ 实验指导教师签字：__________）实验报告成绩（百分制）__________ 实验指导教师签字：__________【篇二：html标记的综合应用网页设计实验报告】学生实验报告学院：软件与通信工程学院课程名称：网页设计基础专业班级： 08软件与通信工程学院4班姓名：陈贝贝学号： 0088225学生实验报告一、实验综述1、实验目的及要求实验目的：通过用html语言进行编辑，使学生了解网站的制作流程；了解html表单标记的应用；了解html表格标记的应用；掌握html的基本概念、文档的基本结构；掌握html文档的结构、html设计文字排版；掌握html插入多媒体；掌握html基本标记，包括标题、背景图片、图像、水平线、字体编辑、段落、超链接、文本堆砌等的使用方法。
熟练掌握html中的常用标记的名称及用途。
熟练掌握对html语言文字结构的理解；掌握各种元素的使用；熟练掌握图片、动画、声音的嵌入以及超级连接的控制和应用，结合实际，巩固课堂中所学的理论知识。
实验要求：以个人独立完成的方式，完成一个用html语言进行编辑的网页制作，实现一个具有独立主题的网页制作。
2、实验仪器、设备或软件带ie浏览器的计算机，windows的写字板、记事本。
二、实验过程（实验步骤、记录、数据、分析）step1：设计网站logo，网站的标准色彩，并且确定网站主题和网站栏目，一切设计完成后开始构建页面。
我定义的主题是个人网站，所以主要突出自己的个性特质。
logo是sky dream，寓意是我的梦游园。
色彩主页是以蓝色为主，强调梦感。
栏目分为主页，日志（我的印记），相册（美丽瞬间），个人档案（我的万花筒），心情（我的叨叨）和留言板（留言星星河）。