很好的HTML教程《百度红客吧系列专题课程》.docx
《很好的HTML教程《百度红客吧系列专题课程》.docx》由会员分享,可在线阅读,更多相关《很好的HTML教程《百度红客吧系列专题课程》.docx(73页珍藏版)》请在冰点文库上搜索。
很好的HTML教程《XX红客吧系列专题课程》
HTML语言--XX红客吧系列专题课程--1
话说,嫖客有媳妇了,所以,嫖客要爆发了。
。
。
从今天起,一天一更,HTML语言,原创教程,个人感觉应该可以称之为教程的哈。
。
。
淫民们需要的建议收藏。
2010年,为了振兴红吧,我也来写点文章吧,呵呵,初中时一直梦想着想做一名作家,现在就在这里献献丑吧,由于我也不会别的什么,想来想去,写点HTML的吧,这个话题现在还没人写,就由我来写吧。
--------------By不是嫖客
----------2010年2月21日
写在前面的话:
HTML很简单,但CSS比起HTML有一点点复杂,这里只讲HTML,不讲CSS。
朋友们看到这篇文章的时候不要惊慌,这文章虽然不短,但是不难,可以说是非常简单的,我强烈建议你来学学,这样以后你也可以对别人说,我会HTML!
呵呵,是吧?
总比你什么都不会的强,好了,废话就说这么多吧,下面开始正文。
第一节、HTML基本语法
HTML的官方介绍什么的我就不说了,打字也挺累的,只简单介绍一下吧,其他的懂不懂都没关系。
HTML全称为HypertextMarkupLanguage,中文解释为超文本标记语言。
在HTML语言中,所有的标记都必须用尖括号(即大于号“<”和小于号“>”)括起来,一般情况下,每个标记单独占一行,例1:
(1.html)
XX红客吧这是一个简单的
用HTML语言写的网页。
--这里用br标记将一行的话强制分成了两行。
-->
我们来看上面的代码,可以发现,所有的标记都是被包含在尖括号之间的,大部分的标记是成对出现的,比如和,
和,我想朋友们应该可以看出来,这些标记有的只是单纯的英文字母,有的在这些相应的英文字母前加了一个斜杠“/”,我们称这些没有带有斜杠的标记为开始标记,带斜杠的标记为结束标记。
开始标记和结束标记的唯一差别就是带不带斜杠。
我们继续看上面的代码,发现其中的
标记只有一个,那么这个
标记,就是一个不是成对出现的标记,在后面的课程中,我们会介绍这个标记的用途的,如果你把上面的代码复制到了一个TXT文本里并把后缀名改为了.html,那么我想,你可能会明白这个
标记是什么意思了。
另外,需要说明的一点是,在HTML中,标记字母是不区分大小写的,即和是没有分别的,浏览器都认识。
还有一点,就是几乎所有的标记都有其对应的属性,如果将每个标记都比喻成一个美女的话,那么这些属性就是美女身上的衣服,起的都是点缀作用,但在实际应用中必不可少,就像美女的衣服同样必不可少一样。
这些标记的属性,都是放在对应标记的尖括号内的,比如:
这行代码为我们的网页指定了一个背景颜色,至于这个颜色到底是什么颜色,请看红客吧的上传页面,那里我写的就是这个颜色。
记好,标记的属性一定要放在尖括号中才有用,就像美女的衣服一定要穿到身上才有用一样。
其实,我强烈反对浮躁的人去跟代码打交道,因为他们在写代码的时候通常会很急躁,急躁的脾性在编程界是走不通的。
但是,作为红客吧的吧主,肩负着振兴红客吧的使命,我会尽量把我的文章写的更简单一点,更容易理解一点,对于正在看这篇文章的朋友,嫖客谢谢你的支持。
第二节、HTML的基本结构
我们再来看一下在第一节里写的那几行代码(1-1.html),不难发现,我在代码的开头,用了一个标记,在代码的结尾,用了一个标记,我把这对标记成为超文本文档标记,写这对标记的意思就是告诉浏览器,“你现在解析的是一个网页”。
这个标记,不是必须的,也就是说,可以省略掉,你在写网页的时候可以不写这对代码,一般情况下,浏览器照样可以正常解析,但是,为了保持你的代码的完整性,也为了让我们养成良好的编程习惯,最好是不要省略掉这对标记的。
其中,标记是一个网页代码的开始标记,即一般地,每个HTML网页都是以开始的,在网页的最后,以结束。
我们在学习HTML时,我提醒一下朋友们,当你写完一个网页的全部代码后,执行时却发现代码出错,但是又一直找不到错误,那么,你可以查看一下你是否把人家成对的标记给搞离婚了…
继续看代码,第二行和第四行代码,分别是
标记的开始标记和结束标记,这对标记被我们成为首部标记,在我们的这些课程中,对首部标记的使用不是很充分,在我们学了VBScript或Javascript以后,或者做SEO优化时可能会用到的多一些。
下面看第三行代码,我把
标记的开始代码和结束代码放到了一行,主要是这行代码很短,可以放到一行里来,而对浏览器的解析没有影响。这个
标记,被我们称为标题标记,即每个网页的标题,就是在IE的标题栏显示的文字。下面看第五行和第九行,分别是
标记的开始标记和结束标记,我们称这对标记为正文标记,即在这对标记之间的内容,将显示到网页正文中。
继续往下看,看到了第六行,这里前面是在网页中显示的文字,后边跟了一个
标记,而下一行,仍旧是文字,这里
的意思就是强制断行的意思,就是不论你是不是一句话,只要这个标记出现,必定断行。
看第八行,是一个
--…-->标记,在HTML中,这个标记代表的是注释的意思,就是这个标记里边的东西是为了让别人更容易理解你的代码而写的,这些内容不会被浏览器显示到页面中。
OK,在电脑前坐了近2个小时,终于写了2节,呵呵,不着急,慢慢来。
把第一节的代码分析完了,下面我们来看一下上边的代码的执行效果,为了方便起见,我把代码在我的虚拟机里执行的,看图:
OK,本节课结束,从下节课开始,我开始给朋友们介绍常用的各种标记。
本教程所有源码及教程中涉及的视频、音乐、图片等资料下载地址:
第三节、设置文本格式
从这节课开始,我会给朋友们介绍一些常用的标记,并对它们的用法做一些举例,所以牵扯到了不少代码,请朋友们切莫浮躁,切莫心急,学编程,急不得。
OK,开始。
我们知道,在很多时候,我们从网页上获取信息都是从文字里获得的,那么我们现在就来学习一下如何来控制我们的网页上的文字,让它更好的为我们服务。
本节课比起前2节课可能会有些长,希望朋友们不要心急,慢慢来。
在HTML中,我们可以对网页中的文本设置以下格式:
1.分段与换行
2.设置段落对齐方式
3.设置字体
4.设置字号
5.设置文本颜色
6.设置字符样式
下面我一条一条的来说,不着急,呵呵,反正我今天把这一节课写完就算完成任务了,呵呵,你看的时候看完这一节就先停下来吧,别着急着看下一节课,先把这节课消化消化。
1.分段和换行
分段标记为
和
,换行标记为
看好了,分段标记是一对,换行标记是单身!
位于分段标记
和
之间的内容,被浏览器认为是一个段落,从而加以区别显示,而
标记则强行规定了当前行的中断,我们知道,在WORD里打字的时候,如果这一行写不下了,它会自动换行,其实在网页里也是这个道理,浏览器会自动换行,只是有些时候我们为了段落或主题的的清晰要求,需要把一段文本分成2行,而如果让浏览器自己做这件事的话,它不明白你的意思,所以并没有给你分行,这样就不对了,是吧?
显然,没有达到我们想要的效果,那么我们就可以在你需要换行的地方放一个
标记,那么
标记前的内容和
标记后的内容就会被浏览器解析为不同的2行。
哎呀,说理论总是很抽象的,下面我们来看代码,对着代码说容易理解一些。
例2:
(2.html)
XX红客吧原创课程----使用分段标记和换行标记XX红客吧
欢迎你!
我是不是嫖客,
红客吧期待你的加入!
OK,我们来看一下代码的执行效果:
朋友们可以把代码复制下来,自己执行一遍看看,不难发现分段标记和换行标记的区别:
分段标记分开的段落之间空隔很大,而用换行标记分开的两句话之间的空隙不大。
另外,我要告诉朋友们的是,我们在写代码时一行一行的写只是为了以后修改方便,也为了使别人能看懂我们的代码,但是我们也可以不一行一行分开写的,可以全部打乱,但只要各标记不变,那么执行效果就不会变,比如,下面两种代码的执行效果是一样的:
可以看到,下面的这张图里的代码显得很乱,但是,它是不影响执行效果的,但是我们在写代码的时候尽量养成整齐的好习惯吧。
OK,第三节课结束,嫖客谢谢你的支持!
第四节、设置文本格式
2.设置段落对齐方式
上面我们已经学习了段落标记
和
,那么这里说的就是给这个美女披件衣服了,对,我们使用的就是
和
的众多属性中的一个属性:
ALIGN属性。
我们知道,在WORD中,文字排版有左对齐、右对齐、居中、两边对齐4种对齐方式,那么在网页中也是这样的,他们对应的英文依次为:
Left、Right、Center、Justify
这几个英文即为
标记对的ALIGN属性的取值。
另外,需要说明的一点是,这个ALIGN属性是很多标记都有的一个属性,比如水平线标记
、图像标记
都有这个属性,用处很大,对网页的排版起到了很大的作用,它的用法大致是一样的,但是需要强调的是,我们知道,在WORD里,默认的对齐方式是两边对齐的,那么在网页里,对于不同的标记,ALIGN属性的默认值是不同的,比如:
对于分段标记对
和
来说,ALIGN属性的默认值为Left,对于水平线标记
来说,ALIGN属性的默认值为Center,但是,这一点也不用太担心,因为我们只要养成使用一个标记后立即给它加上相应的属性的好习惯就可以了,也就是等于强制声明吧,这样,不论它原本的默认属性是怎样的,浏览器都会按照我们的设定来显示。
好,下面我们来看一段代码:
例3:
(3.html)
XX红客吧原创课程----设置段落对齐方式--下面开始设置段落的对齐方式-->
这一行为左对齐,align属性的值为left。
这一行为居中对齐,align属性的值为center。
这一行为右对齐,align属性的值为right。
这一行为两边对齐,align属性的值为justify。
我们来看一下执行效果:
OK,设置段落对齐方式就先说到这里,下节课再说一点就没有了。
第五节、设置文本格式
这节课继续说段落对齐方式,这节课的主要任务是让朋友们认识两个在设置段落对齐方式时很实用的标记----节标记对
和居中对齐标记对
。
这节课很简单,我们来看一段代码就OK了。
例4:
(4-1.html)
XX红客吧原创课程----认识div标记和center标记春夜喜雨
--下面开始设置小节的对齐方式-->
好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
OK,本节课任务基本完成,下面呢,我再来说一点吧,老担心我讲的不够详细,担心新人看不懂,,就是我们在使用标记的各种属性时,无须计较这些属性的先后顺序,只要出现就可以了。
设计网页的时候(不论是用DW做还是手工写),都难免会需要插入一些空格,这在WORD里很简单,没什么难的,但在HTML里不一样,即使我们在代码里按了很多个空格,但浏览器解析的时候仍然显示的只有一个空格,这是因为浏览器自动把那些多余的空格过滤掉了,这时我们就用到了一些特殊的方法: