本人不是大牛,就是刚入门的。最近学习了一些HTML知识,学个博客来记录一下,也许有些错误。希望各位大佬多多指教。
一、表格
1. <table>表格
<table></table>定义表格 ,<tr></tr>表示行,但是必须在table中,<td></td>表示单个单元格(table data),必须在tr中。
一个表格可以有表头,所以<th>xxxxx</th>表示表头。
<table>
<tr>
<th>表头</th>
<td>单个单元格里面的内容</td>
</tr>
</table>
2.表格属性
表格属性
属性 | 值 | 作用 |
align | left、center、right | 表格相对周围元素的对齐方式 |
border | 1 or " " | 是否有边框,“”则表示没有 |
cellpadding | 多少px | 边沿与内容的空白距离,默认1 |
cellspacing | px | 单元格之间的空白,默认2 |
width | 像素值or百分比 | 表格的宽度 |
3.结构标签
<thead></thead>表格的头部,其里面一定要有<tr>标签,位于第一行
<tbody></tbody>表格的主体,用于存放数据
但是上面的这些都得在<table>内。
4.合并单元格
行之间的合并 rowspan = "合并的单元格的个数"
列合并 colspan = "l合并的个数"
注意 : 行——最上侧单元格为目标单元格、 列—— 最左侧为目标单元格
还得删除多余单元格!!
二、列表
1.无序
<ul> 表示无序,<li>表示其列表项 点点点
- 表1
- 表2
- 表3
所以没有先后之分,都是并列的,
<ul>中只能嵌套<li>,直接在ul中输入是错误的。
2.有序
<ol>表示有序,同样也是用<li>定义列表项
- 表1
- 表2
- 表3
同样<ol>中只能嵌套li,直接在ol输入也是错误的
3.自定义列表
<dl></dl>用于自定义列表,该标签与<dt>和<dd>一起用
dt为项目的名字 dd为每一个面项目名字
<dl>只能包含dd dt
dd dt没有个数限制,usually 一个dt对应多个dd
三、表单
1.表单由表单控件,表单域,提示信息组成
2.表单域——包含表元素的区域
<form>定义表单域 其里面的内容会提交给服务器
有常用属性
属性 | 值 | 作用 |
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/input | 设置表单的提交方式 |
name | 名字 | 表单的名称,来区分一个页面的多个表单域 |
3.input——收集用户信息
input标签中包含一个type属性,根据其值的不同,可以有多种形式,按钮、文本、复选框等等
<input type="key" / >
input为单标签
<input type="button"> // 点击按钮
<input type="checkbox"> // 复选框
<input type="file"> // 输入字段和"浏览"按钮,提供文件上传
<input type="hidden"> // 隐藏输入的字段
<input type="image"> // 图像形式的提交按钮
<input type="password"> // 密码字段,输入的字符被掩盖
<input type="radio"> // 单选按钮
<input type="reset"> // 重置按钮,清除已填的表单中的所有数据
<input type="submit"> // 定义提交按钮,把数据给服务器
<input type="text"> // 单行的输入字段,用户在其中输入文本,默认宽度20字符
除了type属性还有其他属性,一些常用的属性
name | 由用户自定义 | 定义input元素的名称 |
value | 自定义 | 规定input元素的值 |
check | checked | 规定input元素首次加载时应当被选中 |
maxlength | 正整数 | 输入字段字符的最大长度 |
name、value时每个表单元素都有的属性值,供后台人员用
name表单元素的名字,要求单选按钮和复选框要有相同的name值