跑铅钓法:Html基础入门(二)1

来源:百度文库 编辑:九乡新闻网 时间:2024/04/29 22:47:54
Html基础入门(二)
【编辑网页】
一、常见Html标签
1、... 表示此文本文件是网页超文本格式,也即Html格式。
2、... 在 后面,表示超文本文件的头信息,如作者、标题等。
3、... 在 后面,这是网页的内容区域,如文字等。
4、

...

表示一个自然段,里面内容单独成一个段落。
5、... 表示一段文字区域,比如要加颜色或改变字体。另外还有Div标签,也是指定一个区域,div 和 span 标签都可以用来指定样式,div 的作用范围较大,可以是一块区域。
6、... 文字格式标签,比如颜色、字体、字号等。
7、网页举例:
——第一行 表示这个是网页文件。


黄玫瑰
——第二段 .. 是网页的摘要信息,字符编码,标题,也就是标题。

别落泪 所有的花儿你最美 受了伤 别伤悲
——第三段 .. 是网页正文部分,网页内容都写在这里。
——最后的 表示网页结束,一般每个标签是成对的,有一个带斜杠的 标签来关闭它,如果不成对就在最后的尖括号前面加一个斜杠,如

二、背景色的设置
背景包括图片和颜色。下面是背景色和图片的设置代码:
——这是一种浅蓝的颜色。

三、文字对齐
代码如下:


——用以说明主页制作所
使用的文字以及语言;
网页编辑


古诗二首

——text-align 是对齐的样式,冒号后面的单词对应对齐方向,left 是左对齐、center 是居中对齐、right 是右对齐;


远看山有色,近听水无声。


春去花还在,人来鸟不惊。


作者:王维



四、
标签
在上面代码里的下面输入
标签代码:

border 属性显示一个是边框,冒号后面是颜色、粗细和实线,用空格分开。
这个边框默认跟随窗口的大小,我们可以固定它的大小,继续输入:

这里的 width 是宽度,height 是高度,写的时候细心。内边距:默认文字是贴着左右边框,可以在 div 中设定,继续输入下面的内容;

后面的 padding 是内边距,后面的单词是各个边,这里只设定了左右,还有上下 top 和 bottom。外边距:这是 div 边框跟外面元素的距离,单独的 div 是跟窗口边框的边距,就像是书本的页边距,接着输入下面的内容;

这儿的 margin 是外边距,距离外面边框的距离,这儿只设定了上边距 top,其他的根据需要也可以设定;
可以看出,
与(表格)相似。
这样上面的代码就是下面的样子了:


古诗二首



远看山有色,近听水无声。


春去花还在,人来鸟不惊。


作者:王维



效果如下:
古诗二首

远看山有色,近听水无声。
春去花还在,人来鸟不惊。
作者:王维
五、
布局
默认 div 占据一行,第二个 div 到下一行去,怎样用 div 进行分栏布局呢?
1)在 下面加一个
标签,作为主框架,在标签里加入下面的样式。

2)前面的 id 是这个 div 的标识符,用来标记这个 div 容器,在里面的样式里设置了颜色、边框、内边距,设定了固定宽度 604,高度 202,这个可以计算出来,根据下面两列的宽度再加上内边距。
3)修改里面的古诗的 div 样式,加上背景色、去掉内外边距,最后加上一个左浮动 float:left

4)在这个
后面,再加上另一个 div,样式相同,里面输入另一首古诗 ;

古诗二首


绝句


两个黄鹂鸣翠柳,一行白鹭上青天。


窗含西岭千秋雪,门泊东吴万里船。


作者:杜甫



这儿的 float:left; 让这个 div 框,跟上一个框并排左对齐,而不是到下一行去。
这样修改后的代码如下:



古诗二首



远看山有色,近听水无声。


春去花还在,人来鸟不惊。


作者:王维




古诗二首


绝句


两个黄鹂鸣翠柳,一行白鹭上青天。


窗含西岭千秋雪,门泊东吴万里船。


作者:杜甫




效果应该是:
古诗二首

远看山有色,近听水无声。
春去花还在,人来鸟不惊。
作者:王维
古诗二首
绝句
两个黄鹂鸣翠柳,一行白鹭上青天。
窗含西岭千秋雪,门泊东吴万里船。
作者:杜甫
六、ul列表
对于排列有序的条目,可以使用列表来实现。也就是建立目录,实现超链接。
1、在 后面接着输入下面的代码:

这里的










第一行
第二行
第三行

这是一个三行的表格,里面的tr就是行标记,table是表格,id是编号,border是边框,效果应该是:
第一行
第二行
第三行
2)按两下回车键,接着输入下列内容,在网上找一张图片,把地址粘上去。











这里面的position是表格位置,这儿是相对于窗口,left是左边距,top是顶边距,这儿都是贴着窗口。
效果应该是:



【制作音画贴】
打开记事本,在工作区输入下面的代码:












background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_2.jpg border=0>















 
——以上是大的边框。
 

黄玫瑰
 
——这是标题。
在一上

 

 


background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_3.jpg border=0>——这是背景图片。



color=#ff5809>——从这到以下是文字,即歌词的设置。

黄玫瑰
演唱:乌兰托娅



别落泪
所有的花儿你最美
受了伤
别伤悲
别让泪珠湿花蕊



别让我看见你的伤悲
我会为她心碎
别问自己对不对
心中有爱就很美
即使告别了春天阳光
你依然要开放

别害怕
别犯傻
别轻易剪去长发
我会站在你的身旁
给你依靠的肩膀
别说话
微笑吧
回头是灿烂的霞
我默默的祝
福你
感觉到了吗
海角天涯
哪里不是你的家
别怕啊
别傻啊


哪里都能开花
你应该知道你是那样美
谁都
会为你心醉
别再抱怨爱太累
真爱能有几回




height=35 type=audio/x-pn-realaudio-plugin loop="-1" autostart="-1" volume="60">

——这是播放器。

——一下的部分是回应前面的,也就是结尾。



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 







 








然后保存文件,保存时要注意,文件名的后缀一定要是“htnl”。找到文件打开它,效果应该是:
黄玫瑰
在一上

黄玫瑰
演唱:乌兰托娅
别落泪
所有的花儿你最美
受了伤
别伤悲
别让泪珠湿花蕊
别让我看见你的伤悲
我会为她心碎
别问自己对不对
心中有爱就很美
即使告别了春天阳光
你依然要开放
别害怕
别犯傻
别轻易剪去长发
我会站在你的身旁
给你依靠的肩膀
别说话
微笑吧
回头是灿烂的霞
我默默的祝福你
感觉到了吗
海角天涯
哪里不是你的家
别怕啊
别傻啊
哪里都能开花
你应该知道你是那样美
谁都会为你心醉
别再抱怨爱太累
真爱能有几回
',1)">