HTML中的常用标签及其属性以及XHTML的文档定义

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/article/details/90966179

1、在网页中插入图片

(1)背景图案的设置 格式:<body background="URL"> (2)将图片插入到网页中去 格式:<img src="URL"> 功能:将图片插入到网页中去 ,是单一标签。 <img>下的属性:

属性名称

属性值

说明

src

URL

图片的路径

alt

字符串

给图片做注解

width

像素

绝对设置,宽

width

百分比

相对设置,宽

height

像素

绝对设置,高

height

百分比

相对设置,高

border

数字

图片边框

align

left

图片靠左,文字靠右

align

right

图片靠右,文字靠左

align

top

文字往上靠

align

middle

文字靠中

align

bottom

文字靠下

vspace

像素

图片上下两端与文字的距离

hspace

像素

图片左右两端与文字的距离

(3) 用图片作为超链接 格式:<a href="URL"><img src="URL"></a> 注意:图片作为超链接会在图片四周出现一个边框,解决办法是将<img>的border属性值设置为0。 (4)地图索引 格式:

<map name="图片名称" id="图片名称">
	<area shape="选取区块的形状" coords="坐标" href="URL" alt="文字说明">
</map>
<img src="URL" USEMAP="#图片名称">

说明:<map>:声明整张图使用地图链接方式进行链接,name,id属性指此图的名称,<area>表示我们所要链接的区快,shape表示我们所选择的形状,如:rect表示矩形,circle表示圆,poly表示多边形,coords表示地图的坐标位置。 (5)切片索引 使用Firework进行切片索引,用表格定位切片。 (6)为网站添加图标 <link rel="shortcuticon" href="favicon.ico" type="image/x-icon">

2、超链接

(1)超链接的基本格式 URL格式:scheme://host[:port]/path/filename scheme指的是 http,ftp,file,mailto,news,gopher,telnet七种。 host指的是IP地址或计算机名称;port指的是服务器端口号;path指的是文件路径;filename指的是文件名。 超链接格式:<a href=scheme://host[:port]/path/filename >…</a> (2)超链接的种类 一般常用的分为四种:

  1. http:<a href=http://www.163.com/images/logo.htm>网易 logo</a>
  2. file:<a href=file:///e/images/pic.jpg>图片</a>
  3. ftp:<a href=ftp://192.168.4.21/>进入</a>
  4. mailto:<a href=mailto:bnbbs@163.com>E-MAIL</a>

(3)书签的链接 <a>下的属性:

属性名称

属性值

说明

name

字符串

设置超链接的书签

基本格式: 瞄点:<a name="音乐">…</a>,链接点:<a href="#音乐">…</a> 链接到别的网页的书签项目: 基本格式: 瞄点:<a name="音乐">…</a>,链接点:<a href="index.htm#音乐">…</a> (4)基准参考点 基本格式:

<head>
	<base href="c:\">
</head>

(5)超链接事件 超链接颜色的设置的基本格式:<body link="颜色" alink="颜色" vlink="颜色"> link:超链接尚未被选中的文字,alink:超链接点选但未被放开的颜色,vlink:超链接已被点选过的颜色。 (6)为超链接创建键盘快捷键 accesskey="w" (Windows:Alt+w) (Linux:Ctrl+w) (7)为超链接设置制表符次序 tabindex="n"

3、表单

(1)表单的功能结构 主标记结构:<form>…</form>

属性

说明

name

字符串

表单的名字

method

get/post

表单的传输方式

action

url

传输到的位置

(2)文本栏、密码栏、隐藏栏 文本栏:<input type="text" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly"> 密码栏:<input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly"> 隐藏性栏位:<input type="hidden" name="栏位名称" value="栏位值"> (3)复选栏、单选栏 复选栏:<input type="checkbox" name="栏位名称" value="该选项定值" checked="checked" disabled="disabled"> 单选栏:<input type="radio" name="栏位名称" value="内定值" checked="checked" disabled="disabled"> (4)窗体栏位、区块栏位 窗体选项栏位设置:

<select name="栏位名称" size="数字">
	<option value="选项值" selected="selected">
	<option value="选项值">
	<option value="选项值">
</select> 

分组:<optgroup label="分组名称"></optgroup> 多选:multiple 文字区块的设置:<textarea cols="设置区块列数" rows="设置区块行数">......</textarea> (5)按钮、图像按钮 提交与重置按钮: <input type="submit" value="按钮中显示的文字"> <input type="reset" value="按钮中显示的文字"> 按钮图像: <button name="栏位名称" type="图片类型"> <img src="URL"> </button> 图像按钮:<input type="image" src="url" alt="文本"> (6)上传文件 上传文件框:<input type="file" name="file"> (7)表单加上外框和标题 表单外边框:<fieldset>...</fieldset> 表单标题:<legend>...</legend> (8)表单元件的快捷键和次序 accesskey="w" (Windows:Alt+w)(Linux:Ctrl+w) tabindex="n"

4、多窗框

(1)多窗框的基本结构 格式:

<frameset>
	<frame>
	<frame>
	<frame>
</frameset>

功能:<frameset>用来设置多窗框结构的声明。 <frameset>下的属性:

属性名称

属性值

说明

cols

像素

设置直排的多窗框环境

cols

百分比

设置直排的多窗框环境

rows

像素

设置横排的多窗框环境

rows

百分比

设置横排的多窗框环境

border

像素

边框的宽度

framespacing

像素

页面与页面的边距

属性格式: <frameset cols="120,80,120"> <frameset cols="20%,40%,20%"> <frameset cols="40%,*,*"> <frameset rows="120,80,120"> <frameset rows="20%,40%,20%"> <frameset rows="20%,*,*"> <frame>下的属性:

属性名称

属性值

说明

src

URL

链接的页面

noresize

true

不允许浏览器自行改变框架大小

noresize

false

允许浏览器自行改变框架大小

scrolling

yes

不管网页内容的大小,都出现滚动条

scrolling

no

不管网页内容的大小,都不现滚动条

scrolling

auto

浏览器自动判断,是否需要滚动条

marginheight

像素

设置垂直方向,窗体内容与边界的距离

marginwidth

像素

设置水平方向,窗体内容与边界的距离

frameborder

0/1

不出现框体边线/出现框体边线

属性格式:<frame src="URL"><frame noresize> (2)嵌套多窗体设置 格式:

<frameset rows="20%,80%">
	<frame src="URL">
	<frameset cols="20%,80%">
		<frame src="URL">
		<frame src="URL">
	</frameset>
</frameset>

(3)多框架与超链接 框架式网站的好处就是在同一张页面上可以显示多个页面,而且可以很方便地进行链接。相关属性说明: <frame>的命名属性格式:<frame name="窗体名称"> 超链接格式:<a href="URL" target="窗体名称"> 多窗体链接的属性:

属性名称

属性值

说明

target

_blank

打开一个新建的页面

(4)悬浮窗体的设置 格式:<iframe>...</iframe> 功能:设置悬浮窗框

属性名称

属性值

说明

height

像素/百分比

绝对高度/相对高度

width

像素/百分比

绝对宽度/相对宽度

其他属性除了 noresize 之外,都和 frameset 中的属性用法相同。

5、多媒体

(1)FLASH动画的插入 使用<embed>...</embed>标记插入FLASH动画

属性

说明

src

url

flash路径

width

像素/百分比

flash的宽度

height

像素/百分比

flash的高度

wmode

window

使用flash自身的矩形窗口来播放

wmode

opaque

使flash隐藏于页面上

wmode

transparent

使flash某一部分透明

使用<object>...</object>标记插入FLASH动画

属性

说明

type

application/x-shockwave-flash

flash的类型

data

url

flash的路径

width

像素/百分比

flash的宽度

height

像素/百分比

flash的高度

注意:必须再使用子标签<param>完成 flash的插入

属性

说明

name

属性

flash的属性

value

flash的属性值

(2)MP3音频及WMV视频的插入 使用<embed>...</embed>标记插入FLASH动画:

属性

说明

autostart

true/false

自动播放/非自动播放

loop

数字

音乐循环的次数

该标记之前的写法是:<bgsound src="URL" loop="次数"> 使用<object>...</object>标记插入MP3音乐:

属性

说明

name

src(路径)

音乐路径

autoplay

true/false

是否自动播放

(3)网络流媒体视频的插入 主流视频流:优酷网、土豆网、我乐网。

6、<meta>标记

(1)自动展示网页内容 meta文件头声明格式:<meta http-equiv="refresh" content="time;URL">

  1. http-equiv="refresh":表示网页要重新下载显示 ;
  2. content="time;URL":time表示秒数,URL 网页显示内容。

例:<meta http-equiv="refresh" content="3;url=index.htm"> (2) 如何让别人找到你的网页 <meta>下的属性:

属性名称

属性值

说明

name

author

描述作者资料

name

description

描述网页的内容

name

keywords

关键字,多个可用逗号隔开

name

generator

描述网页是通过哪种软件产生

name

revised

描述网页的版本

name

others

可设置其他网页信息

content

字符串

配合name,http-equive设置

例:

<meta name="author" content="Lily">
<meta name="description" content="这是我的个人网站">
<meta name="keywords" content="音乐,动漫,博客">
<meta name="generator" content="记事本">
<meta name="revised" content="html4.01">
<meta name="others" content="这个我第一个网站,欢迎大家光临!">

7、活动文字:<marquee>…</marquee>

属性名称

属性值

说明

behavior

scroll

从右到左移动

behavior

slide

从右到左停止

behavior

alternate

两边移动

direction

left

向左移动

direction

right

向右移动

direction

up

向上移动

direction

down

向下移动

bgcolor

英文/十六进制

背景颜色

height

像素/百分比

高度

width

像素/百分比

宽度

scrollamount

数字

播放的速度

vspace

像素

左右两侧间距

hspace

像素

上下两侧间距

8、在网页中加入脚本程序

<script type="类型" src="URL">
	alert("欢迎使用JavaScript 脚本");
	varans=prompt("请输入你的性别"); 
	if (ans) { 
		alert("您的性别为:"+ans); 
	} else { 
		alert("您没有输入你的性别!"); 
	}
</script>

9、XML的定义文档

<?xmlversion="1.0" encoding="gb2312"?> 
	<!DOCTYPE 中华人民共和国 [ 
	<!ELEMENT 中华人民共和国公民 (公民*)> 
	<!ELEMENT 公民 (身份证号,姓名,籍贯)> 
	<!ELEMENT 身份证号 (#PCDATA)> 
	<!ELEMENT 姓名 (#PCDATA)> 
	<!ELEMENT 籍贯 (#PCDATA)> 
	]> 

<中华人民共和国> 
	<公民> 
		<身份证号>01085401</身份证号> 
		<姓名>张三</姓名> 
		<籍贯>北京</籍贯> 
	</公民> 
	<公民> 
		<身份证号>01085402</身份证号> 
		<姓名>李四</姓名> 
		<籍贯>上海</籍贯> 
	</公民> 
</中华人民共和国>

10、XHTML文档定义

(1)HTML4.01 的文档定义

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(2)XHTML1.0 的文档定义

<!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">

HTML与XHTML都有三种标准风格: 第一种称为过渡型(transitional),它允许使用废弃的标记。 第二种称为严格型(strict),他禁止使用任何废弃的标记。 第三种是框架型(frameset), 它允许使用废弃的标记和框架。 (3)XHTML1.0 风格标记的改变

  1. 所有单标记都必须关闭:<br/>、<hr/>、<option />等;
  2. 所有的单属性必须等于自身:checked=“checked”、readonly="readonly"等;
  3. 尽可能不使用废弃标记:<center>、<font>等;
  4. 尽可能不使用废弃属性:align、bgcolor。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券