HTML练习.docx

上传人:b****3 文档编号:11683479 上传时间:2023-06-02 格式:DOCX 页数:37 大小:85.65KB
下载 相关 举报
HTML练习.docx_第1页
第1页 / 共37页
HTML练习.docx_第2页
第2页 / 共37页
HTML练习.docx_第3页
第3页 / 共37页
HTML练习.docx_第4页
第4页 / 共37页
HTML练习.docx_第5页
第5页 / 共37页
HTML练习.docx_第6页
第6页 / 共37页
HTML练习.docx_第7页
第7页 / 共37页
HTML练习.docx_第8页
第8页 / 共37页
HTML练习.docx_第9页
第9页 / 共37页
HTML练习.docx_第10页
第10页 / 共37页
HTML练习.docx_第11页
第11页 / 共37页
HTML练习.docx_第12页
第12页 / 共37页
HTML练习.docx_第13页
第13页 / 共37页
HTML练习.docx_第14页
第14页 / 共37页
HTML练习.docx_第15页
第15页 / 共37页
HTML练习.docx_第16页
第16页 / 共37页
HTML练习.docx_第17页
第17页 / 共37页
HTML练习.docx_第18页
第18页 / 共37页
HTML练习.docx_第19页
第19页 / 共37页
HTML练习.docx_第20页
第20页 / 共37页
亲,该文档总共37页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

HTML练习.docx

《HTML练习.docx》由会员分享,可在线阅读,更多相关《HTML练习.docx(37页珍藏版)》请在冰点文库上搜索。

HTML练习.docx

HTML练习

HTML练习

2一些基础的HTMLTag

2.1、一个非常简单的HTML文件

程序:

这是一个非常简单的HTML。

结果:

这是一个非常简单的HTML。

2.2、HTML简单段落

程序:

这是第一段。

这是第二段。

这是第三段。

在HTML里,用p来定义段落。

结果:

这是第一段。

这是第二段。

这是第三段。

在HTML里,用p来定义段落。

 

2,3在HTML写多个段落

程序:

结果:

这一段在源代码里包含很多分行,但是浏览器忽略这些分行。

这一段在浏览器里包含很多空格,但是浏览器忽略多余空格。

你使用的浏览器的窗口大小决定了段落的行数。

如果你改编浏览器窗口的大小,段落的行数会因此改变。

 

2.4在HTML里如何换行

程序:


在一段

换行
请使用
br这个Tag。

结果:

在一段

换行

请使用

br这个Tag。

 

2.5HTML正文标题

程序:

这是1号标题

这是2号标题

这是3号标题

这是4号标题

这是5号标题

这是6号标题

 

结果:

这是1号标题

这是2号标题

这是3号标题

这是4号标题

这是5号标题

这是6号标题

 

2.6HTML居中显示的标题

程序:

这是标题

在右边

--align排列;排成一行-->

在左边

上面的标题是居中显示的。

结果:

这是标题

上面的标题是居中显示的。

 

2.7在HTML里加一条横线

程序:

用hr这个Tag可以在HTML文件里加一条横线。


村妇想像皇宫的生活:

皇后得用金扁担挑水吧。


上课时,老师讲课渐入佳境,口沫横飞,不小心溅到第一排一个同学的脸上。

同学正准备擦去,老师看到说:

“不要擦,这是知识的甘露。


初中某数学老师讲方程式变换,在讲台上袖子一挽大声喝道:

同学们注意!

我要变形了!

……

结果:

用hr这个Tag可以在HTML文件里加一条横线。

村妇想像皇宫的生活:

皇后得用金扁担挑水吧。

上课时,老师讲课渐入佳境,口沫横飞,不小心溅到第一排一个同学的脸上。

同学正准备擦去,老师看到说:

“不要擦,这是知识的甘露。

初中某数学老师讲方程式变换,在讲台上袖子一挽大声喝道:

同学们注意!

我要变形了!

……

 

2.8HTML文件的代码注释

程序:

--这是代码注释-->

代码注释是不会显示在网页里的。

结果:

代码注释是不会显示在网页里的。

 

2.9HTML背景颜色

程序:

看,这个页面是黄色的。

结果:

看,这个页面是黄色的。

 

3HTML常用格式

3.1HTML常用格式Tag

程序:

粗体用b表示。

斜体用i表示。

芙蓉姐姐这个词当中划线表示删除。

想唱就唱这个词下划线插入。

X2其中的2是下标

X2其中的2是上标

好好学习,天天向上。

这句话缩进表示引用

这是

预设(preformatted)文本.

在pre这个tag里的文本保留

空格和

分行。

callgetOrders

用code显示计算机代码,code里显示的字符是等宽字符。

结果:

粗体用b表示。

斜体用i表示。

这个词当中划线表示删除。

想唱就唱这个词下划线插入。

X2其中的2是下标

X2其中的2是上标

好好学习,天天向上。

这句话缩进表示引用

这是

预设(preformatted)文本.

在pre这个tag里的文本保留

空格和

分行。

callgetOrders

用code显示计算机代码,code里显示的字符是等宽字符。

 

4HTML特殊字符显示

5HTML利用超链接打开链接文件

5.1如何创建HTML超链接

程序:

这是一个链接

XX

结果:

这是一个链接

XX

humor02.html

这是humor02.html。


一次教育局领导视察课间操,结束后,本应由体育老师宣布“解散”,但一时情急,忘词了,憋了半天,大喊:

“撤退!

5.2将图片作为一个超链接

程序:

你可以将一张图片作为一个链接,点击这个图片。

结果:

你可以将一张图片作为一个链接,点击这个图片。

humor03.html源代码

humor03.html

这是humor03.html。


俺碰到一个心仪已久的女孩从澡堂里出来,想套近乎,憋了半天憋出一句:

“你洗澡啊,里面男的多不多啊?

5.3在新窗口打开一个链接

程序:

一则笑话

如果你将target的属性值设成_blank,你点击这个链接的时候,网页就会在一个新窗口出现。

 

结果:

一则笑话

humor01.html源代码

humor01.html

这是humor01.html。


我:

老公,是不是我要什么都会给我啊?

LG:

能实现的,尽量。

我:

我要天上的星星。

LG:

你要太阳月亮,可不好。

LG:

星星好说啊。

我:

为什么?

LG:

你用头往墙上碰,使劲碰,几下即看到了。

如果你将target的属性值设成_blank,你点击这个链接的时候,网页就会在一个新窗口出现。

 

5.4在HTML文件里跳转

程序:

参见第六章

参见第十一章

第1章

你好,你现在已经学会怎么制作网站了!

第2章

你好,你现在已经学会怎么制作网站了!

第3章

你好,你现在已经学会怎么制作网站了!

第4章

你好,你现在已经学会怎么制作网站了!

第5章

你好,你现在已经学会怎么制作网站了!

第6章

你好,你现在已经学会怎么制作网站了!

第7章

你好,你现在已经学会怎么制作网站了!

第8章

你好,你现在已经学会怎么制作网站了!

第9章

你好,你现在已经学会怎么制作网站了!

第10章

你好,你现在已经学会怎么制作网站了!

第11章

你好,你现在已经学会怎么制作网站了!

第12章

你好,你现在已经学会怎么制作网站了!

第13章

你好,你现在已经学会怎么制作网站了!

第14章

你好,你现在已经学会怎么制作网站了!

第15章

你好,你现在已经学会怎么制作网站了!

第16章

你好,你现在已经学会怎么制作网站了!

第17章

你好,你现在已经学会怎么制作网站了!

结果:

参见第六章

参见第十一章

 

5.6链接到一个邮箱地址

程序:

这是一个最简单的邮箱地址的链接:

info@">给新浪网站发信

这个邮箱地址的链接写了subject内容:

info@?

subject=Hello">给新浪网站发信

这个邮箱地址链接写了to,cc,bcc,subject,body的内容:

info@?

cc=webmaster@&bcc=media@&subject=I%20like%20your%20site&body=真是个好站点!

">写信给新浪

注:

空格请用%20表示。

结果:

这是一个最简单的邮箱地址的链接:

给新浪网站发信

这个邮箱地址的链接写了subject内容:

给新浪网站发信

这个邮箱地址链接写了to,cc,bcc,subject,body的内容:

写信给新浪

注:

空格请用%20表示。

HTML图片(Images)

在HTML里插入图片

程序:

布啦布啦Logo图片:

 

HTML图片的说明(Alt属性)

程序:

将鼠标停留在图片上,你可以看到Alt属性里写的内容。


红配绿一台戏">

 

结果:

 

HTML里图片的对齐方式(Align)

程序:

图片的上下对齐方式:

对齐方式:

top

对齐方式:

middle

对齐方式:

bottom

图片的左右对齐方式:

对齐方式:

left

对齐方式:

center

对齐方式:

right

结果:

 

HTML的图片大小

程序:

你可以使用Height和Width属性来改变图片的大小。

结果:

你可以使用Height和Width属性来改变图片的大小。

 

HTML里加背景图片

程序:

这个网页有背景图片哦!

如果图片比页面小,图片会自动重复。

结果:

将图片作为一个超链接

程序:

你可以将一张图片作为一个链接,点击这个图片。

结果:

你可以将一张图片作为一个链接,点击这个图片。

 

HTML字体(Fonts)

HTML字体大小(fontsize)

程序:

字体大小fontsize

这段文字的字体大小值为1。

这段文字的字体大小值为2。

这段文字的字体大小值为3。

这段文字的字体大小值为4。

这段文字的字体大小值为5。

这段文字的字体大小值为6。

这段文字的字体大小值为7。

结果:

这段文字的字体大小值为1。

这段文字的字体大小值为2。

这段文字的字体大小值为3。

这段文字的字体大小值为4。

这段文字的字体大小值为5。

这段文字的字体大小值为6。

这段文字的字体大小值为7。

 

HTML字体风格(fontface)

程序:

字体风格fontface

以下第一段用的是arial字体,第二段用的是courier字体,第三段用的是verdana字体。

arialcourierverdana

arialcourierverdana

arialcourierverdana

结果:

以下第一段用的是arial字体,第二段用的是courier字体,第三段用的是verdana字体。

arialcourierverdana

arialcourierverdana

arialcourierverdana

 

HTML字体颜色(fontcolor)

程序:

字体颜色fontcolor

这段文字用的是缺省的字体颜色。

这段文字的字体颜色为红色。

这段文字的字体颜色为灰色。

这段文字的字体颜色为绿色。

结果:

这段文字用的是缺省的字体颜色。

这段文字的字体颜色为红色。

这段文字的字体颜色为灰色。

这段文字的字体颜色为绿色。

CSS常用文本属性

文本对齐属性(text-align)

程序:

文本对齐属性text-align

.p1{text-align:

left}

.p2{text-align:

right}

.p3{text-align:

center}

这段的本文对齐属性(text-align)值为居左。

这段的本文对齐属性(text-align)值为居右。

这段的本文对齐属性(text-align)值为居中。

 

结果:

这段的本文对齐属性(text-align)值为居左。

这段的本文对齐属性(text-align)值为居右。

这段的本文对齐属性(text-align)值为居中。

 

文本修饰属性(text-decoration)

程序:

文本修饰属性text-decoration

.p1{text-decoration:

none}

.p2{text-decoration:

underline}

.p3{text-decoration:

line-through}

.p4{text-decoration:

overline}

文本修饰属性(text-decoration)的缺省值是none。

这段的文本修饰属性(text-decoration)值是underline。

这段的文本修饰属性(text-decoration)值是line-through。

这段的文本修饰属性(text-decoration)值是overline。

结果:

文本修饰属性(text-decoration)的缺省值是none。

这段的文本修饰属性(text-decoration)值是underline。

这段的文本修饰属性(text-decoration)值是line-through。

这段的文本修饰属性(text-decoration)值是overline。

 

文本缩进属性(text-indent)

程序:

文本缩进属性text-indent

.p1{text-indent:

8mm}

.d1{width:

300px}

.p2{text-indent:

50%}

下面两端都设定CSS文本缩进属性(text-indent),第一段用长度方法设值,第二段用百分比方法设值。

芙蓉姐姐说道:

“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸,配上那副火爆得让男人流鼻血的身体,就注定了我前半生的悲剧。

芙蓉姐姐说道:

“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。

我总是很焦点。

我那张耐看的脸,配上那副火爆得让男人流鼻血的身体,就注定了我前半生的悲剧。

结果:

下面两端都设定CSS文本缩进属性(text-indent),第一段用长度方法设值,第二段用百分比方法设值。

芙蓉姐姐说道:

“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 医药卫生 > 基础医学

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2