没有合适的资源?快使用搜索试试~ 我知道了~
html基础教程.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 56 浏览量
2021-10-02
11:38:23
上传
评论
收藏 93KB PDF 举报
温馨提示
试读
26页
html基础教程.pdf
资源推荐
资源详情
资源评论
1
第一章 HTML 概述与基本结构
目前大部分的网页都是用 HTML配合其它语言写成的。本章使用 html 语言来制作网页,而现在的很多网页制作工
具软件,比如 FrontPage 、DreamWave,.net 等,可自动生成一些固定格式的网页元素,在学习本章的过程中,不要一
味去死记这些标识内容,我们学习这 html 语言的主要目的不是要大家完全使用 html 语言来制作一个完整的网页,而
是掌握其基本语法格式后应用到动态程序中去。在学习过程中,我们要结合动态程序 asp.net 的方法来应用这些标识。
如果用 html 完全编写网页,那是过时了;如果不懂 html 语言那是学网页的无知,更谈不上灵活运用动态程序
asp.net,php 等。
一、 HTML 的概述
HTML(HyperTextMarkupLanguage 的缩写),即超文本链接标记语言。它是在互联网发布超文本文件 ( 通常所说的
网页 ) 的通用语言。所谓超文本,就是它可以加入图片、声音、动画、影视等内容,每一个 HTML文档都是一种静态的
网页文件,这个文件里面包含了 HTML标记,这些标记并不是一种程序语言,它只是一种排版网页中资料显示位置的标
记语言。每个标记的符号都是一条命令、它告诉浏览器如何显示文本。这些标记均由 "<" 和">" 符号以及一个字符串组
成。而浏览器的功能是对这些标记进行解释, 显示出文字、 图像、动画、播放声音。 这些标记符号用“ <标记名字属性 >”
来表示。
二、 HTML 的基本结构:
一个 HTML文档是由一系列的元素和标记组成。 元素名不区分大小写, HTML用标记来规定元素的属性和它在文件中
的位置, HTML超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是
要显示的各种文档信息。
下面是一个最基本的 html 文档的代码 :1 -1.html
<HTML>---------------------------------------- 开始标记
<HEAD>-------------------------------------- 头部标记
<TITLE>一个简单的 HTML示例 </TITLE>
</HEAD>--------------------------------------
<BODY>---------------------------------------- 文件主体
<CENTER>|
<H1>欢迎光临我的主页 </H1>
<BR>
<HR>
<FONTSIZE=7COLOR=red>
|
这是我第一次做主页 |
</FONT>|
</CENTER>|
</BODY>
</HTML>--------------------------------------- 结尾标记
<HTML></HTML>在文档的最外层,文档中的所有文本和 html 标记都包含在其中,它表示该文档是以超文本标识语
言( HTML)编写的。
<HEAD></HEAD>是 HTML文档的头部标记 , 在浏览器窗口中,头部信息是不被显示在正文中的 , 在此标记中可以插入
其它标记,用以说明文件的标题和整个文件的一些公共属性。该标记可以省略。
2
<title></title> 是嵌套在 <HEAD>头部标记中的,标记之间的文本是文档标题,它被显示在浏览器窗口的标题栏。
该标记可以省略。
<BODY></BODY>标记一般不能省略,标记之间的文本是正文,是在浏览器要显示的页面内容。
上面的这几对标记在文档中都是唯一的, HEAD标记和 BODY标记是嵌套在 HTML标记中的。
三、 HTML 的标记与属性 :
对于刚刚接触超文本的读者,遇到的最大的障碍就是一些用“ <”和“ >”括起来的句子,我们称它为标记,是用
来分割和标记文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。属性是标志里的参数的选项。
HTML的标记分单标记和成对标记两种。 成对标记是由首标记 <标记名 >和尾标记 </ 标记名 >组成的, 成对标记的作用
域只作用于这对标记中的文档。单独标记的格式 <标记名 >,单独标记在相应的位置插入元素就可以了,大多数标记都
有自己的一些属性 , 属性要写在始标记内,属性用于进一步改变显示的效果 , 各属性之间无先后次序,属性是可选的,
属性也可以省略而采用默认值 ; 其格式如下:
<标记名字属性 1 属性 2 属性 3,> 内容 </ 标记名字 >
属性值可以不用加双引号,但是为了适应 XHTML规则,提倡全部对属性值加双引号。如:
<fontcolor="#ff00ff"face=" 宋体 "size="30"> 字体设置 </font>
第二章 HTML 主体标记及属性、颜色的设定
为了使网页绚丽多姿,吸引更多的浏览者阅读,可以给网页添加更多的标记及属性,这是为了对网页中的元素进
行修饰、布局。下面就来逐一介绍这些标记。
一、 html 的主体标记 <body>
在<body>和 </body> 中放置的是页面中所有的内容,如图片、文字、表格、表单、超链接等设置。
<body>标记有自己的属性,设置 <body>标记内的属性,可控制整个页面的显示方式。
<body>标记的属性
属 性 描 述
link
设定页面默认的链接颜色
alink
设定鼠标正在单击时的链接颜色
vlink
设定访问后链接文字的颜色
background
设定页面背景图像
bgcolor
设定页面背景颜色
leftmargin
设定页面的左边距
topmargin
设定页面的上边距
bgproperties
设定页面背景图像为固定,不随页面的滚动而滚动
text
设定页面文字的颜色
格式:
<body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif"
3
bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">
实例: 2-1.html
<html >
<head>
<title >bady的属性实例 </ title >
</ head>
<body bgcolor ="#FFFFE7" text ="#ff0000" link ="#3300FF" alink ="#FF00FF" vlink ="#9900FF">
<center >
<h2>
设定不同的链接颜色
</ h2>
<p>测试 body标记 </ p>
<a href ="http://www.baidu.com/"> 各种链接颜色 </ a>
<br />
</ center >
</body>
</html>
实例说明:
<body>的属性设定了页面的背景颜色,文字的颜色,链接的颜色为 #3300ff ,单击的链接颜色为 #ff00ff ,单击过
后的颜色为 #9900ff 。
对于上面的属性在后面的章节中还会介绍,在这里就不逐一引用了,我们的学习目的主要是掌握标记及属性的使
用方法。
二、颜色的设定
颜色值是一个关键字或一个 RGB格式的数字。在网页中用得很多,在此就先介绍一下。
颜色是由 "red""green""blue" 三原色组合而成的,在 HTML中对颜色的定义是用十六进位的,对于三原色 HTML分
别给予两个十六进位去定义。例如:
白色的组成是 red=ff,green=ff,blue=ff,RGB 值即为 ffffff
红色的组成是 red=ff,green=00,blue=00,RGB 值即为 ff0000
黑色的组成是 red=00,green=00,blue=00,RGB 值即为 000000
应用时常在每个 RGB值之前加上“ #“符号,如: bgcolor="#336699" 用英文名字表示颜色时直接写名字。如
bgcolor="green" 。
第三章 文字版面的编辑
3-1 换行标记 <br>
换行标记是个单标记,也叫空标记,不包含任和内容,在 html 文件中的任何位置只要使用了 <br> 标记,该标记之
后的内容将显示在下一行。
请看下面的例子: 3-1
4
<html >
<body >
无换行标记:白日依山尽,黄河入海流。
<br >
有换行标记: <br >
白日依山尽, <br >
黄河入海流。
</body>
</html>
3-2 换段落标记 <p> 及属性:
由<p>标记所标识的文字,表明是同一个段落的文字。两个段落间的间距等于连续加了两个换行符,也就是要隔一
行空白行。
格式:
<P>
<PALIGN=参数 >
其中 ,ALIGN 是<p>标记的属性 , 属性有三个参数 left,center,right. 这三个参数设置段落文字的左,中,右位置的
对齐方式。
实例 :3-2
<html >
<body >
<p>
这是 <br />
第一段。
</ p>
<p>第二段。 </ p>
<p align ="center"> 第三段。 </ p>
</ body>
</ html >
3-3 原样显示文字标记 <pre>
要保留原始文字排版的格式 , 就可以通过 <pre> 标记来实现,方法是把制作好的文字排版内容前后分别加上始标记
<pre> 和尾标记 </pre> 。
实例 :3-3
<HTML>
<BODY>
<PRE>
白日依山尽,
黄河入海流。
</PRE>
</BODY>
</HTML>
5
3-4 居中对齐标记 <center>
在页面中使用 <center> 标记进行居中显示 ,<center> 是成对标记 , 在需要居中的内容部分开头处加 <center>, 结尾
处加 </center> 。
实例: 3-4
<html >
<head>
<title >居中对齐标记 </ title >
</ head>
<body >
<center >
<p>《送孟浩然之广陵》 <p/ >
故人西辞黄鹤楼,烟花三月下扬州。孤帆远影碧山尽,惟见长江天际流。
</ center >
</body>
</html>
3-5 水平分隔线标记 <hr>
<hr>标记是单独使用的标记,是水平线标记。通过设置 <hr> 标记的属性值,可以控制水平分隔线的样式。
<hr> 标记的属性
属性 参数 功能 单位 默认值
size 设置水平分隔线的粗细 pixel( 像素) 2
width 设置水平分隔线的宽度 pixel( 像素)、 % 100%
align Left center right 设置水平分隔线的对齐方式 center
color 设置水平分隔线的颜色 black
noshade 取消水平分隔线的 3d 阴影
实例: 3-5
<html >
<head>
<title >测试水平分隔线标记 </ title >
</ head>
<body >
<center >
春晓
<hr size ="1" width ="20%" align ="center" noshade color ="red">
春眠不觉晓, <br >
处处闻啼鸟。 <br >
夜来风雨声, <br >
花落知多少?
</ center >
</ body>
</ html >
剩余25页未读,继续阅读
资源评论
资料大全
- 粉丝: 14
- 资源: 26万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功