HTML基础复习(下)

二十一、HTML 背景

背景(Backgrounds)
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

1.背景颜色(Bgcolor)
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

2.背景(Background)
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。

提示:如果你打算使用背景图片,你需要紧记一下几点:

(1)背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
(2)背景图像是否与页面中的其他图象搭配良好。
(3)背景图像是否与页面中的文字颜色搭配良好。
(4)图像在页面中平铺后,看上去还可以吗?
(5)对文字的注意力被背景图像喧宾夺主了吗?

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

二十二、HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

1.script标签
<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

(1)type属性 必须
必需的 type 属性规定脚本的 MIME 类型。
type 属性标识 <script></script> 标签之间的内容。
MIME 类型由两部分组成:媒介类型和子类型。

其中一些值:
text/javascript
text/ecmascript
application/ecmascript
application/javascript
text/vbscript

(2)async 属性
规定一旦脚本可用,则会异步执行。

<script async="async">

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释:有多种执行外部脚本的方法:
1° 如果 async=“async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
2° 如果不使用 async 且 defer=“defer”:脚本将在页面完成解析时执行
3° 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

(3)charset 属性
规定在外部脚本文件中使用的字符编码。
如果外部文件中的字符编码与主文件中的编码方式不同,就要用到 charset 属性。

常用的字符集有:
UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码 默认

(4)defer 属性
规定是否对脚本执行进行延迟,直到页面加载为止。
只有 Internet Explorer 支持 defer 属性。

(5) language 属性
用来指定 <script> 标签中的脚本的类型。

language = "JavaScript"

(6)src属性
链接一个外部脚本文件:

<script type="text/javascript" src="myscripts.js"></script>

(7)xml:space属性
规定是否保留代码中的空白。

2.<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容。

二十三、HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到:
●网页
●图像
●样式表
●JavaScript

1.绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL。

2.相对路径
相对路径指向了相对于当前页面的文件。
(1)文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:

<img src="/images/picture.jpg" alt="flower">

./  当前目录

(2)文件路径指向了位于当前文件夹中 images 文件夹里的一个文件:

<img src="images/picture.jpg" alt="flower">

(3)文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件:

<img src="../images/picture.jpg" alt="flower">

../  父级目录

二十四、HTML 头部元素

1.head 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。

属性:profile
profile 属性提供了与当前文档相关联的配置文件的 URL。
配置文件的格式以及浏览器使用它们的方式都还没有进行定义,这个属性主要是为将来的开发而保留的占位符。

2.title 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够:
●定义浏览器工具栏中的标题
●提供页面被添加到收藏夹时显示的标题
●显示在搜索引擎结果中的页面标题

一些属性:
dir:rtl、ltr规定元素中内容的文本方向。
lang:language_code 规定元素中内容的语言代码。
xml:lang :language_code 规定 XHTML 文档中元素内容的语言代码。

3.base 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标(target)。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

必须属性:href:url
可选属性:target: _blank、_parent、_self、_top、framename

点击此处,查看例子

4.link 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

link的属性:
(1)charset属性 HTML5 中不支持。

(2)href属性

(3)hreflang 属性 几乎不支持
规定被链接文档中文本的语言。

(4)media 属性
规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。

描述
screen计算机屏幕(默认)。
tty电传打字机以及类似的使用等宽字符网格的媒介。
tv电视机类型设备(低分辨率、有限的滚屏能力)。
projection放映机。
handheld手持设备(小屏幕、有限带宽)。
print打印预览模式/打印页面。
braille盲人点字法反馈设备。
aural语音合成器。
all适用于所有设备。

所有浏览器都支持值为 “screen”、“print” 以及 “all” 的 media 属性。

(5)rel 属性
规定当前文档与被链接文档之间的关系。

描述
alternate文档的替代版本(比如打印页、翻译或镜像)。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的上一个文档。
contents文档的目录。
index文档的索引。
glossary在文档中使用的词汇的术语表(解释)。
copyright包含版权信息的文档。
chapter文档的章。
section文档的节。
subsection文档的小节。
appendix文档的附录。
help帮助文档。
bookmark相关文档。

(6)rev 属性 几乎不支持
规定被链接文档与当前文档之间的关系。
rev 属性与 rel 属性是相反的。

(7)sizes 属性 HTML5 中的新属性
规定被链接资源的尺寸。
只有当被链接资源是图标时 (rel=“icon”),才能使用该属性。
该属性可接受多个值。值由空格分隔。

(8)target属性 HTML5 中不支持。

(9)type 属性
规定被链接文档的 MIME 类型。
该属性最常见的 MIME 类型是 “text/css”,该类型描述样式表。

5.style元素
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的,定义 style 元素的内容。唯一可能的值是 “text/css”。
style 元素位于 head 部分中。

属性:
(1)type属性
规定样式表的 MIME 类型。唯一值:text/css

(2)media属性 同上

6.meta 元素
元数据(metadata)是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta的属性:
(1)name属性
把 content 属性关联到一个名称。

author、description、keywords、generator、revised、others
(作者 、描述、关键词、编辑器、修正、其他)

针对搜索引擎的关键词:
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词:

<meta name="keywords" content="HTML, CSS, XML" />

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

(2)http-equiv 属性
为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
content-type内容类型、expires存在时间、refresh、set-cookie

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

(3)content 属性
提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。

(4)scheme 属性
定义用于翻译 content 属性值的格式。
用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

7.script>元素
<script> 标签用于定义客户端脚本,比如 JavaScript。

详细见二十三、HTML脚本

二十五、HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

1.HTML 实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
字符实体类似这样:

&entity_name; 或者 `&#entity_number;

如需显示小于号,我们必须这样写:&lt;&#60;

所有特殊字符实体:
实体

2.不间断空格(non-breaking space)
HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

二十六、HTML 统一资源定位器

1.URL - Uniform Resource Locator
URL 也被称为网址。
URL 可以由单词组成,比如 “w3school.com.cn”,或者是因特网协议(IP)地址:192.168.1.253。大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆。
统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

遵守以下的语法规则

scheme://host.domain:port/path/filename

解释:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain- 定义因特网域名,比如 w3school.com.cn
:port - 定义主机上的端口号(http 的默认端口号是 80)
path- 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename- 定义文档/资源的名称

2.URL Schemes
以下是其中一些最流行的 scheme:

Scheme访问用于…
http超文本传输协议以 http:// 开头的普通网页。不加密。
https安全超文本传输协议安全网页。加密所有信息交换。
ftp文件传输协议用于将文件下载或上传至网站。
file您计算机上的文件。

3.HTML URL 字符编码
URL 编码会将字符转换为可通过因特网传输的格式。
Web 浏览器通过 URL 从 web 服务器请求页面。

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL编码参考手册

二十七、HTML 颜色

颜色由红色、绿色、蓝色混合而成。

1.颜色值
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

黑色:#000000 rgb(0,0,0)
青绿色:#FF0000 rgb(255,0,0)
绿色:#00FF00 rgb(0,255,0)
蓝色:#0000FF rgb(0,0,255)
黄色:#FFFF00 rgb(255,255,0)
蓝绿色:#00FFFF rgb(0,255,255)
紫色:#FF00FF rgb(255,0,255)
灰色:#C0C0C0 rgb(192,192,192)
白色:#FFFFFF rgb(255,255,255)

2.颜色名
大多数的浏览器都支持颜色名集合。
仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
点击此处,查看颜色名列表

如果需要使用其它的颜色,需要使用十六进制的颜色值。

3.Web安全色
数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

二十八、HTML文档类型

声明帮助浏览器正确地显示网页。

1.<!DOCTYPE> 声明

不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

2.HTML 版本

版本年份
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML2013

3.常用的声明
(1)HTML5

<!DOCTYPE html>

(2)HTML 4.01

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

(3)XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值