web常用标签布局初探综述.doc

一 Web标签 1标签 1.1Div标签看成一个可以存放标签的容器 几乎所有标签可以嵌套在div标签里 1.2Span标签 来组合内联标签，以便css来美化他们 1.3Meta 单标签 属性 meta charset=UTF-8编码 否则出现乱码 hr /水平线 1.4nbsp 空格 1.5无序列表：列表需要嵌套的写法 ul li/li li/li /ul Ul加小点shift table左右移动 1.6 dl dt苹果/dt dd苹果是水果/dd /dl//定义标签 1.7图片 img src=./ /当前目录 img src=../ /出去一级目录里面 img src=../../ /外面目录 专门建一个文件夹img图片放里面 img src=img/ / img src=img/ / alt=注释 width=200 等比例缩小 高度 50% 1.8内联元素：可以在一排的 a href=# title=“” target=“_blank”名称/a// 超链接#链接到自己Title 鼠标悬停提示Target 新窗口显示 图片里面超链接 相对坐标 相对于左上角 （0,0） 1.9 map id=img1name=img1 usemap=#img1/map area shape=poly coords=184,33,394,256 href=“” ///使用map标签可以给图片某块区域加链接,为map标签首先加上id 属性来为map标签定义一个唯一的名称,为了保证兼容性再加上name属性 属性值与id值相同,为map标签所用的图片加上usemap属性 属性值为#id名称,再map标签内嵌套area标签来实现给指定区域加链接 1.10 table border=1 cellpadding=1 cellspacing=10 trth姓名/thth语文/thth数学/th/tr trtd colspan=2小王/tdtd90/tdtd95/td/tr trtd rowspan=2小李/tdtd20/tdtd90/td/tr trtd 小李/tdtd20/tdtd90/td/tr /table//表格横的tr标签竖的是td或者th标签Border 边框,Cellpadding 字与旁边的间距,Cellspacing 单元格之间的距离,Colspan 合并单元格,Rowspan 横跨的列数 2表单 基本概念： 2.1标签form定义用户输入的html表单 属性： action规定当提交表单时，向何处发送表单数据 Name：给表单命名 Target_blank 等其他值 在新窗口展示 Method 提交方式 psot或get值 form action= name=“form1” target=_blank/form 2.2input 定义表单输入界面 通过type属性来展示不同的输入界面 通过value改变默认值 input type=text ///普通文本框 disabled不能输入 readonly只读 size长度 input type=password disabled=disabled readonly=readonly size=“100”///密码框 input type=file ///文件上传 input type=hidden / input type=button value=按钮/ //普通按钮 性别input type=radio name=sex checked=checked /男 性别input type=radio name=sex /女//单选 name 把两个关联起来 checked自动点上 2.3复选框 性别input type=checkbox / 您的爱好input type=checkbox /体育 您的爱好input type=checkbox /音乐 您的爱好input type=checkbox /读书 您的爱好input type=checkbox /绘画 input type=submit value=确认提交 ///提交 value动态提交 最终确定的提交的 2.4重置 input type=reset / 2.5定义多行输入框 textarea cols=2 rows=2 /textarea Label 标签 for与input中的id一致 点字就会起作用 性别input type=radio id=boy / label for=boy男/label 2.6 Select标签配合option标签来实现下拉菜单 multiple可以多选 select name=“城市” mult