ASP.NET 实用教程第二章 HTML

ASP.NET 实用教程第二章 HTML

学习网站： www.xin126.cn

基本概念HTML ：超文本标记语言 Hyper Text Markup Language 。它

不是象 C++ 和 Java 之类的程序语言，而是一种描述性语言，一种标记语言。

1.1 HTML 语法基础1.1.1 HTML 基本结构

第一张网页

<html>

<head>

<title> 我的第一张网页 </title>

</head>

<body>

大家好，这里是我的第一张网页的内容。 </body>

</html>

HTML 文件规则1. 任何 HTML 标记都放在“ <>” 内，如 <html>2. 有些标记需要参数，参数应该加于起始标记中，而

有些标记不需要参数。如 <font size=“12”>Hello</font>

3. 大部分标记成对出现，尾标记要在元素前加” /” 。如 </font> 。有些标记是可以单独使用的，如 <br>换行标记。

4. HTML 标记字母不区分大小写。5. HTML 标记可以嵌套使用，如 :<span><B>ABC</B

></span>

1.1.2 HTML 文档头和文档体的基本标记<html>

<head> </head>

<body> </body>

</html>

HTML 开发

<HTML> . . . </HTML>

<HTML> . . . </HTML>

• HTML 标记用于标记 HTML 文档的开始和结束

HTML 文档的结构

HTML 部分文档头部分正文部分

<HTML><HEAD>

<TITLE> 欢迎进入 HTML 世界 </TITLE></HEAD><BODY>

<P> 这会是一种很有趣的体验 </P></BODY>

</HTML>

<HTML><HEAD>

<TITLE> 欢迎进入 HTML 世界 </TITLE></HEAD><BODY>

<P> 这会是一种很有趣的体验 </P></BODY>

</HTML>

基本结构：

运行结果

<head></head> 标记文档头部分通常放置：标题、样式、脚本语言等。

<head> 头部标记（ 1 ） <title> 标记基本格式： <title>…</title> 它所包含的内容显示在浏览器的标题栏中。

<body> 元素及元素属性—— 1

<body> 元素表明是 HTML 文档的主体部分。在 <body> 与 </body> 之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML 文档的主体部分。


<body> 元素中有下列元素属性： (1)bgcolor

bgcolor 属性标志 HTML 文档的背景颜色。如： bgcolor="#CCFFCC" 。

HTML 对颜色的控制 HTML 对颜色的控制也有自己的语法。 HTML

使用 16 进制的 RGB 颜色值对颜色进行控制。 16 进制的数码有 : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,

e,f.

颜色颜色名和 RGB 值黑色 Black=”#000000”

银色 Silver=”#c0c0c0”

红色 Red=”#ff0000”

蓝色 Blue=”#0000ff”

白色 White=”#ffffff”

黄色 Yellow=”ffff00”

绿色 Green=”#00ff00”

海蓝色 Aqua=”#00ffff”

常见颜色的代码


<body> 元素中有下列元素属性： (2)background

background 属性标志 HTML 文档的背景图片。如： background=“images/bg.gif" 。


text text 属性标志 HTML 文档的正文文字颜色。

如： text=“#FF6666” 。 Text 元素定义的颜色将应用于整篇文档。

<body> 元素属性：超级链接颜色

link 、 vlink 、 alink 分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。

超级链接—普通超级链接 1

超级链接是整个 WWW 应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的 WWW 的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。

超级链接—普通超级链接 2

超级链接是用 <a> 定义的在 <a> 下，有元素属性 href,href 的属性值为一个

URL 地址如： <a href=“http://www.xin126.cn”> 指向学习

网站的超级链接 </a> 如： <a href=“02.htm"> 普通超级链接 </a> 练习：在 vs2005 中，新建两个网页分别为 first.aspx

和 second.aspx, 在 first.aspx 页面中建立指向 www.xin126.cn 的超级链接和指向 second.aspx 的超级链接。

HTML 对图片的控制 --1

基本语法 : <img src=“ 图片地址” >

<img> 元素下的基本元素属性是 src 属性， src的属性值为所引用的图片的 URL 地址。

src 属性是必须的。 Src 的 URL 可以是绝对地址，也可以是相对地址


图片的替代文本：1. 图片不能显示时在图片所在位置显示的一段文

本2. 当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：

<img src=“ 图片名称” alt=“ 这是一张图片”>


图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：<img src="images/fengjing1.jpg" width="600" height="450" >


图片的边框我们可以为一幅图片加一个边框以突出显示： <img src="images/fengjing1.jpg" border= " 2 " >

border 的属性值为象素数


图片的对齐方式定义图片的垂直对齐方式：<img src="images/shangu.jpg" align="top" >

<img src="images/shangu.jpg" align="middle">

<img src="images/shangu.jpg" align="bottom" >

对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。


图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是： <img src=“images/shangu.jpg” align=“left” > <img rc=“images/shangu.jpg” align=“right”>


定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距 <img src="sample.jpg" hspace=5 vspace=5 > Hspace(horizontal) 定义水平间距； Vspace(vertical) 定义垂直间距。单位都是象素数 .

4. 超级链接—普通超级链接 3

在图像上建立超链接：<a href=" http://www.xin126.cn ">

<img src=“logo.jpg"/></a>

4. 超级链接— E-mail 超级链接超级链接可以指向 E-mail 地址如： <a href=“mailto:[email protected]”> 指向

老师 E-mail 地址的超级链接 </a>

4. 超级链接—新开链接窗口在新的 ( 浏览器 ) 窗口打开链接页面<a href=“ http://www.xin126.cn ” target=“_blan

k”> 这个会在新的窗口中打开 </a>

没有加 target 属性的，默认： target= "_self"

4. 超级链接—去除下划线去掉超级连接的下划线： style=“text-decorati

on: none”

1.2 文本、段落标记

1.2.1 文本标记（ 1 ） <b> 、 <strong> 粗体标记（ 2 ） <i> 、 <em> 、 <var> 、 <cite> 、 <dfn> 斜体标记（ 3 ） <u> 下划线标记（ 4 ） <strike> 删除线标记（ 5 ） <big> 字体加大标记、

<small> 字体缩小标记（ 6 ） <sup> 上标记、 <sub> 下标记

示例 2-2-1 ：常用文本标记

（ 7 ） <Hn> 标题标记在 (X)HTML 中，标题一共有 6 个级别： <h1>、<h2>、<h3>

、<h4>、<h5>和<h6>。这些标记用于定义标题字大小，即 <

hHn></hn> ，其中 n 的取值可以从 1 到 6 ，总共有 6 级，数字越大文字越小。每个标题标记所标示的字句将独占一个段落。

示例 2-2-2 ：标题文字

HTML注释：  浏览器不显示，用于为代码部分加上说明，方便日后修改。常用于比较复杂或多人合作设计的页面中使用。

C# 的注释： <%--注释内容 --%>

（ 2 ） <p > 段落标记：作用是换行并插入一空行<p> 有一个基本属性是 align 对齐，属性值 left 、 center 、 righ

t（ 3 ） <br > 换行标记

示例 2-2-5 ：换行标记示例 2-2-4 ：段落标记

（ 4 ） <hr> 水平线标记1 size 属性，设定水平线厚度2 width 属性，设定水平线长度（像素或者百分比）3 align 属性，当水平线长度小于浏览器窗口宽度时，使用该属性可以设定水平线对齐方式

4 color 属性，设定水平线颜色

例 2-2-6 ：水平线标记

（ 6 ） <div> 区块标记与 <span> 内嵌标记<div> 为区块标记，用来排版大块 HTML 段落。<span> 为内嵌标记，常用于页面中细节内容样式调整，如一小段文字，一个图标。

两者都是用来设定元素的布局位置，两者均成对 <div>…</div> 或 <span>…</span> 使用。<div> 与 <span> 常用于 CSS 样式表，作为定义样式的容器。

（ 7 ） <center> 居中标记

（ 8 ） <address> 地址标记用来标示地址信息或签名

（ 9 ） <blockquote> 块引用标记用来表示对其他文章的引用，其中文字在左右两侧有一定的缩进，有时会使用斜体，实际效果会因浏览器不同而不同。

1.4 列表标记 <ol> ：有序列表（ Ordered List ）<ul> ：无序列表（ Unordered List ）<li> ：项目标记（ Listed Item ）

<dl> 、 <dt> 、 <dd> ：定义列表（ Definition List ）

无序列表无序列表是由 <ul> 和 <li> 元素定义的 :

<ul>

<li>sports</li>

<li> food </li>

<li> drink </li>

<li> friends </li></ul>

无序列表元素

无序列表的默认符号是圆点。 <ul> 元素有 type 属性，通过定义不同的 type属性可以改变列表的项目符号。目前， type 属性的属性值有：disc(圆 ) 、 circle （圆圈）、 square （方块）

有序列表的顺序编号方式

无序列表的项目符号外观

有序列表元素

有序列表由 <ol> 和 <li> 定义 :

<ol>

<li>sports</li>

<li> drink</li>

<li> friends</li>

</ol>

有序列表元素— 2

<ol> 元素也有自己的 type 属性， type 属性的属性值有 1 、 A 、 a 、 I 、 i 等。例如，我们以 A 、 B 、 C……作为列表的编号

<ol> 元素还可以定义列表的起始编号，如我们希望列表的第一个编号为 5 ，而不是 1 ，则需要定义 <ol>元素的 start 属性

一月二月三月1200 1000 1500

单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片）

表格（用 <Table>来表示，表格可以有背景颜色、背景图片）表格边框

每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。

表头（用 <TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）

表格 (TABLE) 标记 --1

<table> 元素：定义一个表格。每一个表格只有一对<table> 和 </table> ，一张页面中可以有多个表格。

<tr> 元素：定义表格的行，一个表格可以有多行，所以 <tr> 对于一个表格来说不是唯一的。

<td> 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在 <td> 和 </td> 之间是单元格的具体内容。

需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。


表格的基本结构<table> 定义表格

<tr> 定义表行<th> 定义表头 </th>

</tr><tr>

<td>…</td> 定义单元格</tr>

</table>


表格的属性 – 1 width 属性：指定表格或某一个表格单元格的宽度。

单位可以是 % 或者象素。 height 属性：指定表格或某一个表格单元格的高度。单位可以是 % 或者象素。

border 属性：表格边线粗细


表格的属性 – 1 4 、 bgcolor 属性：指定表格或某一个单元格的背

景颜色。 5 、 background 属性：指定表格或某一个单元格

的背景图片。其属性值为一个 URL 地址。


表格的属性 – 2 6 、 bordercolor 属性：指定表格或某一个单元格

的边框颜色。 7 、 Bordercolorlight 属性：亮边框的颜色 8 、 Bordercolordark 属性：暗边框的颜色


表格的属性 – 2 9 、 align 属性：指定表格或某一个单元格里的

内容（文本、图片等）的对齐方式。


表格的属性 – 2 10 、 cellspacing 属性：单元格间距。 11 、 cellpadding 属性：单元格边距。


单元格属性1 、 valign 属性：指定某一个单元格里的内容（文本、图片

等）的垂直对齐方式。垂直对齐方式的属性值包括：top ：顶端对齐；middle ：居中对齐；bottom ：底端对齐 ;

Baseline ：相对于基线对齐 ;


单元格属性2 、 Colspan ：属性值表示当前单元格跨越几列3 、 Rowspan ：属性值表示当前单元格跨越几行

表格进阶表格的嵌套

在 <td> </td> 之间插入表格，实现表格嵌套表格的作用一般只是控制文本和图像的显示，而不

显示表格的边框

综合案例 -1

文字标签属性—— 1

文字属性标记 1. 文字颜色

指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码


文字属性标记 2. 文字字体

<font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体


文字属性标记 3. 文字大小

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#

练习 1

编写一个网页：要求显示效果如下

1. 表单练习2. 框架练习

ASP.NET 实用教程第二章 HTML

Documents

Transcript of ASP.NET 实用教程第二章 HTML

ASP.NET 实用教程 第二章 HTML

Documents

Transcript of ASP.NET 实用教程 第二章 HTML

ASP.NET 实用教程第二章 HTML

Transcript of ASP.NET 实用教程第二章 HTML