代码入门教程(3)

第一章 代码基础知识第四节 标签本节我们来具体地认识一下标签。学习标签,我们要掌握这么几个要点:1、标签是由一个尖括号和它里面的内容组成的统一体。换句话来说,也就是一个尖括号和它里面的内容组成了一个标签。2、尖括号里面的第一小段代码就是这个标签的名称。其余的代码都是这个标签的属性与属值。标签名称和它的属性是用一个空格来分开的,各个属性之间是用空格或者分号(;)来分开的,属性与属值之间是用等号(=)或者冒号(:)来连接的。3、大部分的标签,都是成对使用的,前面有其首标签,后面必定有其尾标签。少数的标签,没有尾标签,没有尾标签的标签叫做空标签。4、网页中的代码,绝大部分是标签,少数的不是标签。是标签的,必定有尖括号。5、标签是代码,而代码不都是标签。6、标签的一般形式如下:<标签名称 属性=属值 属性=属值 ……>有时候,属值需要用双引号引起来。例如:<table border="5" cellSpacing="1" cellPadding="3" width="650" height="210">7、大部分的标签都是成对使用的,其形式如下:例1:<FONT color=#ff0000 size=6 face=隶书>内容</FONT>  例2:<marquee direction=up scrollamount=4 >内容</marquee>注释:例1是文字标签成对使用的例子。例1中前面的标签是文字标签(也叫首标签),后面的标签是文字尾标签,中间是文字内容。首标签的“名称”规定了这个页面显示的内容的类别,“属性与属值”是对这个显示内容的具体限制、管辖与修饰。“内容”则是这个页面显示的具体文字内容。尾标签,起着收尾的作用。有了尾标签,这个页面才能够正常显示(如果你忘记了输入尾标签,大多数情况下,系统是会自动给你补上的。)。例1是文字标签,页面显示的文字是“内容”这两个字,这两个字的字体是隶书,字号是6号字,文字颜色是红色。例2是移动标签成对使用的例子。中间的“内容”可以是文字,也可以是图片等等。

图片

图片

图片

图片

图片

图片

作业:1、说说标签中, 造物标签名称在尖括号内的什么位置,属性与属值在尖括号内的什么位置。2、标签名称和它的属性是怎样分割开的?各个属性又是怎样分割开的?3、属性和属值是怎样连接起来的?4、判断题:(1)网页中的代码都是标签。(2)网页中的标签都是代码。(3)有些标签不是代码。(4)有些代码不是标签。(5)有些标签没有标签名称。(6)所有的标签都有属性与属值。(7)没有尾标签的那些标签叫做空标签。掌握标签的这些要点,在今后的制作中会应用它们。(8)table是表格标签。(9)一个尖括号里面的内容就是一个标签。(10)标签名称和它的属性是用等号连接起来的。5、给下面的代码添加注释:<div align="center"><a href=http://gzbopai.blog.163.com/blog/static/18015510920115158175419/><img style="margin: 0px 10px 0px 0px;" alt="江南才女展才华 - 缘水禅心 - " src=http://image52.360doc.com/DownloadImg/2012/05/2517/24358911_2.jpg ></a></div><p align="center"><a href="http://gzbopai.blog.163.com/blog/static/18015510920115158175419/">&nbsp;</a><embed height="31" type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer" width="210"src="http://www.360doc.cn/article/http://b.bst.126.net/common/spirit.swf?version=1.0.13&amp;t=20110426"wmode="transparent" invokeurls="false" quality="high"allowScriptAccess="always" flashvars="loop=1&amp;autoPlay=true;url=http://api.ning.com/files/uvLptalBmcBc2hBcsR*eZLkfKq5ZTBoZBFnJyNOWIkA_/ip-FoYN3W1wx.mp3&amp;title=六月的雨&amp;artist=胡歌" allowNetworking="all"></p>答案举例:上面的代码共有()个标签。(括号内要填入数字)第一个标签: <div align="center"> 注释:<标签名称 属性=属值>说明:以下的标签按照第一个标签的样式自己填加注释。第二个标签:<……>   注释:<……>第三个标签:<……>   注释:<……>………

图片

2012年10月2日于北京

图片

图片

图片

图片

第一章 代码基础知识第五节 常用标签本节讲11种常用的标签。俗话说得好:巧媳妇难为无米之炊。常用标签是代码知识的基础,也是制作网页必不可少的材料。学会这些标签,你就可以应用它们制作出许许多多变幻莫测的网页来;离开了这些标签,你的网页制作就是一句空话。因此,在常用标签的学习上,必须下苦功夫学会学好,要真正弄清楚每个标签以及它们的属性与属值的含义,最好是能够把这些标签记在脑子里,能够背写出来。万一记不住,也没有多大的关系,你可以把它们存入一个文件夹,在应用的时候,能够找到它们,复制一下就行了,无非是多用点儿时间罢了。1、文字标签:<FONT>(文字标签大写) <font>(文字标签小写)2、移动标签,又叫滚动标签或者滑动标签。标签如下:<MARQUEE>(移动标签大写)<marquee>(移动标签小写)3、定位标签又叫对齐方式标签。可分为水平对齐与垂直对齐两种对齐方式。(1)水平对齐标签:<ALIGN=?>(对齐方式大写)<align=?>(对齐方式小写)注释:?处为:left(左)或者center(中)或者right(右)(2)垂直对齐标签:<valign=?>注释:?处为:top(上)或者middle(中)或者 bottom(下)居中标签:<center>4、图片标签,又叫贴图标签。标签如下:<IMG> (图片标签大写) <img>(图片标签小写)( 以下标签,小写略 )5、表格中的标签是一套标签,一共四个标签。成套使用,缺一不可。(1)表格标签:<TABLE>  (2)表格的主体标签:<TBODY> (3)表格的行标签:<TR> (4)表格的列标签:<TD>6、链接标签:<A>(链接标签)7、多媒体标签,也叫插入标签。标签如下:<embed> 多媒体标签一般不见用尾标签。8、换行标签:<br>  换行标签属于空标签,它没有尾标签。9、 不换行标签:<nobr>10、块区标签: <div>11、段落标签:<p>顺便讲个空格代码,空格代码是个经常使用的代码。代码如下:&nbsp说明:1、上面讲解的11种标签,除去“多媒体”标签与“换行”标签外,都有尾标签。在哪个标签的字母前面添加一个斜杆,就是这个标签的尾标签。举例如下:文字标签为:<FONT>  文字尾标签为:<FONT>  移动标签为:<MARQUEE>  移动尾标签为:</MARQUEE>2、大部分标签都有它的属性与属值,上面讲解的标签,我把属性与属值省略了。各种标签的属性与属值,我将在以后的有关章节中进行讲解。3、各种标签中的字母,一般是大写和小写都有人使用的,这种现象大概是每个人使用字母的习惯不同的原因吧,因此,要想看懂别人制作的网页代码,学习别人的制作方法,大写小写字母的标签都要练习,都要会认、会写。

图片

作业:自己随便找几篇文章,复制其代码,分别指出每个标签的名称。(如果有不认识的标签可以暂时搁置起来)说明:1、你在完成上面的作业时,“复制”下代码以后,要在每一个标签的尖括号前面,点击一下“回车键”,使每一个标签各占一行,然后在标签的后面添加括号,再在括号里做出答案。(作业形式:见下面的“作业答案举例”)2、此种方法,只适宜于你认识标签。(因为“在每一个标签的尖括号前面,点击了'回车键’”以后,此网页的显示效果可能已经有所改变了,你把它复制、粘贴到撰写文章处发表时,已经不可能显示出原来的网页了。)

图片

图片

图片

图片

作业答案举例:1、代码及答案: <div align="center">( 块区标签)<a href="/userhome/4127803">(链接标签)<font style="color: rgb(0, 0, 255); font-size: 18pt;" color="#000000">(文字标签)</font>(文字尾标签)<a>(链接标签)<img title="春天没来的图书馆欢迎您"src="http://www.360doc.cn/article/http://image33.360doc.com/DownloadImg/2011/08/0319/15224783_13.png">(图片标签)</a>(链接尾标签)代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)

图片

2012年10月3日于北京