HTML_基础篇v2
网站图片页面显示案例
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>里面。
最新文章
- 【十大经典数据挖掘算法】SVM
- 【转】linux查看及修改文件权限以及相关
- java.util.NoSuchElementException: Timeout waiting for idle object
- BZOJ4033 [HAOI2015]T1
- 如何判断单选按钮radio被选中
- 微信诡异的 40029 不合法的oauth_code
- 《Linux多线程服务器端编程》读书笔记第3章
- Java安装根目录
- Python中的图形库
- 基于visual Studio2013解决C语言竞赛题之0502最小数替换
- chmod u+s(转)
- UVa 442 Matrix Chain Multiplication(矩阵链,模拟栈)
- QMediaPlayer占用CPU过高问题
- C# 设置程序启动项
- Nginx配置项优
- hikari链接池
- 2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛题解
- Net系列框架-Dapper+简单三层架构
- 谷歌旗下专业图片编辑Snapseed获重大更新
- 2-51单片机ESP8266学习-AT指令(开发板51单片机自动冷启动下载原理)
热门文章
- javascript: what can javascript do?
- sqlserver数据库脱机时发生异常:由于无法在数据库 &#39;SMS&#39; 上放置锁,ALTER DATABASE 失败。请稍后再试。 ALTER DATABASE 语句失败。 (.Net SqlClient Data Provider)
- 2017.11.24 Stm8L151-factory
- slab机制总结篇
- Golang Printf、Sprintf 、Fprintf 格式化
- 旧书重温:0day2【10】第五章 堆溢出利用2
- Android中的service
- vue指令总结
- 【HTML5】Canvas绘图详解-1
- Chrome 的审查元素功能有哪些奇技淫巧