html学习笔记二
html图片标记
<html> <head> <title>图片演示</title> </head> ----------------图片演示---------------<br/> <body> <br/><BR/> <img src = "猪.jpg" width = 170px height = 190px /><!--直接在网页上显示--> <!--实际上仅仅须要指定宽带就可以。自己主动调整比例--> <img src = "http://www.baidu.com/img/bdlogo.png" width = 300 border = 1></img><!--粘贴百度的Log图片,前提没防盗--> <!--border 加边框--> </body> </html>
<hr> 是加横线切割
由上:能够说明能够从外部站点得到图片地址
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>
关于特殊字符。
注意:
要在网页中打印 “<bg>”。由于<>是keyword,所以就须要转义,html中的转义字符是 。&
c<d d>c -> c<dd>c
<font> 你 好</font>:你和好中不管多少空格最后仅仅会显示一个。所以 表示空格
<font>你 好<font>
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 = "猪.jpg" /></td></tr> </table> </body> </html>
操作思想:
为了操作数据,须要对数据进行不同标签的封装,通过标签的属性值对已封装的数据进行操作。
而标签就相当于一个容器,对容器中数据的操作,就是不断的改变容器的属性值
Dreamweaver是一个html制作的一个好软件
1.演示列表标签:
列表标签:dl
上层项目:dt
下层项目:dd:dd标签,封装的内容会被自己主动缩进,dd有缩进效果
<dl> <dt>游戏名称:</dt> <dd>DNF</dd> <dd>LOL</dd> </dl>>
2.有序和无序的项目列表演示(经常使用)
有序:ol
无序:ul
不管有序和无序。条目的封装用的都是<ls>,且两者都有缩进效果
<body> <ul type=""><!--type = "",是样式--> <li> 无序项目</li> <li> 无序项目</li> <li> 无序项目</li> <li> 无序项目</li> </ul> <ol type="A"><!--从A開始排列--> <li> 有序项目</li> <li> 有序项目</li> <li> 有序项目</li> </ol> </body>