HTML中图片、表格、超链接等的标记

1.图片
图片标记:
图片的路径:
·绝对路径: 提供目标文档的完整主机名称、路径信息及文档全称.
·相对路径: 从当前文档开始的路径.
·如果当前文档和目标文档位置平行,则直接书写目标文档全称.
·如果当前文档和目标文档所在文件夹位置平行,则书写为: 文件夹名称/目标文档全称.
·如果当前文档所在的文件夹和目标文档位置平行,则书写为: …/目标文档全称.
·根相对路径: 从站点根目录开始的路径,以"/"开头.
图片标记属性
属性 属性值 说明
src URL 图片的路径
alt 文本 规定图片的替代文本[图片无法显示时]
title 文本 鼠标悬停时显示的内容
width 像素/百分比 设置图片宽
height 像素/百分比 设置图片高
border 数字 设置图片边框
align left 图片靠左,文字靠右
right 图片靠右,文字靠左
top 文字垂直居上靠
middle 文字垂直居中
bottom 文字垂直居下(默认)
vspace 像素 定义图象顶部和底部的空白(垂直边距)
hspace 像素 定义图象左侧和右侧的空白(水平边距)

2.表格
因为表格中可以包含任何内容,所以在使用DIV+CSS之前,网页设计师是使用表格对网页内容进行排版与布局的.
表格标记基本结构:

定义表格
… 定义表行
… 定义表列(单元格)
… 定义标题栏(文字加粗,居中)
表格属性:
设置表格的背景色
设置表格的背景图片
设置边框的宽度,若不设置此属性,则边框宽度默认为0.
设置表格单元格边框与其内部内容之间空间的大小,默认为2(表格边距)
设置表格单元格之间空间的大小,默认为2(单元格间距)
设置表格边框的颜色
设置表格边框亮部分的颜色(当border的值大于等于1时才有用).
设置表格边框暗部分的颜色(当border的值大于等于1时才有用).
设置表格的对齐方式(left=左,center=居中,right=右).
设置表格的宽度,单位用绝对像素值或总宽度的百分比.

属性名称 属性值 说明
align left 靠左
center 靠中
right 靠右
valign top 靠上
middle 靠中
bottom 靠下
span 数字 直列数
bgcolor 颜色 背景颜色
个别直列设置
功能完全和一样
设置单元格的宽度
设置单元格的高度
设置单元格的背景颜色
设置单元格的背景图片
设置单元格的水平对齐方式
设置单元格的垂直对齐方式
设置行合并的数目
设置列合并的数目
设置在单元格中不换行
表格标签下的边框设置
属性名称 属性值 说明
frame void 不要显示表格的边线
above 只显示出表格的上边线
below 只显示出表格的下边线
hsides 只显示出表格的上下边线
vsides 只显示出表格的左右边线
lhs 只显示出表格的左边线
rhs 只显示出表格的右边线
border/box 显示出表格的所有线
rules rows 只显示出横行的格框线
cols 只显示出直行的格框线
all 显示全部格框线
groups 表示列组合水平部分
none 不显示任何格框线
表格的结构化

… ---- 表头区
… ---- 表体区

… ---- 表尾区

直列化格式(设置列单元格格式)

3.超级链接
一个网站是由多个网页组成的,网页之间都是通过链接实现相互关联的.通过链接实现由当前文档到目标文档的一种跳转.
链接语法: 显示内容
打开链接窗口的形式:
·_blank在新窗口中打开
·_self在自身窗口中打开(默认值)
·_parent在上一级窗口中打开,框架会经常使用
·_top在浏览器的整个窗口中打开,忽略任何框架
链接重要的使用原则,不许是回路,有去有回,优化,加相关链接
链接分类:
站内链接:
站外链接:

·E-mail链接:

·局部链接(锚点链接): 可以跳转到某个页面或其他文档中的指定位置.
·创建锚点:
显示内容
·链接锚点: 显示内容
·空链接: 显示内容
设为首页:
设为首页
添加收藏:
加入收藏夹
·脚本链接:
是一种特殊的链接,当单击设置脚本链接的文本或图像时,可以运行相应的JavaScript.
常用的脚本链接:
网易
关闭窗口: 输入javascript:window.close()
打开窗口: 输入javascript:window.open(‘文件名’)

4.表单
表单的作用是从访问您的web站点的用户那里获得信息.访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息.是客户端与服务器交流信息的途径.
表单标记
form标记用于创建一个表单,定义表单的开始与结束,它是一个容器,用于包含其他表单元素,例如文本框、单选框等,表单元素必须入在form标记内才有作用.

表单元素

属性method的值说明
·POST方法可以传递大量信息
·GET方法将附加到请求该页的URL中,适合传递少量信息(默认方式)
·如果没有设置method属性,默认处理表单数据的方法是GET.
说明:
·所有的表单元素,都必须要放置在表单标签中
·所有的表单元素,以input为例,必须包含type属性与name属性
·有些表单元素的属性是相似的.
·还有一些非input元素作为表单元素.
常用表单元素标记
单行文本框:
<input name=“文本框名称”
type=“text”
value=“初始值”
size=“显示字符数”
maxlength=“最多容纳字符数”
readonly=“readonly”(设置为只读)
disabled=“disabled”(设置为不可用) />
密码框:

单选框:
<input name=“单选框名称”
type=“radio”
value=“提交值”
checked=“checked”(是否被选中) />
复选框:
<input name=“复选框名称”
type=“checkbox”
value=“提交值”
checked=“checked”(是否被选中) />
标签(标记)元素

浏览框
<input name="名称" type="file" size="显示长度" />

按钮:
<input name="按钮名称" type="按钮类型" value="按钮显示文本" />
·按钮类型: submit(提交按钮)
            reset(重置按钮)
            button(普通按钮)
图片按钮:
<input name=""图片按钮名称 type="image" src="图片路径" />

隐藏域:
<input name="名称" type="hidden" value="提交值" />

多行文本框:
<textarea name="多行文本框名称" rows="显示的行数" cols="显示的列数" />

表单外框:
<fieldset>...</fieldset>: 定义围绕表单中元素的边框,用在<form>标签里面
<legend>...</legend>: legend元素为fieldset元素定义标题.
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值