Document

Download Report

Transcript Document 

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.
2.
3.
4.
5.
任何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>
HTML 部分
文档头部分
正文部分
<TITLE>欢迎进入 HTML 世界</TITLE>
</HEAD>
<BODY>
<P>这会是一种很有趣的体验</P>
</BODY>
</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.
常见颜色的代码
颜色
颜色名和RGB值
黑色
银色
红色
蓝色
白色
黄色
Black=”#000000”
Silver=”#c0c0c0”
Red=”#ff0000”
Blue=”#0000ff”
White=”#ffffff”
Yellow=”ffff00”
绿色
海蓝色
Green=”#00ff00”
Aqua=”#00ffff”
<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

1.
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:[email protected]”>指向
老师E-mail地址的超级链接</a>
4.超级链接—新开链接窗口
在新的(浏览器)窗口 打开链接页面
<a href=“ http://www.xin126.cn ”
target=“_blank”> 这个会在新的窗口中打开
</a>
没有加target属性的，默认：target= "_self"

4.超级链接—去除下划线

去掉超级连接的下划线：style=“textdecoration: 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属性
表头（用<TH>来
表示，表头是特
殊的单元格，其
中的文字加进去
之后默认是居中
并且加粗）
每一行可以用
<TR>来表示，
单元格放在行
中，每行可以
有很多的单元
格。
表格（用<Table>来表
示，表格可以有背景颜
色、背景图片）
一月
1200
二月
1000
表格边框
三月
1500
单元格（用
<TD>来表
示，每个单
元格可以有
背景颜色和
背景图片）
表格(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属性：暗边框的颜色
表格(TABLE)标记--3

表格的属性 –2

9、align属性：指定表格或某一个单元格里的内
容（文本、图片等）的对齐方式。
表格(TABLE)标记--3

表格的属性 –2


10、cellspacing属性：单元格间距。
11、cellpadding属性：单元格边距。
表格(TABLE)标记--4

单元格属性
1、valign属性：指定某一个单元格里的内容（文本、图片等）
的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐;
Baseline：相对于基线对齐;
表格(TABLE)标记--5

单元格属性
2、Colspan：属性值表示当前单元格跨越几列
3、Rowspan：属性值表示当前单元格跨越几行
表格进阶

表格的嵌套


在<td> </td>之间插入表格，实现表格嵌套
表格的作用一般只是控制文本和图像的显示，而不
显示表格的边框
综合案例-1
文字标签属性——1

文字属性标记

1.文字颜色


指定颜色 <font color=#>
#=RRGGBB 16 进制数码
... </font>
文字标签属性——2

文字属性标记

2.文字字体

<font face=“#, #, ..., #”> ... </font>
#=客户端可获得的字体
文字标签属性——3

文字属性标记

3.文字大小


<font size=#> ... </font>
#=1, 2, 3, 4, 5, 6, 7 or +#, -#
练习1

编写一个网页：要求显示效果如下
1.
2.
表单练习
框架练习
END