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>里面。
