web前端总结-day02-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44634279/article/details/100526714

frameSet的基础

frameSet没有body
<frameset rows="20%,*" >
<frame src="top.html" />
<frameset cols="10%,*">
<frame src="left.html"/>
<frame src="right.html" name="dwll"/>
</frameset>
</frameset>
"dwll"用于标记右侧栏
"target"常用两个属性
1.blank 新建页面打开链接
2.self 在本身块打开

iframe

<body>
<div >
<a href="right1.html" target="zzl">新浪</a>
<a href="http://www.baidu.com" target="zzl"> >百度</a>
<a href="http://www.sohu.com" target="zzl"> >sohu</a>
</div>
<div>
<iframe name="zzl" height="800px" width="900px"></iframe>
</div>
</body>

表格的标签及属性

table属性
Width、height 宽高（单位是像素或百分比）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离）一般情况写0
tr属性：
Align 水平对齐
left/center/ right
valign 垂直对齐
Top（上）/middle（中）/bottom（下）
bgcolor 背景色
td的基本属性
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并合并多列
rowspan 垂直合并合并多行
表头th标签
<th>是特殊的单元格，文字会自动加粗、居中。它的用法是取代<td>的位置即可

注册应用
1.fieldset表单内分组
<fieldset>
<legend>性别</legend> ----分组标签
<input type="radio" name="sex" value="1" />男<br />
<input type="radio" name="sex" value="0" />女<br />
</fieldset>
2.拓展
隐藏域：<input type="hidden" name="money" value="111" />
图像域：<input type="image" src="img/logo.jpg" width="100px" height="30px"/>
上传文件：<input type="file"/>
input重置按钮：<input type="reset" value="重置" />
input提交按钮：<input type="submit" value="提交" />
input普通按钮：<input type="button" value="普通按钮" onclick="alert('hello')"/>
onclick="alert('hello')"按钮的单击事件，这个是弹窗显示hello。
可以用<lable for="id"></lable>标签使输入框和提示标签绑定。
文本域：<textarea cols="30" rows="7"></textarea>
电话号码：<input type="tel" pattern="[0-9]{5}" />
pattern="[0-9]{5}"用于限制 [a-b]限制范围 {a}限制长度
url网址：<input type="url" />
邮箱：<input type="email" />
数字：<input type="number"max="1" />
日期：<input type="date" />
音频：<audio controls>
<source src="kx.mp4" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format. —当浏览器不支持时打印
</audio>
视频：
<video width="320" height="240" controls>
<source src=" " type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。 —当浏览器不支持时打印
</video>