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