表格
作用:展示数据,不是布局页面
table标签:定义表格
(caption:定义表格标题,自带居中加粗,紧跟在table标签后,每个 table只能规定一个caption)
表格标题tr标签 :定义表格中的行 “table row(表格行)”的缩写
td标签:定义表格中的单元格 “table data(表格数据)”的缩写
th标签:定义表头单元格(居中加粗显示)位于表格的第一行或第一列, table head的缩写
table标签的属性:
align:left, center, right 对齐方式
border:边框
cellpadding:单元格边框与内容的距离
cellspacing:单元格和单元格之间的距离
区分表结构
合并单元格
1.确定跨行,还是跨列
2.确定 目标单元格,跨行:rowspan=“合并单元格个数”
跨列:colspan =“合并单元格个数”
3.删除多余单元格
<table border="1px" width="100px" height="100px" cellspacing="0px">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
列表标签:
无序列表(重点) 块元素
ul是unordered lists的缩写 (无序列表)
li是list item的缩写 (列表项目)
<!--ul标签中只能包含li标签-->
<ul>
<!--li标签可以容纳所有元素,经常包含img和a标签,这里的li是没有前后顺序的-->
<li>111</li>
</ul>
有序列表 块元素
ol是ordered lists的缩写(有序列表)
<!--ol标签中只能包含li标签-->
<ol>
<!--li标签可以容纳所有元素,这里的li标签有前后顺序的-->
<li>222</li>
</ol>
自定义列表(重点)
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写(自定义列表描述)
<!--dl标签里只能包含dt和dd标签-->
<dl>
<!--dt标签:需要被解释的信息-->
<dt>名词</dt>
<!--dd标签:描述和解释dt的信息-->
<dd>名词解释</dd>
</dl>
表单
作用:收集用户信息
表单标签分为三个部分:表单域;表单控件(表单元素);提示信息。
表单域:包含表单元素的区域,提交区域内的表单元素给后台服务器。
<form action="url地址" method="提交方法" name="名字">
method属性:
提交方法常用的有两种:get()方法(参数能在地址栏上看到)
post()方法
表单控件:
1.input输入表单元素
type属性:
<!--输入文本框-->
用户:<input type="text" name="uname" value="请输入用户名">
<!--输入密码框-->
密码:<input type="password" nmae="pasw">
<!--单选框-->
性别:<input type="radio" name="gender" value="nan">男
性别:<input type="radio" name="gender" value="nv">女
<!--要想实现单选框只选一个,需要添加name属性-->
<input type="radio" name="sex">
<!--复选框-->
<input type="checkbox" name="likes" value="apple">苹果
<input type="checkbox" name="likes" value="orange">橙子
<!--提交按钮:把表单元素值提交给服务器-->
<input type="submit">
<!--重置按钮-->
<input type="reset">
<!--普通按钮,与javascript搭配使用-->
<input type="button">
<!--上传文件-->
<input type="file">
<!--隐藏域-->
<input type="hidden">
<!--图片按钮-->
<input type="image" src="图片路径">
其他属性:
name:表单元素名(单选框和复选框要有相同的name值)
value:规定input元素的值,是提交给后台人员的数据。
checked属性:默认选中状态(只用于单选框和复选框)
<input type="radio" name="#" checked="checked">
maxlength:规定输入字符的最大长度
label: 绑定一个表单元素,当点击内的文本时,浏览器会自动将光标选择到对应的表单元素上
方法一:
<input type="radio" name="likes" value="appole" id="app">
<label for="app">苹果</label>
<input type="radio" name="likes" value="orange" id="orange">
<label for="orange">橙子</label>
方法二:
<label for="username">
用户名: <input type="text" id="username">
</label>
注:for属性值与id属性值相同
2.select下拉表单元素
<selection name="">
<option>选项1</option>
<option>选项2</option>
</selection>
如果想要默认选中,在中添加selected=“selected”.
3.textarea文本域元素
文本域:可以输入多行文字,常见于留言板,评论
<textarea name="" cols="一行多少字" rows="有几行">初始文字</textarea>