HTML入门 傷城~ 2022-04-06 05:38 239阅读 0赞 ### HTML入门 ### * 1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) * 2.语法和规范? * 3.HTML相关标签学习 * 案例:网站图片显示页面 * 案例:网站友情链接显示页面 * 案例:网站首页显示页面(表格布局) * 案例:网站后台系统页面 # 1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) # 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它不是编程语言) # 2.语法和规范? # HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。 HTML文件分为头部分(<head></head>)和体部分(<body></body>) HTML标签都是由开始标签和结束标签组成。(<hr />) HTML标签不区分大小写,建议使用小写。 # 3.HTML相关标签学习 # 标题标签<hn /> 水平线标签 <hr /> 段落标签<p></p> 字体标签<font></font> 属性:size:指定内容的大小 color:指定内容的颜色 face:指定内容的字体 加粗:<b></b> 斜体:<i></i> 下划线:<u></u> # 案例:网站图片显示页面 # <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站图片信息显示页面</title> </head> <body> <img src="../img/logo2.png" width="260px" height="45px" alt="logo图片"/> <img src="../img/header.png" width=" 300px" height="45px" alt="header图片"/> </body> </html> 1.图片标签 <img /> 属性: src:指的是图片显示的路径(位置) 绝对路径:E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image 相对路径: ①同一级:直接写文件名称或者./文件名称 ②上一级:../文件名称 ③下一级:写上目录名称/文件名称 width:指定图片的宽度,取值可以是像素值,也可以是百分比 height:指定图片的高度,取值可以是像素值,也可以是百分比 alt:当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关) # 案例:网站友情链接显示页面 # <ul> <li><a href="../案例一:网站信息显示页面/网站信息显示页面.html">阿里巴巴</a></li> <li><a href="#">华为</a></li> <li><a href="#">腾讯</a></li> <li><a href="#">乐视</a></li> </ul> 1.列表标签 有序列表: <ol type="I" start="" reversed="reversed"> <li></li> </ol> 无序列表: <ul type=""> <li></li> </ul> 2.超链接标签 <a href="" target=""></a> href:指定跳转的位置 target:指定跳转页面显示的位置(取值:_self 、_blank) # 案例:网站首页显示页面(表格布局) # <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商城首页</title> </head> <body> <!--1.创建一个八行一列的表格--> <table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px"> <!--2.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--3.导航栏--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首页</font> </a> <a href="#"> <font color="white">手机数码</font> </a> <a href="#"> <font color="white">电脑办公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用电器</font> </a> </td> </tr> <!--4.轮播图--> <tr> <td> <img src="../img/1.jpg" width="100%" /> </td> </tr> <!--5.最新商品--> <tr> <td> <!--嵌套一个三行七列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td colspan="7"> <font size="5">最新商品</font> <img src="../img/title2.jpg" /> </td> </tr> <tr> <td rowspan="2" width="190px" height="500px"> <img src="../img/big01.jpg" width="100%" height="100%" /> </td> <td colspan="3" width="555px" height="250px"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> </tr> <tr> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> </tr> </table> </td> </tr> <!--6.广告图片--> <tr> <td> <img src="../img/ad.jpg" width="100%" /> </td> </tr> <!--7.热门商品--> <tr> <td> <!--嵌套一个三行七列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td colspan="7"> <font size="5">热门商品</font> <img src="../img/title2.jpg" /> </td> </tr> <tr> <td rowspan="2" width="190px" height="500px"> <img src="../img/big01.jpg" width="100%" height="100%" /> </td> <td colspan="3" width="555px" height="250px"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> </tr> <tr> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> <td width="185px" height="250px" align="center"> <a href="#"><img src="../img/small03.jpg" /></a><br /> <a href="#"><font color="gray">电炖锅</font></a><br /><br /> <font color="red">¥499</font> </td> </tr> </table> </td> </tr> <!--8.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--9.友情链接和版权信息--> <tr> <td align="center"> <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> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </td> </tr> </table> </body> </html> 1.表格标签 <table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing=""> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> 2.跨行跨列操作 跨行:rowspan 跨列:colspan # 案例:网站后台系统页面 # left.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="right.html" target="right">会员管理</a><br /><br /> <a href="#">品牌管理</a><br /><br /> <a href="#">商品管理</a><br /><br /> <a href="#">分类管理</a> </body> </html> right.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 所有用户信息、 </body> </html> top.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <font size="7">欢迎XXXX进入后台管理系统</font> </body> </html> 框架页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站后台系统显示页面</title> </head> <frameset rows="20%,*"> <frame src="top.html" /> <frameset cols="20%,*"> <frame src="left.html" /> <frame name="right" /> </frameset> </frameset> </html> 框架集标签: <frameset rows="" cols=""> <frame src=""/> <frame name=""/> </frameset> src:指定该区域显示的文件(路径) name:它通常会结合超链接的 target 属性使用,来定义最终的显示位置。
相关 HTML入门 目录 1.什么是HTML 2.固定格式 3.第一个HTML 3.各部分细节详解 3.1 标题 3.2 段落 3.3 链接 3.4 图像 3.5 表格 3. àì夳堔傛蜴生んèń/ 2023年10月11日 19:36/ 0 赞/ 47 阅读
相关 html入门 HTML基本格式 1 <html> 2 <head></head> 3 <body> 4 this is my 布满荆棘的人生/ 2023年06月03日 09:58/ 0 赞/ 16 阅读
相关 (html入门)HTML 样式 HTML 样式 style 属性用于改变 HTML 元素的样式。 eg: <html> <body style="background-color: àì夳堔傛蜴生んèń/ 2022年09月02日 12:46/ 0 赞/ 226 阅读
相关 html入门 -------------------- HTML基础 1、HTML概述 概念: HTML:HyperText Markup Language 超 小灰灰/ 2022年08月19日 11:17/ 0 赞/ 202 阅读
相关 HTML入门 强烈推荐一个大神的人工智能的教程:[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan] 深藏阁楼爱情的钟/ 2022年07月29日 11:42/ 0 赞/ 181 阅读
相关 HTML 入门 1、什么是HTML HTML(Hyper Text Markup Language),超级文本标记语言 超文本: a 标记 ゝ一世哀愁。/ 2022年07月15日 00:14/ 0 赞/ 180 阅读
相关 HTML 入门 1、什么是HTML HTML(Hyper Text Markup Language),超级文本标记语言 超文本: a 标记 淩亂°似流年/ 2022年07月15日 00:14/ 0 赞/ 175 阅读
相关 HTML入门 HTML入门 1. web概念概述 2. HTML web概念概述 JavaWeb: 使用Java语言开发基于互联网的项目 今天药忘吃喽~/ 2022年05月13日 08:50/ 0 赞/ 227 阅读
相关 HTML入门 HTML入门 1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 2.语法和规范? 3.HTML相关标签学习 傷城~/ 2022年04月06日 05:38/ 0 赞/ 240 阅读
相关 HTML入门 what is HTML HTML: Hyper Text Markup Language 超文本标签语言 对网页中的文本,图片,声音进行描述 HTML格式 ﹏ヽ暗。殇╰゛Y/ 2021年11月16日 16:56/ 0 赞/ 311 阅读
还没有评论,来说两句吧...