HTML-表格-列表-结构标记-表单
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 设置默认被选中，无值属性。
最新文章
- SQL报表(Report Builder)里面的几个常见问题（持续更新）
- SVM原理与实践
- eclipse打开文件或者目录位置
- C#遍历得到checkboxlist选中值和设置选中项
- 20135220谈愈敏Linux Book_3
- Java 第三天 Gradle和其它
- Sql建表语句
- PendingIntent详解
- 密码 hdu
- 关于模型的合法性，Entity.IsValid()合理吗？
- Python3 知识库
- Triangle（动态规划）
- C# 字典Dictionary
- 每日英语：Upgrade Your Life: How to speed up your PC (or Mac)
- html头部标签大全
- dev richEditControl控件 设置文字 字体 大小
- idea打包可执行文件
- MVC Linq动态排序
- csharp: read excel using Aspose.Cells
- BZOJ1014: [JSOI2008]火星人prefix(splay 二分 hash)