HTML简记

URL（Universal Resource Locators, 统一资源定位器），提供在Web上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，说明了链接所指向的每个文件的类型及其准确位置。
HTTP（Hypermedia Transfer Protocol，超文本传输协议）是一种网络上传输数据的协议，专门用于传输以超文本（Hypertext）或超媒体（Hypermedia）的形式提供的信息。
HTML（Hypertext Markup Language，超文本标记语言）是一种文本类、依靠解释的方式执行的语言。

基本结构

一个HTML文件是由一系列的元素和标签组成的，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置。

HTML标签分为单独标签和成对标签两种：

成对标签的语法格式：

＜元素名称　属性１＝＂值１＂　属性２＝＂值２＂＞元素资料＜／元素名称＞

　　　成对标签仅对包含在其中的文件部分发生作用。

单独标签的语法格式：

＜元素名称　属性１＝＂值１＂　属性２＝＂值２＂＞

作用：在相应的位置插入元素。

（ＰＳ：设置各属性所使用的“＂＂”可省略。）

文件结构：

<html> -- 文件开始标签—— 表示给文件是HTML编写的，位于文件最开始和最后面，该标签不带有任何属性。

<head> -- 文件头 —— 说明文件的标题和整个文件的一些公共属性

<title>文件标题<title> -- 文件标题 —— 显示在浏览器的标题栏中，用以说明文件的用途

</head>

<body> -- 文件体 —— 文件的主体部分

文件正文

</body>

</html> -- 文件结束

HTML文件基本标记

HTML头部标记

在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头元素是以<head>为开始标记，以</head>为结束标记的。一般情况下，CSS和JavaScript都定义在头元素中，而定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息。

表2-1头部标记

标记	描述
<base>	当前文档的URL全称（基底网址）
<basefont>	设定基准的文字字体、字号和颜色
<title>	设定显示在浏览器左上方的标题内容
<isindex>	表明该文档是一个可用于检索的网关脚本，由服务器自动建立
<meta>	有关文档本身的元信息，如用于查询的关键字、获取该文档的有效期等
<style>	设定CSS层叠样式表的内容
<link>	设定外部文件的链接
<script>	设定页面中程序的脚本内容

元信息标记<meta>

设置页面关键字

语法：<meta name=”keyname” content=”具体的关键字”>

设置页面描述

语法：<meta name=”description” content=”对页面的描述语言”>

设置编辑工具

语法：<meta name=”generator” content=”编辑软件的名称”>

设定作者信息

语法：<meta name=”author” content=”作者的姓名”>

限制搜索方式

限制搜索引擎对页面的搜索方式；

语法：<meta name=”robots” content=”搜索方式”>

语法解释：

表2-2 content值与其对应的含义

content 的值	描述
All	表示能搜索当前网页及其链接的网页
Index	表示能搜索当前网页
Nofollow	表示不能搜索当前网页链接的网页
Noindex	表示不能搜索当前网页
None	表示不能搜索当前网页及其链接的网页

设置网页文字及语言

语法：

第一种方法：<meta http-equiv=“Content-Type”content=”text/html;charset=字符集类型”>

第二种方法：<meta http-equiv=”Content-Language”conten=”语言”>

语法解释：

在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，而在content中才设置具体的属性值。在charset中设置网页的内码语系，也就是字符集的类型，charset往往设置为gb2312，即简体中文。英文是ISO-8859-1字符集。如果采用第二种方法，则简体中文的设置为：

设置网页的定时跳转

语法：<meta http-equiv=”refresh” content=”跳转时间;url=链接地址”>

语法解释：

refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号隔开。默认情况下，跳转时间是以秒为单位的。

设定有效期限

语法：<meta http-equiv=”expires” content=”到期的时间”>

语法解释：

到期的时间必须是GMT时间格式，即星期，日月年时分秒，这些时间都是用英文和数字进行设定。

例：<meta http-equiv=”expires” content=”Wed,14 september 2011 16:20:00 GMT”>

禁止从缓存中调用-(用户可以随时查看到最新的网页内容)

语法：

删除过期的cookie

如果网页过期，则删除存盘的cookie。Cookie是由Internet站点创建的、将信息存储在计算机上的文件，如访问站点时的首选项。

语法：<meta http-equiv=”set-cookie” content=”到期的时间”>

到期的时间 GMT时间格式

强制打开新窗口

强制网页在当前窗口中以独立的页面显示，可以防止自己的网页被别人当做一个frame页调用。

语法：<meta http-equiv=”windows-target” content=”-top”>

语法解释：windows-target表示新网页的打开方式，而content中设置-top则代表打开的是一个独立页面。

设置网页的过渡效果

语法：<meta http-equiv=”过渡事件” content=”revealtrans(duration=过渡效果持续时间,transition=过渡方式”>

语法解释：

过渡事件可以是进入页面活或者离开页面。进入页面的http-equiv值为page-enter，离开页面的http-equiv值为page-exist。过渡效果的持续时间默认以秒为单位，过渡方式为编号。

（ps：貌似不支持）

基底网址标记<base>

HTML页面通过基底网址能够把当前HTML页面中所有的相对URL转换成绝对URL。一般情况下，通过基底网址标记<base>设置HTML页面的绝对路径，那么在页面中的链接地址只需设置成相对地址即可。当在浏览器浏览页面时，会通过<base>标记将相对地址附在基底网址后面，从而转化成绝对地址。

因此，在HTML置基底标记时不应该多于一个，而且要将其放置在头部以及任何包含URL语句前。

语法：<base href=”链接地址get=”新窗口的打开方式”>

语法解释：

链接地址就是要设置的页面的基底地址，而新窗口的打开方式可以设置为不同的效果。

表 2-3 链接窗口的打开方式

属性值	打开方式
_parent	在上一级窗口中打开，一般常用在分帧的框架页中
_blank	在新窗口打开
_self	在同一个窗口打开，可以省略
_top	在浏览器的整个窗口打开，忽略任何框架

页面主体标记<body>

表2-4 <body>元素的属性

属性	描述
text	设定页面文字的颜色
bgcolor	设定页面背景的颜色
background	设定页面的背景图片
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动
link	设定页面默认的链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问过后的链接颜色
topmargin	设定页面的上边距
leftmargin	设定页面的左边距

设定文字颜色——text

语法：<body text=”颜色代码”>

背景颜色属性——bgcolor

语法：<body bgcolor=”颜色代码”>

背景图像属性——background

语法：<body background=”文件链接地址” bgproperties=”背景图片固定属性”>

bgproperties 可省略，设置为fixed时，那么当滚动页面时，背景图像也会移动，想对于浏览者来说，总停留在相同的位置上。

背景图片默认重复覆盖整个页面，设置背景图片不重复一般需要用CSS：

body{background-repeat:no-repeat;

background-size:100%;

}

</style>

设置链接文字属性——link

在默认情况下，浏览器以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。

语法：<body link=”颜色代码”>

设置边距—margin

语法：<body topmargin=”上边距的值” leftmargin=”左边距的值”>

默认情况下，边距的值都是以像素为单位的。

设计网页文本内容

标题文字标记<h>

标题文字标记<h>

语法：

1级标题：<h1>…</h1>

2级标题：<h2>…</h2>

3级标题：<h3>…</h3>

一次下去，到6级标题。

语法解释：1级标题使用最大的字号表示，6级标题使用的是最小的字号。

标题文字的对齐方式——align

默认情况下，标题文字是左对齐的。

语法：<align=”对齐方式”>

设置文字格式

文字格式标记<font>

设置文字字体——face

语法：<font face=”字体1，字体2，…”>应用了该字体的文字</font>

语法解释：face 属性的值可以是多个，默认使用第一种字体进行显示，如果第一种字体不存在，则使用第二种字体显示，如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。（尽量不适用特殊字体，宋体、黑体多用）

设置字号——size

语法：<font size=”文字字号”></font>

语法解释：字号是指字体的大小，其大小只是相对于默认字体而言，默认文字的大小与3号字相同。文字的字号可以设置为1~7、+1~+7或-1~-7，数值越大，文字越大。

设置文字颜色——color

语法：<font color=”颜色代码”></font>

粗体、斜体、下划线——strong、em、u

语法：

粗体：<strong>粗体的文字</strong>

<b>粗体的文字</b>

斜体字：<em>斜体字</em>

下划线：<u>带下划线的文字</u>

上标与下标——sup、sub

语法：上标标记：<sup>…</sup>

下标标记：<sub>…</sub>

语法解释：数学公式常用。

设置删除线——strike

语法：<strike>文字</strike>或<s>文字</s>

等宽标记——code

语法：<code>文字</code> 或 <samp>文字</samp>

语法解释：等宽文字标记常用于设置英文效果。

空格——

语法： 

语法解释：在HTML中，空格不会累加，只算一个，HTML实体空格会累加。

表3-1 常用的空格占位符

	空格占位符
	不换行空格	占据宽度受字体影响明显而强烈
&ensp;	半角空格	1/2个中文宽度，而且基本上不受字体影响
&emsp;	全角空格	1个中文宽度，而且基本上不受字体影响
	窄空格	em的六分之一宽

其他特殊符号

一般情况下，特殊符号代码由前缀“&”、字符名称和后缀“;”组成。

表3-2 特殊符号的表示

符号	符号代码	说明
"	"	引号
<	<	左尖括号
>	>	右尖括号
×	×	乘号
§	§	小节符号
©	©	版权所有符号
®	®	已注册的符号
™	™	商标符号

设置段落格式

段落标记——p

语法：<p>段落文字</p>

语法解释：既可以使用成对的<p>标记来包含段落，也可以使用单独的<p>标记来划分段落。

取消文字换行标记——nobr

语法：<nobr>文字</nobr>

换行标记——br

语法：<br/>

保留原始排版方式标记——pre

语法：<pre>…</pre>

居中对齐标记——center

语法：<center>…</center>

向右缩进标记——blockquote

语法：<blockquote>文字</blockquote>

水平线标记

添加水平线——hr

语法：<hr>

语法解释：默认情况下，插入的水平线是100%的宽度，1像素的高度。

设置水平线的宽度和高度——width、height

语法：<hr width=”水平线的高度” height=”水平线的高度”>

语法解释：宽度值可以是像素值，也可以是窗口宽度值的百分比。高度值只能够是像素值。如果只设置一个参数，另一个会采用默认值。

设置水平线的颜色——color

语法：<hr color=”颜色代码”>

设置水平线的对齐方式——align

语法：<hr align=”对齐方式”>

去掉水平线阴影——noshade

语法：<hr noshade=”noshade”>

其他文字标记

1、文字标注标记——ruby

语法：<ruby>

被说明的文字

<rt>文字的标注</rt>

</ruby>

语法解释：被说明的文字就是需要添加标注的那段文字，而文字的标注则是真正的说明文字。

2、声明变量标记——var

为了统一突出变量，常设置为斜体。

语法：<var>变量</var>

3、忽视HTML标记——plaintext、xmp

语法：<plaintext>或<xmp>

语法解释：忽视HTML标记主要是用来使HTML标记失去作用，而直接显示在页面中。

使用列表

表4-1 列表的主要标记

标记	描述	标记	描述
<ul>	无序列表	<menu>	菜单列表
<ol>	有序列表	<dt>、<dd>	定义列表的标记
<dir>	目录列表	<li>	列表项目的标记
<dl>	定义列表

无序列表

1、无序列表标记——ul

语法：<ul>

…

</ul>

语法解释：使用<ul>…<ul>标记表示这一个无序列表的开始和结束，而<li>则表示这是一个列表项的开始。

2、无序列表的符号类型——type

语法：<ul type=”符号类型”>

…

</ul>

语法解释：type属性决定了列表项开始的符号。

表4-2 无序列表的符号类型

类型值	列表项目的符号
disc	●
circle	○
square	¢

有序列表

1、有序列表标记——ol

语法：<ol>

…

</ol>

语法解释：<ol>和</ol>标记着有序列表的开始和结束，而<li>标记这是一个列表项的开始。默认情况下，采用数字序号进行排列。

2、有序列表的属性——type

语法：<ol type=”序号类型”>

…

</ol>

表4-3 有序列表的序号类型

type取值	列表项目的序号类型
1	数字1,2,3,4…
a	小写英文字母a,b,c,d…
A	大写英文字母A,B,C,D…
i	小写罗马数字i,ii,iii,iv…
I	大写罗马字母I,II,III,IV…

有序列表的起始数值——start

语法：<ol start=”起始数值”>

…

</ol>

语法解释：不论列表编号的类型是数字、英文字母还是罗马数字，起始数值只能是数字。

定义列表——dl

语法：<dl>
<dt>名词1</dt>解释1

<dt>名词2</dt>解释2

…

</dl>

语法解释：<dl>和</dl>分别定义了定义列表的开始和结束，<dt>后面就是解释的名称，而在<dd>后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进。

菜单列表——menu

菜单列表主要用于设计单列的菜单列表，在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。

语法：

<menu>

…

</menu>

语法解释：<menu>和</menu>标志着菜单列表的开始和结束。

目录列表——dir（HTML5不支持）

目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容。

语法：

<dir>

…

</dir>

超链接

超链接的建立

超链接的链接根据其链接对象不同而有所变化，但都是基于<a>标记的。

1、基本语法：

链接元素可以是文字、图片或者其他页面元素。

2、建立文本超链接

语法：<a href=”链接地址”>链接文字</a>

语法解释：链接地址可以是绝对地址，也可以是相对地址。

3、设置超链接的目标窗口

在创建网页的过程中，有时并不希望超链接的目标窗口将原来的窗口覆盖，如在打开新的窗口时，主页面的窗口仍保留在原处。这是可以通过target参数设置目标窗口的属性。

语法：<a href=”链接地址” target=”目标窗口的打开方式”>链接元素</a>

表5-1 target参数的取值和说明

target值	目标窗口的打开方式
_parent	在上一级窗口打开，常在分帧的框架页面中使用
_blank	新建一个窗口打开
_self	在同一窗口打开，与默认设置相同
_top	在浏览器的整个窗口打开，将会忽略所有的框架结构

书签链接

用途：网页内容较多，拖拽滚动条很不方便，浏览者可以通过点击目录上的项目就能自动跳转到网页相应的位置上进行阅读。

建立书签链接的步骤：一是建立书签，二是为书签制作链接。

1、建立书签

语法：<a name=”书签名称”>文字</a>

语法解释：书签名称就是对于后面要跳转所创建的书签，而文字则是设置链接后跳转的位置。

2、书签链接

语法：同一页面 <a href=”#书签名称”>链接的文字</a>

不同页面 <a href=”链接的文件地址#书签的名称”>链接的文字</a>

外部链接

所谓外部链接，是指跳转到当前网站外部，与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。

表5-2 绝对地址的设置格式及含义

格式	含义
http://	采用WWW服务进入万维网站点
ftp://	通过FTP访问文件传输服务器
telnet://	启动Telnet
mailto://	直接启动邮件系统E-mail

1、通过HTTP协议

网页中最常使用HTTP协议进行外部链接的是设置友情链接。

语法：<a href=”http://...”>链接文字</a>

2、通过FTP协议

语法：<a href=”ftp://...”>文字链接</a>

3、发送E-mailàmailto标签

在网站醒目位置写上自己的邮箱地址，浏览者点击时，就能自动打开计算机系统中默认的电子邮件客户端软件。

语法：<a href=”mailto:电子邮件地址”>链接文字</a>

语法解释：电子邮件后还可以增加一些参数。

表5-3 mailto标签的参数

参数	含义	语法
CC	抄送收件人	<a href=”mailto:电子邮件地址？CC=电子邮件地址”>链接文字</a>
Subject	电子邮件主题	<a href=”mailto:电子邮件地址？Subject=主题文字”>链接文字</a>
BCC	暗送收件人	<a href=”mailto:电子邮件地址？BCC=电子邮件地址”>链接文字</a>
Body	电子邮件内容	<a href=”mailto:电子邮件地址？Body=邮件内容”>链接文字</a>

4、下载文件

语法：<a href=”文件所在地址”>链接文字</a>

语法解释：在文件所在地址中设置文件的路径，可以是相对路径，也可以是绝对路径。

其他链接

1、脚本链接

脚本来实现HTML语言实现不了的功能，以JavaScript为例，

语法：<a href=”javascript:…”>文字链接</a>

例：<a href="javascript:window.close()">关闭窗口</a>

2、空链接

所谓空链接是指指向链接后，鼠标会变成手形，但单击链接后，仍停留在当前页面。在代码中，可以通过#号实现空链接。

语法：<a href=”#”>文字链接</a>

使用图像

图像

GIF格式：无压缩损失，适合商标、新闻式的标题或其他小于256色的图像。

JPEG格式：有压缩损失，超过256色的图像格式。

PNG格式：无压缩损失，非破坏性，支持48-bit色彩，交错显示，跨平台图像亮度控制，更多层的透明度设置。

插入—>img标签

语法：<img src=”图像文件的地址”>à相对路径/绝对路径

设置图像属性

1、图像高度——height

语法：<img src=”图像文件的地址” height=”图像的高度”>

语法解释：默认情况下，改变高度的同时，其宽度也会等比例进行调整；图像高度单位是像素。

2、图像宽度——width

语法：<img src=”图像文件的地址” width=”图像的宽度”>

语法解释：默认情况下，改变宽度的同时，其高度也会等比例进行调整；图像宽度单位是像素。

3、图像边框——border

在默认情况下，页面中插入的图像是没有边框的，可以通过border属性为图像添加边框。

语法：<img src=”图像文件的地址” border=”图像边框的宽度”>

4、图像的水平间距——hspace

作用：调整文字与图像之间的水平间距。

语法：<img src=”图像文件的地址” hspace=”水平间距”>

5、图像的垂直间距——vspace

作用：调整文字与图像之间的垂直间距。

语法：<img src=”图像文件的地址” vspace=”垂直间距”>

6、图像相对于文字基准线的对齐方式——align

相对文字对齐方式是指图像与一行文字的相对位置。

语法: <img src=”图像文件的地址” align=” 相对文字对齐方式”>

语法解释：align的取值如表6-1。

表6-1 图像相对文字的对齐方式

align取值	对齐方式
top	把图像的顶部和同行的最高部分对齐（可能是文本的顶部，也可能是图像的顶部）
middle	把图像的中部和同行的中部对齐（通常是文本行的基线，并不是实际的行的中部）
bottom	把图像的底部和同行文本的底部对齐
texttop	把图像的顶部和同行中最高的文本顶部对齐
absmiddle	把图像的中部和同行中最大项的中部对齐
baseline	把图像的底部和文本的基线对齐
absbottom	把图像的底部和同行中最低项的底部对齐
left	使图像和左边界对齐（文本环绕图像）
right	使图像和右边界对齐（文本环绕图像）

7、图像的提示文字——alt

语法: <img src=”图像文件的地址” alt=”提示文字的内容”>

如果图片由于下载或者路径的问题无法显示，也可以在图片的位置显示定义的说明提示文字。

图像的超链接

1、设置图像的超链接

语法：<a href=”链接地址” target=”目标窗口打开方式”><img src=”图像文件的地址” ></a>

2、设置图像热区链接

将图像划分成不同的区域进行链接设置。

语法：

首先需要在图像文件中设置映射图像（即包含热区的图像）名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称，

然后需要定义热区图像以及热区的链接属性，

...

</map>

表格的应用

创建表格

1、表格的基本构成

表7-1 表格标记
标记	描述
<table>…</table>	表格标记
<tr>…</tr>	行标记
<td>…</td>	单元格标记

2、表格的标题——caption

语法：<caption>表格的标题</caption>

3、表格的表头——th

一般位于表格第一行，用来说明该列的内容类型。

th中内容加粗显示。

设置表格基本属性

1、表格宽度高度对齐方式

语法：<table width=”表格宽度” height=”表格高度” align=”对齐方式”>

语法解释：表格宽度和高度值都可以设置为具体的像素值或者百分比数。

2、设置表格的边框的宽度、颜色

语法：<table border=”边框宽度” bordercolor=”边框颜色”>

语法解释：边框宽度单位为像素。

3、设置表格内框的宽度，表格内文字与边框的间距

表格内框宽度是指表格内部各个单元格之间的宽度。

默认情况下，表格内的文字会紧贴着表格的边框，使用cellpadding参数调整距离。

语法：<table cellspacing=”内框宽度” cellpadding=”文字与边框的距离”>

设置表格的背景

1、表格背景的颜色——bgcolor

语法：<table bgcolor=”颜色代码”>

2、表格的背景图像——background

语法：<table background=”背景图像的地址”>

设置表格的行属性

<tr>----height(高度)、bordercolor(行的边框颜色)、bgcolor(行的背景颜色)、align(行文字的水平对齐方式 left right center)、valign(行文字的垂直对齐方式 top bootom)。

<caption>----align(表格标题的垂直对齐方式)

调整单元格属性

<td>----width、height、align、valign、bgcolor、bordercolor、background.

1、单元格的水平跨度——colspan

单元格占据多少列。

语法：<td colspan=”跨的列数”>

2、单元格的垂直跨度——rowspan

单元格占据多少行。

语法：<td rowspan=”跨的列数”>

3、单元格的亮边框——bordercolorlight

单元格的亮边框就是单元格边框向光的部分。

语法：<td bordercolorlight=”颜色代码”>

4、单元格的暗边框——bordercolordark

单元格的亮边框就是单元格边框背光的部分。

语法：<td bordercolordark=”颜色代码”>

（ps：谷歌火狐不支持 IE 支持）

表格的结构

1、表格的表头标记——thead

语法：<thead bgcolor=”颜色代码” align=”水平对齐方式” valign=”垂直对齐方式”>…</thead>

语法解释：align:left、center、right；

valign:top、middle、bottom;

一个表元素中只能有一个<thead>标记。

2、表格的表主体标记——tbody

与表头样式的标记功能类似，表主体样式用来统一设计表主体部分的样式。

语法：<tbody bgcolor=”颜色代码” align=”水平对齐方式” valign=”垂直对齐方式”>…</tbody>

语法解释：align:left、center、right；

valign:top、middle、bottom;

一个表元素中只能有一个<tbody>标记。

3、表格的表尾标记——tfoot

定义表尾样式。

语法：<tfoot bgcolor=”颜色代码” align=”水平对齐方式” valign=”垂直对齐方式”>…</tfoot>

语法解释：align:left、center、right；

valign:top、middle、bottom;

一个表元素中只能有一个<tfoot>标记。

层标记——div

层属于网页中的块级元素，层元素中可以包含所有其他的HTML代码。层提供了一种分块控制网页内容的方法。层中的内容与网页其他元素内容不同之处是，各层之间可以彼此叠加，各层在Z坐标（垂直于页面的方向上）的次序可以改变。

层的分类：

在Dreamweaver中，层有两类，即CSS层和Netscape层。

CSS层：使用div和span标签定位页面内容。
Netscape层：使用layer和ilayer标签定义页面内容。

定义数据块：

创建层的首要工作是定义认为是同一层的数据块。定义数据块的方法是通过使用<div>标签，在<div>标签定义数据块时，会通过浏览器进行转换。

<div>标签的属性

div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。div中包含元素的特性由<div>标签的属性来控制，或者是通过样式表（Style Sheet）格式化这个块来进行控制的。[杨4]

语法：<div id=”value” align=”value” class=”value” style=”value”>

…

</div>

表8-1 <div>标签的属性
属性	说明
accesskey	设置或检索对象的快捷键
align	设置或检索对象相对于显示或表格的排列方式
atomicselection	指定元素及其内容是否可以以不可见形式统一选择
begin	设置或检索时间线在该元素上播放前的延迟时间
class	设置或检索对象的类
contenteditable	设置或检索表明用户是否可编辑对象内容的字符串
datafld	设置或检索由datasrc属性指定的绑定到指定对象的给定数据源的字段
dataformatas	设置或检索如何渲染提供给对象的数据
datasrc	设置或检索用于数据绑定的数据源
dir	设置或检索对象的阅读顺序
disabled	设置或检索控件的状态
end	设置或检索表明元素结束时间的值，或者元素设置为重复的简单持续终止时间
hidefocus	设置或检索表明对象是否显示表明焦点的值
id	检索标记对象的字符串
lang	设置或检索要使用的语言
language	设置或检索当前脚本编写用的语言
nowrap	设置或检索浏览器是否自动执行换行
style	为该元素设置内嵌样式
syncmaster	设置或检索时间容器是否必须在此元素上同步回放
systembitrate	检索系统中大约可用带宽的bps（比特率）
systemcaption	表明是否要显示文本来代替演示的音频部分
systemlanguage	表明是否在用户计算机上的选项设置中选中了给定语言
systemoverduborsubtitle	指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕
tabindex	设置或检索定义对象的tab顺序的索引
timecontainer	设置或检索与元素关联的时间线类型
title	设置或检索对象的咨询信息（工具提示）
unselectable	指定该元素不可被选中

1、align属性 ——改变<div>标签的水平对齐方式

2、id属性——用于定义一个元素独特的样式，即设置标签的标记（名字）。

3、class属性——用于指定元素属于何种样式的类，即设置标签的类。

class属性与id属性的区别：

id属性是先找到结构和内容，再给它定义样式。id属性通常用于定义页面和是哪个一个仅出现一次的标签。
class属性是先定义好一种样式，再套给多个结构和内容。class属性用于根据用户定义的标准对一个或多个元素进行定义。
在一个结构文档中，可以多处使用同一个class名，而id名必须是唯一的。
在实际应用中，class可能对文字的排版等比较有用，而id则对宏观布局和设计放置各种元素比较有用。

4、style属性——用于设置对象的内嵌样式。

div标签style属性的常用参数说明
参数值	说明
overflow	溢出控制：visible（默认、可见）、auto（自动）、scroll（显示滚动条）
width	宽度：数值
height	高度：数值
color	字体颜色：色彩代码
font-size	字体大小：数值
line-height	行高：数值
border	边框：宽度、类型和颜色，其中，类型主要支持none、dotted、dashed、solid、double、groove、ridge、inset、window-inset、outset
font-weight	字体粗细：normal、bold、bloder、lighter
font-family	字体类型：Arial、Tahoma、Verdana、仿宋_GB2312等
background	背景颜色：色彩代码
scrollbar-base-color	滚动条各部分的颜色：色彩代码
Filter:chroma	Chroma过滤器：色彩代码，该颜色将对象转换成透明效果
word-break	断字：normal(默认、正常断字)、keep-all(严格不断字)、brea-all(严格断字)
direction	文字方向：ltr(默认、从左向右)、rtl(从右向左)
position	设置定位方式，取值absolute、relative
display	设置元素的浮动特征

1）position属性

style属性最常用的功能之一就是进行<div>标签的定位，其对应的属性为position属性。

语法：position : static | absolute | relative

static:无特殊定位，对象遵循HTML定位规则。

absolute：将对象从文档流中拖出，使用left、right、top、bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

relative：对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

position属性的参数说明
left	相对于窗口左边的位置，单位为像素（pixels）
top	相对于窗口上边的位置，单位为像素（pixels）
width	<div>标签的宽度。所有在<div>标签里的文字或HTML元素都包含在里面。
height	<div>标签的高度。该属性很少用，除非想要对层进行分割
clip	给出层的可见部分。该属性能够使得<div>标签显示为一个定义的很准确的方块区域，其参数为rect(top,right,bottom,left)
visibility	隐藏或显示<div>标签中的元素，其值为visible、hidden和inherit
z-index	<div>标签的立体位置，值越大，<div>标签的位置越高
background-color	<div>标签的背景颜色
layer- background-color	Netscape的<div>标签的背景颜色
background-image	<div>标签的背景图像
layer- background- image	Netscape的<div>标签的背景图像

2）display属性

用于设置元素的浮动特征

display属性可以用来设置或检索对象是否显示以及如何显示。

display属性的参数说明
参数值	描述
block	默认值。用该值为对象之后添加新行
none	隐藏对象。与visibility属性的hidden值不同，它不为被隐藏的对象保留其物理空间
inline	内联对象的默认值。用该值将从对象中删除行
compact	分配对象为块对象或基于内容之上的内联对象
marker	指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用
inline-table	将表格显示为无前后换行的内联对象或内联容器
list-item	将块对象指定为列表项目。并可以添加可选项目标志
run-in	分配对象为块对象或基于内容之上的内联对象
table	将对象作为块元素级的表格显示
table-caption	将对象作为表格标题显示
table-cell	将对象作为表格单元格显示
table-column	将对象作为表格列显示
table-column-group	将对象作为表格列组显示
table-header-group	将对象作为表格标题组显示
table-footergroup	将对象作为表格脚注组显示
table-row	将对象作为表格行显示
table-row-group	将对象作为表格行组显示

3）display 属性和 visibility 属性的对比

visibility 属性被设置为隐藏时，元素虽然被隐藏了，但它仍然占据它原来所在的位置。（当元素被隐藏后，就不能再接收其他事件了。）
visibility 属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

<span>标签与<div>标签

相同之处：HTML中组合用的标签，可以作为插入CSS这类风格的容器，或插入class.id等语法内容的容器。
不同之处：

div是一个块级元素，分块结束处，系统自动换行，span是行内元素，span前后不会换行，它没有结构意义，纯粹是应用样式。
div标签一般用来做布局，span标签一般用来做文字效果，尤其是标题和链接的效果。
块元素和行元素不是一成不变的，只要给块元素定义display:inline，块元素便成为内嵌元素；同样，给内嵌元素定义display:block后，内嵌元素便成为块元素。

<iframe>标签 –只适用于IE

语法：<iframe>…<iframe>

语法：<iframe src=”文件” height=”数值” width=”数值” name=”框架名称” scrolling=”值” frameborder=”值”></iframe>

<iframe>标签的属性说明
属性	说明
align	用于对齐包含在<iframe>标签中的数据，并且可以取left、right、center以及justify值。因支持使用CSS对齐元素而过时
class	一个以逗号分隔的样式类别表，这些样式类将标签实例化为已定义的类的一个实例。
frameborder	取0或者1值以判断是否应该在帧四周画一个框
height	指定<iframe>的高度
id	通常由样式单来定义应该被应用于标签中的数据的样式类型
logndesc	到一个标签内容的一个较长描述的链接
marginhergh	帧的内容与边框的上、下边之间的像素数
marginwidth	帧的内容与边框的左、右边之间的像素数
name	用于给快命名。它可以有JavaScript用来对层进行操作
noresize	禁止用户重新调整帧的大小
scrolling	取auto、yes或no的值为判断滚动条是否显示
src	指定包含<iframe>的内容的URL
style	允许在标签内指定一个样式定义，而不是在一个样式表内指定
title	允许为标签提供一个比<iframe>标签更有信息量的标题，它应用于整个文档
width	指定<iframe>的宽度

1、浮动框架的文件路径属性 src

语法：<iframe src=”file_name”>

file_name：指明浮动框架文件的文件名或者其他超链接的网址。

2、浮动框架的名称属性 name

语法：<iframe src=”file_name” name=”frame_name”>

frame_name：定义的浮动框架名称。

3、浮动框架的对齐属性 align

语法：<iframe src=”file_name” align=”left/right/center”>

4、浮动框架的宽度和高度属性 width、height

语法：<iframe src=”file_name” width=”value” height=”value”>

5、浮动框架滚动条显示属性 scrolling

语法：<iframe src=”file_name” scrolling=”value”>

value：值为yes代表显示滚动条，值为no代表不显示滚动条，值为auto代表根据窗口内容决定是否显示滚动条。

6、浮动框架边框属性 frameborder

语法：<iframe src=”file_name” frameborder=”value”>

value：值为yes代表显示框架边框，值为no代表隐藏框架边框。

7、浮动框架边缘的宽度和高度属性 marginwidth、marginheight

语法：<iframe src=”file_name” marginwidth =”value” marginheight=”value”>

marginwidth：设定浮动框架左右边缘距离边框的宽度。

marginheight：设定浮动框架上下边缘距离边框的高度

<layer>标签和<ilayer>标签

在Navigator中定义层。<layer>标签和<ilayer>标签允许在一个页面上精确地定位一个层，<layer>标签和<ilayer>标签可以出现在文档的流程的任何地方。

作用：用来重叠显示Web内容的各个实体。

语法：<layer>…</layer>

<layer>标签和<ilayer>标签中有一系列属性。

<layer>标签和<ilayer>标签的属性说明
above	在文档中的所有层的z-order中较高的Layer对象（如果层是最顶的，为null）
background	用作层的背景图的URL
below	在文档中的所有层的z-order中较低的Layer对象（如果层是最低的，为null）
bgcolor	层的背景色
clip	定义剪切长方形。这个长方形是层的可见区域，区域之外的任何东西都被人为地从视野中剪掉
height	以像素为单位的层的高度
left	以像素为单位的层相对于它的父层的区域的x轴的位置
name	层的名字
src	层的内容来源的URL
top	以像素为单位的层相对于它的父层的区域的y轴的位置
visibility	定义层的可见性属性。show显示层，hide隐藏层，inherit继承它的父层的可见性
width	以像素为单位的层的宽度
z-index	层相对于它的兄弟元素和父元素的相对z-order

编辑表单

使用表单标签——form

表单用于获取不同类型的用户输入。

处理动作——action

真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或者脚本的一个完整的URL。

语法：<form action=”表单的处理程序”>…</form>

语法解释：表单的处理程序兴义的是表单要提交的地址。可以是绝对、相对地址或者其他地址（如邮箱等。）

表单名称、传送方法——name、method

语法：<form name=”表单名称” method=”传送方式”>…</form>

语法解释：表单的method属性用来定义处理程序从表单获得信息的方式，它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择：get、post。

使用get时，表单数据会被视为CGI或ASP的参数发送，也就是来访者输入的数据会附加在URL之后，由用户端发送到服务器，所以速度比post块，但缺点是数据长度不能太长；使用post时，表单数据是与URL分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比get慢。默认值为get。

编码方式——enctype

语法: <form entype=”编码方式”>…</form>

语法解释：entype属性用来设置表单信息提交的编码方式。

编码方式的取值
entype的值	含义
text/plain	以纯文本的形式传送
Application/x-www-form-urlencoded	默认的编码方式
multipart/form-data	MIME编码，上传文件的表单必须选择该项

目标显示方式——tartget

Target 属性用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息，如是否提交了表单的内容、是否出错等。

语法：<form target=” 目标窗口的打开方式”>…</form>

语法解释：目标窗口的打开方式包含4个取值：_blank、_parent、_self和_top。_blank是指将返回的信息显示在新打开的窗口中；_parent是指将返回信息显示在父级的浏览器窗口中；_self则表示将返回信息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览器窗口中。

添加控件

填写方式分类：输入类（input）和菜单列表类（select）；

表现形式分类：文本类、选项按钮和菜单。

输入类控件中，input是最常用的控件标签。

其基本语法：<form><input name=”控件名称” type=”控件类型”/></form>

输入类控件的type取值
type取值	含义
text	文字字段
password	密码域，用户在页面输入时不显示具体的内容，都以“*”代替
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图形域，也称为图像提交按钮
hidden	隐藏域，其并不显示在页面上，只将内容传递到服务器中
file	文件域
data	获取时间
color	获取颜色值

文字字段——text

语法：<input type=”text” name=”控件名称” size=”控件的长度” maxlength=”最长字符数” value=”文字字段的默认取值”>

text文字字段的参数表
name	文字字段的名称，用于和页面中其他控件加以区别，命名时不能包含特殊字符，也不能以HTML预留作为名称
size	定义文本框页面中显示的长度，以字符作为单位
maxlength	定义在文本框中最多可以输入的字符数
value	定义文本框中的默认值

密码域、单选按钮、复选框——password、radio、checkbox

语法：<input type=”password” name=”控件名称” size=”控件的长度” maxlength=”最长字符数” value=”文字字段的默认取值”/>

语法解释：checked参数表示默认情况下已经被选中。

单选按钮中的name属性用于将选项放置在一个组中，实现单选。

普通按钮、提交按钮、重置按钮——button、submit、reset

语法：<input type=”button” name=”按钮名” value=”按钮的取值” οnclick=”处理程序”/>

语法解释：处理程序是window.close()、window.open()等。

图像域、隐藏域、文件域——image、hidden、file

语法:

语法解释：

表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示，当用户提交表单时，隐藏域的内容会一起提交给处理程序。

列表/菜单标记（下拉菜单）

列表和菜单都是通过<select><option>标记来实现的。

语法：

<option value=”” selected=”selected”>选项显示内容</option>

<option value=”” >选项显示内容</option>

</select>

列表和菜单标记属性
菜单和列表标记属性	描述
name	菜单和列表的名称
size	显示的选项数目
multiple	列表中的项目能否多选
value	选项值
selected	默认选项被选中

滚动文字标签、背景颜色属性——marquee、bgcolor

语法：<marquee bgcolor=”颜色代码”>滚动文字</marquee>

滚动方向属性、滚动方式属性、滚动速度属性——direction、behavior、scrollamount

默认情况下是从右向左滚动。

语法：<marquee direction=”滚动方向” behavior=”滚动方式” scrollamount=”滚动速度” >滚动文字</marquee>

语法解释：

direction ：up(文字向上)、down(文字向下)、left(文字向左，默认)、right(文字向右)

behavior ：scroll(循环滚动，默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)

scrollamount ：以像素为单位。

滚动延迟属性、滚动循环属性——scrolldelay、loop

语法：<marquee scrolldelay=”时间间隔” loop=”循环次数” >滚动文字</marquee>

语法解释：

scrolldelay 设置滚动文字滚动的时间间隔，单位是毫秒；

loop属性设置滚动次数，默认无限循环。

滚动范围属性、空间属性——width、height、hspace、vspace

语法：<marquee width=”100px” height=”20px” hspace=”水平范围” vspace=”垂直范围”>滚动文字</marquee>

语法解释：

如果不设置滚动北京的面积，默认情况下，水平滚动的文字背景与文字同高，与浏览器窗口同宽；在滚动文字周围，可以设置空白空间。

添加背景音乐

设置背景音乐、循环播放次数——bgsound（#废除）、loop

语法：<bgsound src=”背景音乐的地址”loop=”循环次数”/>

语法解释：如果希望无限次循环播放，将loop的值设置为true、-1。

语法：<audio src=" 背景音乐的地址" controls="controls">您的浏览器不支持</audio>

添加多媒体文件

使用<embed>标记可以将多媒体文件嵌入到网页中，无须客户端安装相应的播放软件。

多媒体文件标记、自动运行、循环播放——embed、autostart、loop

语法：<embed src=" 多媒体文件的地址" width="播放界面的宽度" height="播放界面的高度" loop=" true/false " autostart="true/false"></embed>

隐藏面板——hidden

语法：<embed src=" 多媒体文件的地址" hidden=“是否隐藏面板”></embed>

hidden : true false

Lionel Yee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML简记

web基础学习阅读（推荐）目录HTML基础概念基本结构HTML文件基本标记HTML头部标记元信息标记基底网址标记页面主体标记设计网页文本内容标题文字标记设置文字格式设置段落格式水平线标记其他文字标记使用列表无序列表有序列表定义列表——dl菜单列表——menu目录列表——dir（HTML5不支...
复制链接

扫一扫