html iframe如何设置高度和宽度
一、iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
二、有以下方式对iframe进行设置高度和宽度
1、iframe元素标签可以使用width和height属性,
<iframe src ="/index.html" width="400" height="300"></iframe>
2、可以使用css来定义宽度和高度
<iframe src ="/index.html" style="width:400px;height:300px"></iframe>
三、补充:
iframe的属性如下:
解释一下:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
参数leftmargin=20 表示与浏览器左部距离为20
参数topmargin=30 表示与浏览器顶部距离为30
参数marginwidth=100 表示与左右边边界为100
参数marginheight=50 表示与上下边边界为50
在DW中,可以在菜单上的修改>页面属性里设置这些参数
群体2318126
htlm的常用标签有哪些,还有。。。
是不是想学习网页设计?
常用标记并不太多。
HTML语言是网页制作中最基础的代码,博客日志许多都支持HTML标记,能熟悉HTML标记对博客和个人网站的美化会有很大的帮助。
<html> </html>标志着html文件的开始与结束
<head> </head>头部标志符
<title> </title>网页的标题
<boby> </boby>构成web的主体
1.background 定义网页的背景图案
2.bgcolor 背景色(默认 白)
3.text 文字颜色(默认 黑)
4.link 超链接颜色(默认 蓝)
5.alink 当前被选中的超链接颜色(默认 红)
6.vlink 已被访问过的超链接颜色(默认 紫)
<font> </font>标志符可以控制字符的样式
1.face 设置文字的字体效果
2.color 设置文字颜色
3.size 设置字体大小
<b></b> 粗体 <strike></strike>删除线
<big></big>大字体 <sub></sub>下标
<i></i>斜体 <sup></sup>上标
<s></s>删除线 <u></u>下划线
<small></small>小字体
<hn></hn>设置文件中的标题 nj 1~6的数字
<p></p>(paragraph)划分段落
<pre></pre>预格式化标志符
<hr> 换行并绘制一条水平线(没有结束标志符)
1.width 水平线长度
2.size 水平线粗细
3.noshade 无阴影
4.align 水平线的对齐方式(left center right)
5.color 水平线颜色
<br> 强制换行(没有结束标志符)
<ol>
<li>......</li>
<li>......</li>
.......
</ol> 设置有序列表 li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....
(两个属性:type start)
<ul>
<li>......</li>
<li>......</li>
......
</ul> 无序列表 (一个属性:type disc实心圆 circle空心圆 square方框)
<a></a>实现超链接
1.href 定义超链接所指向的文档的URL
2.target 目标窗口
3.name 锚名称 (该属性一般在创建页面内超链接时使用)
<a href="/URL"> </a>使用a标志符创建超链接时,可以使用相对路径(同一网站内的文件),也可以使用绝对路径(指向本站点以外的文件)
<a name="锚点名称"> </a>
.....
<a href="#锚点名称"> </a> 创建网面内超链接逻辑上分为两步,首先定义锚点,然后再创建指向锚点的超链接
<a href="mailto:电子邮箱地址"> </a>指向电子邮箱的超链接>
<img> 插入图像
1.src 设置被引用的图像文件所在的位置
2.alt 设置图像的简单文字说明
3.width,height 设置图像的宽度与高度
4.align 对齐方式(left,right,top,bottom,middle)
5.border 边框宽度
6.hspace ,vspace 定义了图像与周围元素的水平和垂直间距
<map name="图像映射名称">
<area>
<area>
......
</map>
<img src="/"umap="#图像映射名称"> <map></map>定义了图像映射的区域
img通过umap可以确定与所建立的图像映射区域的关系
area定义图像不同区域与不同文档之间建立链接
1.shape 形状(rect矩形 circle圆 poly多边形)
2.coords 坐标
3.target 目标窗口
4.alt 替换文字
<table>
<caption> </caption>
<tr>
<th> </th><th> </th>......
</tr>
<tr>
<td> </td><td> </td>......
</tr>
<tr>
<td> </td><td> </td>
</tr>
......
</table> table标记符定义表格 caption定义表格标题 tr标记符定义表格的行 th,td标志符定义表格的单元格 th定义表头单元格
table可以创建一个新的表格
1.width(宽),height(高)
2.border(边框)
3.bgcolor(背景颜色)
4.align(对齐方式left right center)
5.cellpadding(填充距)
6.cellspacing(单元格间距)
7.rules(分隔线 none无分隔线 groups在行列之间有 rows只有行分隔线 cols只有列 all所有)
8.frame(边框 void无边框 above只显示顶部边框 below只显示底部边框 hsides只显示顶,底部边框 vsides只显示左右边框 lhs显示左边框 rhs显示右 box显示所有)
<tr> </tr>表行
1.align 对齐方式(left center right)
2.valign 垂直对齐方式 (top middle bottom baline)
3.bgcolor 背景颜色
<td></td>表格数据
1.width,height
2.align(left right center)
3.valign(top middle bottom)
4.bgcolor
5.rowspan 单元表的行数
6.colspan 单元表的列数
<framet>
<frame>
<frame>
......
<frame>
</framet> framet是将窗口分割成若干个子窗口,子窗口数取决于frame的个数
<frame> 标记符来标识子窗口(无结果符)
1.name
2.src(源) 设置框架内容的URL
3.frameborder(框架边框)
4.marginwidth (框架的左右边距)
5.marginheight(框架的上下边距)
6.scrolling(是否显示滚动条 auto自动 yes显示 no不显示)
7.noresize(不允许调整框架的尺寸)
<a herf="目标文件"target="目标框架名">超链接内容</a>
1._top 表示将超链接的目标文件装入整个浏览器窗口
2._lf 表示将超链接的目标文件装入当前框架,以取代该框架中正在显示的文件
3._blank 表示将超链接的目标文件装入一个新的浏览窗口
4._parent 表示将超链接的目标文件装入当前框架的父框架
<iframe></iframe>定义了一个页面内的框架
1.src(源) 设置框架内容的URL
2.name
3.width,height
4.align (top middle bottom)
5.frameborder(框架边框)
6.marginwidth(框架左右边框),marginheight(框架上下边框)
7.scrolling(是否显示滚动条 auto yes no)
<form></form>表单
1.method(方法) 定义表单的提交方式
2.action(动作) 指定表单所对应的处理程序
<input> 定义了一个用于用户输入的表单元素(无结束标记符)
1.name 标识表单元素
2.type 指定表单元素的类型(text文本 password密码 checkbox复选框 radio单选框 submit提交按钮 ret重置按钮)
<input type="text">将type指定为text,在浏览器中显示一个文本输入框,供用户输入信息
1.value (初始值)
2.size (尺寸)
3.maxlength(输入文本的最大字符数)
<input type="password">密码文本框
例:<form>
密码:<input type="password"name="password"size="10"maxlength="15">
</form>
<input type="checkbox">复选框
例:<from>
<p>你的爱好:</P>
<input type="checkbox"name="favorite1"value="music"checked>音乐
<input type="checkbox"name="favorite2"value="sports">体育
<input type="checkbox"name="favorite3"value="other">其它
</form>
<input type="radio">单选框
例:<form>
<p>公司的人数:</p>
<p><input type="radio"name="number">少于10人</p>
<p><input type="radio"name="number"checked>10人至100人</p>
<p><input type="radio"name="number">100人以上</p>
</form>
<input type="submit">提交按钮
<form>
<input type="submit"value="提交">
</form>
<input type="ret">重置按钮
<input type="image">图像提交按钮
<input type="file">
<input type="buttom">
<input type="hidden">
<textarea> </textarea>定义一个用于用户多行输入的表单元素
1.name 指定文本域的名称
2.rows 指定文本域的高度
3.cols 指定文本域的宽度
<lect>
<option></option>
<option></option>
......
<option></option>
</lect> 定义了一个选项列表表单元素
1.name 指定选取项列表的名称
2.size 指定列表选项显示时一次显示选项的数目
3.multiple使用该属性可以允许多重选择
4.value 指定当该选项被选中并提交后,浏览器传给服务器的数据
5.lected 指定哪一个选项在默认状态下是选中状态
<label></label>选中该控件
<marquee></marquee>创建一些滚动字幕
1.direction(方向 left right up down)
2.behavior (行为 scroll绕圈滚动 slide只滚一次 alternate来回滚动)
3.loop (循环)
4.scrollamount(滚动的速度)
5.scrolldelay(滚动延时)
6.align(对齐方式 top middle bottom)
7.bgcolor
8.height,width
9.hspace,vspace(垂直和水平间距)
<applet>
<param>
<param>
......
</applet> applet用来在网页中插入一个Java小应用程序对象
1.code(源代码) 指定Java小应用程序的源代码文件(.class文件)
2.name
3.width,height
4.align
param用来定义Java小应用程序中的参数
1.name
2.value(值)给变量赋值
3.valuetype(值类型 data表示value指定的值将作为一个字符串传递的对象
ref表示value指定的值是一个URL
object表示value指定的值是一个指向同一文档中一个object的标志符)
4.type(类型)当valuetype属性的值设置为ref时,此属性指定了URL所代表资源的内容类型
<object>
<param>
<param>
......
</object> object可以定义很多种不同的多媒体文件
1.classid:该属性指定了浏览器中用来播放相应多媒体对象的控件ID
2.codeba:定义多媒体文件相对位置的根目录
3.codetype:指定当下载由classid所指定的对象时使用的数据内容的类型
4.data:定义多媒体文件的位置
5.type:定义多媒体文件的类型
6.width,height
lector{property1:value1;property2:value2......}lector表示需要应用式样的对象
property表示由css标准定义的样式属性
value表示样式赂性的值
例:h2{text-align:center;font-family:楷体_gb2312}
lector.classname{property1:value1;......} 标记符类
.classname{property:value;......} 通用类
#IDname{property:value;......}用户定义ID
虚类
a:link或:link 当超链接末被访问过时,超链接的显示方式
a:visited或:visited 当超链接已经被访问过时,超链接的显示方式
a:active或:active当超链接当前为选中姿态时,超链接的显示方式
a:hover或:hover 当鼠标指针悬停在超链接上时,超链接的显示方式
例: a:link{color:blue}
长度单位
1.em:它所代表的长度是当前字体中m字母的宽度
2.ex:它所代表的长度是当前字体中x字母的高度
3.px:像素,它是相对于计算机屏幕的分辨率来定义的
in:英寸,1in=2.54cm 1cm=10mm
pt:点,1点=1/72in pc:帕 1帕=12点
font-family(字体族)
font-family:字体名称 | 字体族名称
例: p{font-family:黑体,宋体,rif}
font-style(字体风格)
font-style:字体风格名称
例: p{font-style:oblique}
font-size(字体大小)
font-size:绝对大小 | 相对大小 | 百分比
font-variant(字体变形)
font-varient:字体变形值
1.normal(普通)
2.small-caps(小型大写字母)
font-weight(字体加粗)
font-weight:字体加粗值
1.normal(普通)
2.bold(加粗)
3.bolder(更粗)
4.lighter(更细)
letter-spacing(字符间距)
letter-spacing:数值
text-decoration(文字修饰)
text-decoration:文字修饰效果
1.none 无
2.underline 下划线
3.overline 上划线
4.line-through 删除线
5.bink 闪烁
text-transform(文本转换)
text-transform:文本转换方式
1.none 无
2.capitalize 使所有单词的第一个字母大写
3.upperca 使所有单词字母都大写
4.lowerca 使所有单词字母都小写
text-align(文本对齐方式)
text-align:对齐方式
1.left
2.right
3.justify 可调整
text-indent(文本缩放)
text-indent:缩放的数值
line-height(行高)
line-height:数值
margin(页边距)
margin:数值
padding(填充距)
padding:数值
例: table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距为3cm,下填充距5cm
border-style(边框样式)
border-style:边框样式
1.none
2.dotted 点线
3.dashed 虚线
4.solid 实线
5.double
6.groove 凹线
7.ridge 凸线
8.int 内陷
9.outt 外凸
border-color(边框颜色)
border-color: 颜色值
border-width(边框宽度)
border-width:数值
1.thin 细
2.medium 中
3.thick 宽
border(边框)
border:边框样式|边框宽度|边框颜色
例: h1{border:5px solid red}
float(浮动)
float:参数
1.none
2.left
3.right
颜色代码多数是"#ffffff"这种格式的,找到后改改试试看。
再想要更详细的内容,加我QQ,给你发电子书看看吧。
QQ:30638057
请解释一下:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
参数leftmargin=20 表示与浏览器左部距离为20
参数topmargin=30 表示与浏览器顶部距离为30
参数marginwidth=100 表示与左右边边界为100
参数marginheight=50 表示与上下边边界为50
在DW中,可以在菜单上的修改>页面属性里设置这些参数
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
leftMargin=0 表示与浏览器左部距离为0
topMargin=0 表示与浏览器顶部距离为0
marginheight="0" 表示带有0 像素顶部和底部空白边距
marginwidth="0" 表示带有 0 像素左侧和右侧空白边距
Css为什么有了margin-top后width会变
这是因为加了margin-top后,这个div已经超出窗体范围了,所以窗体出现了纵向滚动条,而div的width是100%,所以要减去滚动条的宽度才是div的实际width,这样width就从1370px变为1353px了