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文件规则 • 任何HTML标记都放在“<>”内，如<html> • 有些标记需要参数，参数应该加于起始标记中，而有些标记不需要参数。如<font size=“12”>Hello</font> • 大部分标记成对出现，尾标记要在元素前加”/”。如</font>。有些标记是可以单独使用的，如<br>换行标记。 • HTML标记字母不区分大小写。 • HTML标记可以嵌套使用，如:<span><B>ABC</B></span>

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

HTML 开发 • HTML 标记用于标记 HTML 文档的开始和结束 • <HTML> • . . . • </HTML>

运行结果 HTML 文档的结构基本结构： • <HTML> • <HEAD> • <TITLE>欢迎进入 HTML 世界</TITLE> • </HEAD> • <BODY> • <P>这会是一种很有趣的体验</P> • </BODY> • </HTML> • HTML 部分 • 文档头部分 • 正文部分

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

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

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

<body>元素及元素属性——2 <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.

常见颜色的代码

<body>元素及元素属性——3 • <body>元素中有下列元素属性： • (2)background • background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。

<body>元素及元素属性——5 • 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可以是绝对地址，也可以是相对地址

HTML对图片的控制--2 • 图片的替代文本： • 图片不能显示时在图片所在位置显示的一段文本 • 当鼠标移到图片上时也会显示替代文本。 • 定义图片替代文本的方法是： • <img src=“图片名称” alt=“这是一张图片”>

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

HTML对图片的控制--4 • 图片的边框 • 我们可以为一幅图片加一个边框以突出显示： • <img src="images/fengjing1.jpg" border= " 2 " > • border的属性值为象素数

HTML对图片的控制--6 • 图片的对齐方式定义图片的垂直对齐方式： <img src="images/shangu.jpg" align="top" > <img src="images/shangu.jpg" align="middle"> <img src="images/shangu.jpg" align="bottom" > 对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。

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

HTML对图片的控制--7 • 定义图片与左、右的文本之间的间距 • 图片在显示时，与左右的文本之间可以有一定的间距 <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:jgyzhr@126.com”>指向老师E-mail地址的超级链接</a>

4.超级链接—新开链接窗口 • 在新的(浏览器)窗口打开链接页面 <a href=“ http://www.xin126.cn ” target=“_blank”> 这个会在新的窗口中打开 </a> 没有加target属性的，默认：target= "_self"

4.超级链接—去除下划线 • 去掉超级连接的下划线：style=“text-decoration: 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、right （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属性

表格（用<Table>来表示，表格可以有背景颜色、背景图片）表格（用<Table>来表示，表格可以有背景颜色、背景图片）表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）表格边框单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片）每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。

表格(TABLE)标记--1 • <table>元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 • <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 • <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 • 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

表格(TABLE)标记--2 • 表格的基本结构 <table>定义表格 <tr>定义表行 <th>定义表头</th> </tr> <tr> <td>…</td>定义单元格 </tr> </table>

表格(TABLE)标记--3 • 表格的属性 –1 • width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 • height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 • border属性：表格边线粗细

表格(TABLE)标记--2 • 表格的属性 –1 • 4、bgcolor属性：指定表格或某一个单元格的背景颜色。 • 5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。

表格(TABLE)标记--3 • 表格的属性 –2 • 6、bordercolor属性：指定表格或某一个单元格的边框颜色。 • 7、Bordercolorlight属性：亮边框的颜色 • 8、Bordercolordark属性：暗边框的颜色

ASP.NET 实用教程第二章 HTML