1.表格
1.表格语法
1.标记
1.表格
<table></table>
2.行
<tr></tr>--table row
3.单元格/列
<td></td>--table data
练习:
1.创建一个4行4列的表格
2.在table标记中嵌套tr
3.在tr中嵌套td
2.属性
1.table属性
border:表格边框
width:宽度
height:高度
align:设置表格的水平对齐方式
left/center/right
bgcolor:设置表格的背景颜色
cellpadding:设置单元格的内边距(内容与td之间的间距)
cellspacing:设置单元格外边距(td边框外的间距)
练习:
在练习一的基础上将表格的样式设置如下:
1.设置表格尺寸为400*400px
2.设置背景颜色为orange
3.设置表格水平居中对齐
4.设置内边距为5px
5.设置外边距为10px
2.tr属性
1.align 设置当前行内容的水平对齐方式
left/center/right
2.valign 设置当前行内容的垂直对齐方式
top/middle/bottom
3.bgcolor 设置当前行的背景颜色
练习:在练习二的基础上
1.设置第二行的数据靠右对齐
2.第二行背景颜色为紫色purple
3.设置第三行垂直方向靠上对齐
3.td属性
width:宽度
height:高度
align:水平对齐方式
valign:垂直对齐方式
bgcolor:背景颜色
colspan:跨列
rowspan:跨行
4.表格的复杂应用
1.行分组
可以将连续的几个行,划分到一个组中,并进行统一管理
1.表头行
表格中最上面一行进行分组的话,可以放在表头行中。
<thead></thead>
2.表主体行
表格中将若干行放在tbody中,进行统一管理
<tbody></tbody>
3.表尾行
将表格中最后一行进行分组管理的话,可以放在表尾行中。
<tfoot></tfoot>
2.不规则表格使用
1.跨列
colspan 从指定单元格位置处开始,横向向右合并几个单元格(包含自己),被合并掉的单元格要删除。
2.跨行
rowspan 从指定单元格位置处开始,纵向向下合并几个单元格(包含自己),被合并掉的单元格要删除。
注意:
如果表格进行了分组管理,不能将不同组设置跨行操作。
5.可选标记
1.表格标题
<caption></caption>
如果设置表格标题,则必须将<caption>放于<table>下的第一个子元素位置处。
2.行/列标题
<th></th>所有的td都可以用th取代
6.表格嵌套
表格的嵌套,在td中取嵌套另一个表格
2.列表
1.列表的作用
按照从上到下(从左到右)的方式来显示所有的数据,并且可以在数据前增加显示的标识。
2.列表组成
1.列表都是由"列表类型"和"列表项"来组成。
1.列表类型
有序列表:<ol></ol>--order list
无序列表:<ul></ul>--unorder list
2.列表项
用于展示数据(嵌套在列表类型中)
<li></li>--list item
练习:
创建有序列表,4个列表项,每个列表项中分别写上四大名著的名称
2.列表属性
1.有序列表
1.type 指定列表标识的类型。
取值:
1 数字,默认值
a 小写字母
A 大写字母
I 大写罗马数字
i 小写罗马数字
2.start 指定起始编号从第 几 位置开始排序。
2.无序列表
1.type 指定列表的标识类型
取值:
1.disc 实心圆点
2.circle 空心圆
3.square 实心方块
4.none 不显示标识
3.列表嵌套
在一个列表项(li)中去嵌套另一个列表.
语法:
<ol>
<li>
<ul>
<li>内容</li>
<li>内容</li>
</ul>
</li>
</ol>
3.定义列表
1.什么是定义列表
定义列表常用于给出一类事物或对名词的解释说明。
2.语法
1.<dl></dl> 表示定义列表
2.<dt></dt> 表示定义列表中要解释说明的名词
3.<dd></dd> 表示定义列表中对名词解释的内容
<dl>
<dt>名词</dt>
<dd>解释名词的具体内容</dd>
</dl>
使用场合:图文混排时使用
3.结构标记
1.结构标记的作用
用于描述整个网页的结构(取代div做布局)
提升标记的语义性和可读性。
2.常用的结构标记
1.<header></header>
作用:定义网页或某部分内容的头部。
2.<nav></nav>
作用:定义网页的导航链接部分。
3.<section><section>
作用:定义网页主体内容。
4.<aside></aside>
作用:定义页面中侧边栏的信息,靠近边缘。
5.<footer></footer>
作用:定义网页中偏底部的内容,比如:备案号,解释说明,联系方式等。
6.<article></article>
作用:定义与文字相关的内容,如:论坛帖子,微博条目,用户评论等。
4.表单
1.作用
1.提供可以与用户交互的可视化控件(用户名和密码输入框,登录按钮等)
2.收集用户信息并提交给服务器
2.表单的组成部分
1.前端部分
表单控件,与用户交互的可视化控件
2.服务器端部分
对收集的数据进行提交(提交数据的处理)
3.表单
标记:<form></form>
属性:
1.action
作用:定义表单被提交时发生的动作,通常定义的是服务器上处理程序的地址(url),默认提交给本页
2.method
作用:指定表单数据的提交方式
取值:
1.get(默认值)
1.明文提交,待提交的数据会显示在浏览器的地址栏中。
2.安全性不高
3.提交数据有大小限制,限制2KB
4.向服务器要数据时使用get方式
2.post
1.隐式提交,提交的数据不会显示在地址栏中。
2.安全性较高
3.提交数据无大小限制
4.要传递数据给服务器时使用。
3.delete 一般禁用
4.put 一般禁用
3.enctype
作用:指定表单数据的编码方式,允许将什么样的数据提交给服务器。
取值:
1.application/x-www-form-urlencoded
默认值,允许将任意的字符提交给服务器(文件无法提交)
2.multipart/form-data
允许将文件提交给服务器
3.text/plain
只能将普通文本提交给服务器
4.表单控件
能够与用户进行交互的可视化控件。
1.分类
1.input 元素
2.textarea-多行文本域元素
3.select和option-选项框元素
4.其它元素
2.input元素
1.作用
在页面中提供各种各样的输入控件。如:文本框,密码框,单选按钮,复选框...
2.语法
1.标记<input>或<input/>
2.属性:
1.type 指定创建输入控件的类型
ex:
type="text"
type="password"
2.name 为控件定义名称,服务器端使用(必须值)
3.value 控件的值,服务器端使用
4.disabled 禁用控件,不能操作并且数据也不能提交给服务器。
无值属性,只要出现在标记中,就是禁用。
3.详解
1.文本框和密码框
文本框:<input type="text">
密码框:<input type="password">
属性:
1.maxlength
指定限制输入的字符数
2.readonly
只读,只能看,不能改,但允许被提交。
无值属性,直接将属性放在标记中。
3.placeholder
占位符,即默认显示在控件上的文本。
2.按钮
1.提交按钮
<input type="submit">
功能:将表单中的数据,提交给服务器程序使用
2.重置按钮
<input type="reset">
功能:将表单中的数据恢复到初试化状态。
3.普通按钮
<input type="button">
没有功能
注意:
属性:value 定义按钮上显示的文字。
3.单选按钮和复习框
单选按钮:<input type="radio">
复选框:<input type="checkbox">
属性:
name 除了定义控件的名称之外,还能起到分组的作用。
checked 设置默认被选中,无值属性。