Download presentation
Presentation is loading. Please wait.
1
第二讲 HTML
2
HTML 在Web上,通用的发布语言是HTML,HTML语言是利用各种标识来标记文档的结构和超级链接等信息,是一种在网络上使用的通用的标准。
HTML（Hypertext Markup Language）是超文本标记语言，是一种简单通用的用来描述网站页面的标记式语言，用来描述网页中的各种图片、表格、文本等各种元素。用户在浏览网站时，浏览器解释和编译这种语言，生成用户可以看懂的网页。
3
3. HTML的标识总是封装在由小于号（<）和大于号（>）构成的一对尖括号中。
4
1）单标识： 只需单独使用，就能完整地表达意思，这类标识的语法是： <标识> 最常用的单标识是 <br>，表示在正文段落的当前位置换行。 ps:<p>表示一个段落的结束，并在段落后面加一空行。这是双标识，但尾标识</p>会自动添加。
5
2）双标识： 双标识由“始标识”和“尾标识”两部分构成，必须成对使用，其中，始标识告诉Web浏览器从此处开始执行该标识所表示的功能，而尾标识告诉 Web浏览器在这里结束该功能。语法： <标识>内容</标识> 始标识 尾标识 其中的“内容”部分就是要被这对标识施加作用的部分
6
3）标识属性： 许多单标识和双标识的始标识内可以包含一些属性，语法： <标识 属性1 属性2 ……> 各属性之间无先后次序，属性也可省略（即取默认值）。
7
创建HTML文件 HTML是普通的文本文件，任何可以写文本的软件，都可以用来书写HTML文件。保存时需要把扩展名保存为.html或.htm，这样，这个文件就是网页了。
8
4）文档结构： 除了一些个别的标识外，HTML文档的标识可嵌套使用，通常由3对标识来构成一个HTML文档的骨架： <html> <head> 头部信息 </head> <body> 文档主体，正文部分 </body> </html>
9
3. 常见的HTML标签 网页中最常用的内容是文本、链接、图片和表格。这些网页元素的标签是HTML语言中需要重点掌握的内容。文本和图片都可以添加超级链接，表格可以用来控制网页元素的布局。
10
文本类标记： <Font>标签
网页中的文字被称作网页的文本。 <Font>标签用来描述文本的一些字体、字号、颜色等文本属性。相关属性: size：用来描述字号的大小。 color：用来描述文本的颜色。用6位十六进制数来表示颜色。 face：设定文本的字体。 title：提示信息。鼠标光标停留在这个文本上时会显示出一段提示信息。
11
HTML中有不少用于字体的标识，如 物理意义上的标识： <b></b>表示用粗体显示，<i></i>表示用斜体显示， <U></U>表示下划线; <tt></tt>表示类似打字机或定长宽度字体效果。对于那些已经使用了等宽字体的浏览器来说，tt这个标签在文本的显示上就没有什么特殊效果了。 逻辑意义上的标识： <em></em>表示斜体突出显示； <storng></storng>表示粗体突出显示。
12
表格标记： 网页的文本或图片，可以放在有一定行列的格子中，这些可以约束网页布局的格子就是网页的表格。有些表格可能没有边框，在网页中看不到边框，但仍然是表格。表格的相关标记有<TABLE>、<TR>、<TD>等，分别表示表格、行、列。 1.<TABLE>表格标签 2.<TR>行标签 3.<TD>列标签
13
超级链接标记： 在浏览网页时，单击一个标题会打开另外一个网页。这种可以打开一个网页的标题就是网页中的链接。例如，一个可以打开百度网页的链接如下。 <A HREF=" TARGET="_BLANK">百度</A> 属性TARGET表示链接页面的打开方式。TARGET属性可能的值如下。 _BLANK：表示以新建页面的方式打开网页。 _PARENT：在上级页面打开网页。 _SELF：在当前页面打开网页。
14
段落标记： 与Word排版不同的是，网页中的一个换行并不是一个段落。在网页中需要有一个<P>标签、<DIV>标签等来把一些文本作为一个整体，构成一个段落。一个段落中可能有很多换行。每一个段落后面可能会自动空出一行。在进行文本排版时，需要合理地设置段落。 1.<P>标签 2.<DIV>标签 3.<SPAN>标签 4.段落标签的综合示例
15
框架标记： 框架是一个网页中包含另一个网页。当打开这个网页时，这个网页会自动打开其中的框架网页。当单击网页上面的链接时，这个链接可以指向这个框架网页。一个简单的框架网页代码如下： <IFRAME SRC="AA.ASP" WIDTH="300" HEIGHT="300" ALIGN="MIDDLE" SCROLLING="AUTO" FRAMEBORDER ="1"></IFRAME>
16
表单与按钮标记： 表单是网页浏览器与服务器进行数据交互的基本形式。网站中的用户注册、用户登录、信息提交等功能都是用表单的形式实现。网页的表单由<form>标签、文本框、按钮、单选按钮、复选框等内容构成。 1.Dreamweaver中的表单 2.<form>表单标签 3.文本域 隐藏域 5.复选框 单选按钮 7.下拉菜单 文件选择框 9.按钮 示例：一个用户注册表单
17
图片标记： JPG或GIF等格式的图片文件，可以插入到网页中。网页中插入图片需要使用<img>图片标记。如下代码就是在网页中插入一张图片： <img src="3.jpg" border="2" width="124" height="93" /> 图片标记需要设置的属性有以下几方面。 width：设置图片的宽度。 height：设置图片的高度。 border：设置图片的边框。 src：设置图片的URL。 vspace：设置图片的垂直方向边距。 hspace：设置图片的水平方向边距。 alt：设置图片的提示文字。 align：设置图片的对齐方式。
18
换行标记： 网页在代码中直接按Enter键只可以实现代码的换行，不能实现网页文本的换行。HTML代码中的回车换行在网页中并不会显示，如果在网页中需要对文字换行则需要使用<br>换行标记。在有些版本的网页设计工具中，换行工具写作<br />，这和<br>是相同的。
19
水平线标记： 网页中可以用<hr>表示一条水平的直线，用来分隔不同的网页内容，这就是水平线。<hr>标记的属性如下。 width：水平线的宽度。 noshade：水平线是否有阴影。如果 值为noshade，则无阴影。 align：水平线的对齐方式。 color：水平线的颜色。
20
特殊标签： 网页中有一些空格、注释、命名锚点等标签，这些标签并不在网页中具体显示，是HTML标签中的特殊标签。下面这些标签就是网页中的一些特殊标记。 空格 <!-- --> 注释 <A NAME=“”></A> 锚
21
实例：制作一个注册页面 网页的页面排版是网页设计的基础知识。一个功能强大页面美观的网页需要正确的排版。本节以一个实例讲解网页的排版。需要在网页中插入一个表格，然后在表格中插入图片和文本。表格起到控制布局的作用。网页中需要一个注册表单，实现用户信息填写的功能。在完成这些页面排版以后，再对网页的代码进行分析，理解Dreamweaver CS5自动生成HTML代码的过程。 动态网站要求有强大的用户交互功能。这些用户交互功能实现时，需要对不同的用户权限进行限制。当用户取得网站功能的权限时就需要进行注册。
22
4. HTML网页中的META属性 META标签是网页<head>标签中对网页内容、关键字等信息的设置。其作用是在HTML文档中模拟HTTP协议响应头报文的一些字段，常用于网页的<head>与</head>之间。META标签的用处很多，属性有name和http-equiv两种。例如，IT168网站（ <meta http-equiv="Content-Type" content="text/html; charset= gb2312" /> <meta name="keywords" content="IT|门户|新闻|资讯|报价|导购" /> <meta name="description" content="IT产品导购知名媒体，权威的导购资讯站，以鲜明的定位、专业到位的服务，成为个人以及企业用户获取IT产品信息、商家资料、导购资讯首选的网络媒体。IT168，不仅仅是导购。" />
23
META标签中的name属性是针对网络搜索引擎对网页内容收录进行设置。在网页中需要设置这些属性以便于搜索引擎的收录。
content:标识网页的内容，便于搜索引擎查找、分类。搜索引擎会根据content中的内容自动判断网页的内容。 description:网页在搜索引擎上的描述，会出现在搜索引擎的结果中。 dkywords:网页的关键词，搜索引擎会根据关键词对网页的类型进行分类。 generator:用以说明网页的制作工具（如Dreamweaver等）。 author:用以标识网页的制作者。 robots:标识网页是不是被搜索引擎收录。可能的值为：contect= "all|none|index|noindex|follow| nofollow"等。
24
http-equiv是META标签中的一个重要属性，浏览器显示这个网页时可以对浏览器的状态进行一些设定。
http-equiv属性: http-equiv是META标签中的一个重要属性，浏览器显示这个网页时可以对浏览器的状态进行一些设定。 1)语言与编码 <meta http-equiv="Content-Type" contect="text/html";charset=gb_2312"> <meta http-equiv="Content-Language" contect="zh-CN"> 2)网页刷新与跳转 <meta http-equiv="Refresh" contect="n;url= 3)设定网页的到期时间 <meta http-equiv="Expires" contect="Mon,12 May :20:00 GMT">
25
4)禁止浏览器从缓存中调用页面 <meta http-equiv="Pragma" contect="no-cache"> 5)设置Cookie时间 <meta http-equiv="set-cookie" contect="Mon,12 May :20:00 GMT"> 6)网页的等级评定 <meta http-equiv="Pics-label" contect=""> 7)强制页面在窗口中以独立页面显示 <meta http-equiv="windows-Target" contect="_top"> 8)设置网页加载或离开时的过渡效果 <meta http-equiv="Page-Enter" contect="revealTrans(duration=8,transtion= 66)"> <meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">
26
5.常见问题 (1) 网页中代码大小写问题和引号问题 (2) HTML与浏览器的不同版本 (3) HTML与XML
27
HTML代码是不区分大小写的，所以HTML可以随意用大写或小写字母来书写。在HTML标签中，每一个属性完成以后需要用空格隔开。
网页中代码大小写问题和引号问题: HTML代码是不区分大小写的，所以HTML可以随意用大写或小写字母来书写。在HTML标签中，每一个属性完成以后需要用空格隔开。 在HTML代码中需要区别字符的全角和半角，HTML标签中不可以出现全角字符，特别要注意的是不可以出现全角的引号、单引号、全角空格等内容，否则会导致这段HTML标签无法显示。 在HTML代码中的双引号，可以不使用或是用单引号代替。但如果使用引号则必须正确配对。
28
HTML与浏览器的不同版本: 用来编写网页的HTML有不同的版本。不同版本的HTML可能有一些差别。同样，各种网页浏览器对网页代码的支持是不同的。 a.HTML的版本 b.常用的浏览器 c.网页设计有时需要考虑到浏览器的版本
29
HTML与XML: 近年来，网站上大量使用了XML技术，XML逐渐在网页制作中流行。XML与HTML之间有一定的区别与联系。 XML（eXtentsible Markup Language）即可扩展标记语言，是用来定义其他语言的一种元语言。XML没有标签集，也没有语法规则，只有句法规则。XML文档对任何类型的应用与解析都必须有匹配的结束标签，不得含有次序不规范的标签。 HTML的主要功能是用来编写网页的内容。XML的可扩展标记功能也可以用来定义为描述网页的内容，于是网页代码也可以用XML来表示。
Similar presentations
