前端学习2——html
表格
创建表格
表格语法
<table>
<tr> <!-- 行标签 -->
<td> <!-- 一个代表一个单元格 -->
单元格内的文字
</td>
...
</tr>
...
</table>
1、table用于定义一个表格标签
2、tr标签用于定义表格中的行,必须嵌套在table标签中
3、td用于定义表格中的单元格,必须嵌套在tr标签中;
4、字母td制表格数据(table data),即数据单元格的内容,
表格属性
属性名 | 含义 | 常用的属性值 |
---|---|---|
border | 设置表格的边框(默认bordr=“0” 无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为 2px) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为 1px) |
width | 设置表格的宽度 | 像素值 |
heigth | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
表头单元格标签th
作用:一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
语法
只需表头标签<th></th>
替代相应的单元格标签<td></td>
表格标题caption
定义和用法:
<table>
<caption>表格标题</caption>
</table>
1、caption定义表格标题,通常这个标题会被居中且显示于表格之上;
2、caption必须紧随table标签之后;
3、这个标签只存在表格才有意义
合并单元格
合并单元格两种方式
1、跨行合并
rowspan = "合并单元格的个数"
2、跨列合并
colspan = "合并单元格的个数"
合并单元格顺序
合并单元格顺序
先上后下
先左后右
合并单元格三部曲
1、先确定是跨行合并还是跨列;
2、根据先上后下、先左后右原则找到目标单元格,然后写上合并方式还有要合并的单元格数量;
3、删除多余的单元格
表格划分结构
1、<Thead></thead>
用于定义表格的头部,用来放标题之类的东西,<Thead>
内部必须拥有<tr>
标签;
2、<tbody></tbody>
用于定义表格的主体,放数据本体;
3、<tfoot></tfoot>
放表格的脚注之类
4、以上标题都是放在table
标签中
列表
列表是用来布局的,相对于表格,组合自由度更高
无序列表ul
无序列表的各个列表项之间没有顺序之分,是并列的
语法:
<ul>
<li>列表项1</li>
...
</ul>
注意:
1、<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的
2、<li>
与</li>
之间相当于一个容器,可以容纳所有元素
3、无序列表会有自己样式属性
有序列表ol
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义。
语法:
<ol>
<li>列表项1</li>
...
</ol>
自定义列表dl
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项没有任何项目符号
语法:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表单
目的:是手搜集用户的信息
input控件
<input type="属性值" value="你好">
1、input是输入
2、<input />
是单标签
3、type属性设置不同的属性值用来指定不同的控件类型
4、除了type属性还有别的属性
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选按钮 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域 |
name | 由用户自定义 | 控件的名称 |
value | 有用户自定义 | input控件中的默认值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
注意: | ||
1、value属性 | ||
value默认的文本值。有些表单想刚打开页面就默认显示几个文字,就可以通过valur设置。 |
用户名:<input type="text" name="username" value="请输入用户名" />
2、name属性
name表单的名字,这样后台就可以通过这个name属性找到这个表单。页面中的表单越多,name主要作用就是用于区别不同的表单。
用户名:<input type="text" name="username" value="请输入用户名">
name属性后面的值,是自己定义的;
radio如果是一组,必须给他们命名相同的name名字,这样就可以选择其中的一个了
<input type = "radio" name="sex"/>男
<input type = "radio" name="sex"/>女
3、checked属性
表示默认选中状态,常见于单选按钮或复选按钮。
性别:<input type="radio" name="sex" checked="checked"/>男 <!-- 默认选中男 -->
<input type="radio" name="sex"/>女<br />
input属性小结
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就选中了 |
label标签
目标:label标签主要目的是提高用户体验
概念:label标签为input元素定义标注(标签)
作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。
绑定元素方法
1、第一种用法用label直接包括input表单(适合单个表单选择)
<label>用户名:<input type="radio" name="username" value="请输入用户名"/></label>
2、第二种用法for属性规定label与哪个表单元素绑定(for和id一起控制)
<label for="sex">男</label>
textarea控件
语法:
<!--cols="每行中的字符数" rows="显示的行数" 实际开发不用 -->
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
作用
通过textarea控件可以轻松地创建多行文本输入
文本框和文本域的区别:
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input=“type” | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
select下拉菜单
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意:
1、<select>
中至少应包含一对<option></option>
2、在option中定义selected="selected"时,当前项即为默认选项
form表单域
作用:收集用户信息传递给服务i
目的:在html中,form标签被用于定义表单域,已实现用户信息收集和传递,form中的所有内容会被提交给服务器
语法:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分一个页面中的多个表单 |
注:每个表单都有自己的表单域,