1.5 3种必备技术
知识点讲解：光盘:视频\PPT讲解（知识点）\第1章\3种必备技术.mp4
ASP.NET技术是一门功能强大的Web开发技术，它能够迅速实现动态页面。但是ASP.NET也并不是万能的，它需要和其他的页面技术相结合，例如常见的HTML、CSS和JavaScript等。在本节的内容中，将简要介绍和ASP.NET相关的网页技术，为读者学习本书后面内容做好铺垫。
1.5.1 HTML技术基础
HTML是制作网页的基础，现实中的各种网页都是建立在HTML基础之上的。通过HTML可以实现对页面元素的布局处理。在本节的内容中，将简要讲解HTML技术的基本知识。
1．创建基本静态页面
静态网页上的内容是静态不变的，它是网站技术的基础。静态网页能够迅速将内容展现在用户面前，是网站技术不可缺少的组成部分。
（1）设置网页头部和标题
网页头部位于网页的顶部，用于设置与网页相关的信息。例如，页面标题、关键字和版权等信息。当页面执行后，不会在页面正文中显示头部元素信息。
HTML网页头部有如下3种设置信息。
- 文档类型
文档类型（DOCTYPE）的功能是定义当前页面所使用标记语言（HTML或XHTML）的版本。合理选择当前页面的文档类型是设计标准Web页面的基础。只有定义了页面的文档类型后，页面中的标记和CSS才会生效。
- 编码类型
编码类型的功能是设置页面正文中字符的格式，确保页面文本内容正确地在浏览器中显示。常用的编码类型有GB2312编码、UTF-8编码和HZ编码。
- 页面标题
页面标题（Title）的功能是设置当前网页的标题。设置后的标题不在浏览器正文中显示，而在浏览器的标题栏中显示。
（2）设置页面正文和注释
正文和注释是页面的主体，网页通过正文向浏览者展示页面的基本信息。注释是编程语言和标记语言中不可缺少的要素。通过注释不但可以方便用户对代码的理解，并且便于系统程序的后续维护。
- 正文
网页正文定义了其显示的主要内容和显示格式，是整个网页的核心。在HTML等标记语言中设置正文的标记是“<body>..</body>”，其语法格式为：
<body>页面正文内容</body>- 注释
注释的主要作用是方便用户对代码的理解，并便于对系统程序的后续维护。HTML中插入注释的语法格式为：
<!--注释内容 -->（3）文字和段落处理
文档由文字组成，是网页技术中的核心内容之一。网页通过文档和图片等元素向浏览用户展示站点的信息。
- 设置标题文字
网页设计中的标题是指页面中文本的标题，而不是HTML中的<title>标题。标题在浏览器的正文中显示，而不是在浏览器的标题栏中显示。
在页面中使用标题文字的语法格式为：
<hn align=对齐方式 > 标题文字 </hn>- 设置文本文字
HTML标记语言不但可以给文本标题设置大小，而且可以给页面内的其他文本设置显示样式，如字体大小、颜色和所使用的字体等。
文本文字标记：<font >在网页中为了增强页面的层次，其中的文字可以用<font>标记为不同的大小、字体、字型和颜色。<font>标记的语法格式为：
<font size=数字 face=字体名 color=颜色> 被设置的文字 </font >- 字型设置
网页中的字型是指页面文字的风格，例如，文字加粗、斜体、带下划线、上标和下标等。常用字型标记的具体说明如表1-1所示。
表1-1 常用字型标记列表
|
字 型 标 记 |
描 述 |
|---|---|
|
<B></B> |
设置文本加粗显示 |
|
<I></I> |
设置文本倾斜显示 |
|
<U></U> |
设置文本加下划线显示 |
|
<TT></TT> |
设置文本以标准打印字体显示 |
|
<SUB></SUB> |
设置文本下标 |
|
<SUP></SUP> |
设置文本上标 |
|
<BIG><BIG> |
设置文本以大字体显示 |
|
<SMALL></SMALL> |
设置文本以小字体显示 |
- 设置段落标记
段落标记<p>的功能是定义一个新段落的开始。标记<P>不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用<P>也可省略结束标记。
段落标记<P>的语法格式为：
<P align = 对齐方式>（4）超链接处理
超链接是指从一个网页指向另一个目的端的转换标记，是从文本、图片、图形或图像映射到全球广域网上网页或文件的指针。在万维网（WWW）上，超链接是网页之间和Web站点之中主要的导航方法。
网页中的超链接功能是由<a>标记实现的。标记<a>可以在网页上建立超文本链接，通过单击一个词、句或图片可从此处转到目标资源，并且这个目标资源有唯一的URL地址。
标记<a>的语法格式为：
< a href=地址 name=字符串 target=打开窗口方式> 热点 </ a >（5）插入图片
图片是Web网页中的重要组成元素之一，页面通过图片的修饰可以向浏览者展现出多彩的效果。在Ｗeb网页中，图片通常有GIF和JPEG两种格式。
- 设置背景图片
背景图片是指将图片作为网页的背景。在网页设计过程中，经常为满足特定需求而将一幅图片作为背景。无论是背景图片，还是背景颜色，都可以通过<BODY>标记的相应属性来设置。
使用<BODY>标记的background属性，可为网页设置背景图片。其语法格式为：
<BODY background=图片文件名>- 插入指定图片
如果页面需要将图片作为主体内容，则可以在页面中插入图片。在具体实现上，通常使用图片标记<img>将一幅图片插入到网页中。使用图片标记后，可以设置图片的替代文本、尺寸、布局等属性。
<img>标记的语法格式为：
<img src=文件名 alt=说明 width=x height=y border=n hspace=h vspace=v align=对齐方式>（6）列表处理
列表是HTML页面中常用的基本标记。常用的列表分为无序列表和有序列表。带序号标志（如数字、字母等）的表项就组成有序列表，否则为无序列表。
- 无序列表
无序列表中每一个表项的最前面是项目符号，例如“●”“■”等。在页面中通常使用标记<UL>和<LI>创建无序列表，其语法格式为：
<UL type=符号类型>
<LI type=符号类型1> 第一个列表项
<LI type=符号类型2> 第二个列表项
…
</UL>- 有序列表
有序列表中，列表前的项目编号是按照顺序样式显示的。例如，1、2、3…或Ⅰ、Ⅱ…通过带序号的列表可以更清楚地表达信息的顺序。使用<OL>标记可以建立有序列表，表项的标记仍为<LI>。其语法格式为：
<OL type=符号类型>
<LI type=符号类型1> 表项1
<LI type=符号类型2> 表项2
…
</OL>2．HTML页面布局
页面布局是整个网页技术的核心，通过HTML标记可以对页面进行布局处理，分配各元素在网页中的显示位置。在下面的内容中，将对HTML布局标记的基本知识进行简要介绍。
（1）使用表格标记
表格是Web网页中的重要组成元素之一，页面通过表格的修饰可以提供用户需求的显示效果。在页面中创建表格的标记是<table>，创建行的标记为<tr>，创建表项的标记为<td>。表格中的内容写在“<td>…</td>”之间。“<tr>…</tr>”用来创建表格中的每一行，它只能放在<table></table>标记对之间使用，并且在里面加入的文本是无效的。
表格标记的语法格式为：
<table align=left|center|right border=n width=值 height=值%>
<tr> <th>表头1<th>表头2…<th>表头n
<tr> <td>表项1<td>表项2…<td>表项n
……
<tr> <td>表项1<td>表项2…<td>表项n
</table >（2）使用框架标记
框架是Web网页中的重要组成元素之一，页面通过框架可以满足用户特定需求的显示效果。
通过框架页面，可以将信息分类显示。框架是框架集内各框架的可视化表示形式，能够显示框架集的层次结构。例如，图1-4所示的就是一个典型的左右两侧的框架页面。
图1-4 框架页面效果图
在页面中实现框架功能的标记有框架组标记“<FRAMESET>…</FRAMESET>”和框架标记“<FRAME>” 两个。其中，前者用于划分一个整体的框架，而“<FRAME>”的功能是设置整体框架中的某一个框架，并声明其中框架页面的内容。
上述框架标记的语法格式为：
<FRAMESET>
<FRAME src="URL">
<FRAME src="URL">
…
</FRAMESET>（3）使用层标记
div是网页标记语言中的重要组成元素之一，网页通过div可以实现页面的规划和布局。div的全称是division，意为“区分”的意思。div主要功能是对页面内的网页元素进行区分处理，使之划分为不同的区域，并且这些区域可以进行单独修饰处理。
div标记是一个对称双标记，它的起始标签和结束标签之间所有的内容都用来构成这个块元素，其中所包含元素的特性由div标签的属性来控制，或通过使用样式表来进行控制。
因为div元素是一个块元素，所以其中可以包含文本、段落、表格和章节等复杂内容。在页面中使用div标记的格式为：
<div 参数>中间部分</div>1.5.2 CSS技术基础
CSS是一种装扮网页的技术，不但可以控制页面内某个元素的显示样式，而且可以控制整个站点内某元素的样式，让页面更加绚丽。在本节的内容中，将简要讲解CSS技术的基本知识。
1．CSS概述
在网页中最为常见的应用便是层叠样式表（Cascading Style Sheets，CSS）。当网页需要将指定内容按照指定样式显示时，利用CSS即可轻松实现。在网页中使用CSS的方式有如下两种。
- 网页内直接设置CSS：在当前页面直接指定样式。
- 第三方页面设置：在一个网页中单独设置CSS，然后通过文件调用这个CSS来实现指定显示效果。
网页设计中常用的CSS属性如表1-2所示。
表1-2 常用的CSS属性列表
|
取 值 |
描 述 |
|---|---|
|
color |
设置文字或元素的颜色 |
|
background-color |
设置背景颜色 |
|
background-image |
设置背景图像 |
|
font-family |
设置字体 |
|
font-size |
设置文字的大小 |
|
list |
设置列表的样式 |
|
cursor |
设置鼠标的样式 |
|
border |
设置边框的样式 |
|
padding |
设置元素的内补白 |
|
margin |
设置元素的外边距 |
CSS可以用任何书写文本的工具进行开发。例如，常用的文本工具等。CSS也是一种语言， CSS是用来美化网页用的，使用CSS语言可以控制网页的外观。
2．CSS的特点和意义
作为一种网页样式显示技术，CSS主要有如下几个特点。
- CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行。
- 在标准网页设计中，CSS负责网页内容的表现。
- CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用.css作为文件扩展名。
- 可以通过简单地更改CSS文件来改变网页的整体表现形式，大大减少了重复劳动的工作量。
CSS对Web开发技术的发展带来了巨大的冲击和革新，并且为网页设计者带来了真正的好处。CSS引入网页制作领域后主要具有如下意义。
- 实现了内容与表现的分离：使网页的内容与表现完全分开。
- 表现的统一：可以使网页的表现非常统一，并且容易修改。
- CSS可以支持多种设备，如手机、打印机、电视机、游戏机等。
- 使用CSS可以减少网页的代码量，加快网页的浏览速度，减少硬盘的占用空间。
3．CSS的语法结构
因为经常用到的CSS元素是选择符、属性和值。所以，在CSS的语法中主要涉及上述3种元素。CSS的基本语法结构为：
<style type="text/css">
<!--
. 选择符{属性：值}
-->
</style>1.5.3 JavaScript技术基础
JavaScript是一门基于对象（Object）和事件驱动（Event Driven）的脚本技术，并具有安全性能的脚本语言。设计JavaScript的目的是与HTML、Java脚本语言（Java小程序）相互结合，实现在Web页面中链接多个对象，并与Web客户交互的效果，从而实现客户端应用程序的开发。
JavaScript的语法格式为：
<Script Language ="JavaScript">
JavaScript脚本代码1
JavaScript脚本代码2
……
</Script>例如，可以编写如下代码，执行后将弹出一个提示对话框：
<html>
<head>
<Script Language ="JavaScript">
// JavaScript 开始
alert("这是第一个JavaScript例子!"); //提示语句
alert("欢迎你进入JavaScript世界!"); //提示语句
alert("今后我们将共同学习JavaScript知识！"); //提示语句
</Script>
</Head>
</Html>在上述代码中，<Script Language="JavaScript">与</Script>之间的部分是JavaScript脚本语句。实例执行后的显示效果如图1-5所示。
图1-5 显示效果图
上述实例文件是HTML文档，其标识格式为标准的HTML格式。而在实际应用中，JavaScript脚本程序将被专门编写，并保存为“.js”格式的文件。当Web页面需要这些脚本程序时，只需通过“<script src="文件名">…</script>”调用即可。
在线客服
共有条评论 网友评论