|
|
|
超文本是指用超链接的方法将各种不同空间的文字信息组织在一起的网状文本。超文本是一种用户界面范式，用于显示文本及与文本相关的内容。现在，超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他位置或者文档的连接，允许从当前阅读位置直接切换到超文本链接所指向的位置。超文本的格式有很多，目前最常使用的是超文本标记语言。人们日常浏览的网页上的链接都属于超文本。
|
|
|
|
超文本不是顺序的，而是一个非线性的网状结构，它把内部原本固有的独立性和相关性划分成不同的基本信息块，称为节点（node）。以节点作为信息的单位，一个节点可以是一个信息块，也可以由若干节点组成一个信息块，在超文本数据库内部，节点之间用链连接起来，形成网状结构。下图是具有6个节点和9条链路的超文本结构，它可以是文本、图像、图形、声音、动画或它们的组合体。
|
|
|
|
|
|
|
|
超文本的基本特征是可以超链接文档。可以指向其他位置，该位置可以是当前的文档或局域网中的其他文档，也可以在因特网上的任何位置的文档中。这些文档组成了一个杂乱的信息网。目标文档通常与其来源有某些关联，并且丰富了来源；来源中的链接元素则将这种关系传递给浏览者。
|
|
|
|
超文本具有三个特性：多媒体信息、网络结构模式、交互特性。
|
|
|
|
|
|
HTML即超文本标记语言（Hypertext Markup Language），是用于描述网页文档的一种标记语言。HTML是组织多媒体文档的重要语言，它不仅可以用来编写Web网页，还可以用来制作光盘上的多媒体节目。HTML可以用来编排文档、创建列表、建立链接、插入声音和视频。
|
|
|
|
|
|
万维网（Web）是一个信息资源网络，它之所以能够使这些信息资源为广大用户所利用，主要依靠以下三个基本技术。
|
|
|
|
. 指定网上信息资源地址的统一命名方法：URL（Uniform Resource Locator）。
|
|
|
|
. 存取资源的协议：超文本传送协议（Hypertext Transfer Protocol, HTTP）。
|
|
|
|
. 在资源之间很容易浏览的超文本链接技术：源于HyperText的HyperLink。
|
|
|
|
为了出版可在全球发行的信息，人们需要一种所有计算机都能理解的出版语言，这就是HTML语言。HTML可用于以下方面。
|
|
|
|
. 出版联网文档，这种文档包含标题、文字、表格、列表、图像以及声音和视频文件等。
|
|
|
|
|
|
. 设计交易单（FORM/form）。这是一种用来从读者处收集信息的Web文档，可以与远程服务单位进行交易，例如查找信息以预约旅馆的房间、订购产品等。多数交易单至少有一个可供输入文本数据（例如名字或者搜索关键字）的文本域。很多较为精致复杂的表单还包括用于切换选项的复选框、从几个选项中选择其一的单选按钮和执行任务（例如提交表单）的按钮。
|
|
|
|
|
|
一个HTML文档通常由文档头（head）、文档名称（title）、表格（table）、段落（paragraph）和列表（（list）等成分构成，它们是文本文档的基本构件，并且使用HTML规定的标签（tag）标识这些元素。
|
|
|
HTML标签由三部分组成：左尖括号（<）、“标签名称”和右尖括号（>）。标签通常是成对出现的，左尖括号表示开始的开始标签（start tag），右尖括号表示结束的结束标签（end tag）。例如，与分别表示一级标题的开始标签和结束标签，H1是一级标签的名称。除了在结束标签名称前面加一个斜杠符号（/）之外，开始标签的名称和结束标签的名称都是相同的。
|
|
|
|
某些元素还可以包含属性（attribute）。属性指背景颜色、字体属性（大小、颜色、正体、斜体等）、对齐方式等，它是包含在开始标签中的附加信息。例如， 表示这段文字是居中对齐的。同样可以指定图像的对齐属性（如图像在顶部、底部或中间）。
|
|
|
|
注意，HTML标签名称中的字母不区分大小写。例如，与<TITLE>或者<TiTlE>都是等效的。此外，Web浏览器不一定支持所有HTML标签。如果一个浏览器遇到它不认识的标签，那么它就不予理睬，但在这对标签之间的文本仍然会显示在计算机屏幕上。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> ③HTML文档的结构。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML文挡是一种没有格式的文档，也称ASCII文件。因此，HTML文档可以使用任何一种文本编辑器进行编写。例如，Windows系统中的记事本（Notepad）、写字板（Wordpad），当然也可以使用字处理软件，例如微软公司的Word等。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 每个HTML文档都是由标签<HTML>开始、以标签</HTML>结束的。每个HTML文档都分成两个组成部分：文档头（head）和正文（body），并分别用<HEAD>…</HEAD>和<BODY>…</BODY>进行标记。文档头标签<HEAD>…</HEAD>之间所包含的内容是文档的名称（title）。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 下图是利用记事本编写的一个简单的HTML示例代码，将其保存后，利用IE浏览器打开后的效果如下图所示。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0063_0037.jpg" target="_blank"><img alt="" width="205.53" height="84.89" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0063_0037.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML的编辑及效果图
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_title_v2">
HTML5
</span>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML标准自1999年12月发布4.01版本后，连续多年都没有再推出新的版本。为了推动Web标准化的发展，一些公司联合起来成立了一个名为WHATWG（Web Hypertext Application Technology Working Group, Web超文本应用技术工作组）的组织。WHATWG致力于Web表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）则专注于XHTML 2.0。2006年，双方决定合作创建一个新版本的HTML，这就是HTML5。HTML5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML5的第一份正式草案于2008年1月22日公布。然而，大部分现代浏览器已经具备了某些HTML5支持。2012年12月17日，W3C正式宣布HTML5规范草案正式定稿，这也使得HTML5成为开放Web网络平台的基石。2013年5月6日，HTML5.1草案公布，该规范定义了第五次重大版本，第一次重大修订了超文本标记语言。在这个版本中，新功能不断推出，以帮助Web应用程序的作者努力提高新元素的互操作性。2014年10月29日，W3C正式宣布，经过近8年的艰辛努力，HTML5标准规范终于制定完成，并已公开发布。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 在此之前的几年时间内，已经有很多开发者陆续使用了HTML5的部分技术，Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML5相对于HTML4.01版本有了重大修改，下面着重介绍其部分新特性。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> ①语义化结构。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 为了能够更好地创建页面结构，HTML5提供了一些新的元素，删除了部分HTML 4.01的元素。HTML5添加的部分新元素如下表所示。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0064_0038.jpg" target="_blank"><img alt="" width="224.64" height="136.5" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0064_0038.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML5的新增元素
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 下面是利用HTML5编写的简单实例，实现功能与2.5节例子的功能类似，实现效果如下图所示。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0039.jpg" target="_blank"><img alt="" width="164.19" height="38.61" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0039.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> IE显示的HTML5代码效果
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0040.jpg" target="_blank"><img alt="" width="225.03" height="99.84" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0040.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> ② video和audio。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 原来的HTML不提供对video和audio的直接支持，video和audio都是通过插件（如Flash）显示的，这就存在一个问题：并非所有浏览器都拥有同样的插件，导致视频的观看不能得到有效统一。HTML5通过video元素和audio实现了显示视频和音频的标准方法。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <video>元素支持三种视频格式：MP4、WebM和Ogg。MP4专指带有H.264视频编码和AAC音频编码的MPEG 4文件，WebM是指带有VP8视频编码和Vorbis音频编码的WebM文件，Ogg是指带有Theora视频编码和Vorbis音频编码的Ogg文件。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <audio>元素也支持三种音频格式文件：MP3、Wav和Ogg。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 在网页中显示音／视频的代码如下。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0041.jpg" target="_blank"><img alt="" width="221.0" height="56.03" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0065_0041.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0066_0042.jpg" target="_blank"><img alt="" width="221.39" height="22.62" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0066_0042.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 如果浏览器支持video和audio标签，则以320×240的尺寸正常显示视频和音频，若不支持则显示标签中的文字。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> ③ canvas。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML5中的<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）完成。<canvas>标签只是图形容器，必须使用脚本绘制图形，可以通过多种方法使用canva绘制路径、盒、圆、字符以及添加图像。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 下面是利用JavaScript绘制一个红色矩形的代码。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> <a href="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0066_0043.jpg" target="_blank"><img alt="" width="222.17" height="111.54" src="https://www.rkpass.cn/ruankao_work_version_0103/content_image/9/9787302532279_0066_0043.jpg" /></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 利用JavaScript代码进行绘图的主要步骤如下。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> . 通过id获取画布的dom元素。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> . 创建context对象，getContext（“2d”）对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> . fillStyle属性可以是CSS颜色、渐变或图案。fillStyle默认设置为#000000。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> . fillRect（x, y, width, height）方法定义了矩形当前的填充方式。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> HTML5还提供了很多常用的API，如Websock、svg、Web存储、地理定位等，感兴趣的读者可以查询资料深入学习，此处不做过多介绍。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="" height="30" bgcolor=""></td>
</tr>
</table>
<!--一个完整知识点的区域 结束-->
</td>
</tr>
</table>
<table width="100%" border="0" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" height="13" bgcolor="#f8f8f8" align="center"><span id="mao_zsd_202102091159029044394"> </span>
</td>
</tr>
<tr>
<td width="100%" align="center">
<!--一个完整知识点的区域 开始-->
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" align="center" colspan="" height="" bgcolor="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0" style=" BACKGROUND: #ffffff; RIGHT: 0px; TOP: 0px; left: 0px;POSITION: relative; HEIGHT: 32px;" >
<tr>
<td width="100%" align="left" colspan="2" height="30"></td>
</tr>
<tr>
<td width="100%" colspan="2" align="left" valign="top">
<table width="100%" border="0" bgcolor="" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" valign="" width="100%">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" class="search_kemu">
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="" width="100%" height="6">
<span class="word_title_v2_blue"> 文本</span>
</td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="10"></td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="1" bgcolor="#e4e4e4"></td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="6"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 文本指各种字符，包括数字、字母和文字等。文本可以先在Word文字处理软件中编辑制作，然后导入集成到多媒体系统中，也可以直接在图形／图像设计软件中编辑制作。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="" height="30" bgcolor=""></td>
</tr>
</table>
<!--一个完整知识点的区域 结束-->
</td>
</tr>
</table>
<table width="100%" border="0" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" height="13" bgcolor="#f8f8f8" align="center"><span id="mao_zsd_201912290936386716934"> </span>
</td>
</tr>
<tr>
<td width="100%" align="center">
<!--一个完整知识点的区域 开始-->
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" align="center" colspan="" height="" bgcolor="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0" style=" BACKGROUND: #ffffff; RIGHT: 0px; TOP: 0px; left: 0px;POSITION: relative; HEIGHT: 32px;" >
<tr>
<td width="100%" align="left" colspan="2" height="30"></td>
</tr>
<tr>
<td width="100%" colspan="2" align="left" valign="top">
<table width="100%" border="0" bgcolor="" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" valign="" width="100%">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" class="search_kemu">
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="" width="100%" height="6">
<span class="word_title_v2_blue"> 超文本</span>
</td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="10"></td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="1" bgcolor="#e4e4e4"></td>
</tr>
<tr>
<td align="left" valign="" width="100%" height="6"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="" bgcolor="" width="100%" style=" " >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<td height="">
<table width="100%" border="0" bgcolor="" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom" width="100%" height="28">
<span class="word_content_v2"> 超文本（Hypertext）一般是指含有超级链接的文本。超链接往往是上下文的关联词，通过选择超链接可以跳转到其他文本信息。
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="" height="30" bgcolor=""></td>
</tr>
</table>
<!--一个完整知识点的区域 结束-->
</td>
</tr>
</table>
<table width="100%" border="0" bgcolor="#f8f8f8" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" height="13" bgcolor="#f8f8f8" align="center">
</td>
</tr>
</table>
<script type="text/javascript" src="https://www.rkpass.cn/ad/ad_i_350_60.jsp?from=i_timu_pc"></script>
<table width="100%" border="0" bgcolor="#f8f8f8" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" height="13" bgcolor="#f8f8f8" align="center">
</td>
</tr>
</table>
<script type="text/javascript" src="https://www.rkpass.cn/ad/ad_i_zishiying_zhengfangxing.jsp?from=i_timu"></script>
<!--知识点区域结束-->
<br>
<br>
</td>
</tr>
</table>
<script type="text/javascript" src="../tk_tishi_unsubscribe.jsp"></script>
<!--任何页面都有foot_x-->
<!--
<script type="text/javascript">
/*移动-方块*/
var cpro_id = "u2014899";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/cm.js" type="text/javascript"></script>
-->
<table width="100%" border="0" align="center" cellpadding="0" bgcolor="#f1f1f1" cellspacing="0" >
<tr>
<td width="100%" align="left" colspan="2" height="1" bgcolor="#e0e0e0"></td>
</tr>
<tr align="center">
<td width="100%" align="center" valign="middle">
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center" >
<td align="center" >
更多复习资料<br>请登录电脑版软考在线 www.rkpass.cn
<br><br>
<span class="hui_xiao">京B2-20210865</span> <span class="hui_xiao">|</span> <span class="hui_xiao">京ICP备2020040059号-5</span>
<br>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502032051" ><img src="https://www.rkpass.cn/image/gongan.png" width="20" height="20" border="0"/><span class="hui_xiao">京公网安备 11010502032051号</span></a> <span class="hui">|</span> <a href="https://www.rkpass.cn/image/yyzz.jpg" target="_blank"><span class="hui">营业执照</span></a>
<br>
<span class="hui_xiao"> Copyright ©2000-2025 All Rights Reserved <br>软考在线版权所有</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--任何页面都有foot_y-->
<table width="100%" border="0" align="center" cellpadding="0" bgcolor="#f1f1f1" cellspacing="0" >
<tr align="center">
<td width="100%" align="center" valign="middle">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center" >
<td align="center" >
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f7e4c3c7e4d92abbcc231d25f16df4c3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!--
<script src="http://s25.cnzz.com/stat.php?id=5504760&web_id=5504760" language="JavaScript"></script>
-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>
| | |
