1、文本元素2.1群组元素2.2超链接元素2.3表格元素2.4内嵌元素2.5结构元素2.6编辑元素2.7表单元素2.8头部元素2.9HTML中的颜色设置2.10绝对路径与相对路径2.11思考题2.12在HTML中，文本元素（Text-level semantics）用来定义网页中文本内容和语义，增加文字的易读性。文本元素主要包括、等。虽然文本的显示样式通常是由CSS来定义，但文本元素的语义也会影响文本的显示风格，比如上标（sup）、下标（sub）等文本。em定义强调文本，显示为斜体字 strong定义强调文本，显示为粗体 small定义小号文本 s定义加删除线的文本 sub定义下标文本，比如a2
2、sup定义上标文本，比如a2 i定义斜体文本 b定义粗体文本 u定义下划线文本 mark定义有加亮记号的文本 中 zhong 文 wen 在HTML中，群组元素（Grouping content）用来定义网页中具有关联性的内容和语义。群组元素主要包括、等。与文本元素一样，群组元素的语义也会影响显示风格，比如多个列表项元素在显示时通常会在前面加上数字序号或图形符号。这是段落。hr 标签定义水平线：pre 标签很适合显示计算机代码：for i=1 to 10 print i next i 段落前面有缩进 咖啡 牛奶 茶 咖啡 茶 红茶 绿茶 牛奶 一个定义列表：计算机 用来计算的仪器.显示器 以视
3、觉方式显示信息的装置.div元素o元素用来将页面内容分割成各个独立的部分。o在每个元素中，不仅可以包含文本内容，也可以包含图片、表单等其他内容。在默认的情况下，元素所包含的内容，将在新的一行显示。属性属性描述描述dir设置文本显示方向lang设置语言class类属性style设置级联样式title标题属性nowrap取消自动换行id标记属性 .网页之间的链接（Links）能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。超链接就像整个网站的神经细胞，把各种信息有机地结合在一起。在HTML中，超链接可以通过元素和嵌套在元素内部的元素来实现。关于元素将在嵌入式元素中展开描述，本节将主要
4、讨论元素。属性属性描述描述href链接的目标 URL。hreflang规定目标 URL 的基准语言。仅在 href 属性存在时使用。media规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。rel规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。target在何处打开目标 URL。仅在 href 属性存在时使用。type规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME=Multipurpose Internet Mail Extensions。文本链接是最常见的一种超链接，它通过网页中的文件和其他文件进行链接
5、，语法如下：链接元素 链接元素可以是文字，也可以是图片或其他页面元素。href属性是元素最常用的属性，用来指定链接目标的URL地址。链接地址可以是绝对地址，也可以是相对地址。例如链接到W3C官方网站，并打开新的浏览器显示该网站，实现代码如下：W3C target属性的取值及功能说明target值值目标窗口的打开方式目标窗口的打开方式_parent在上一级窗口打开，常在分帧的框架页面中使用。_blank新建一个窗口打开。_self在同一窗口打开，与默认设置相同。_top在浏览器的整个窗口打开，将会忽略所有的框架结构。书签链接也是常用的一种超链接，用来在创建的网页内容特别多时对内容进行链接。书签可
6、以与所链接文字在同一页面，也可以在不同的页面。建立书签的语法如下：文字在代码的前面增加链接文字和链接地址就能够实现同页面的书签链接。语法如下：链接的文字其中，#代表这是书签的链接地址，书签的名称则是上面定义的书签名。如果想链接到不同的页面需要在链接的地址前增加文件所在的位置。语法如下：链接的文字在HTML5中使用、等表格元素构建和展示表格式数据（Tabular data）。元素可以用来定义表格，包括表格的标题、表头及单元格内容等。作为元素的子元素，表格行用定义，表头元素用元素定义（表头通常显示成黑体），单元格内容用元素定义。一个 元素可包含一个或多个元素，一个元素又可以包含一个或多个、元素。标
7、签标签语义语义table定义表格caption定义表格标题tr定义表格中的行td定义表格中的单元th定义表格中的表头单元格colgroup定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。col为表格中的一个或多个列定义属性值。tbody定义表格主体。thead定义表格的表头。tfoot定义表格的页脚。a1 b1 c1 a2 b2 c2 跨两列的单元格 姓名 电话 张小明 13999912345 325330425 除了文字信息，网页中还可以呈现图形、图像、音频、视频等多媒体信息。为了丰富网页的表现方式，HTML5允许以内嵌元素(Embedded content)的方式在网页中嵌入图
8、形、图像、视频、音频以及其他可操作的对象。相关的元素包括、系列和系列。元素元素语义语义img定义 HTML 页面中的图像。iframe定义包含另一个文档的行内框架。embed定义嵌入的内容，比如插件，元素必须有 src 属性。object定义一个嵌入的对象。param为包含它的object元素提供参数。video定义视频，如电影片段或其他视频流。audio定义声音，如音乐或其他音频流。source为媒介元素（如 和）定义媒介资源。track为video等媒介指定外部字幕。map定义客户端的图像映射，图像映射是带有可点击区域的图像。area定义图像映射内部的区域。MathML在文档内使用.标签应
9、用各种MathML元素。SVG在文档中定义可缩放矢量图形。HTML提供了元素用来描述图像信息的内容和表现形式，但图像的数据并不会直接插入HTML文档中，元素的作用是让HTML文档在展示时给图像留出一个位置。图像文件的地址由元素的src属性指定，当浏览器无法下载图像文件时，则在相应的位置显示一些文字，文字的内容由alt属性指定。图像的大小可以在元素中使用width和height属性给出，如果不设置这两个属性，则将默认为按照图像的实际尺寸显示。支持最多256色的图像。虽然GIF的颜色不够丰富，但它支持动画和透明色，在网页中常常被用来设计按钮、菜单等较小的图像。GIF 可以支持高分辨率、颜色丰富的图
10、像。由于JPG具有很好的压缩比，非常适合在网页中展现照片。当然，在使用JPG格式处理图像时，压缩比越大，图片的质量就越差。JPG 可以支持颜色丰富的图像，同时还可支持alpha滤镜的透明方式。虽然PNG不支持动画效果，但与GIF一样适合作为较小的图像的显示方式。PNG 元素的usemap属性可以指定可点击区域的图像映射元素，而图像映射元素本身的设置是在元素中，其中的元素则给出了具体的区域和超链接的位置，功能类似于元素。下列代码给出了图像映射的方式，即在一个图像中设置了三个不同形状的区域，当用户点击这些区域时会产生如同超链接的效果。在早期的网页设计中，开发者经常使用框架标记把浏览器窗口划分成几个
11、大小不同的子窗口，每个子窗口显示不同的页面，也可以在同一时间浏览不同的页面。定义子窗口使用元素。HTML5已经不再支持与元素，但仍然支持创建包含文档的内联框架的元素。元素元素语义语义HTML支持版本支持版本定义框架集4定义框架集的子窗口4创建包含另一个文档的内联（inline）框架4、5 元素可以构成“浮动”的框架，可以在一个HTML文档的一个特定区域中展示另一个HTML文档。属性属性功能功能height定义内联框架的高度name定义内联框架的名称sandbox使内联框架可以包含其他的一些内容，例如表格，脚本等seamless布尔型属性，使内联框架看起来像包含它的文件的一部分（没有边框和滚动条
12、等）src设置内联框架所引用的地址srcdoc定义在内联框架中显示的HTML内容，与sandbox 和seamless一起使用width定义内联框架的宽度 百度 注意：因为超链接的目标表明为iframe，因此当点击超链接时会在iframe中显示百度页面根据HTML5的规范，在网页上呈现的视频和音频需要符合一定的标准，否则就通过插件（如 activeX）来呈现。元素用来定义声音，如音乐或其他音频流。与 之间插入的内容是供不支持 audio 元素的浏览器显示的。属性属性值值描述描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性
13、，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的音频的 URL。你的浏览器不支持音频元素。元素用来定义视频，如电影片段或其他视频流。与之间插入的内容是供不支持 video元素的浏览器显示的。属性属性值值描述描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度
14、。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。你的浏览器不支持视频元素。A =x y MathML中的一系列元素可以帮助在HTML文档内显示数学公式，并且这些元素本身也具有相应的语义。注意：并不是所有的浏览器都能显示MathML标签，因此在网站中使用这个系列的元素时需要告知所支持的浏览器及版本情况。根据HTML5的规范，和元素都可以完成在网页中的绘图功能。与元素不同的
15、是，SVG是一种使用XML描述2D图形的语言，SVG中所描述的2D图形元素是以矢量图形对象的方式存在，不依赖分辨率，可以附加JavaScript事件处理器。可以通过JavaScript来修改图形对象的属性，浏览器会自动重绘图形。注意，一些浏览器需要插件才能支持SVG。HTML本身的元素是有限的，特别是在HTML5之前的版本，开发者为了在HTML页面中实现多媒体应用和更复杂的客户端操作，就需要在HTML文档中增加各种插件对象以扩展文档的表现能力。自从1996年Netscape Navigator 2.0引入了对QuickTime插件的支持，插件这种开发方式为其它厂商扩展Web客户端的信息展现方式
16、开辟了一条自由之路。微软公司迅速在IE 3.0浏览器中增加了对ActiveX的插件对象支持，Real Networks公司的Realplayer插件也很快在Netscape和IE浏览器中取得了成功。然而，随着HTML5标准的制定与应用，通过使用新技术（包括音频元素、视频元素、矢量图形元素、应用缓存）让浏览器直接支持相关的多媒体或交互应用，这种技术趋势必然导致Flash等很多传统的插件技术被新的技术标准取代。Java小应用程序（Java Applet）凭借Java本身的跨平台性、安全性等优点，可以实现图形绘制、字体和颜色控制、动画和声音的播放、人机交互及远程数据访问等功能。Java小应用程序 A
17、ctiveX是Microsoft对于一系列面向对象程序技术和工具的称呼，其中主要的技术是组件对象模型（Component Object Model，简称为COM）。ActiveX只能在Windows环境下运行。ActiveX Flash是一种基于矢量图像的交互式多媒体技术。矢量图像也称为面向对象的图像，它使用称为矢量的直线和曲线来描述图像。FlashHTML5中支持的多种结构元素来呈现文档中的各节（Sections）内容，包括HTML4中已经定义的、和元素，以及HTML5中新定义的、和元素。元素元素语义语义body定义文档的主体。h1到到h6定义标题1到标题6。address定义文档作者或拥有
18、者的联系信息。article定义外部的内容。section定义文档中的节。如章节、页眉、页脚或文档中的其他部分。nav定义导航链接的部分。aside定义article以外的内容，且与article的内容相关。header定义文档的页眉。footer定义文档的页脚。这是标题1 这是标题2 这是标题3 这是标题4 这是标题5 这是标题6在HTML5中新增了、等新元素，而这些元素的作用主要体现在语义上，主要目的是增加文档的可读性和搜索引擎优化，在内容展示方面并没有特别的改变。为了方便理解，这里将这些结构元素和word文档结构进行类比：相当于页眉，相当于页脚，相当于正文，是正文中包含的各个部分（可以理
19、解为段落或章节），是正文的注解，而则是网站中经常使用的导航栏。HTML5中的编辑元素（Edits）包括和，它们配合可以描述对文档的更新和修正。元素元素语义语义HTML支持版本支持版本ins定义文档的其余部分之外的插入文本。4、5del定义文档中已删除的文本。4、5 我喜欢吃苹果。我喜欢吃梨。元素在页面中产生表单，表单提供了用户与Web服务器的信息交互功能，是Web技术的要素之一。表单接受用户信息后，把信息提供给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。表单的定义元素是。表单中可以包含、等子元素。元素元素语义语义HTML支持版本支持版本form定义供用户输入的 H
20、TML 表单。4、5input定义输入控件4、5label为input元素定义元素，响应鼠标点击。5button定义按钮。4、5select定义选择列表（下拉列表）。4、5datalist与input元素配合使用，定义input可能的值。5optgroup定义选择列表中相关选项的组合4、5option定义选择列表中的选项4、5textarea定义多行的文本输入控件4、5keygen定义用于表单的密钥对生成器字段。5output定义不同类型的输出，比如脚本的输出。5progress定义运行中的进度。5meter定义度量衡。5fieldset将表单内的相关元素分组。4、5legend定义field
21、set 元素的其余内容的标题。4、5元素的4个主要属性分别是action、method、enctype、target。例如下面的代码：该属性值指定了提交表单时对应的服务器程序地址。action属性 method属性指定表单中的输入数据的传输方法，它的取值是get或post。method属性 enctype属性指定表单中输入数据的编码方法。enctype属性 target属性用来指定目标窗口的打开方式。target属性input元素定义输入控件，用来搜集用户信息。属性属性功能功能name定义输入控件的名称type指定控件的类型，默认值是textmaxlength规定控件允许输入的字符的最大长度m
22、inlength规定控件允许输入的字符的最小长度size规定控件输入域的大小readonly规定用户是否可以修改其中的值。required规定是否是必填信息multiple规定是否可以填写多个值pattern定义用户输入的字符串模板max规定可填写的最大值min规定可填写的最小值step规定数据的步长list列出输入的选项placeholder给出文本框的占位字符串，可实现文本框水印效果checked提供复选框和单选按钮的初始状态value提供控件输入域的初始值src定义以提交按钮形式显示的图像的 URL元素的属性type的取值及意义值值功能功能hidden隐藏的输入字段，把表单中的一个或多个
23、组件隐藏起来text单行的输入文本框，接受任何形式的输入，默认宽度为 20 个字符tel电话号码输入url网络地址URL输入email电子邮件地址输入password密码字段，该字段中的字符用*替代date日期输入time时间输入number数字输入range范围输入color颜色输入checkbox复选框，提供多项选择radio单选按钮，提供单项选择file文件上传submit提交按钮，单击提交按钮会把表单数据发送到服务器image图像形式的提交按钮，单击图像，发送表单信息提交服务器reset重置按钮，把表单中的所有数据恢复为默认值button可点击按钮，可用于创建提交按钮、复位按钮和普通按
24、钮 请输入姓名：请输入密码：上传的文件：请选择旅游城市，可多选 北京 请选择付款方式 信用卡 出发日期 出发时间 元素定义下拉式列表框和滚动式列表框。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表。在将表单数据提交给服务器时，同时还包括了元素的name属性值。属性属性功能功能disabled规定禁用该下拉列表，被禁用的下拉列表既不可用，也不可点击。可以使用 JavaScript 来清除 disabled 属性，以使下拉列表变为可用状态multiple规定可选择多个选项name规定下拉列表的名称size规定下拉列表中可见选项的数目元素的语法如下所示
25、:选项描述选项描述使用元素定义下拉列表框时，由元素定义列表框的各个选项。元素位于元素内部。一个元素可以包含多个元素。元素要与元素一起使用，否则元素是无意的。和是在HTML5中新增的元素。元素可以用来显示正在执行的状态或进度情况，配合JavaScript程序，可以控制元素中的value属性，以精确地显示进展情况。元素可以以直方图的形式显示值的大小。为了实现直方图的显示，除了需要通过value属性给出具体的数值，还需要通过min和max属性给出该直方图的最小和最大值，以便可以按比例进行显示。min和max属性的缺省值为0和1。下载进度：显示度量值：3/10 60%元素可以将表单中的一部分内容组合起
26、来，生成一组相关表单的字段。当一组表单元素作为子元素放到元素内时，浏览器通常会以加上边框的方式进行显示。作为元素的第一个子元素，元素可以为元素加上标题。健康信息：身高：体重：元素中可以嵌入脚本程序，HTML5中脚本程序默认是用JavaScript语言书写；当浏览器不支持脚本程序的执行，则会显示元素中的内容。元素中可以定义前端模板，可以通过JavaScript代码进行调用；元素用来绘制2D图形，这与SVG的作用相似。不同的是，元素的绘图机制依赖于分辨率、不支持事件处理器，但可以按照像素重新生成。元素也需要JavaScript代码的支持。元素元素语义语义HTML支持版本支持版本script定义客户
27、端脚本。4、5noscript定义在脚本未被执行时的替代内容（文本）。4、5template定义模板元素。5canvas定义图形。5 头部元素中可以包含多个元素用来描述脚本、链接样式表、提供元信息等，这些信息虽然不能直接在页面上展示，但对于文档的说明、可读性和搜索引擎优化等方面至关重要。元素的子元素包括、和等。元素元素语义语义HTML支持版本支持版本head所有头部元素的容器。4、5title定义了HTML文档的标题4、5base描述了页面中所有超链接的默认超链接基地址（用href属性指定）和默认目标（用target属性指定）4、5link定义HTML文档和外部资源的关系4、5meta给出HT
28、ML文档的元数据4、5style定义样式定义4、5 Title of the document The content of the document.元素用来定义HTML文档和外部资源的关系，通常用来声明HTML所引用的CSS文档。例如下面的代码中链接了一个名为mystyle.css的文档：除了链接，在HTML中还可以直接嵌入CSS样式代码。下例中使用元素来完成这一任务：body background-color:yellow;p color:blue;元素可以给出HTML文档的元数据（metadata）。元数据不会在网页中显示，但会被浏览器、搜索引擎等程序解析和应用。在下面的代码中，通过元
29、数据给出了页面的简述、关键词、作者、字符集等信息：元素所给出的网页元数据对于搜索引擎判断网页类型、内容都很有帮助。HTML中的颜色是由红（Red）、绿（Green）、蓝（Blue）三种颜色组合而成的RGB值来表示。RGB中三个颜色的值分别都可以从0（十六进制记作#00）到255（十六进制记作#FF），所以可以组合出16777216（256 x 256 x 256）种颜色。比如，红色为#FF0000，黄色为#FFFF00，黑色为#000000，白色为#FFFFFF。在HTML标准中，有许多种颜色还可以直接用颜色名称表示，比如aqua、black、blue、gray、green、purple、re
30、d、white和yellow等。Color set by using hex value Color set by using rgb value Color set by using color name 绝对路径来说明文件的位置 Hello!上述的代码语法正确，也能达到预定的效果，但却不符合软件工程的要求。网站在设计开发和运行维护的过程中需要不断进行适当修改，甚至可能会整体迁移（从一个域名变为另外一个域名）。在这类情况下，绝对路径的缺点会非常明显，不便于系统的开发和维护。相对路径的描述方式u如果该HTML文档和被引用的文档在同一个目录下，则直接写引用文件名即可。u如果被引用的文档是在该HT
31、ML文档的下一级目录，则使用在之前加入子目录的名称即可。例如“img/abc.jpg”。u如果被引用的文档是在该HTML文档的上一级目录，则可使用“.”来说明。例如“./abc.htm”。前面列举的几个绝对路径的描述可改为如下相对路径：Hello!或以“/”开头来描述：Hello!这种方式的好处在于，文件的引用不受该HTML文件本身路径的影响，便于开发和维护。（1）HTML是一种计算机语言，它与同样也是计算机语言的C语言等都什么本质的不同？（2）相对之前的标准，HTML5的主要变化包括哪些？（3）表格元素在页面设计中非常重要，特别是在商业系统中的数据展示方面尤为常用。请说明、元素分别具有什么功
32、能。（4）超链接元素中可以设置target属性，请分别描述target属性的不同取值及功能。（5）HTML中支持插入的图像文件格式主要有哪些，它们各有什么特点？（6）请在不同的浏览器中测试它们对HTML5频、视频元素的支持情况，测试音频和视频的编码要求。（7）试用元素在网页中嵌入你所在地区的天气情况。提示：可以在互联网中先找到可以正常显示的小型天气页面，然后将其嵌入。（8）请思考在什么样的情况下会使用元素，编写代码完成单选和多选的功能。（9）元素常常用来进行页面的布局设计，试应用元素模仿设计一个门户网站（比如新浪或网易等）的页面布局。（10）请分别应用绝对路径和相对路径方式的超链接设计两个页面，并让它们相互指向。
