HTML概述和基本标记_第1页
HTML概述和基本标记_第2页
HTML概述和基本标记_第3页
HTML概述和基本标记_第4页
HTML概述和基本标记_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章HTML概述和基本标识赵海燕zhaohaiyan@HTML概述和基本标记第1页1.HTML概述最初网页都是靠编写HTML代码实现，现在有了很多功效强大网页编辑软件，如Dreamweaver、Frontpage等，使网页制作变得很简单。不过学习HTML语言还是很有必要。HTML概述和基本标记第2页1.1HTML介绍HTML（HypertextMarkupLanguage）是一个Web网页元素标识语言规范，称为超文本标识语言。所谓“超文本”，是指页面内能够包含图像、链接、多媒体对象、程序等非文本元素。所谓“标识”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，能够由任意文本编辑器编写，文件扩展名为“html”。实际上，HTML是一个因特网上常见网页制作标注性语言，而并不能算做一个程序设计语言，因为它缺乏程序设计语言所应有特征。HTML经过IE等浏览器翻译，将网页中所要展现内容、排版展现在用户眼前。HTML概述和基本标记第3页1.2HTML发展历史HTML在早期，为了它更广泛地被接收，大幅度放宽了标准严格性，造成出现了很多混乱和不规范代码。这显然不符合标准化发展趋势，影响了互联网深入发展。为此，相关规范制订者——W3C（全球万维网联盟）组织，一直在不停地努力，逐步推出新版本规范。从HTML到XHTML，大致经历了以下几个版本：HTML2.0:1995.11公布HTML3.2:1996.1.14公布HTML4.0:1997.12.18公布HTML4.01:1999.12.24公布XHTML1.0:.1公布.8.1修订公布XHTML1.1:.5.31公布XHTML2.0:正在制订中HTML概述和基本标记第4页1.3文档类型申明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">……</html>文档类型申明作用是，告诉浏览器使用哪种规范来解释这个文档中代码。HTML4.01和XHTML1.0分别对应于一个严格类型（Strict）和一个过渡类型（Transitional）。过渡类型是兼容以前版本定义，而在新版本中已经废弃标识和属性。严格类型则不兼容已经废弃标识和属性。HTML概述和基本标记第5页1.4HTML元素与标识网页文档结构和格式定义是由HTML元素来完成，HTML元素是由单个或一对标识（标签）定义包含范围。在HTML中用于描述功效符号称为“标识”，它是用来控制文字、图形等显示方式符号，比如“html”、“head”、“body”等。标识在使用时必须用“<>”括起来，开始标识是指不以斜杠（/）开头标识，其内容是一串允许属性-值对。结束标识则是指以斜杠（/）开头标识。HTML概述和基本标记第6页1.5标识属性标识内能够包含一些属性，各属性之间无先后次序，也能够省略（即取默认值）。其语法是：<标识名称属性1属性2属性3…

>比如：<hrsize=“3”align=“left”width=“75%”/>hr标识表示在文档当前位置画一条水平线，其中size属性定义线粗细，属性值取整数，缺省值为1；align属性表示对齐方式，可取left（左对齐，缺省值），center（居中），right（右对齐）；width属性定义线长度，可取相对值（由一对“”号括起来百分数，表示相对于充满整个窗口百分比），也可取绝对值（用整数表示屏幕像素点个数，如width=“300”），缺省值是“100%”。HTML概述和基本标记第7页1.6HTML元素四种形式空元素（单标识）<br/>带有属性空元素<hrcolor=“blue”/>带有内容元素（双标识）<title>首页</title>带有内容和属性元素<fontcolor=“red”>网页设计</font>HTML概述和基本标记第8页1.7HTML文档固有格式HTML网页文件主要由文件头和文件体两部分内容组成。其中，文件头是对文件进行一些必要定义，文件体是HTML网页主要部分，它包含文件全部实际内容。下面是HTML网页基本结构。<HTML>…….HTML文件开始<HEAD>……..文件头开始文件头</HEAD>..……文件头结束<BODY>…….文件体开始文件体</BODY>…….文件体结束</HTML>……HTML文件结束

<HTML>和</HTML>标识放在网页文档最外层，表示这对标识间内容是HTML文档。<HTML>放在文件开头，</HTML>放在文件结尾，中间能够加入其它标识。HTML概述和基本标记第9页1.8HTML与XHTML主要区分1.在XHTML中标识名称必须小写2.在XHTML中属性名称必须小写3.在XHTML中标识必须严格严格嵌套4.在XHTML中标识必须封闭5.在XHTML中即使是空元素标识也必须封闭6.在XHTML中属性值用双引号括起来7.在XHTML中属性值必须使用完整形式8.在XHTML中应该区分“内容标识”与“结构标识”希望大家在编写代码过程中严格按照XHTML规范书写。HTML概述和基本标记第10页2.HTML基本标识HTML各种基本标识都是一个完整网页必不可少。经过它们能够了解网页基本结构及其工作原理。HTML概述和基本标记第11页2.1头部标识<head>文件头用<head>和</head>标识，该标识出现在文件起始部分，用来说明文件相关信息，是文件头部信息。定义在HTML语言头部内容往往不会在网页上直接显示，普通包含文件标题、搜索引擎可用关键词以及不属于网页内容其它信息。比如<title>、<base>、<meta>、<style>、<link>等。HTML概述和基本标记第12页2.2标题标识<title>在<head>标识内最惯用标识是网页标题标识<title>。语法：<title>网页标题</title>网页标题是提醒网页内容和功效文字，它将出现在浏览器标题栏中，一个网页只能有一个标题，而且只能在文件头部进行设置。实例：2-1title.html<head><title>文件标题</title></head>HTML概述和基本标记第13页2.3元信息标识<meta>meta元素提供信息是用户不可见，它不显示在页面中，普通用来定义页面信息名称、关键字、作者等。在HTML中，meta标识不需要设置结束标识，是一个单标识。在一个HTML头部中能够有多个meta元素。Meta元素属性有两种：name和http-equiv，其中name属性主要用于描述网页，方便于搜索引擎查找、分类。其中最主要是description（站点在搜索引擎上描述）和keywords（关键词）。HTML概述和基本标记第14页2.3.1设置页面关键字设置页面关键字是为了向搜索引擎说明这一网页关键词，从而帮助搜索引擎对该网页进行查找和分类。普通可设置不止一个关键字，用逗号隔开。语法：<metaname=“keywords”content=“关键字1,关键字2,……”/>实例：2-2keywords.html<head><title>学习元信息标识</title><metaname="keywords"content="html,元信息,关键字"/></head>HTML概述和基本标记第15页2.3.2设置页面描述

设置页面描述也是为了便于搜索引擎查找，它用来描述网页主题等，与关键字一样，设置页面描述也不会在网页中显示出来。语法：<metaname=“description”content=“页面描述语言”/>实例：2-3description.html<head><title>学习元信息标识</title><metaname="keywords"content="html,元信息,关键字"/><metaname="description"content="关于HTML使用网站"/></head>HTML概述和基本标记第16页2.3.3设置作者信息在源代码中设置网页制作者姓名信息。语法：<metaname=“author”content=“作者姓名”/>实例：2-4author.html<head><title>学习元信息标识</title><metaname="keywords"content="html,元信息,关键字"/><metaname="description"content="关于HTML使用网站"/><metaname="author"content="张三"/></head>HTML概述和基本标记第17页2.3.4设置网页文字及语言在网页中还能够经过语句来设定语言编码方式。这么，浏览器就能够正确地选择语言，而不需要人工选取。语法：<metahttp-equiv=“content-type”content=“text/html;charset=字符集类型”/>在该语法中，http-equiv用于传送HTTP通信协议标头，也就是设定标头属性名称，在content中才是详细属性值。其中charset设置了字符集类型，中国内地惯用是简体汉字gb_2312。实例：2-5Content-Type.html<head><metahttp-equiv="Content-Type"content="text/html;charset=gb-2312"><title>设定语言</title></head>HTML概述和基本标记第18页2.3.5设置网页定时跳转在浏览网页时经常会看到一些欢迎信息界面，在经过一段时间后，这一页面会自动跳转到其它页面中。语法：<metahttp-equiv=“refresh”content=“跳转时间;url=链接地址”/>跳转时间默认以秒为单位。当语法中链接地址被省略时，网页功效就变成了刷新页面本身，这在不停更新数据页面中经常会用到。HTML概述和基本标记第19页2.3.5设置网页定时跳转实例：2-6refresh跳转.html<html><head><title>学习元信息标识</title><metahttp-equiv="refresh"content="3;url="></head><body>您好，本页在3秒之后将自动跳转到搜狐网站。</body></html>HTML概述和基本标记第20页2.3.5设置网页定时跳转实例：2-7refresh刷新.html<html><head><title>页面刷新</title><metahttp-equiv="refresh"content="60"></head><body>您好，本页每隔1分钟自动刷新一次。</body></html>HTML概述和基本标记第21页2.3.6设置网页过渡效果语法：<metahttp-equiv=“过渡事件”content=“revealtrans(duration=过渡效果连续时间,transition=过渡方式)”/>在该语法中，过渡事件值为enter时是进入页面，值为exit时是离开页面。过渡效果连续时间默认情况下以秒为单位，过渡方式取值为0到23，分别代表盒状收缩、盒状放射等不一样过渡方式。实例：2-8enter.html<head><title>进入页面过渡效果</title><metahttp-equiv="enter"content="revealtrans(duration=5,transition=14)"/><metahttp-equiv="exit"content="revealtrans(duration=3,transition=12)"/></head>HTML概述和基本标记第22页2.4基底网址标识<base>绝对路径是将服务器上磁盘驱动器名称和完整路径写出来，同时也会表现出磁盘上目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录路径。当浏览器浏览页面时，会经过<base>标识将相对地址附在基底网址后面，从而把当前页面中全部相对URL转换成绝对URL。比如：在头部定义基底网址以下：<basehref=“/sample”/>在页面主体中设置某个相对地址以下：<ahref=“../sample1.html”/>当使用浏览器浏览时，这个链接地址就变成以下绝对地址：/sample/sample1.html所以，在HTML页面中设置基底标识时不应该多于一个。HTML概述和基本标记第23页2.4基底网址标识<base>语法：<basehref=“链接地址”target=“新窗口打开方式”/>在该语法中，链接地址就是要设置页面基底地址，新窗口打开方式能够设置为不一样效果，详细取值以下：_parent在上一级窗口打开，惯用在分帧框架页中_blank在新窗口打开_self在同一窗口打开，能够省略_top在浏览器整个窗口打开，忽略任何框架HTML概述和基本标记第24页2.4基底网址标识<base>实例：2-9base.html<html><head><basehref=""target="_top"><title>学习元信息标识</title></head><body><ahref="../browse/cat-0.htm">打开一个相对地址</a></body></html>HTML概述和基本标记第25页2.5页面主体标识<body>文件主体用<body>和</body>标识，它是HTML文档主体部分，网页正文中全部内容包含文字、表格、图像、声音和动画等都包含在这对标识对之间。在网页主体标识中能够设置很多属性，如页面背景、文字属性、链接属性、边距属性等。HTML概述和基本标记第26页2.5.1设置页面背景色——bgcolor主体标识中bgcolor属性用于设置页面背景颜色，使用“#”加上6位十六进制来表现颜色。其中#FFFFFF为白色，#000000为黑色，#FF0000为红色，#00FF00为绿色，#0000FF为蓝色。语法：<bodybgcolor=“颜色代码”>实例：2-10bgcolor.html<html><head><title>设置页面背景色</title></head><bodybgcolor="#3399CC"></body></html>HTML概述和基本标记第27页2.5.2设置背景图片——background语法：<bodybackground=“文件链接地址”bgproperties=“背景图片固定属性”>文件链接地址能够是相对地址，也能够是绝对地址。在默认情况下，假如省略bgproperties属性，图片会按照水平和垂直方向不停重复出现，直到铺满整个页面。假如希望图片不重复显示，普通情况下需要借助CSS样式，我们将会在以后章节中学习。假如将bgproperties属性设置为fixed，那么当滚动页面时，背景图像也会跟着移动。实例：2-11background.htm<bodybackground="图片/03.jpg"bgproperties="fixed"><center><fontcolor="red"size="7">背景图片设置<br/></font></center></body>HTML概述和基本标记第28页2.5.3设置文字颜色——text在没有对文字颜色进行单独定义时，能够在主体标识中用text属性对页面中全部文字设置颜色。语法：<bodytext=“颜色代码”>实例：2-12text.html<html><head><title>设置页面文字颜色</title></head><bodybgcolor="#99CCCC"text="#FF0000">设置页面文字颜色</body></html>HTML概述和基本标记第29页2.5.4设置链接文字属性——link通常情况下，浏览器以蓝色作为超链接文字颜色，访问过文字则变为暗红色，用户能够在页面主体标识中对没有单独设置过颜色链接进行颜色设置。语法：<bodylink=“未访问链接颜色代码”alin

人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论