首页 > 代码库 > html学习笔记二

html学习笔记二


html图片标记

<html>
<head>
<title>图片演示</title>
</head>
----------------图片演示---------------<br/>
<body>
<br/><BR/>
<img src = http://www.mamicode.com/"猪.jpg" width = 170px height = 190px />>


由上:可以说明可以从外部网站得到图片地址


html表格标记


表格的主要用途:

1.显示数据、图片

2.网页布局


基本语法:

td 表示列,tr表示行

cellspaceing 表示空隙大小,指两个列(行)间的距离

cellpadding  表示填充大小,各行各列中的内容被填充,一定程度上会撑大格子

<html>
<head>
<title>表格演示</title>
</head>
<body>
<table border = 4 cellspacing = 5 bordercolor = "red" align = "center" bgcolor = "blue" width = 500px >
<!--align 布局 center : 居中布局 -->
<!--CSS: cellspacing 空隙大小  bordercolor 线变颜色 -->
<!--cellpadding = "" 填充大小-->
<!--bgcolor 表格背景-->
<!--tr 代表行  td 代表列-->
<tr align = "center"><td>1</td><td>2</td><td>3</td></tr>
<!--tr 里有align 可以放数字居中-->
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</body>
</html>

Table_Demo:


<html>
<head>
<title>菜谱Demo</title>
</head>
<body>
<table border = 1 bordercolor = #F474DA cellspacing = 0 height = 200 align = "center" width = 430px border = 1 >
<tr align = "center"><td colspan = 3>今日菜单</td></tr><!--列合并 一列 = 三列-->
<tr align = "center"><td rowspan = 2>素菜</td><td>黄瓜</td><td>白菜</td></tr><!--行合并-->
<tr align = "center"><td>茄子</td><td>土豆泥</td></tr>
<tr align = "center"><td rowspan = 2>荤菜</td><td>鱼</td><td>肉</td></tr>
<tr align = "center" ><td>蛋</td><td>猪肉<img width = 80px src = http://www.mamicode.com/"猪.jpg" />>




html学习笔记二