网站图片页面显示案例

　　1.需求分析

　　　　需要在浏览器中显示2张图片信息，效果如下：

　　

　　2.技术分析

　　　　［图片标签］<img />

　　　　属性：

  • 　　src：指图片的位置(路径)

　　　　　路径的写法：绝对路径和相对路径

　　　　　

绝对路径： /xxxx/xxxx/xxxx/图片标签/xxx.jpg
同一级： ./文件名  或直接写文件名
上一级： ../文件名
下一级： 目录名/文件名

　　　　alt：当图片无法正常显示的时候给出的提示信息

　　　　width：设置图片的宽度，单位为像素值

　　　　height：设置图片的高度，单位为像素值

　　3.步骤分析

　　　　第一步：创建一个HTML文件

　　　　第二部：创建两个图片标签

　　　　第三部：分别为这两个图片制定路径(设置高度和宽度以及提示信息)

　　4.代码实现

<html>

     <head>

            <meta charset="utf-8">

            <title>网页图片信息显示页面</title>

     </head>

              <img src="../xxx/xxx/xxx.jpg" height="50px" />

              <img src="../xxx/xxx/xxx.jpg" hright="50px" />

</html>

网站列表页面显示案例

　　1.需求分析

　　要在页面中列表显示友情链接，显示效果如下：

　　2.技术分析

　　　　[列表标签]

　　　　列表标签分为 有序标签 和 无序标签

  • 　有序标签

　　　　

<ol type="1" start="5" reversed="reversed">

      <li>xxx</li>

      <li>xxx</li>

      <li>xxx</li>

      <li>xxx</li>

</ol>
  • 无序列表

　　type：属性取值有三个，分别代表实心小圆点、实心小方块、空心小圆点

<ul type="square">

      <li>xxx</li>

      <li>xxx</li>

      <li>xxx</li>

      <li>xxx</li>

</ul>

　　［超链接标签］

　　　　　超链接标签：<a></a>

　　　　　属性：

　　　　　　　　href：指定点击超链接之后跳转的目标位置(路径)

　　　　　　　　target：指定打开的资源文件在浏览器中显示的位置(覆盖当前的还是打开新的)

　　　　　　　　　　　　_blank：打开新的选项卡

　　　　　　　　　　　  _self：覆盖当前的选项卡

　　3.实现步骤

　　　　在页面中创建一个无序列表来显示友情链接

　　　　第一步：在首页的友情链接位置为它指定一个超链接(跳转的列表页面)

　　　　第二部：创建一个页面(一列表的形式显示出所有与商品有关的这些公司)

　　　　第三部：为这些公司添加超链接(指定这些公司的首页地址)

　　4.代码实现

<html>

    <head>

            <meta charset="utf-8">

            <title>网站有情链接显示页面</title>

    </head>

    <body>

            <ul>

                  <!--#表示点击超链接 页面不发生跳转-->

                 <li><a href="#">xxxx公司</a></li>

                 <li><a href="#">xxxx公司</a></li>

                 <li><a href="#">xxxx公司</a></li>

                 <li><a href="https://www.xxx.com">xxxx公司</a></li>

            </ul>

    </body>

</html>

　　[HTML的表格标签]

　　表格的标签：

　　　　<table></table>

　　　　<tr></tr>：表示表格的行

　　　　<td></td>：表示表格的单元格(列)

　　标签的属性：表格的宽高，默认将内容包裹住！

　　　　borde：设置表格的边框

　　　　withd：设置表格的宽度  建议把单位px带上

　　　　height：设置表格的高度

　　　　align：设置表格水平对其方式(left\right\center)

　　　　bgcolor：设置表格的背景颜色，可以十六进制，也可以时英文单词

　　　　cellspaceing：设置单元格与单元格之间的距离

　　　　cellpadding：设置单元格与内容之间的距离

　　　　<tr></tr>和<td></td>里面的属性大部分与<table>一样！

　　　　 注意：表格的默认属性：

　　　　　　　　如果对表格里面的某个单元格设置了宽高，那么对应这个单元格所在的行(高度发生改变)，所在的列(宽度发生变化)

　　　　　　　　在设置单元格里面的内容的宽高的时候，请先设置单元格的，在设置内容的宽高。

　　　　表格的跨行 跨列操作：

　　　　　　　　跨行：rowspan，它写在单元格<td>里面。

　　　　　　　　跨列：colspan，它写在单元格<td>里面。

HTML_基础篇v2的更多相关文章

  1. HTML_基础篇

    一.HTML的概述 什么是HTML? html:Hyper Test Markup Language 超文本标记语言(它不是编程语言!) 超文本:功能比普通的文本更加强大. 标记语言:使用一组标签对内 ...

  2. ArcGIS Runtime for Android开发教程V2.0（4）基础篇---MapView

    原文地址: ArcGIS Runtime for Android开发教程V2.0(4)基础篇---MapView - ArcGIS_Mobile的专栏 - 博客频道 - CSDN.NET http:/ ...

  3. ArcGIS Runtime for Android开发教程V2.0（3）基础篇---Hello World Map

    原文地址: ArcGIS Runtime for Android开发教程V2.0(3)基础篇---Hello World Map - ArcGIS_Mobile的专栏 - 博客频道 - CSDN.NE ...

  4. Python之路【第十六篇】：Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  5. python基础篇-day1

    python基础篇 python是由C语言写的: pass 占位符: del,python中全局的功能,删除内存中的数据: 变量赋值的方法: user,pass = 'freddy','freddy1 ...

  6. Jenkins: 基础篇（环境配置）

    自动化领域比较有影响力的开源框架jenkins,确实比较强大,易用.很多公司将其用来做持续即成CI(continuous integration).为了拓展和强化自己的软件设计生态系统,也将很久前使用 ...

  7. BOOST 线程完全攻略 - 基础篇

    http://blog.csdn.net/iamnieo/article/details/2908621 2008-09-10 12:48 9202人阅读 评论(3) 收藏 举报 thread多线程l ...

  8. （转）深度学习word2vec笔记之基础篇

    深度学习word2vec笔记之基础篇 声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...

  9. 深入了解Android蓝牙Bluetooth——《基础篇》

    什么是蓝牙?   也可以说是蓝牙技术.所谓蓝牙(Bluetooth)技术,实际上是一种短距离无线电技术,是由爱立信公司公司发明的.利用"蓝牙"技术,能够有效地简化掌上电脑.笔记本电 ...

随机推荐

  1. 团队作业：第五周 Alpha版本测试与发布

    团队:你吼辣么大声干什么嘛 Alpha版本测试报告:    bug: 修复的bug:     不能重现的bug:  无 产品设计,非bug: 在双人对战模式中,撞到墙壁会从对面的墙壁穿出,不会死 没能 ...

  2. VS2010 将程序发布至网站时，发生错误“未能给 bin/Debug/publish//setup.exe 签名“

    VS2010 将程序发布至网站时,发生错误“未能给 bin/Debug/publish//setup.exe 签名“  错误:   因为某项目未能生成,所以无法发布. ---------------- ...

  3. BZOJ - 2141 排队 (动态逆序对，区间线段树套权值线段树)

    题目链接 交换两个数的位置,只有位于两个数之间的部分会受到影响,因此只需要考虑两个数之间有多少数对a[l]和a[r]产生的贡献发生了变化即可. 感觉像是个带修改的二维偏序问题.(修改点$(x,y)$的 ...

  4. PTA L3-023 计算图 (dfs+数学推导)

    “计算图”(computational graph)是现代深度学习系统的基础执行引擎,提供了一种表示任意数学表达式的方法,例如用有向无环图表示的神经网络. 图中的节点表示基本操作或输入变量,边表示节点 ...

  5. HDU - 6166：Senior Pan（顶点集合最短路&二进制分组）

    Senior Pan fails in his discrete math exam again. So he asks Master ZKC to give him graph theory pro ...

  6. RabbitMQ学习系列四-EasyNetQ文档跟进式学习与实践

    EasyNetQ文档跟进式学习与实践 https://www.cnblogs.com/DjlNet/p/7603554.html 这里可能有人要问了,为什么不使用官方的nuget包呐:RabbitMQ ...

  7. 微博6月底升级后 报 10017/2/statuses/share.json或者10014/2/statuses/share.json错误

    一,背景 2017-06-26微博公告替换了一些接口,导致以前的: statuses/repost 转发一条微博 statuses/update 发布一条微博 statuses/upload 上传图片 ...

  8. SSH使用总结(xml配置)

    beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  9. 四种线性相位FIR滤波器振幅谱统一形式

  10. return super(ParamValueInline,self).formfield_for_foreignkey(db_field,request,**kwargs)自己返回自己的父类

    作者:刘强胜链接:https://www.zhihu.com/question/30361435/answer/83940591来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...