《ASP.NET 开发从入门到精通》----1.5 3种必备技术-优快云博客

本文简要介绍了与ASP.NET开发密切相关的三种必备网页技术：HTML、CSS和JavaScript的基础知识，包括页面布局、样式控制及脚本编写等内容。

本节书摘来自异步社区《ASP.NET 开发从入门到精通》一书中的第1章，第1.5节，著　张明星，责任编辑　张　涛，更多章节内容可以访问云栖社区“异步社区”公众号查看。

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 size=数字 face=字体名 color=颜色> 被设置的文字 </font >
字型设置
网页中的字型是指页面文字的风格，例如，文字加粗、斜体、带下划线、上标和下标等。常用字型标记的具体说明如表1-1所示。

ec694b3938dd38adc640291c55eb56fb73b674d6

设置段落标记
段落标记

的功能是定义一个新段落的开始。标记

不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用

也可省略结束标记。

段落标记

的语法格式为：

<P align = 对齐方式>
（4）超链接处理

超链接是指从一个网页指向另一个目的端的转换标记，是从文本、图片、图形或图像映射到全球广域网上网页或文件的指针。在万维网（WWW）上，超链接是网页之间和Web站点之中主要的导航方法。

网页中的超链接功能是由标记实现的。标记可以在网页上建立超文本链接，通过单击一个词、句或图片可从此处转到目标资源，并且这个目标资源有唯一的URL地址。

标记的语法格式为：

< a href=地址 name=字符串 target=打开窗口方式> 热点 </ a >
（5）插入图片

图片是Web网页中的重要组成元素之一，页面通过图片的修饰可以向浏览者展现出多彩的效果。在Ｗeb网页中，图片通常有GIF和JPEG两种格式。

设置背景图片
背景图片是指将图片作为网页的背景。在网页设计过程中，经常为满足特定需求而将一幅图片作为背景。无论是背景图片，还是背景颜色，都可以通过

标记的相应属性来设置。

使用

标记的background属性，可为网页设置背景图片。其语法格式为：

<BODY background=图片文件名>
插入指定图片
如果页面需要将图片作为主体内容，则可以在页面中插入图片。在具体实现上，通常使用图片标记将一幅图片插入到网页中。使用图片标记后，可以设置图片的替代文本、尺寸、布局等属性。

标记的语法格式为：

<img src=文件名 alt=说明 width=x height=y border=n hspace=h vspace=v align=对齐方式>
（6）列表处理

列表是HTML页面中常用的基本标记。常用的列表分为无序列表和有序列表。带序号标志（如数字、字母等）的表项就组成有序列表，否则为无序列表。

无序列表
无序列表中每一个表项的最前面是项目符号，例如“●”“■”等。在页面中通常使用标记

创建无序列表，其语法格式为：

    <LI type=符号类型1> 第一个列表项
    <LI type=符号类型2> 第二个列表项
     …
</UL>```
有序列表
有序列表中，列表前的项目编号是按照顺序样式显示的。例如，1、2、3…或Ⅰ、Ⅱ…通过带序号的列表可以更清楚地表达信息的顺序。使用<OL>标记可以建立有序列表，表项的标记仍为<LI>。其语法格式为：

表项1
表项2
```
…
```
`
2．HTML页面布局
页面布局是整个网页技术的核心，通过HTML标记可以对页面进行布局处理，分配各元素在网页中的显示位置。在下面的内容中，将对HTML布局标记的基本知识进行简要介绍。

（1）使用表格标记

表格是Web网页中的重要组成元素之一，页面通过表格的修饰可以提供用户需求的显示效果。在页面中创建表格的标记是<table>，创建行的标记为
，创建表项的标记为。表格中的内容写在“<td>…</td>”之间。“<tr>…</tr>”用来创建表格中的每一行，它只能放在<table></table>标记对之间使用，并且在里面加入的文本是无效的。
表格标记的语法格式为：
```
   <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所示的就是一个典型的左右两侧的框架页面。



<div style="text-align: center">
 <img src="https://yqfile.alicdn.com/5e943363b8a9c8410b334f771261bac7cd6b5255.png" >
</div>




在页面中实现框架功能的标记有框架组标记“<FRAMESET>…</FRAMESET>”和框架标记“<FRAME>” 两个。其中，前者用于划分一个整体的框架，而“<FRAME>”的功能是设置整体框架中的某一个框架，并声明其中框架页面的内容。

上述框架标记的语法格式为：
```
```
…
```
`
（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所示。

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>```
####1.5.3　JavaScript技术基础
JavaScript是一门基于对象（Object）和事件驱动（Event Driven）的脚本技术，并具有安全性能的脚本语言。设计JavaScript的目的是与HTML、Java脚本语言（Java小程序）相互结合，实现在Web页面中链接多个对象，并与Web客户交互的效果，从而实现客户端应用程序的开发。

JavaScript的语法格式为：
```
JavaScript脚本代码1
JavaScript脚本代码2
……
`
例如，可以编写如下代码，执行后将弹出一个提示对话框：
```
<head>
<Script Language ="JavaScript">
// JavaScript 开始
alert("这是第一个JavaScript例子!");              //提示语句
alert("欢迎你进入JavaScript世界!");             //提示语句
alert("今后我们将共同学习JavaScript知识！");   //提示语句
</Script> 
</Head>
</Html>```
在上述代码中，<Script Language="JavaScript">与</Script>之间的部分是JavaScript脚本语句。实例执行后的显示效果如图1-5所示。


<div style="text-align: center">
 <img src="https://yqfile.alicdn.com/9cbf4013f6a1e823ed86be7c4314fddf08fa15ef.png" >
</div>
```