html入门知识点(二)
2017-09-20 14:49
134 查看
1. 表格标签
表格也是一个组标签1.1 表格的基本用法
<table> <tr> <td>单元格的内容</td> <td>单元格的内容</td> </tr> </table>
结构说明:
-
<table></table>表示表格开始结束
-
<tr></tr>表示行,有多少行就有多少对该标签
-
<td></td>表示单元格,写在tr标签中间,一行有多少个单元格就有多少对td标签
-
<th></th>表示标题单元格,在该标签内部的文本会自动加粗居中
1.2 常用属性
属性名 | 功能 |
---|---|
border | 设置边框,单位为像素,取值0-n |
width | 设置宽度,单位为像素,取值固定值和百分比 |
height | 设置高度,一般不设置,由内容来决定 |
background | 设置背景图片,相对路径和绝对路径 |
bgcolor | 设置背景颜色 |
align | 设置表格本身的水平对齐,取值:left(默认),right,center |
cellpadding | 设置单元格中内容到边框的距离,内填充 |
cellspacing | 设置单元格与单元格的距离,外边距 |
1.3 tr标签属性
属性名 | 功能 |
---|---|
align | 设置行内内容的水平对齐 |
valign | 设置行内内容的垂直对齐 取值:top,middle(默认),bottom |
bgcolor | 给行设置背景色 |
height | 给行设置高度 |
1.4 td标签的属性
属性名 | 功能 |
---|---|
align | 设置单元格的水平对齐 |
valign | 设置单元格的垂直对齐 |
bgcolor | 给单元格设置背景色 |
height | 给单元格设置高度 |
width | 给单元格设置宽度 |
rowspan | 跨行合并单元格,取值为合并的单元格个数 |
colspan | 跨列合并单元格,取值为合并的单元格个数 |
1. 一定要明白是跨行还是跨列
2. 要明白在哪个单元格中书写跨行跨列属性
3. 要知道合并的单元格数量
4. 合并后要删除对应的单元格
2.表单
2.1 表单的功能
主要用来收集用户输入的相关数据格式:
<form> <input type="text" /> </form>
2.2 form 标签的属性
action:行为,表单的数据处理,不写时表示由当前页面处理method:方法,表单数据的提交方式
get:没有写method属性时的默认提交方式,提交的数据会显示在地址栏中,显示格式为表单处理程序?name的属性值=用户输入的数据&name的属性值=用户的输入数据等等
post:不显示到地址栏,直接提交给表单处理程序
get方式提交数据量小,不安全;post提交数据量大,相对安全
3. 表单控件
3.1 表单控件标签
单行文本框:<input type="text”name="名称"”value="值" />
单行密码框:
<input type="password”name=”名称”value="值" />
单选按钮:
<input type="radio”name=”名称”value="值"checked="checked"/>
一组单选按钮name值一样时时互斥的,只能选择一个。checkde表示被选中,值为checked。
多选按钮:
<input type=”checkbox”name="名称"value="值" checked=”checked”/>
一组多选按钮name值也是一样的。
提交按钮:
<input type="submit" name="名称"”value="值" />
重置按钮:
<input type="reset”name="名称" value="值" />
普通按钮:
<input type="button”name=”名称”value="值" />
提交按钮:
<button type="submit">内容</button>
重置按钮:
<button type="reset">内容</button>
普通按钮:
<button type="button">内容</button>
图片按钮:
<input type="img”name=”名称”value="值" />
图片按钮具有表单提交的功能,同时会提交鼠标在图片上点击时的坐标值。
文件上传:
<input type="file”name="名称"/>
隐藏域:
<input type="hide”name=”名称”value="值"/>
浏览器不现实隐藏域,一般会获取不需要用户输入的指定数据进行提交
下拉列表:
<select name=”名称”> <option value="值"></option> <option value="值" selected="selected"></option> <option value="值"></option> </select>
selected表示默认选择这个选项,值为selected
多行文本域:
<textarea cols="列数" rows="行数" name="名称">
4. 标签的通用属性
每一个标签都会有的属性title:标题 鼠标悬浮的时候显示的文本信息
class:类名 类名一样的可以视为同一类,一般用于css
id: id的属性值唯一,一般用来单独使用css赋予样式
style: 设置CSS行内样式
相关文章推荐
- 网页编程基础第二章知识点总结——HTML&CSS快速入门
- HTML&CSS 知识点快速入门(一)
- Java Web知识点整理:第一章:Html入门、CSS介绍、Java和JavaScript区别
- HTML入门知识点
- html入门知识点(一)
- 前端入门应该掌握的html+css知识点
- html入门知识点(三)
- HTML入门笔记五之HTML整体知识点
- HTML入门知识点笔记
- JavaScript入门系列之知识点总结
- Oracle数据库入门知识点总结
- Java入门第二季第一章类和对象知识点
- Three.js入门篇之1 - WebGL on HTML
- HTML与CSS入门——第四章 理解层叠样式表
- html 入门
- 黑马程序员---html学习知识点
- Html Agility Pack (HAP) 应用入门
- HTML 5标准学习入门之DOCTYPE
- HTML简单入门
- MyBatis基础入门--知识点总结