目录
[1. HTML的基本结构](#1. HTML的基本结构)
[2. 头部标记](#2. 头部标记)
[3. 标题标记](#3. 标题标记)
[4. 元信息标记](#4. 元信息标记)
[5. 主体标记](#5. 主体标记)
[1. 文本和段落](#1. 文本和段落)
[2. 插入图像](#2. 插入图像)
[3. 添加多媒体](#3. 添加多媒体)
[4. 图像的超链接](#4. 图像的超链接)
[5. 图像热区链接](#5. 图像热区链接)
[6. 建立超链接](#6. 建立超链接)
一、基本概念
HTML的英文全称是Hyper Text Markup Language(超文本标记语言),它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
二、结构标签
1. HTML的基本结构
<html> <head> 文件头 </head> <body> 文件主体 </body> </html>2. 头部标记
一般需要包括标题、基础信息和元信息等。
语法:
<head>......</head>说明:<head>元素的作用范围是整篇文档。
3. 标题标记
语法:
<title>......</title>**说明:**标题位于<head>和</head>之间。
4. 元信息标记
META标签包含 http-equiv 和 name 两大类属性。
(1) http-equiv 使用方法:
1) Content-Type:
说明主页制作所使用的文字以及语言。
例:
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80"> <meta http-equiv="Content-Language" content="zh-CN">2) Refresh:
定时让网页在指定的时间n内,跳转到指定的页面。
例:
<meta http-equiv="Refresh" content="n;url=http://yourlink">3) Expires:
可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需
要注意的是必须使用GMT时间格式。
例:
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">4) Pragma:
是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开
网页就无法从Cache中再调出。
例:
<meta http-equiv="Pragma" content="no-cache">5) set-cookie:
cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须
使用GMT时间格式。
例:
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">6) Pics-label:
网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些
受限制的网站,而网站的限制级别就是通过meta属性来设置的。
例:
<meta http-equiv="Pics-label" content=>7) windows-Target:
强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作
一个frame页调用。
例:
<meta http-equiv="windows-Target" content="_top">8) Page-Enter:
设定进入和离开页面时的特殊效果,这个功能即FrontPage中的"格式/网页
过渡",不过所加的页面不能够是一个frame页面。
例:
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transition= 50)"> <meta http-equiv="Page-Exit" content="revealTrans(duration=20,transition=6)">(2) name 使用方法:
1) author
作者信息。
例:
<meta name="author" content="作者的姓名">2) description
页面说明。
例:
<meta name="description" content="设置页面说明">3) generator
编辑工具。
例:
<meta name="generator"content="编辑软件的名称">4) keywords
关键字。
例:
<meta name="keywords" content="输入具体的关键字">5. 主体标记
(1) 背景色
语法:
<body bgcolor="背景颜色">**说明:**颜色的值可以是一个已命名的颜色,也可以是十六进制的颜色值(#993300)。
(2) 背景图片
语法:
<body background="图片的地址">**说明:**图片的地址可以是相对地址,也可以是绝对地址。
(3) 文字颜色
语法:
<body text="文字的颜色">(4) 链接文字属性
1) link: 设置访问前的文字颜色
2) alink: 设置正在访问的文字颜色
**3) vlink:**设置访问后的链接文字的颜色
例:
<body link="颜色1" alink="颜色2" vlink="颜色3">(5) 边距
语法:
<body topmargin=上边距的值 leftmargin=左边距的值>**说明:**在默认情况下,边距的值以像素为单位。
(6) 注释
语法:
<!--注释的内容 -->
三、基础标签
1. 文本和段落
(1) 标题字标记
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>对齐属性:
默认情况下,标题文字是左对齐的。
语法:
<align=对齐方式> <!-- left(左对齐) center(居中对齐) right(右对齐) -->(2) 文本基本标记
<font>标记用来控制字体、字号和颜色等属性,它是 HTML中最基本的标记之一。
1) 字体属性:
语法:
<font face="字体样式">......</font>2) 字号属性:
语法:
<font size="文字字号">......</font> <!-- 说明:size 属性用来设置字体的大小,它有绝对和相对两种方式。从1到7的整数,代表字体大小的绝对字号。从-4到+4的整数,字体相对于3号放大和缩小字号。 -->3) 颜色属性:
语法:
<font color="字体颜色">......</font>(3) 文本格式化标记
1) 粗体标记:
<b>加粗的文字</b> <strong>加粗的文字</strong>2) 斜体标记:
<i>斜体文字</i> <em>斜体文字</em> <cite>斜体文字</cite>3) 上标标记:
<sup>上标内容</sup> <!-- 说明:允许嵌套使用 -->4) 下标标记:
<sub>下标内容</sub> <!-- 说明:允许嵌套使用 -->5) 大字号标记:
<big>大字号内容</big>6) 小字号标记:
<small>小字号内容</small>7) 下画线标记:
<u>下画线的内容</u>(4) 段落标记
语法:
<p>段落文字</p> <!-- 说明:段落标记可以没有结束标记</p>,而每一个新的段落标记开始的同时也意味着上一个段落的结束。 -->(5) 换行标记
语法:
<br>(6) 不换行标记
语法:
<nobr>不换行文字</nobr>(7) 水平线
语法:
<hr>属性:
1) 水平线宽度:
语法:
<hr width="宽度"> <!-- 说明:在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。 -->2) 水平线高度:
语法:
<hr size="高度"> <!-- 说明:在该语法中,水平线的高度值只能是像素值。 -->3) 水平线去掉阴影:
语法:
<hr noshade>4) 水平线颜色:
语法:
<hr color="颜色">5) 水平线排列:
语法:
<hr align="对齐方式"> <!-- 说明:默认情况下是居中对齐,包括center、let和ight -->(8) 特殊符号
描述 转义符号 空格 左双引号 " 右双引号 " 左单引号 ' 右单引号 ' 乘号 × 除号 ÷ 加号 + 减号 − 大于号 > 小于号 < 2. 插入图像
(1) 语法:
<img src="URL地址" alt="图像的替代文本" ......>(2) 属性:
属性 描述 src 图像的源文件 alt 提示文字 width, height 宽度和高度 border 边框 vspace 垂直间距 hspace 水平间距 align 排列 dynsre 设定 avi 文件的播放 loop 设定 avi文件循环播放次数 loopdelay 设定 avi文件循环播放延迟 start 设定 avi文件播放方式 lowsrc 设定低分辨率图片 usemap 映像地图 3. 添加多媒体
(1) 滚动效果
语法:
<marquee>......</marquee>滚动属性:
|---------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------|
| 属性 | 描述 | 例 |
| direction | 滚动方向,滚动方向包含4个取值, 分别为up(向上)、down(向下)、 left(向左)和right(向右),其中left 为默认效果。 | <marquee direction="滚动方向"> ...... </marquee> |
| behavior | 滚动方式,属性值为:scroll:循 环滚动,默认效果;slide:只滚动 一次就停止;alternate:来回交替 进行滚动。 | <marquee behavior="滚动方式"> ...... </marquee> |
| scrollamount | 滚动速度 | <marquee scrollamount="滚动速度(像素)"> ...... </marquee> |
| scrolldelay | 滚动延迟 | <marquee scrolldelay="时间间隔(毫秒)"> ...... </marquee> |
| loop | 滚动循环 | <marquee loop="循环次数"> ...... </marquee> |
| width | 滚动范围 | <marquee width="背景宽度(像素)" height ="背景高度(像素)"> ...... </marquee> |
| bgcolor | 滚动背景颜色 | <marquee bgcolor="背景颜色"> ...... </marquee> |
| hspace、vspace | 空白空间,默认情况下,滚动对象 周围的文字或图像是与滚动背景紧 密连接的,使用hspace(水平范围) 和vspace(垂直范围)可以设置它们 之间的空白空间。 | <marquee hspace="水平范围(像素)" vspace="垂直范围(像素)"> ...... </marquee> |(2) 插入多媒体文件
1) 插入 Flash 动画
语法:
<embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度">......</embed>2) 插入音频和视频文件
语法:
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度">......</embed>3) 设置背景音乐
语法:
<bgsound src="背景音乐的地址" loop="播放次数"> <!-- 说明:如果希望无限次地循环播放背景音乐,可将循环次数设置为true。 -->4) 插入Java Applet
语法:
<applet code="Lake.class" width="宽度" height="高度"> <param name="文件夹的名称" value="图片名称"> </applet>4. 图像的超链接
语法:
<a href="链接地址"><img src="图像文件的地址"></a>5. 图像热区链接
语法:
<!-- 1.首先需要在图像文件中设置映射图像名,在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下: --> <img src="图像地址" usemap ="映射图像名称"> <!-- 2.然后需要定义热区图像以及热区的链接属性如下: --> <map name="映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map>6. 建立超链接
(1) 基本知识
1) URL: 统一资源定位符
2) 绝对路径: 是包括服务器规范在内的完全路径。
**3) 相对路径:**可以表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。
(2) 内部链接
内部链接是指链接的对象是在同一个网站中的资源。
语法:
<a href="链接地址" target="目标窗口的打开方式">......</a>target的属性值:
属性值 描述 self 在当前页面中打开链接 blank 在一个全新的空白窗口中打开链接 top 在顶层框架中打开链接,也可以理解为在根框架中打开链接 parent 在当前框架的上一层里打开链接 (3) 锚点链接
1) 建立锚点
锚点就是指在给定名称的一个网页中的某一位置,在创建锚点链接前首先要
建立锚点。
语法:
<a name="锚点的名称">......</a>2) 链接同一页面中的锚点
建立了锚点以后,就可以创建到锚点的链接,需要用#号以及锚点的名称作
为 href 属性值。
语法:
<a href="#锚点的名称">......</a>3) 链接到其他页面中的锚点
锚点链接不但可以链接到同一页面,也可以在不同页面中设置。
语法:
<a href="链接的文件地址#锚点名称">......</a>(4) 外部链接
外部链接是指跳转到当前网站之外的资源中。
1) 链接到外部网站
网页中最常用的利用HTTP协议进行外部链接是在设置友情链接时。
语法:
<a href="http://......">......</a>2) 链接到 E-mail
语法:
<a href="mailto:邮件地址">......</a>3) 链接到FTP
语法:
<a href="ftp://ftp地址">......</a>4) 链接到 Telnet
语法:
<a href="telnet://地址">......</a>5) 下载文件
语法:
<a href="文件地址">......</a>