很好的HTML教程《百度红客吧系列专题课程》.docx

1、很好的HTML教程XX红客吧系列专题课程HTML语言-XX红客吧系列专题课程-1话说，嫖客有媳妇了，所以，嫖客要爆发了。从今天起，一天一更，HTML语言，原创教程，个人感觉应该可以称之为教程的哈。淫民们需要的建议收藏。2010年，为了振兴红吧，我也来写点文章吧，呵呵，初中时一直梦想着想做一名作家，现在就在这里献献丑吧，由于我也不会别的什么，想来想去，写点HTML的吧，这个话题现在还没人写，就由我来写吧。-By 不是嫖客-2010年2月21日写在前面的话：HTML很简单，但CSS比起HTML有一点点复杂，这里只讲HTML，不讲CSS。朋友们看到这篇文章的时候不要惊慌，这文章虽然不短，但是不难，可

2、以说是非常简单的，我强烈建议你来学学，这样以后你也可以对别人说，我会HTML！呵呵，是吧？总比你什么都不会的强，好了，废话就说这么多吧，下面开始正文。 第一节、 HTML基本语法HTML的官方介绍什么的我就不说了，打字也挺累的，只简单介绍一下吧，其他的懂不懂都没关系。HTML全称为Hypertext Markup Language,中文解释为超文本标记语言。在HTML语言中，所有的标记都必须用尖括号(即大于号“”)括起来，一般情况下，每个标记单独占一行，例1：(1.html)XX红客吧这是一个简单的用HTML语言写的网页。我们来看上面的代码，可以发现，所有的标记都是被包含在尖括号之间的，大部分

3、的标记是成对出现的，比如和，和，我想朋友们应该可以看出来，这些标记有的只是单纯的英文字母，有的在这些相应的英文字母前加了一个斜杠“/”，我们称这些没有带有斜杠的标记为开始标记，带斜杠的标记为结束标记。开始标记和结束标记的唯一差别就是带不带斜杠。我们继续看上面的代码，发现其中的标记只有一个，那么这个标记，就是一个不是成对出现的标记，在后面的课程中，我们会介绍这个标记的用途的，如果你把上面的代码复制到了一个TXT文本里并把后缀名改为了.html，那么我想，你可能会明白这个标记是什么意思了。另外，需要说明的一点是，在HTML中，标记字母是不区分大小写的，即和是没有分别的，浏览器都认识。还有一点，就是

4、几乎所有的标记都有其对应的属性，如果将每个标记都比喻成一个美女的话，那么这些属性就是美女身上的衣服，起的都是点缀作用，但在实际应用中必不可少，就像美女的衣服同样必不可少一样。这些标记的属性，都是放在对应标记的尖括号内的，比如:这行代码为我们的网页指定了一个背景颜色，至于这个颜色到底是什么颜色，请看红客吧的上传页面，那里我写的就是这个颜色。记好，标记的属性一定要放在尖括号中才有用，就像美女的衣服一定要穿到身上才有用一样。其实，我强烈反对浮躁的人去跟代码打交道，因为他们在写代码的时候通常会很急躁，急躁的脾性在编程界是走不通的。但是，作为红客吧的吧主，肩负着振兴红客吧的使命，我会尽量把我的文章写的更

5、简单一点，更容易理解一点，对于正在看这篇文章的朋友，嫖客谢谢你的支持。 第二节、HTML的基本结构我们再来看一下在第一节里写的那几行代码（1-1.html），不难发现，我在代码的开头，用了一个标记，在代码的结尾，用了一个标记，我把这对标记成为超文本文档标记，写这对标记的意思就是告诉浏览器，“你现在解析的是一个网页”。这个标记，不是必须的，也就是说，可以省略掉，你在写网页的时候可以不写这对代码，一般情况下，浏览器照样可以正常解析，但是，为了保持你的代码的完整性，也为了让我们养成良好的编程习惯，最好是不要省略掉这对标记的。其中，标记是一个网页代码的开始标记，即一般地，每个HTML网页都是以开始的，

6、在网页的最后，以结束。我们在学习HTML时，我提醒一下朋友们，当你写完一个网页的全部代码后，执行时却发现代码出错，但是又一直找不到错误，那么，你可以查看一下你是否把人家成对的标记给搞离婚了继续看代码，第二行和第四行代码，分别是标记的开始标记和结束标记，这对标记被我们成为首部标记，在我们的这些课程中，对首部标记的使用不是很充分，在我们学了VBScript或Javascript以后,或者做SEO优化时可能会用到的多一些。下面看第三行代码，我把标记的开始代码和结束代码放到了一行，主要是这行代码很短，可以放到一行里来，而对浏览器的解析没有影响。这个标记，被我们称为标题标记，即每个网页的标题，就是在IE

7、的标题栏显示的文字。下面看第五行和第九行，分别是标记的开始标记和结束标记，我们称这对标记为正文标记，即在这对标记之间的内容，将显示到网页正文中。继续往下看，看到了第六行，这里前面是在网页中显示的文字，后边跟了一个标记，而下一行，仍旧是文字，这里的意思就是强制断行的意思，就是不论你是不是一句话，只要这个标记出现，必定断行。看第八行，是一个标记，在HTML中，这个标记代表的是注释的意思，就是这个标记里边的东西是为了让别人更容易理解你的代码而写的，这些内容不会被浏览器显示到页面中。OK，在电脑前坐了近2个小时，终于写了2节，呵呵，不着急，慢慢来。把第一节的代码分析完了，下面我们来看一下上边的代码的执

8、行效果，为了方便起见，我把代码在我的虚拟机里执行的，看图:OK，本节课结束，从下节课开始，我开始给朋友们介绍常用的各种标记。本教程所有源码及教程中涉及的视频、音乐、图片等资料下载地址：第三节、设置文本格式从这节课开始，我会给朋友们介绍一些常用的标记，并对它们的用法做一些举例，所以牵扯到了不少代码，请朋友们切莫浮躁，切莫心急，学编程，急不得。OK，开始。我们知道，在很多时候，我们从网页上获取信息都是从文字里获得的，那么我们现在就来学习一下如何来控制我们的网页上的文字，让它更好的为我们服务。本节课比起前2节课可能会有些长，希望朋友们不要心急，慢慢来。在HTML中，我们可以对网页中的文本设置以下格式

9、：1. 分段与换行2. 设置段落对齐方式3. 设置字体4. 设置字号5. 设置文本颜色6. 设置字符样式下面我一条一条的来说，不着急，呵呵，反正我今天把这一节课写完就算完成任务了，呵呵，你看的时候看完这一节就先停下来吧，别着急着看下一节课，先把这节课消化消化。1. 分段和换行分段标记为和，换行标记为看好了，分段标记是一对，换行标记是单身！位于分段标记和之间的内容，被浏览器认为是一个段落，从而加以区别显示，而标记则强行规定了当前行的中断，我们知道，在WORD里打字的时候，如果这一行写不下了，它会自动换行，其实在网页里也是这个道理，浏览器会自动换行，只是有些时候我们为了段落或主题的的清晰要求，需要

10、把一段文本分成2行，而如果让浏览器自己做这件事的话，它不明白你的意思，所以并没有给你分行，这样就不对了，是吧？显然，没有达到我们想要的效果，那么我们就可以在你需要换行的地方放一个标记，那么标记前的内容和标记后的内容就会被浏览器解析为不同的2行。哎呀，说理论总是很抽象的，下面我们来看代码，对着代码说容易理解一些。例2：(2.html)XX红客吧原创课程-使用分段标记和换行标记XX红客吧欢迎你！我是不是嫖客，红客吧期待你的加入！OK，我们来看一下代码的执行效果： 朋友们可以把代码复制下来，自己执行一遍看看，不难发现分段标记和换行标记的区别：分段标记分开的段落之间空隔很大，而用换行标记分开的两句话之

11、间的空隙不大。另外，我要告诉朋友们的是，我们在写代码时一行一行的写只是为了以后修改方便，也为了使别人能看懂我们的代码，但是我们也可以不一行一行分开写的，可以全部打乱，但只要各标记不变，那么执行效果就不会变，比如，下面两种代码的执行效果是一样的：可以看到，下面的这张图里的代码显得很乱，但是，它是不影响执行效果的，但是我们在写代码的时候尽量养成整齐的好习惯吧。OK，第三节课结束，嫖客谢谢你的支持！ 第四节、设置文本格式2设置段落对齐方式上面我们已经学习了段落标记和，那么这里说的就是给这个美女披件衣服了，对，我们使用的就是和的众多属性中的一个属性：ALIGN属性。我们知道，在WORD中，文字排版有左

12、对齐、右对齐、居中、两边对齐4种对齐方式，那么在网页中也是这样的，他们对应的英文依次为：Left、Right、Center、Justify这几个英文即为标记对的ALIGN属性的取值。另外，需要说明的一点是，这个ALIGN属性是很多标记都有的一个属性，比如水平线标记、图像标记都有这个属性，用处很大，对网页的排版起到了很大的作用，它的用法大致是一样的，但是需要强调的是，我们知道，在WORD里，默认的对齐方式是两边对齐的，那么在网页里，对于不同的标记，ALIGN属性的默认值是不同的，比如：对于分段标记对和来说，ALIGN属性的默认值为Left，对于水平线标记来说，ALIGN属性的默认值为Center

13、，但是，这一点也不用太担心，因为我们只要养成使用一个标记后立即给它加上相应的属性的好习惯就可以了，也就是等于强制声明吧，这样，不论它原本的默认属性是怎样的，浏览器都会按照我们的设定来显示。好，下面我们来看一段代码：例3:（3.html）XX红客吧原创课程-设置段落对齐方式这一行为左对齐，align属性的值为left。这一行为居中对齐，align属性的值为center。这一行为右对齐，align属性的值为right。这一行为两边对齐，align属性的值为justify。我们来看一下执行效果：OK，设置段落对齐方式就先说到这里，下节课再说一点就没有了。第五节、设置文本格式这节课继续说段落对齐方式，

14、这节课的主要任务是让朋友们认识两个在设置段落对齐方式时很实用的标记-节标记对和居中对齐标记对。这节课很简单，我们来看一段代码就OK了。例4：(4-1.html)XX红客吧原创课程-认识div标记和center标记春夜喜雨好雨知时节，当春乃发生。随风潜入夜，润物细无声。我们来看一下执行效果：OK，本节课的任务完成了，再扩展一下吧，就是和直接用的效果是一样的，比如我们也可以把上面的代码改一下，全部用标记，实验一下，改后的代码如下：(4-2.html)XX红客吧原创课程-认识div标记和center标记春夜喜雨好雨知时节，当春乃发生。随风潜入夜，润物细无声。我们再来看一下执行效果：看到了吧？效果是一

15、样的。另外，我再稍稍的提一下标记，这个标记没有大，但比大，也就是它必须被包含在内，但它可以包含，就是处在这么一个不上不下的位置吧，反正我自己感觉是用着挺方便的。也许不少朋友都说，现在都用DreamWeaver做网页了，谁还这么老土的用代码实现呢？，这个问题问得好，但是，如果你要做IT、安全的话，我还是非常建议你学学的，毕竟你如果不学HTML的话，那以后想学脚本如VBS、JS、ASP、PHP等语言基本不太可能。但是，我也不建议你花太多的时间和精力在HTML上，因为它只是基础，你只需要达到基本掌握的水平就可以了，时间上，1个月，足够让你把HTML学的差不多了。另外，再说一句很多前辈都说过的话，学编

16、程，就要坚持天天跟代码打交道，每天你都写点东西出来，它是一个循环渐进的过程，没有哪个人能一下子就成了高手。OK，第五节课完美结束，嫖客谢谢你的支持！第六节、设置文本格式我们这节课的任务也不多，再来认识两个标记-标题标记和水平线标记首先说下标题标记，,这个尖括号里的n的值可以是1-6之间的任何数字，包括1和6，分别定义了网页上的特定格式和大小的文本,定义的文本最大，定义的文本最小,我们称定义的文本为一级标题，以此类推。另外的水平线标记就没有什么好说的了，就是在网页中插入一条水平线。OK，我们还是来看段代码吧，看完你就明白了。例5：(5.html)XX红客吧原创课程-认识hn标记这是一级标题这是二

17、级标题这是三级标题这是四级标题这是五级标题这是六级标题这是普通文字我们来看一下执行效果：OK，标题标记就说到这里，下面再说一下水平线标记。先介绍一下标记的相关属性：1. align属性2. color属性3. noshade属性4. size属性5. width属性关于align属性，我就不多说了，不懂的朋友请看第四节课。下面是color属性，这个应该也很好理解吧？颜色嘛，这个属性指定我们的水平线的颜色。再下面是size属性，这个属性是指定水平线的宽度，以像素为单位。最后是width属性，这个属性指定水平线的长度，单位可以是像素或百分比。这里的百分比是说这条水平线占总页面的多少来算的，是一个相

18、对值，不是绝对值。OK，介绍完了，我们再来看一段代码吧：例6：(6.html)XX红客吧原创课程-认识hr标记以下是默认的水平线：以下是宽度为6，长度为300的水平线：以下是宽度为1，长度为80%的实线水平线：以下是长度为90%的浅蓝色水平线：以下是长度为90%的对齐方式为左对齐的浅蓝色水平线：下面我们来看一下代码执行效果：OK，本节课任务基本完成，下面呢，我再来说一点吧，老担心我讲的不够详细，担心新人看不懂， ，就是我们在使用标记的各种属性时，无须计较这些属性的先后顺序，只要出现就可以了。比如下面这两句代码的效果是一样的：和。OK，第六节课完美结束， ，嫖客谢谢你的支持！不懂的随时到吧里问！

19、随时待命向你解释！第七节、设置字体、字号和颜色今天的任务不多，只说一个标记，即字体标记-上节课我们说了标题标记，不过相对来说，还是标记对用的多一些，标记有几个属性：1. face属性2. size属性3. color属性其中face属性用来指定标记对内的文字的字体，size属性用来指定标记对内的文字的大小，color属性用来指定文字颜色。需要注意的是，我们在使用face属性时，可以为这个属性赋一个或多个值，即可以为网页指定多种字体，这时，浏览器会按你赋值的顺序来读取，并尽量用你为标记指定的字体来显示，如果赋的第一个值，即第一种字体本地没有安装，那么浏览器再看指定的第二种字体是否安装，如果有，则

20、以这种字体显示，如果没有，就看第三个，以此类推，如果这里指定的字体全部没有，则按照浏览器的默认字体来显示。在使用标记的size属性时，其值的大小为1-7，包括1和7，默认值为3，值越大，显示的文字就越大，注意啊，这里跟标记的大小排序不同，对标记来说，值为1时最大，而对于标记的size属性来说，值越大字体越大。另外，对于标记的size属性，不仅可以使用绝对值，即直接给它指定一个具体的数字，还可以使用相对值，使用相对值不使用纯数字，在数字前面加的还有加号“+”和减号“-”，表示这一行的size值为上一行size值的增加或者减少。比如：XX红客吧欢迎你！这里的第一句代码使用的绝对值，第二句代码就是用

21、的相对值。这上面的东西虽然说的不少，但是都是很简单的，现在看不懂也没关系，待会看看代码你就明白了。还有一个color属性没说，这个属性指定了标记对内的文字的颜色，颜色值可以用颜色名称表示，也可以用十六进制RGB格式表示。OK，下面，也是每节课的最后一个环节，看代码。例7：(7.html)XX红客吧原创课程-认识font标记默认文字：XX红客吧face属性为“黑体”的文字：XX红客吧size属性为6的文字：XX红客吧color为浅蓝色的文字：XX红客吧face属性为黑体,楷体_gb2312,仿宋_gb2312 ，size属性为4，color属性为浅蓝色的文字：XX红客吧我们来看一下代码的执行效果

22、：可以明显的看出来差别的。OK，本节课结束，不懂的先自己思考思考，实在不懂就到吧里问吧。这样有助于你的学习。好了，嫖客谢谢你的关注，谢谢！第八节、设置字符样式与插入特殊字符这节课更简单，只介绍几个超简单的标记和一点网页制作中的技巧。今天要介绍的标记全部为设置字符格式的标记，看表：（杯具的发现，不支持表格，没办法，凑合着看吧）标记 描述 标记 描述 粗体 删除线 大字体 上标 斜体 下标 删除线 固定宽度字体 小字体 下划线别看这张表里的标记挺多的，但是，都挺容易的，如果你玩过WORD的话，这些标记都是很好理解的。不多说了，看代码:例8：(8.html)XX红客吧原创课程-设置字符格式默认文字：

23、XX红客吧粗体字：XX红客吧大字体：XX红客吧斜体字：XX红客吧删除线：XX红客吧小字体：XX红客吧删除线：XX红客吧上标示例：a2+b2=c2下标示例：H2so4固定宽度字体：XX红客吧下划线：XX红客吧我们来看一下代码的执行效果：怎么样？不难吧？ ，OK，设置字符格式就说到这里，下面说一点网页制作中的技巧。设计网页的时候（不论是用DW做还是手工写），都难免会需要插入一些空格，这在WORD里很简单，没什么难的，但在HTML里不一样，即使我们在代码里按了很多个空格，但浏览器解析的时候仍然显示的只有一个空格，这是因为浏览器自动把那些多余的空格过滤掉了，这时我们就用到了一些特殊的方法：使用字符实体名称或数字表示方式。比如我们想在网页中插入1个空格，我们可以输入 来实现，插入2个空格就可以输入   来实现，这个 就是空格的实体名称。还有一个是数字表示方式，即空格我们也可以表示为 ，这个表示方式也可以达到