HTML 基础教程（一）

最新推荐文章于 2024-03-20 17:29:23 发布

「已注销」

最新推荐文章于 2024-03-20 17:29:23 发布

阅读量748

点赞数

分类专栏： HTML 文章标签： html 浏览器搜索引擎 stylesheet 文档 transition

本文链接：https://blog.csdn.net/fengwx0413/article/details/5862248

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网页标记基础

<html>

<head>

</head>

<body>

</body>

</html>

头部标记

标记描述

<base> 当前文档的URL 全称（基底网址）

<title> 设定显示在浏览器左上方的标题内容

<isindex> 表明该文档是一个可用于检索的网关脚本

注：<title>和</title>标签对是必须嵌入到<head>和</head>标签对中的，而<script>和</script>标签对、<style>和</style>标签对则不一定。

输出属性<link>

添加在html的头信息标识符<head>里

∗.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀。Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围如下表

Media的属性值

属性值描述

Screen 输出到电视屏幕

Print 输出到打印机

TV 输出到电视机

Projection 输出到投影仪

Aural 输出到扬声器

Braille 输出到凸字触觉感知设备

Tty 输出到电传打字机

All 输出到以上所有设备

如果要输出到多种设备，则可以用逗号分隔取值表。

Rel属性表示样式表将以何种方式与HTML文档结合，取值范围如下：

Stylesheet：指定一个外部的样式表

Alternate stylesheet：指定使用一个交互样式表

基底网址标记<base>

<base>标记可以设定url地址，一般常用来设定浏览器中文件的绝对路径，然后在文件中只需写下文件的相对地址，在浏览器中浏览的时候这些位置会自动附在绝对路径后面，成为完整的路径。在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。一篇文档中的<base>标记不能多于一个，必须放在头部，并且应该在任何包含url地址的语句之前。

基本语法

语法解释

href属性指定了文档的基础url地址。该属性<base>在标记中是必须存在的。target定义的是打开页面的窗口，同框架一起使用，它定义了当文档中的链接被单击后，哪一个框架集中展开页面。如果文档中超链接没有明确指定展开页面的目标框架集，则使用这里定义的地址代替。

链接的目标窗口

属性值描述

_parent 在上一级窗口中打开。一般使用分帧的框架页会经常使用。

_blank 在新窗口中打开

_self 在同一个或窗口中打开，这项一般不用设置

_top 在浏览器的整个窗口中打开，忽略任何框架

基底文字标记<basefont>

<basefont>标记可以设定基准的文字字体、字号和颜色，一旦遇到页面中其它相关标签未定义文字或段落的样式时，将套用基准的文字样式。

基本语法

语法解释

face定义了字体，不同的字体可以定义多次，字体之间使用","分开，如果系统中不存在第一种字体，就显示第二种字体，如果字体都不存在，就显示默认的字体。size定义了字号， value取值范围为从1至7或者从+1至+7、从-1至-7。1是最小的字号，7是最大的字号。color定义了颜色，value定义颜色的名称或者十六进制代码。

<basefont>标记的属性

属性描述

face 字体

size 字号

color 颜色

元信息标记<meta>属性

标记描述

HTTP-EQUIV 生成一个HTTP 标题域，取值与另一个属性相同，实际取值由CONTENT 确定

NAME 如果元数据是以关键字/取值的形式出现的，NAME表示关键字，如Author或ID

CONTENT 关键字/取值的内容

定义编辑工具

使用Frontpage、Dreamweaver等多种编辑工具可以制作网页，在源代码中可以设定网页编辑器的名称。这个名称不会出现在浏览器中。

基本语法

语法解释

genertor为编辑器定义，content中定义编辑器的名称。

设定关键字

关键字是为搜索引擎提供的。例如一个音乐网站，为了提高在搜索引擎中被搜索到的几率，可以设定多个和音乐主题相关的关键字以便搜索。这些关键字不会出现在浏览器的显示中。需要注意的是，大多数搜索引擎检索时都会限制关键字的数量，有时关键字过多，该网页会在检索中被忽略。所以关键字的输入不宜过多，应切中要害。另外关键字之间用逗号分割。

基本语法

语法解释

keywords为关键字定义，content中定义关键字的内容。

设定描述

对于一个网站的页面，可以在源代码中添加说明语句，用以将网站的主题描述清晰，这就是描述语句的作用。这个描述语句内容也不会出现在浏览器的显示中。说明文字可供搜索引擎寻找网页，还可存储在搜索引擎的的服务器中，在浏览者搜索时随时调用，还可以在检索到网页时作为检索结果返给浏览者。搜索引擎同样限制说明文字的字数，所以内容要尽量简明扼要。

基本语法

语法解释

discription为描述定义，content中定义描述的内容。

设定作者

在页面的源代码中，可以显示页面制作者的姓名及个人信息。这可以在源代码中保留作者希望保留的信息。

基本语法

语法解释

author为作者定义，content中定义作者的个人信息。

设定字符集

html页面的内容可以通过不同的字符集来显示，如中国内地常用的GB码(简体中文)，中国台湾地区常用的BIG5码(繁体中文)，欧洲地区常用的ISO8859-1(英文)等。对于不同的字符集页面，如果用户的浏览器不能显示该字符，则浏览器中显示的都是乱码。这时就需要由html语言来定义页面的字符集，用以告知浏览器以相应的内码显示页面内容。

基本语法

语法解释

http-equiv传送http通信协议的标头，content中定义页面的内码，其中Charset写下内码的语系。

提示：如果设定了页面的字符集为浏览器不包含的语系，如席伯来文，这时浏览器就会弹出告知用户需要下载并安装席伯来文字符显示的压缩包。

设定自动刷新

使用http-equiv属性中的refresh能够设定页面的自动刷新，就是每隔几秒的时间刷新页面的内容。例如常用的互联网现场图文直播、****消息的自动更新等。

基本语法

语法解释

http-equiv传送http通信协议的标头，refresh代表刷新，content中写下刷新间隔的秒数。

设定自动跳转

使用http-equiv属性中的refresh不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转过程。如我们的网站地址有所变化，希望在当前的页面中等待几秒钟之后就自动跳转到新的网站地址，可以通过设定跳转时间和地址来实现。自动跳转特性目前已经被越来越多的网页所使用。例如可以首先在一个页面上显示欢迎信息，经过一段时间自动跳转到指定的网页上。

基本语法

语法解释

http-equiv传送通信协议的标头，refresh代表刷新，content中写下跳转间隔的秒数以及跳转后打开的文件地址。

设定转场效果

转场效果即网页过渡，是指当进入或离开网站时，页面具有不同的切换效果。添加此功能可以使网页看起来更具有动感。

基本语法

语法解释

event 设定页面进入或页面退出的时候产生切换效果

事件描述

Page-Enter 表示进入网页时有网页过渡效果

Page-Exit 表示退出网页时有网页过渡效果

duration中写下网页过渡效果的延续时间，单位为秒，transition中写下过渡效果的方式编号：

效果效果编号

盒状收缩 0

盒状展开 1

圆形收缩 2

圆形展开 3

向上擦除 4

向下擦除 5

向左擦除 6

向右擦除 7

垂直百叶窗 8

水平百叶窗 9

横向棋盘式 10

纵向棋盘式 11

溶解 12

左右向中部收缩 13

中部向左右展开 14

上下向中部收缩 15

中部向上下展开 16

阶梯状向左下展开 17

阶梯状向左上展开 18

阶梯状向右下展开 19

阶梯状向右上展开 20

随机水平线 21

随机垂直线 22

随机 23

设定禁用缓存

使用网页缓存可以加快浏览网页的速度，因为缓存将曾经浏览过的页面暂存在电脑中，当用户下次打开同一个网页内容时，即可快速浏览该网页，省去读取同一网页的时间。但是如果网页的内容经常频繁地更新，网页制作者希望用户随时都能查看到最新的网页内容则可以通过meta语句禁用页面缓存。

基本语法

语法解释

cache-control为缓存控制，content中定义禁止缓存。

设定有效期限

通过设置可以控制网页的有效期限

基本语法

语法解释

expires为网页到期，content中定义到期时间，其格式为"星期, 日月年时分秒gmt"，都使用英文和数字进行设定。

设定建立网站的日期

通过设置可以设定网站建立的时间

基本语法

语法解释

build为网页建设，content中定义建设的时间。

说明版权

通过设置可以说明网页的版权

基本语法

语法解释

copyright为版权，content中定义版权信息。

记载联系人的邮箱

通过设置可以记载联系人的邮箱

基本语法

语法解释

reply-to为回复，content中定义邮箱地址。

限制搜索方式

通过设置可以限制搜索引擎搜索当前网页的方式

基本语法

语法解释

robots 为定义搜索方式，content中定义可以采用的不同方法

content 值

值描述

All 表示能搜索当前网页及与其链接的网页

Index 表示能搜索当前网页

Nofollow 表示不能搜索与当前网页链接的网页

Noindex 表示不能搜索当前网页

None 表示不能搜索当前网页及与其链接的网页

body元素的属性

属性描述

text 设定页面文字的属性

bgcolor 设定页面背景的颜色

background 设定页面的背景图像

bgproperties 设定页面的背景图像为固定，不随页面的滚动而滚动

link 设定页面默认的链接颜色

alink 设定鼠标正在单击时的链接颜色

vlink 设定访问过后的链接颜色

topmargin 设定页面的上边距

leftmargin 设定页面的左边距

文字颜色属性text

<body>元素的text属性可以改变整个页面默认的文字颜色。在没有对文字进行单独定义颜色的时候，这个属性将对页面中所有的文字产生作用。

基本语法

语法解释

通过text属性定义了文字的颜色，color_value指的就是颜色的值。

背景颜色属性bgcolor

<body>元素的bgcolor属性用来设定整个页面的背景颜色，与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。

基本语法

语法解释

通过bgcolor属性定义了页面的颜色，color_value指的就是颜色的值。

注：HTML语言中给定常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue、Teal。

背景图像属性background

页面中可以使用JPG或GIF图片来表现，这些图片可以作为页面的背景图，通过<body>语句中的background属性来实现。它与向网页中插入图片不同，放在网页的最底层，文字和图片等都位于它的上面。文字、插入的图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。

基本语法

语法解释

通过background属性定义了页面的背景图像，img_file_url指的是图片文件所在的路径，即指向图像文件所在位置的地址，也即图像文件所在位置的统一资源定位符，这里不仅可以输入本地图像文件的路径和文件名称，也可以用url的形式输入其它位置的图像名称。

背景图像固定属性bgproperties

在默认的情况下，如果页面的内容较长，当拖动浏览器滚动条的时候，背景会随着文字内容的滚动而滚动。所谓背景图像固定，是指不论浏览器的滚动条如何拖动，背景都永远固定在相同的位置，并不会随着文字滚动而滚动。

基本语法

语法解释

通过background属性定义了页面的背景图像，img_file_url指的是图片文件所在的路径，bgproperties定义了背景属性，fixed就是设定固定的效果。

链接文字颜色属性link

链接是网页中最基本的元素之一。在浏览器默认的情况下，链接文字的颜色为蓝色，访问过后的链接文字颜色为紫红色。这有助于用户判断是否单击过该链接。

基本语法

语法解释