表格
table的特殊渲染方式,把表格的所有内容一次性读取进内存
之后在一次性渲染到页面
某一列变宽,影响每一行的这一列的宽度
某一列变高,影响当前行每一列的高度
表格语法
<table>
<tr> -------table row
<td></td> -----------table data
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性
1.table
border=“1” 设置边框
width=“400” 设置宽度
height=“400” 设置高度
bordercolor=“red” 边框颜色
bgcolor=“pink” 背景颜色
align=“center” 表格本身的水平对齐
cellpadding=“50” 单元格内边(内容到边框的距离)
cellspacing=“30” 单元格外边距(边框到边框之间的距离)
2.tr
align=“right” 当前行文本的水平对齐方式
valign=“bottom” 当前行文本的垂直对齐方式
top/middle/bottom
bgcolor=“gray” 当前行背景色
3.td/th
width=“150” 设置当前列的宽度
height=“150” 设置当前列的高度
align=“left” 设置当前列内容的水平对齐
valign=“top” 设置当前列内容的垂直对齐
bgcolor=“orange” 设置当前列的背景颜色
rowspan 跨行
colspan 跨列
不规则的表格
①跨列
colspan=“n”
从指定单元格位置处开始
横向向右合并n个单元格(n包含自己)
被合并的单元格要删除
②跨行
rowspan=“n”
从指定单元格位置处开始
纵向向下合并n个单元格(n包含自己)
被合并的单元格要删除
表格的可选标记
<th></th> 行/列的标题,替代td
<caption></caption>表格的标题
此标签,必须紧紧挨着table标签
表格复杂应用
<table>
<thead>
<tr></tr>....
</thead>
<tbody>
<tr></tr>....
</tbody>
<tfoot>
<tr></tr>....
</tfoot>
</table>
不做 行分组,浏览器默认添加tbody
表格嵌套
任何的嵌套内容,都要放在td/th中
table的特殊显示方式
table需要全部下载完毕,存入内存
再一次性渲染,渲染效率低
table的尺寸,当内容少,设置的宽大,以设置的为准
当内容多,设置的宽小,以内容为准
列表
1.列表的组成
列表类型+列表项
①列表类型
有序列表 <ol></ol> order list
无序列表 <ul></ul> unorder list
②列表项
<li></li> list item
2.属性
ol type=“I” 列表项的类型 1 a A i I
start="999"指定起始编号位置
ul type=“none” disc 默认值,实心圆
circle 空心圆
square 实心方块
none 去点
3.列表的嵌套
列表的嵌套,被嵌套的内容只能放在li中
<ul>
<li><img></li>
</ul>
4.定义列表
常用于给出一类事物或者对名词的解释说明
<dl>
<dt>名称 </dt>
<dd>名词解释 </dd>
</dl>
结构标记
用于描述整个网页结构,取代div做布局一套标签
使用div做布局,代码可读性非常差
使用结构标记,可以增强代码的可读性
百度搜索,结构标签比div排名高
1.常用的结构标记
<header></header>
定义网页头部,或者某个区域的头部
<footer></footer>
定义网页的脚部,或者某个区域的底部
<nav></nav>
定义网页导航部分
<section></section>
定义网页主体
<aside></aside>
定义侧边栏
<article></article>
定义与文本相关的内容 ex:回帖,评论
表单
1.作用
1.提供可视化的输入控件
2.收集整理用户输入的数据,并提交给服务器
注意:使用ajax,就不使用form标签
form自带收集数据的功能
ajax需要手动收集数据(js–dom操作)
2.表单的组成
前端部分—提供表单控件,与用户交互的可视化控件
后端部分—后台接口对提交的数据进行处理
3.表单
①action=""
定义表单提交时发生的动作(后台接口)
缺省,默认提交给当前页
②method=""
设置请求的提交方法
缺省值:get
http原生提交方法:
get:明文提交
router.get(…,function(req,res){req.query.XXX},
提交的内容会在地址栏显示
向服务器要数据的时候,用get
提交的数据有大小限制 ,上限2kb
post:隐式提交,
router.post(…,function(req,res){req.body.XXX}
提交的内容不会再地址栏显示
给服务器数据的时候用post
提交的数据没有大小限制
delete 删除服务器上数据的方法
put 往服务器上传递数据
option 预请求
③enctype=""
指定表单数据的编码方式
允许将什么样数据传递给服务器
取值:1.缺省默认值
application/x-www-form-urlencoded
允许上传除了文件以外的所有字符
2.text/plain允许提交普通字符(不能有= & 等特殊符号)
3.multipart/form-data 允许提交文件给服务器
4.表单控件
form标签中,能够与用户做数据交互的可视化元素
①分类
input元素 基础9中 h5新input 10种
textarea 多行文本域
select>option 下拉选择框
其它元素
②input的公共属性
type 指定input的类型,不写type,或者单词拼错,默认是text
name 为控件定义名称,提供给服务器端使用.
如果没有name数据提交不了
ajax,input,除了单选和复选框,其它不需要使用name
value 用户输入的数据,传递给服务器的值
例外:所有按钮的value是不提交,
value相当于数组name里元素,必须要有name value才能提交服务器
按钮的value是改变按钮的显示内容
disabled 禁用,只能看不能改,不能提交
无值属性,设置的时候,没有值,写上属性名就生效
5.input元素详解
①文本框和密码框
文本框 type=“text”
密码框 type=“password”
属性 maxlength 指定输入字符的最大长度
readonly 无值属性 只读,只能读不能改,可以提交
placeholder 占位提示符
②按钮
type=“submit” 提交按钮,将表单中的数据收集整理并提交
type=“reset” 重置按钮,让表单恢复到最原始状态
type=“button” 没有功能,配合事件,调用js方法
h5新出的元素登录
代替了submit的功能,可以提交.
value属性,修改显示的文本
③单选框/复选框
单选按钮type=“radio”
多选按钮 type=“checkbox”
属性 name 除了给元素命名以外,还起到分组的作用
value 提交的值,如果不设置value,永远是on
checked 无值属性 默认选中
④隐藏域
数据不想暴露给用户,但是还需要提交,使用隐藏域
type=“hidden”
⑤文件选择框
type=“file”
前提: enctype=“multipart/form-data” 可以传文件
method=“post” 上传大小无限值
属性: multiple 无值属性,选择多个文件
6.textarea多行文本域
<textarea name="txt" cols="5" rows="3"></textarea>
cols=“5”
rows=“3” 根据计算硬件的不同,不准确
7.下拉选择框
select>option
提交的时候
如果option没有value属性,
选中的option的内容,当做select的value被提交
如果option有value属性,
选中的option的value,当做select的value被提交
属性:
select-----name value
size 如果>1 变成滚动选择框
multiple 多选
option—value
selected 无值属性,默认选中
8.其它元素
①label
功能:1.如果form中以后span,可用label代替span
2.关联文本与表单控件
<input id="auto" type="checkbox">
<label for="auto">自动登录</label>
②为控件分组
<fieldset> </fieldset> 为表单控件分组
<legend> </legend> 分组标题
③浮动框架(重点**)
在一个html中,引入其它html页面
<iframe></iframe>
src=“01_form.html” 资源路径
frameborder=“1px” 设置边框 0为无边框
scrolling=“no” 设置滚动条 yes/no
width=“100%” 宽度
height=“600px” 高度
iframe高度自适应的六种方法http://caibaojian.com/iframe-adjust-content-height.html
9.新表单元素,html5新提出的表单元素 10个
①邮箱
<input type="email" name="email">
提交的时候,验证@前后有内容
②搜索类型
<input type="search" name="search">
自带快速清除的按钮
③url验证类型
<input type="url" name="url">
验证输入内容以http:开头
④电话号码
<input type="tel" name="telephone">
移动端使用,弹出虚拟键盘
⑤数字类型
<input type="number" name="num">
max=“20” 最大值
min=“10” 最小值
step=“3” 步长 (上下点一下隔的长度)
⑥范围类型
<input type="range" max="20" min="10" step="3">
max=“20” 最大值
min=“10” 最小值
step=“3” 步长
提供一个范围滑块
⑦颜色类型
<input type="color">
弹出一个取色器
⑧日期类型
<input type="date"> 提供一个日期选择控件
⑨月份类型
<input type="month">
⑩周类型
<input type="week">
