使用HTML制作网页(精)

合集下载

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>内⾐&nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>鞋靴 /</span><span>箱包 /</span><span>配件&nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>童装玩具 /</span> <span>孕产 /</span><span>⽤品&nbsp></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>家电 /</span><span>数码 /</span><span>⼿机 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>美妆 /</span><span>洗护 /</span><span>保健品 &nbsp></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>珠宝 /</span><span>眼镜 /</span><span>⼿表 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>运动 /</span><span>户外 /</span><span>乐器 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>游戏 /</span><span>动漫 /</span><span>影视 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>美⾷ /</span><span>⽣鲜 /</span><span>零⾷ &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>鲜花 /</span><span>宠物 /</span><span>农资 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>房产 /</span><span>装修 /</span><span>建筑 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>家居 /</span><span>家饰 /</span><span>家纺 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>汽车 /</span><span>⼆⼿车 /</span><span>⽤品 &nbsp ></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>办公 /</span><span>DIY /</span><span>五⾦电⼦&nbsp></span></li><li><span><img src="../images/menu-item-icon.png" alt=""/>百货 /</span><span>餐厨 /</span><span>家庭保健&nbsp></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=""/>&nbsp<span>⼈⽓248006</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>理想家</p><p>想要这个家</p><img src="../images/qietu23.png" alt=""/>&nbsp<span>⼈⽓2038770</span></div></div><div><img src="../images/qietu04.png" alt=""/><div><p>⽔中飞鱼</p><p>你属鱼的吧</p><img src="../images/qietu23.png" alt=""/>&nbsp<span>⼈⽓285040</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>韩范⼩妖精</p><p>实⼒了欧巴</p><img src="../images/qietu23.png" alt=""/>&nbsp<span>⼈⽓5862134</span> </div></div><div><img src="../images/qietu04.png" alt=""/><div><p>家有萌娃</p><p>宝贝快长⼤</p><img src="../images/qietu23.png" alt=""/>&nbsp<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=""/>&nbsp<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=""/>&nbsp<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=""/>&nbsp<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=""/>&nbsp<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入门(网页制作案例教程课件)

2020/7/26
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号店网站

2/38
任务描述制作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 在密码输入框中添加密码强度提示，能够根据用户输入的内容动态地显示密码的强度，提醒用户选择更安全的密码。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

使用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.使用以上各类标记，设计出“台州旅游网”页面
精美网页。