Web前端——Html常用标签及属性
html
常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性
表格 table
- td 单元格
- tr 表的行
- th 表头
td或th可以下面的两个属性达到跨行或跨列
- 表格跨行
rowspan
- 表格跨列
colspan
例子:
<!--cellspacing 单元格间距 cellpadding单元格边距 -->
<table border="1" cellspacing="0" cellpadding="0">
<tr><th colspan="2">Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
效果:
Header | |
---|---|
Data | Data |
跑马灯 marquee标签
marquee标签 跑马灯效果
- scrolldelay 移动速度
- direction 移动方向 有上下左右 up down left right
- behavior 滚动方式 scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动
- scrollamount 移动速度 每次移动的距离像素
- scrolldelay 滚动延迟 设置滚动的时间间隔,单位是毫秒
代码:
<marquee>
<p>hello world!this is marquee!</p>
</marquee>
效果:
表单 form
代码:
<!-- 文字和输入框居中对齐 -->
<label fro="username">用户名<input id="username" type="text">
效果:
表单元素:
- input 单行输入框,根据不同的 type 属性,可以变化为多种形态
不同type的样式参考链接 - select 下拉选择
- textarea 多行输入框
- button 按钮
常用属性:
- required 该标签内容必须填写
- minlength 输入最短长度
- maxlength 输入最长长度
- readonly 只读,无法点击,可以复制
- disable 禁用,背景色变灰色,无法点击,无法复制
使用了minlength
或maxlength
鼠标悬浮在输入框上面会出现提示
这个最小长度为4,最大长度为6
这个是邮箱输入框
- get: 明文显示,书签收藏,提交数据量有限制
- post: 密文显示,文件上传需求
如果要做文件上传表单数据的编码方式必须是:multipart/form-data
<form method="post" enctype="multipart/form-data">;
//例如:
<form action="servlet/upload" method="post" enctype="multipart/form-data">
<br><br>
文件(file): <input type="file" name="upload">
<br>
<br>
<button type="submit">上传</button>
<br><br>
ajax:异步请求
</form>
框架 frameset
frameset属性:
- rows 分为几行
- rows="20%,80%" rows="20%,*"
- cols 分为几列
frame属性:
- scrolling 滚动条是否显示 no,1(yes)
- src 对应的html页面定义
frame设置name.a标签指定target为该frame的name,就会在该处frame打开新页面