HTML2--表格，框架，表单，多媒体，标签动态

来源：互联网发布：linux中grep命令详解编辑：程序博客网时间：2024/06/06 15:38

6.表格标记行某行单元格的背景图片实现不能再html中，只能交给css

table: 表格

属性：border:边框

width:宽度

height：高度

align:表格的对齐方式

cellpadding:单元格内容到边的距离

cellspacing:单元格和单元格之间的距离

bgcolor:背景颜色

background:背景图片优先级比较大

bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色

bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色

dir:单元格内容的排列方式取值：ltr 从左到右， rtl:从右到左公有属性

tr: 行

属性： dir:
bgcolor:

td: 单元格

属性： bgcolor:背景颜色
background:背景图片
align: 内容的横向对齐方式
valign: 内容的纵向对齐方式 top,middle,bottom
width: 绝对值或者相对值(%)
height:单元格的高度

单元格的合并：
单元格的属性：
colspan: 横向合并
rowspan: 纵向合并

th: 相当于<td> + <b> 加粗的附属性质

属性同<td>

caption: 表格的标题

属性：align: 取值：left,center,right,top,bottom

thead

tbody

tfoot

写与不写的区别：
1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。
2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格</title></head><body><table border="1" width="500" height="300" align="center" cellpadding="20" cellspacing="20" bordercolordark="red" bordercolorlight="green" bgcolor="#0033FF" background="../../黑马52期Android/day01_html/上课示例/images/1.jpg" dir="ltr"><caption align="left">学院信息</caption><tbody><tr bgcolor="#00FF00"><td bgcolor="#3399CC">刘德华</td><td background="../../黑马52期Android/day01_html/上课示例/images/2.gif">51</td><td align="center">男</td><td valign="bottom">香港</td></tr><tr><td rowspan="2">成龙</td><td>58</td><td>男</td><td>香港</td></tr></tbody><tfoot><tr><td>35</td><td colspan="2">女北京</td></tr></tfoot><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>地址</th></tr></thead></table></body></html>

7.框架标记及<iframe>

框架页面上不允许有body标签

frameset: 框架的集合

rows: 纵向分部框架.

cols: 横向分部框架.

写法有两种: 1) 绝对值 "200,*" ,*代表剩余的

2) 相对值 "30%,*"

frame: 框架. 一个框架显示一个页面

scrolling: 是否需要滚动条。默认是true

noresize : 固定框架大小

bordercolor: 给框架边框起一个颜色

name : 给框架起一个名字

内嵌框架：嵌入在一个页面上的框架.(仅仅IE支持)

iframe:

属性： width: 宽度

height：高度

scrolling : 是否需要滚动条

框架示例：

框架部分：

<frameset rows="200,*" bordercolor="#33FF66"><frame src="top.html" noresize="noresize" scrolling="" name="top"></frame><frameset cols="200,*"><frame src="left.html" name="left"></frame><frame src="right.html" name="right"></frame></frameset></frameset><noframes></noframes>

top部分：

<body>top</body>

left部分：

<body><a href="../day01.html" target="top">left</a></body>

right部分：

<body>right</body>

内嵌框架示例：

<body>你好<br /><a href="../day01.html" target="a">day01.html</a><br /><a href="../表格.html" target="a">表格.html</a><br /><a href="../超链接.html" target="a">超链接.html</a><br /><iframe src="" width="300" height="300" scrolling="" name="a"></iframe></body>

8.表单标记及语义化

form 用于搜集数据通过name进行分组

action

method="get"

input：

3种文本框：
a、普通文本框 type="text"

属性：
input 输入
name 名字
value 内容
size 唯一单位不是像素的属性，字节的个数，一个中文=一个英文字母=一个字节
readonly 只能读，不能写（鼠标能点进去）
disabled 只能读，不能写（鼠标也不能点进去）

b、密码框 type="password"
c、隐藏框 type="hidden" 提供给程序员用于传送数据的，不是给用户用的

单选框： type="radio"要形成一组，一定要取一样的名字 name是提供给服务器用的。
复选框： type="checkbox" 名字可以不一样，区别是在服务器取数据时所用的，如果名字一样则是数组，不一样则要一个一个去取

按钮：

普通按钮： type="button" value="xx" 按钮上显示的文本xx 与JavaScript一起使用 <input type="button" value="普通按钮" onclick="alert(this.value)" />
提交按钮： type="submit" value="xx" 按钮上显示的文本xx 提交表单中的内容

<form action="day01.html" method="get/post"> 默认是get方式

区别：a、get方式不安全，会在地址栏里面显示信息，post就不会，比较安全（登陆不能用get）
b、get方式不能超过1K，而post没有

重置按钮： type="reset" value="xx" 按钮上显示的文本xx 表单当中的空间回到重置状态
图片按钮： type="image" src=""与提交按钮一样

全局普通按钮： <button onclick="alert('你好')">普通按钮</button>

select:：下拉框如果加入multiple，则可以多选

option 选项内容

textarea：多行文本框

语义化：表单美化

表单示例：

<body><form action="day01.html" method="get"><fieldset><legend>必填信息</legend>姓名:<input type="text" value="请输入内容" size="20" disabled="disabled" /><br />密码:<input type="password" value="请输入内容" size="20" /><br />隐藏框：<input type="hidden" value="请输入内容" size="20" /><br />性别：<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female" checked="checked" />女<br />国籍：<input type="radio" name="country" value="China" checked="checked"/>中国<input type="radio" name="country" value="America" />美国<br /></fieldset><fieldset><legend>选填信息</legend>爱好：<input type="checkbox" name="love" value="eat"/>吃饭<input type="checkbox" name="love" value="sleep"/>睡觉<input type="checkbox" name="love" value="study"/>学习<br />学历：<select name="xueli" multiple="multiple"><option value="小学">小学</option><option value="初中">初中</option><option value="高中">高中</option></select><br /></fieldset>备注：<textarea rows="3" cols="20">大神说说话</textarea><input type="button" value="普通按钮" onclick="alert(this.value)" /><input type="submit" value="提交按钮" /><input type="reset" value="重置按钮" /><input type="image" src="../../黑马52期Android/day01_html/上课示例/images/1.jpg" width="30" height="30" /></form><button onclick="alert('你好')">普通按钮</button></body>

9.多媒体标记

bgsound: 背景音乐

embed: 播放多媒体文件. mp4 wav au后缀名可以播放

marquee: 移动

属性： direction：移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px 目标从右向左

behavior：行为方式取值：slide（只动一次）,alternate（来回）,scroll（循环）

scrollamount : 移动速度像素

loop: 循环多少圈。负值表示无限循环

scrolldelay: 移动一次休息多长时间。单位是毫秒
autostart：是否自动播放（感觉效果）

多媒体标签示例：

<body><!--<bgsound src="../../黑马52期Android/day01_html/上课示例/天仙子.mp3" loop="1" />--><!--<embed src="../../黑马52期Android/day01_html/上课示例/天仙子.mp3" autostart="false">--><marquee>我来啦</marquee><marquee direction="right">我来啦</marquee>    <marquee behavior="alternate" scrollamount="50" loop="3" scrolldelay="1000">我来啦</marquee><marquee behavior="scroll">我来啦</marquee><marquee behavior="slide">我来啦</marquee><marquee direction="down" height="300" width="300" bgcolor="#00FF66">我来啦</marquee><marquee direction="up">我来啦</marquee></body>

10.头标记

a、<html>标签表示一个html

属性：
lang="en" 语言
dir 从哪边到哪边
b、<head>标签给服务器的信息
c、<meta>

<meta http-equiv="refresh" content="3;url=http://www.163.com" /> 6s后刷新到163
d、<title> 页面标题
e、<body>

属性：
bgcolor：背景颜色
backgroud：背景图片
text：文本用什么颜色显示
link：超链接没点击时的颜色
alink：超链接点击了但是没有松开时的颜色
vlink：超链接点击了松开后的颜色
leftmargin：左边距
rightmargin：右边距
f、<label>

给文字加事件

头标签示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--<meta http-equiv="refresh" content="3;url=http://www.163.com" />--><title>头标签</title></head><body bgcolor="#330000" background="../../黑马52期Android/day01_html/上课示例/images/1.jpg" text="#00FF66" link="#9933FF" alink="#330099" vlink="#FF0066" leftmargin="0" topmargin="0">大家好<a href="#">点点点</a><label onclick="alert(this.innerHTML)">林志玲</label></body></html>

html注释规范

1 0