1 / 56

第 10 章 HTML 基础

第 10 章 HTML 基础. 概 述. HTML 简介 HTML 标准及发展历史 HTML 标记与属性 HTML 超链接 HTML 表格 HTML 框架 HTML 表单 HTML 扩展. 1.HTML 简介： Hypertext Markup Language. // HTML 文档实例结果显示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 网页标题行名称或选项卡名称 </title> </head> <body>

malloren-rasmussen
Download Presentation

第 10 章 HTML 基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第10章 HTML基础

  2. 概 述 • HTML简介 • HTML标准及发展历史 • HTML标记与属性 • HTML超链接 • HTML表格 • HTML框架 • HTML表单 • HTML扩展

  3. 1.HTML简介：Hypertext Markup Language // HTML文档实例结果显示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页标题行名称或选项卡名称</title> </head> <body> 这是第一个也是最简单的网页！<br> </body> </html> • 什么是HTML？ • 超文本标记语言 • 不是一种编程语言 • 是一种描述性标记语言 • 网页是一个纯文本文档 • 描述和显示网页的国际标准 • 由万维网联盟W3C维护 • 不提供数据访问 • 支持超链接、超媒体 • 浏览器解释和显示网页内容 • .html或.htm后缀

  4. 2.浏览器：HTML解释器、网页解释器 • 网站浏览器：HTML解释器、网页解释器 • 万维网(Web)服务的客户端浏览程序 • 可向万维网(Web)服务器发送各种请求，并对从服务器发来的HTML超文本信息和各种多媒体数据格式进行解释、显示和播放 • 简言之浏览器就是访问网站的客户端工具软件 • 最常用浏览器 • 微软的Internet Explorer • 奇虎360的360安全浏览器 • Mozilla的Firefox • Apple的Safari • Opera：是一家独立的斯堪的纳维亚公司，1994 年开始从事 Web 浏览器的开发制作。 • Google Chrome等。

  5. 用户使用HTTP协议通过浏览器访问Web站点或页面用户使用HTTP协议通过浏览器访问Web站点或页面 • 网站的Web服务器软件接收到用户请求的网页时，将会把网站中的HTML文档(网页)下载到本地计算机中。 • 然后通过本地机器上的浏览器按顺序阅读网页文件，解释标记并在用户浏览器窗口中显示出来，浏览用户就能看到浏览网页的内容了。 • HTML描述文档结构、格式及内容，但并不能精确地定义文档信息显示和排列，而只是建议浏览器该如何显示和排列这些信息，最终给用户的显示效果取决于浏览器本身的显示风格及其对标记的解释能力。标准HTML在各浏览器会产生同样效果，但因浏览器制造商会支持其他制造商支持或不支持的附加代码来形成自己浏览器的特色风格。因此不同浏览器浏览效果略有不同。 3.浏览网页原理即Web浏览器基本原理

  6. 4.HTML标准： www.w3.org • 由W3C万维网联盟负责制订 • 1994年10月在麻省理工学院计算机科学实验室成立 • HTML标准定义了构成HTML语言的每一个独立元素以及这些元素是指示如何在浏览器中显示HTML文档中的指令和标记符。 • HTML标准确保在不同的浏览器和计算机平台上超文本显示的一致性。 • 但是，W3C 制定的 web 标准并非强制而只是推荐标准。

  7. 5.HTML版本历史 • HTML于1991年问世，它是在SGML基础上开发成功的，可以说它是SGML的一个子集。 • 第一版——1993年6月草案（并非标准） • HTML2.0：1995年11月发布 • HTML3.2：1996年1月14日，表格、框架 • HTML4.0：1997年12月18日，CSS，开访问性 • HTML4.01：1999年12月24日，XHTML • HTML 5.0最新草案——2008年1月22日发布，支持HTML和XHTML。 • HTML 5.0——2012年12月17日，W3C推荐标准。“HTML5是开放的Web网络平台的奠基石。” • HTML 5.1最新草案——2013年5月28日发布，该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。

  8. 6.HTML 5.0 • W3C目前建议使用XHTML 1.1、XHTML 1.0或者HTML 4.01标准编写网页，尽管有不少网页已转用较新的HTML5编码撰写。 • HTML 5.0——2012年12月17日，W3C推荐标准。“HTML5是开放的Web网络平台的奠基石。” HTML 5.1最新草案——2012年5月28日发布 • HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。 • 广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合，它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight等的需求，并且提供更多能有效增强网络应用的标准集。

  9. 7.HTML结构、标记 • HTML标记：以“<”开始，以“>”结束。标记内容描述不同对象的属性，如字体、颜色、大小、位置等。 • 用来标记文本 • 单标记：<meta>、<br>（<br>是网页中的换行） • 双标记（成对出现）：<html></html> • 注释标记：<!--注释内容-->或<!-->注释内容</!--> • 通过属性扩展HTML元素的描述能力 • 第一个标记是<html>标记HTML文件的头。 • 最后一个标记是</html>，表示HTML文件到此结束。 • <head>和</head>之间是文档头部信息。头部信息在浏览器中看不到。 • <body>和</body>之间为信息的正文。

  10. 8.HTML标记属性 • HTML元素可以拥有属性，属性具有扩展HTML元素的能力，提供了有关HTML元素的更多的信息。 • 属性总是以“名称”和“值”对的形式出现，属性值一般用双引号引起来，属性通常是附加给HTML的起始标记。 • 比如：name="value"。属性总是在 HTML 元素的开始标记中规定。 • <body bgcolor="yellow"> • <table border="0"> • <hr size="3" align="left" width="60%">:画线

  11. 9.HTML字符实体 • HTML中有些字符是保留的。例如，不允许直接在文本中输入大于号（>）或小于号（<），因为浏览器会误以为它们是标记。 • 如果希望浏览器如实显示这些字符，那么必须在HTML源代码中插入字符实体。 • 字符实体的写法如下：&实体名称; 或者 &#实体编号

  12. 10.HTML文本标记：HTML段落 • <p></p>标记对是用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。 • <p>标记可以使用align属性，它用来说明对齐方式，语法是：<p align="" > 该段落内文本 </p>。 • align可以是Left(左对齐)、Center(居中)和Right(右对齐) • 如<p align="Center"> 文本居中对齐 </p>。

  13. 11.HTML文本标记：HTML换行 • 在HTML标记中直接敲入“回车”，起不到回车换行作用。 • <br />单标记，用来创建一个回车换行。 • 例如：<p>这是<br />一个含有多个换行符的<br />段落</p>。 • 在XHTML、XML及以后版本的HTML里，所有元素都必须正确关闭，因此，应使用<br />，而不是<br>，虽然后者也能被浏览器处理。

  14. 12.HTML文本标记：定义列表 • <dl></dl>标记创建列表 • 其中每一项以<dt></dt>定义 • 每个项目以<dl></dl>定义

  15. 13.HTML文本标记：定义有序、无序列表 • 有序列表<ol></ol>定义，其中每一项以<li></li>定义 • 无序列表<ul></ul>创建，其中每一项以<li></li>定义

  16. 14.HTML文本标记：标题 • <h1></h1>…<h6></h6>。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题。 • 请勿将HTML标题标记（<h1>至<h6>等）用于除标题以外的用途。比如，不要为了把文本字体加大或加粗而使用标题标记，因为搜索引擎会使用标题为网页结构与内容编制索引，所以用标题来呈现文档结构是很重要的。

  17. 15.HTML文本标记：排版 • <b></b>用来使文本以黑体字的形式输出 • <i></i>用来使文本以斜体字的形式输出 • <u></u>用来使文本以下加一划线的形式输出； • <tt></tt>用来输出打字机风格字体文本 • <cite></cite>用来输出引用方式的字体，通常是斜体； • <em></em>用来输出需要强调的文本(通常是斜体加黑体)； • <strong></strong>则用来输出加重文本(通常也是斜体加黑体)。

  18. 16.HTML文本标记：字体 • <font></font>可以对输出文本的字体大小、颜色进行改变，这些改变主要是通过对它的两个属性size和color的控制来实现的。 • 在新版本的HTML（HTML4和XHTML）中，<font>标记已被W3C弃用，采用样式表（CSS）来定义HTML元素的布局及外观属性。

  19. 17.HTML文本标记：字体实例 <html><head> <title>文本标志的综合示例</title></head><body text="blue"> <h1>最大的标题</h1> <h3>使用h3的标题</h3> <h6>最小的标题</h6> <p><b>黑体字文本</b> </p> <p><i>斜体字文本</i> </p> <p><u>下加一划线文本</u> </p> <p><tt>打字机风格的文本</tt></p> <p><cite>引用方式的文本</cite></p> <p><em>强调的文本</em></p> <p><strong>加重的文本</strong></p> <p><font size="-1" color="red">size取值"-1"、color取值"red"时的文本</font></p> <p><font size="" color="red">size取值缺省、color取值"red"时的文本</font></p> <p><font size="+1" color="red">size取值"+1"、color取值"red"时的文本</font></p> </body> </html>

  20. 18.HTML文本标记：图像 • 语法：<img src="url" /> • 举例：<img src="images/logo.gif"> • <img>标记还有alt、align、border、width和height属性，分别表示图像备选文本、图像对齐方式、图像边框、图像的宽和高。

  21. 19.HTML文本标记：水平线 • <hr>标记是在Html文档中加入一条水平线。 • <hr>有size、color、width和noshade属性。 • size设置水平线的厚度，width设定水平线的宽度，默认单位是像素。noshade属性不需赋值，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。

  22. 20.HTML超链接 • 超链接是HTML一个很重要的特色。 • 超链接格式： <a href=”URL”>被链接的文本或图象</a> • 内部链接与外部链接 • 内部链接：本地链接与页内跳转 • 链接路径：绝对路径与相对路径。推荐“相对路径”，避免更换盘符或目录时找不到引用位置。 • 书签：链接指向同一个文件内部的某个位置 • 定义书签：<a name=”书签名”>书签文本或图象</a> • 引用书签：<a href=”#书签名”>被链接的文本或图象</a>

  23. 21.HTML表格在页面结构中的作用 • 网页结构的布局手段：表格、框架 • 表格是网页的基石，可创建复杂有效页面结构 • 控制如何在页面上放置元素以及在何处显示这些元素 • 表格能够完全控制页面及其元素 23

  24. 22.表格与框架的比较 • 表格和框架都可以构造网页的布局结构 • 表格可以很容易地为页面加书签或添加到收藏夹，框架组合页面则不可以。 • 表格布局结构在垂直或水平滚动时，页面所有内容滚动；框架布局允许创建彼此独立的页面区域。 24

  25. 23.表格基本标记 <table align= "值">规定表格相对于周围元素的对齐方式（left、center、right） 25

  26. 24.创建一个简单表格 <html> <head> <title>表格示例</title> </head> <body> <center> <table width=200 height=200 border=1 align="center" > <caption align="top"><b>学生成绩列表/b></caption><br> <tr align="center"> <td>学号</td> <td>姓名</td> <td>成绩</td> </tr> <tr align="center"> <td>001</td> <td>李明</td> <td>85</td> </tr> <tr align="center"> <td>002</td> <td>张玲</td> <td>78</td> </tr> </table> </center> </body> </html> 26

  27. 25.表格属性 • 表格大小：<table width=x1 height=x2> • x1、x2绝对值：<table width="200" height="200"> • x1、x2相对值：<table width="75%" height="50%"> • 表格颜色：<table border=1 bgcolor="#008080"> • 表格宽度：<table border=0> • 单元格间距：cellpadding、cellspacing • 表格标题：<caption align="top">学生成绩列表</caption> • 单元格背景色：<tr bgcolor="#008080"> • 水平排列：align属性left、center和right • 垂直排列：valign属性top、middle和bottom 27

  28. 26.创建一个复杂的HTML表实例 <html><head><title>创建一个复杂的表结构</title></head> <body> <table border="2"> <tr> <td rowspan="5">Cell 1</td> <td colspan="3" align="center">Cell 2</td> </tr> <tr> <td colspan="3" align="center">Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> <tr> <td colspan="3">Cell 7</td> </tr> <tr> <td colspan="3">Cell 8</td> </tr> </table> </body> </html> 28

  29. 27.创建一个简单的网页结构实例 <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>创建一个无边界网页结构</title></head> <body> <table WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="2" BORDER="0" > <tr> <td rowspan="2" WIDTH="20%" BGCOLOR="yellow" ALIGN="center" VALIGN="middle">Cell 1</td> <td HEIGHT=“20%" BGCOLOR="lightblue" ALIGN="center" VALIGN="middle">Cell 2</td> </tr> <tr> <td HEIGHT="80%" BGCOLOR="beige" ALIGN="center" VALIGN="middle">Cell 3</td> </tr> </table> </body> </html> 29

  30. 28.Border、Cellpading、Cellspacing含义 30

  31. 29.框架 FRAMESET/FRAME • 网页结构的布局手段：表、框架 • 在一个网页中可同时显示多个不同的网页 • 增加网页的可读性、可用性 • 在框架中可以创建彼此独立移动的页面区域，表格实现不了该功能。 • 框架可以组合静态信息和动态信息 • FRAMESET: 划分区域；各区域使用FRAME定义链接网页文件；位于</HEAD>和<BODY>之间。 • ROWS,COLS：绝对尺寸-像素、相对尺寸-百分数 • NOFRAME: 必须使用BODY标记符。 31

  32. 30.创建一个“行”框架组合 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中创建“行”框架组合</title> </head> <frameset rows="50%, 50%"> <frame src="sample-1001-a.htm"> <frame src="sample-1001-b.htm"> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持！ </body> </noframes> </html> 32

  33. 31.创建一个“列”框架组合 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中创建“列”框架组合</title> </head> <frameset cols="25%, 75%"> <frame src="sample-1001-a.htm"> <frame src="sample-1001-b.htm"> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持！ </body> </noframes> </html> 33

  34. 32.创建一个导航框架 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中超级链接框架的内容</title> </head> <frameset cols="25%, 75%"> <frame src="sample-1001-nav.htm"> <frame src="sample-1001-main.htm"> </frameset> <noframes> <body> 本网页使用框架技术，但浏览器不支持！ </body> </noframes> </html> 34

  35. 33.创建定位的超级链接 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在HTML中创建定位的超级链接</title> </head> <frameset cols="25%, 75%"> <frame src="sample-1003-nav.htm" NAME="nav" > <frame src="sample-1003-main.htm" NAME="main" > </frameset> <noframes> <body> 本网页使用框架，但浏览器不支持！ </body> </noframes> </html> 35

  36. 34.创建定位的超级链接 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>sample-1003-nav.htm</title> <BASE target="main"> </head> <body> <p> <a href="sample-1003-ruanjian.htm" >计算机软件研究所</a> <br> <a href="sample-1003-yingyong.htm" >计算机应用研究所</a><br> <a href="sample-1003-xitong.htm" >计算机系统结构研究所 </a> </p> </body> </html> 36

  37. 35.创建一个导航框架(续2) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>sample-1003-ruanjian.htm</title> </head> <body> 计算机软件与理论研究所包括四个教学研究群体，分别形成计算机虚拟现实与人机交互研究室；软件与数据工程研究室；智能计算理论与技术研究室；软件工程研究室 </body> </html>

  38. 36.创建定位的超级链接 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>导航</title> <BASE target="main"> </head> <body> <p> <a href="sample-1003-ruanjian.htm" >计算机软件研究所</a> <br> <a href="sample-1003-yingyong.htm" >计算机应用研究所</a><br> <a href="sample-1003-xitong.htm" >计算机系统结构研究所 </a> <br> <a href="http://www.sdu.edu.cn" target="_top" >山东大学</a> <!-- 在顶级窗口显示该网页--> <br> <a href="http://www.sdu.edu.cn" target="_blank" > <IMG SRC="sdu.jpg" border="0"></a> <!-- 在一个新窗口显示该网页--> </p> </body> </html> 38

  39. 37.框架嵌套 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>框架嵌套</title> </head> <frameset cols="28%,72%"> <frame src="sample-1007-nav.htm" NAME="nav"> <FRAMESET ROWS="30%,70%"> <FRAME SRC="sample-1007-head.htm" NAME="head"> <frame src="sample-1007-main.htm" NAME="main"> </FRAMESET> </frameset> <noframes> <body> 本网页使用框架，但浏览器不支持。 </body> </noframes> </html> 39

  40. 38.框架组合 <html> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>框架组合sample-1208.htm</title> </head> <frameset rows="*" cols="33%,67%"> <frame src="sample-1008-nav.htm" NAME="nav"> <FRAMESET ROWS="48%,55%" cols="*"> <FRAME SRC="sample-1008-head.htm" NAME="head"> <frame src="sample-1008-main.htm" NAME="main"> </FRAMESET> </frameset> <noframes> <body> 本网页使用框架，但你的浏览器不支持。 </body> </noframes> </html> 40

  41. 38.框架组合(续1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>sample-1008-head.htm</title> </head> <body> <a href="sample-1008-subframeset.htm"> 子框架 </a> </body> </html> 41

  42. 38.框架组合(续2) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>sample-1008-subframeset.htm</title> </head> <frameset ROWS="50%,*" cols="*"> <FRAME SRC="sample-1008-subhead.htm" NAME=“top"> <frame src="sample-1008-submain.htm" NAME=“bottom"> </frameset> <noframes> <body> 本网页使用框架，但浏览器不支持！ </body> </noframes> </html> 42

  43. 39.框架组合属性 • FRAMEBORDER：设置边框宽度像素数(HTML4,MS),0无框 • BORDER: 设置边框宽度像素数(Netscape)，0无框 • NORESIZE: 禁止访问者调整框架的大小 • FRAMESPACING: 控制框架间的总间距(IE) • SCROLLING: 滚动条设置，YES、NO、AUTO • MARGINHEIGHT: 框架的上下边界像素数 • MARGINWIDTH: 框架的左右边界像素数 • BORDERCOLOR: 设置边框的颜色 43

  44. 40.HTML表单 • 表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息，使网页具有交互的功能。 • <form></form>标记对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。 • <form>标志具有action、method和target属性。 • action处理程序名(包括网络路径:网址或相对路径)，如：<form action="http://xld.home.chinaren.net/counter.cgi">，当用户提交表单时，服务器将执行网址上的名为counter.cgi的CGI程序。 • method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。 • target属性用来指定目标窗口或目标帧。 44

  45. 41.HTML表单标记 45

  46. 42.HTML表单标记属性 46

  47. 43.HTML表单示例 47

  48. 44.HTML缺陷 • 文本格式的局限 • 缺乏对布局控制的能力 • 无法动态改变页面内容 • 交互困难 • 适应性差：不能在计算机和手机、PDA以及智能家电中统一编写网页 • 不能访问数据库

  49. 45.HTML扩展技术 • 动态HTML又称为DHTML：DOM（文本对象模型）、CSS（层叠样式表）和Script（脚本语言，比如VBScript和JavaScript）。 • XML是“Extensible Markup Language”的缩写，即可扩展标记语言：跨平台的、依赖于内容的技术，是这个时代中处理分布式结构信息的选择工具。XML的更重要的作用在于它可以表示结构化的数据，而有利于数据交换。 • XHTML是“eXtensible HyperText Markup Language”，即可扩展超文本标记语言：按照W3C的官方解释，它是一种使用XML语法对HTML重新阐述的语言。XHTML是在2000年1月26日被国际标准组织机构W3C定为一个标准的，认为是HTML的一个最新版本，并且将逐渐替换HTML。现在所有的浏览器都支持XHTML，XHTML兼容 HTML 4.0。

  50. 第10章 小结 • 框架概述 • 简单框架 • 嵌套框架 • 组合框架 • 框架属性 • HTML简介 • HTML标准 • HTML标记与属性 • HTML中的超链接 • HTML表单 • 表格在页面结构中的作用 • 表格与框架的比较 • 创建网页结构实例说明

More Related