HTML 教程给学生看的.docx
- 文档编号:12687353
- 上传时间:2023-06-07
- 格式:DOCX
- 页数:90
- 大小:71.17KB
HTML 教程给学生看的.docx
《HTML 教程给学生看的.docx》由会员分享,可在线阅读,更多相关《HTML 教程给学生看的.docx(90页珍藏版)》请在冰点文库上搜索。
HTML教程给学生看的
第一章HTML概述与基本结构
一、HTML的概述
HTML(HypertextMarkedLanguage),即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
所谓超文本,是因为它可以加入图片、声音、动画、影视等内容,事实上每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。
HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面与世界各地主机的文件链接,直接获取相关的主题。
HTML只是一个纯文本文件。
创建一个HTML文档,只需要两个工具,一个是HTML编辑器,一个WEB浏览器。
HTML编辑器是用于生成和保存THML文档的应用程序。
WEB浏览器是用来打开WEB网页文件,提供给我们查看WEB资源的客户端程序。
二、HTML的基本结构
一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置,HTML超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。
例1:
一个简单的HTML示例
欢迎光临我的主页
欢迎光临我的主页
这是我第一次做主页
在文档的最外层,文档中的所有文本和html标签都包含在其中,它表示该文档是以超文本标识语言(HTML)编写的。
事实上,现在常用的Web浏览器都可以自动识别HTML文档,并不要求有标签,也不对该标签进行任何操作,但是为了使HTML文档能够适应不断变化的Web浏览器,还是应该养成不省略这对标签的良好习惯。
是HTML文档的头部标签,在浏览器窗口中,头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记,良好的习惯是不省略。
上面的这几对标签在文档中都是唯一的,HEAD标签和BODY标签是嵌套在HTML标签中的。
三、HTML的标签与属性
对于刚刚接触超文本的朋友,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标签文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。
标签通过指定某块信息为段落或标题等来标识文档某个部件。
属性是标志里的参数的选项,HTML的标签分单标签和成对标签两种。
成对标签是由首标签<标签名>和尾标签标签名>组成的,成对标签的作用域只作用于这对标签中的文档。
单独标签的格式<标签名>,单独标签在相应的位置插入元素就可以了,大多数标签都有自己的一些属性,属性要写在始标签内,属性用于进一步改变显示的效果,各属性之间无先后次序,属性是可选的,属性也可以省略而采用默认值;其格式如下:
<标签名字属性1属性2属性3…>内容标签名字>
作为一般的原则,大多数属性值不用加双引号。
但是包括空格、%号,#号等特殊字符的属性值必须加入双引号。
为了好的习惯,提倡全部对属性值加双引号。
如:
注意事项:
输入始标签时,一定不要在“<”与标签名之间输入多余的空格,也不能在中文输入法状态下输入这些标签及属性,否则浏览器将不能正确的识别括号中的标志命令,从而无法正确的显示你的信息。
html常用标记
1.文件标题
<title>..........</title>
2.文件更新--<meta>
10秒后自动更新一次<metahttp-equiv="refresh"content=10>
10秒后自动连结到另一文件<metahttp-equiv="refresh"content="10;URL=欲连结文件之URL">
3.查询用表单--<isindex>
若欲设定查询栏位前的提示文字:
<isindexprompt="提示文字">
4.预设的基准路径--<base>
<basehref="放置文件的主机之URL">
5.标题文字<h#>..........</h#>#=1~6;h1为最大字,h6为最小字
6.字体变化<font>..........</font>
字体大小<fontsize=#>..........</font>#=1~7;数字愈大字也愈大
指定字型<fontface="字型名称">..........</font>
文字颜色<fontcolor=#rrggbb>..........</font>rr:
表红色(red)色码gg:
表绿色(green)色码bb:
表蓝色(blue)色码
7.显示小字体<small>..........</small>
8.显示大字体<big>..........</big>
9.粗体字<b>..........</b>
10.斜体字<i>..........</i>
11.打字机字体<tt>..........</tt>
12.底线<u>..........</u>
13.删除线<strike>..........</strike>
14.下标字<sub>..........</sub>
15.上标字<sup>..........</sup>
16.文字闪烁效果<blink>..........</blink>
17.换行<br>
18.分段<p>
19.文字的对齐方向<palign="#">#号可为left:
表向左对齐(预设值)center:
表向中对齐right:
表向右对齐P.S.<palign="#">之后的文字都会以所设的对齐方式显示,直到出现另一个<palign="#">改变其对齐方向,或遇到<hr>ⅱ<h#>标签时会自动设回预设的向左对齐。
20.分隔线<hr>
分隔线的粗细<hrsize=点数>
分隔线的宽度<hrsize=点数或百分比>
分隔线对齐方向<hralign="#">#号可为left:
表向左对齐(预设值)center:
表向中对齐right:
表向右对齐
分隔线的颜色<hrcolor=#rrggbb>
实心分隔线<hrnoshade>
21.向中对齐<center>..........</center>
第二章HTML主体标签及属性、颜色的设定
一、html的主体标签
在
和中放置的是页面中所有的内容,如图片、文字、表格、表单、超链接等设置。标签有自己的属性,设置标签内的属性,可控制整个页面的显示方式。标签的属性属性描述
link
设定页面默认的连接颜色
alink
设定鼠标正在单击时的连接颜色
vlink
设定访问后连接文字的颜色
background
设定页面背景图像
bgcolor
设定页面背景颜色
leftmargin
设定页面的左边距
topmargin
设定页面的上边距
bgproperties
设定页面背景图像为固定,不随页面的滚动而滚动
text
设定页面文字的颜色
例:
background="gifnam.gif"bgcolor="#000000"leftmargin=3 topmargin=2bgproperties="fixed"> 例1: bady的属性实例
vlink="#9900FF">
设定不同的连接颜色
测试body标签
二、颜色的设定 颜色是由"red""green""blue"三原色组合而成的,在HTML中对颜色的定义是用十六进位的,对於三原色HTML分别给予两个十六进位去定义,也就是每个原色可有256种彩度,故此三原色可混合成16777216种颜色。 例如: 白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff 红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000 绿色的组成是red=00,green=ff,blue=00,RGB值即为00ff00 蓝色的组成是red=00,green=00,blue=ff,RGB值即为0000ff 黑色的组成是red=00,green=00,blue=00,RGB值即为000000 应用时常在每个RGB值之前加上“#“符号,如: bgcolor="#336699"用英文名字表示颜色时直接写名字。 如bgcolor=green RGB颜色可以有四种表达形式: •#rrggbb(如,#00cc00) •#rgb(如,#0c0) •rgb(x,x,x)x是一个介乎0到255之间的整数(如,rgb(0,204,0)) •rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如,rgb(0%,80%,0%) 第三章文字版面的编辑 一、换行标签 换行标签是个单标签,也叫空标签,不包含任和内容,在html文件中的任何位置只要使用了 例1: 无换行示例
标签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。
无换行标记:
登鹳雀楼白日依山尽,黄河入海流。
欲穷千里目,更上一层楼。
有换行标记:
登鹳雀楼
白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
二、换段落标签
及属性
由
标签所标识的文字,代表同一个段落的文字。
不同段落间的间距等于连续加了两个换行符,也就是要隔一行空白行,用以区别文字的不同段落。
它可以单独使用,也可以成对使用。
单独使用时,下一个
的开始就意味着上一个
的结束。
良好的习惯是成对使用。
格式:
其中,ALIGN是
标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.
例2:
测试分段控制标签
花儿什么也没有。
它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨,
就像那受到了致命伤害的秋雁,悲哀无助地发出一声声垂死的鸣叫。
三、原样显示文字标签
要保留原始文字排版的格式,就可以通过
标签来实现,方法是把制作好的文字排版内容前后分别加上始标签和尾标签。例3:
原样显示文字标签
原样显示文字标签 白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
四、居中对齐标签
文本在页面中使用
标签进行居中显示, 是成对标签,在需要居中的内容部分开头处加 ,结尾处加 例4:
居中对齐标签
居中对齐标签 《送孟浩然之廣陵》
故人西辭黃鶴樓,
煙花三月下揚州。
孤帆遠影碧山盡,
惟見長江天際流。
五、引文标签(缩排标签)
标签可以用来建立一个引文,他特别适合较长文本的引用,引文显示时将会自动右移,左边空出几个格,加以区别。例5;引文标签
引文标签 春
盼望着,盼望着,东风来了,春天脚步近了。
一切都像刚睡醒的样子,欣欣然张开了眼。
山朗润起来了,水涨起来了,太阳的脸红起来了。
小草偷偷地从土里钻出来,
嫩嫩的,绿绿的。
园子里,田野里,瞧去一大片一大片满是的。
坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回
迷藏。
风轻悄悄的,草软绵绵的。
桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。
红的像火,粉的像霞,白的像雪。
花里带着甜味儿;闭了眼,村上仿佛已经满是桃儿、杏儿、梨儿。
花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。
野花遍地是:
杂样儿,有名字的,没名字的,散在草丛里像眼睛,像星星,还眨呀眨的。
“吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。
风里带来些新翻的泥土的气息,混着青草味儿,还有各种花的香,都在微微润湿的空气里酝酿。
鸟儿将巢安在繁花嫩叶当中,高兴起来了,呼朋引伴地卖弄清脆的喉咙,唱出宛转的曲子,跟轻风流水应和着。
牛背上牧童的短笛,这时候也成天嘹亮地响着。
雨是最寻常的,一下就是三两天。
可别恼。
看,像牛毛,像花针,像细丝,密密地斜织着,人家屋顶上全笼着一层薄烟。
树叶儿却绿得发亮。
小草儿也青得逼你的眼。
傍晚时候,上灯了,一点点黄晕的光,烘托出一片安静而和平的夜。
在乡下,小路上,石桥边,有撑着伞慢慢走着的人;地里还有工作的农民,披着蓑戴着笠。
他们的房屋,稀稀疏疏的,在雨里静默着。
天上风筝渐渐多了,地上孩子也多了。
城里乡下,家家户户,老老小小,也都赶趟儿似的,一个个都出来了。
舒活舒活筋骨,抖擞抖擞精神,各做各的一份事儿去。
“一年之计在于春”,刚起头儿,有的是工夫,有的是希望。
春天像刚落地的娃娃,从头到脚都是新的,它生长着。
春天像小姑娘,花枝招展的,笑着,走着。
春天像健壮的青年,有铁一般的胳膊和腰脚,他领着我们上前去。
六、水平分隔线标签
标签是单独使用的标签,是水平线标签,用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐。通过设置
标签的属性值,可以控制水平分隔线的样式。
标签的属性属性
功能
单位
默认值
size
设置水平分隔线的粗细
pixel(像素)
2
width
设置水平分隔线的宽度
pixel(像素)、%
100%
alignleftcenterright
设置水平分隔线的对齐方式
center
color
设置水平分隔线的颜色
black
noshade
取消水平分隔线的3d阴影
例6:
测试水平分隔线标签
测试水平分隔线标签 春晓
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少?
七、署名标签
署名标签一般用于说明这个网页是由谁或是由哪个公司编写的,以及其它相关信息。在
标签之间的文字显示效果是斜体字。例7:
署名标签
署名标签 乐游原
向晚意不适,
驱车登古原。
夕阳无限好,
只是近黄昏。
[唐]李商隐
八、特殊字符
在HTML文档中,有些字符没办法直接显示出来,例如?
.使用特殊字符可以将键盘上没有的字符表达出来,而有些HTML文档的特殊字符在键盘上虽然可以得到,但浏览器在解析HTML文当时会报错,例如"<"等,为防止代码混淆,必须用一些代码来表示它们。
HTML几种常见特殊字符及其代码表
例8:
特殊字符
特殊字符 <赋得古原草送别>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
白居易©
九、注释标签
在HTML文档中可以加入相关的注释标记,便于查找和记忆有关的文件内容和标识,这些注释内容并不会在浏览器中显示出来。
注释标签的格式有如下:
--注释的内容-->
例9:
注释标签(略)
十、字体属性
(1)标题文字标签
标签用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。 标题标签的格式:
说明:
标签是成对出现的, 标签共分为六级,在 ...
之间的文字就是第一级标题,是最大最粗的标题;...
之间的文字是最后一级,是最小最细的标题文字。align属性用于设置标题的对齐方式,其参数为left(左),enter(中),right(右)。
标签本身具有换行的作用,标题总是从新的一行开始。 例10-1:
设定各级标题
设定各级标题
一级标题。 二级标题。
三级标题。
四级标题。
五级标题。
六级标题。 (2)文字格式控制标签
标签用于控制文字的字体,大小和颜色。
控制方式是利用属性设置得以实现的。
格式:
FONT标签的属性
属性
使用功能
默认值
face
设置文字使用的字体
宋体
size
设置文字的大小
3
color
设置文字的颜色
黑色
说明:
如果用户的系统中没有face属性所指的字体,则将使用默认字体。
size属性的取值为1~7。
也可以用"+"或"-"来设定字号的相对值。
color属性的值为:
rgb颜色"#nnnnnn"或颜色的名称。
例10-2:
控制文字的格式
控制文字的格式
盼望着,盼望着,东风来了,春天脚步近了。
一切都像刚睡醒的样子,欣欣然张开了眼。
山朗润起来了,水涨起来了,太阳的脸红起来了。
小草偷偷地从土里钻出来,嫩嫩的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 教程给学生看的 教程 学生