html 详细学习资料==

更新时间：2023-06-07 05:09:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

html推荐度：
相关推荐

一、页面标记

1. HTML结构

<HTML>

<HEAD>

</HEAD>

<BODY>

HTML 文件的正文写在这里... ...

</BODY>

</HTML>

<Head></Head>标记对构成HTML文档的开头部分，头部内容不直接在网页上显示。 Title标记 <Title>设置网页标题，请在此输入标题名</Title> 只要在网页中设置网页标题，就可以在浏览器上显示出来。

Base标记 <Base href=”URL”>设置基底网址：当网页代码运行后，把鼠标放到设置好的链接到设置好的基底网址的链接上时，在状态栏就会显示出基底网址。

Link标记 <Link rev=”RELATIONSHIP” reL=”RELATIONSHIP” href=”URL”> 用 LINK 标记连接外部样式表文件，这种方法适合在同一网站的不同网页重复使用样式，这样就可以通过只修改一个样式表文件而改变整个网站的多个网页的外观。 LINK 标记有三个用来表示如何连接文件的属性， rel属性和type属性表明要连接的外部文件的种类，如果连接的是CSS样式表文件则rel="stylesheet" type="text/css" href属性指定想要连接的外部文件的地址，此处不做详解，我们会在以后的课程中接触样式表的基本用法。

2. 字符集信息

us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,

iso-2022-jp, x-sjis, x-euc-jp,

euc-kr, iso-2022-kr,

gb2312, gb_2312-80,

x-euc-tw, x-cns11643-1, x-cns11643-2, big5

可在 HTML 文件中设置 MIME 字符集信息。

Meta标记定义文件的信息：作者信息、网页过期时间、关键字等

比如：<meta name=”keywords” content=”计算机、英语”>当利用搜索引擎搜索计算机或英语的图书时，输入任何关键字都可以搜索到该网页。

您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。

尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。

否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。

3. 页面色彩

bgcolor --- 背景色彩

text --- 非可链接文字的色彩

link --- 可链接文字的色彩

alink --- 正被点击的可链接文字的色彩

vlink --- 已经点击(访问)过的可链接文字的色彩

#=rrggbb

色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。

16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

背景图象 <body background="image-URL">

Non Scrolling Background <body bgproperties=FIXED>

4. 页面空白(IE only)

页面左边的空白：

页面上方的空白(天头)：

说明：

#=margin amount

网页链接

网页链接的概述：链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接来实现的。

链接的分类：

外部链接、内部链接、邮件链接。

超链接的路径

绝对路径：绝对路径是指完整的描述文件位置的路径

相对路径：所谓相对路径，顾名思义就是自己相对与目标位置 ,它包含了从当前文件指向目的文件的路径。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器的影响。（此处不做祥解）

外部链接

内部链接

有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料。

内部链接就是网页中的书签：<a Name=”书签名称”>书签内容</a>

<a href=”#标签a”>想知道美容方法吗？</a>

演示例子：

邮件链接：邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件。<a Href=”mail to:wangfang224120999@”>王方的邮箱</a>

5. 链接

基本语法 <a href="URL"> ... </a>

代码：

这是一个

<a href="index.html">链接的例子</a>,

点一下带下划线的文字!

跳转到页面的另外一个地方:

代码：

<a href="#jump-test">跳转到下一个"链接点"</a><P>

<a name="jumptest1">下一个链接点</a>

下一个链接点

跳转到另一个页面的某个地方

代码：跳转到另一个页面的<a href="index.html#jumptest">首页某个地方</a>。

目标窗口

开一个新的(浏览器)窗口(Target Window)

语法：<a href="URL" target="Window_Name"> ... </a>

代码：

打开首页!

</a>

标尺线

语法：<hr>

代码：<hr>

效果：

--------------------------------------------------------------------------------

语法：<hr size=#>

代码：<hr size=10>

效果：

--------------------------------------------------------------------------------

语法：<hr width=#>

代码：<hr width=50>

效果：

--------------------------------------------------------------------------------

语法：<hr align=#> #=left, right

代码：<hr width=50% align=left>

效果：

--------------------------------------------------------------------------------

语法：<hr noshade>

代码：<hr noshade>

效果：

--------------------------------------------------------------------------------

语法：<hr color=#>

说明：#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：

名称：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, Green, Purple, Silver, Yellow, Aqua

代码：<hr color="red">

效果：

--------------------------------------------------------------------------------

字体标记

标题字体

<h#> ... </h#> #=1, 2, 3, 4, 5, 6

<h1>今天天气真好！</h1> 今天天气真好！

<h2>今天天气真好！</h2> 今天天气真好！

<h3>今天天气真好！</h3> 今天天气真好！

<h4>今天天气真好！</h4> 今天天气真好！

<h5>今天天气真好！</h5> 今天天气真好！

<h6>今天天气真好！</h6> 今天天气真好！

<hn>---</hn> 这些标记显示黑体字。

<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。

因此在一行中无法使用不同大小的字体。

字体大小

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#

<basefont size=#> #=1, 2, 3, 4, 5, 6, 7

<font size=7>今天天气真好！</font> 今天天气真好！

<font size=6>今天天气真好！</font> 今天天气真好！

<font size=5>今天天气真好！</font> 今天天气真好！

<font size=4>今天天气真好！</font> 今天天气真好！

<font size=3>今天天气真好！</font> 今天天气真好！

<font size=2>今天天气真好！</font> 今天天气真好！

<font size=1>今天天气真好！</font> 今天天气真好！

物理字体

<b>今天天气真好！</b> 今天天气真好！

<i>今天天气真好！</i> 今天天气真好！

<u>今天天气真好！</u>

<tt>今天天气真好！</tt> 今天天气真好！

<sup>今天天气真好！</sup> 今天天气真好！

<sub>今天天气真好！</sub> 今天天气真好！

<s>今天天气真好！</s> <strike>今天天气真好！</strike>

字体颜色

指定颜色 <font color=#> ... </font>

#=rrggbb 16 进制数码，或者是下列预定义色彩：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<font color=ffffff>White</font>

<font color=white>White</font>

客户端字体

#=客户端可获得的字体

<font face="Arial, Helvetica"> Hellow World!</font>

Hellow World!

特殊字符

&#; #=字符实体名称或者 ascii 值

& &

< <

> >

" "

字体布局标记行控制

段(Paragraph) (可以看作是空行) <p>

代码：

你好吗？<p>很好。

效果：

你好吗？

很好。

换行 <br>

代码：

你好吗？<br>很好。

效果：

你好吗？

很好。

不换行<nobr>

代码：

<nobr>

请改变您浏览器窗口的宽度，使之小于这一行的宽度，

</nobr>

文字对齐

<p align=#>...</p> #=left, center, right

代码：

<h3 align=center>Hello<\h3>

<h3 align=right>Hello<\h3>

代码：看看这个标记的作用！

<center>Hello</center>

文字分区显示

代码：

Can you feel happiness without unpleasant? <br>

Please show me your smile.

</div>

效果：

Can you feel happiness without unpleasant?

Please show me your smile.

效果：

Can you feel happiness without unpleasant?

Please show me your smile.

效果：

Can you feel happiness without unpleasant?

Please show me your smile.

列表

无序列表 <ul><li>...</ul>

代码：

<ul>

<li>Today

<li>Tommorow

</ul>

效果：

Today

Tommorow

有序列表 <ol><li>...</ol>

代码：

<ol>

<li>Today

<li>Tommorow

</ol>

效果：

1. Today

2. Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

代码：

<dl>

<dt>Today

<dd>Today is yesterday.

<dt>Tomorrow

<dd>Tomorrow is today.

</dl>

效果：

Today

Today will be yesterday.

Tomorrow

Tomorrow will be today.

定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square

代码：

<ul>

<li type=disc>ONE

<li type=circle>TWO

<li type=square>THREE

</ul>

效果：

ONE

o TWO

THREE

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

代码：

<ol><li type=A>ONE-ONE

效果：

A. ONE-ONE

B. ONE-TWO

代码：

<ol><li type=a>ONE-ONE

效果：

a. ONE-ONE

b. ONE-TWO

代码：

<ol><li type=I>ONE-ONE

效果：

I. ONE-ONE

II. ONE-TWO

代码：

<ol><li type=i>ONE-ONE

效果：

ii. ONE-ONE ONE-TWO

代码：

<ol><li type=1>ONE-ONE

效果：

1. ONE-ONE

2. ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number

<li type=A>ONE-ONE

<li>ONE-TWO

<li>TWO-ONE

<li type=i>TWO-TWO

</ol></ol>

E. ONE-ONE

F. ONE-TWO

10. TWO-ONE

x. TWO-TWO

预定义文本

代码：

<pre>

Please use your card.

VISA Master

<b>Here is an order form.</b>

<ul><li>Fax

</pre>

效果：

Please use your card

VISA Master

Here is an order form.

Fax

Air Mail

代码：

Please use your card.

VISA Master

<b>Here is an order form.</b>

<ul><li>Fax

</listing>

效果：

Please use your card.

VISA Master

Here is order form.

Fax

Air Mail

代码：

<xmp>

Please use your card.

VISA Master

<b>Here is an order form.</b>

<ul><li>Fax

</xmp>

效果：

Please use your card. VISA Master <b>Here is order form.</b> <ul><li>Fax <li>Air Mail</ul>

空白

<spacer type="horizontal" size=#> #=水平空白宽度

<spacer type="vertical" size=#> #=竖直空白高度

YESTERDAY <spacer type="horizontal" size=50> TODAY

<spacer type="vertical" size=50> TOMORROW

YESTERDAY TODAY TOMORROW

#=空白的尺寸

##=top, middle, bottom, left, right

YESTERDAY<br> TODAY<br> TOMORROW

YESTERDAY

TODAY

TOMORROW

多列文本

<multicol cols=#> ... </multicol> #=列的数目

<multicol gutter=#> ... </multicol> #=列间的空白

<multicol width=#> ... </multicol> #=列的宽度

其他

块引用(Blockquote) <blockquote>...</blockquote>

Her Song:

When I was young, I listened to the radio

waiting for my favorite songs....

</blockquote>

图像标记链接图像

<img src=#> #=图象的 URL

#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

<img src="images/01.jpg" alt="雪花 :-)" width="64" height="64"> 图像文字对齐

<img align=#> #=top, middle, bottom

<img src=URL align=top> 雪花!

<img src=URL align=middle> 雪花!

<img src=URL align=bottom> 雪花!

只有一行文字才可以放在图象的两边。图像页面布局

It is always<br>

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha....

My Face!

It is always

smiling.

Hahaha....

It is always

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha....

<img vspace=# hspace=#> #=value

It is always<br>

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha.... 边框

<img border=#> #=value

</a>

图像映射mk:@MSITStore:I:\html资料\html参考手册大全\HTML参考手册.chm::/HTML参考手册/文字布局标记_预定义文本.html

</map>

shape="rect" coords="A,A',B,B'"

(A,A')=Upper Left, (B,B')=Lower Right

shape="circle" coords="A,A',R'"

(A,A')=Center, R=Radius

shape="poly" coords="A,A',B,B',C,C'..."

(A,A'>=First Corner, (B,B')=Second Corner, ...

<img height="200" src="images/02.jpg"

width="300" usemap="#Face" />

<!Text BOTTON>

<area shape="rect"

coords="140,20,280,60"

href="index.html" />

<!Triangle BOTTON>

<area

shape="poly" coords="147,122,227,102,247,162"

href="图像标记.html" />

<!FACE>

<area

shape="circle" coords="79,100,60"

href="文字布局标记.html" />

</map>

本文来源：https://www.bwwdw.com/article/y0i1.html

相关文章：

正在阅读：

html 详细学习资料==06-07

电大护理伦理学期末考试辅导04-30

初中物理力和运动专题复习09-03

2020年度机关意识形态工作总结范文3篇09-07

c语言程序设计习题答案01-13

智慧物流园区信息平台建设规划方案04-09

行车安装拆除方案12-14

小初高学习2018年高考英语一轮复习语法专题非谓语动词2讲含解析03-28

脚手架施工方案(1)09-24

SQ-FSC-01 FSC管理手册-A209-19

上一篇：黄帝煌焖锅加盟品牌招商资料总结下一篇：初中英语总复习50个重点句型检测