1、1一、HTML 的简单规则1、 HTML 的构成要素要素以段落式形成内容。要素则由标签表现。开始标签结束标签要素（如要素名为 H1，要素内容为 “给网页插上 CSS 的翅膀“）属性值2、 HTML 的基本结构标签1、 使用“head”标签设定网页1） 给文本注标题制作好的标题稍微长一点没关系，关键是要写入供搜索的内容简练的标题能准确传达网站特性的内容公司名或商标名用中文表示主页名2） 掌握神奇的 标签标签是用来对文本自身进行说明的，也就是承载了文本由什么内容组成、关键词是什么、文本由谁制作、何时制作等信息。最好将这些基本信息写入标签中，这样可以最大限度地被搜索引擎关注从而增加访问量，也可以确实
2、地向他人告知基本信息。提供建立网站的相关信息可使网站被搜索引擎关注设定在万维网上便于出现的中文网页文本地址变更时可及时转换画面效果。例如：标签可使访问者增加例如：利用 META Tag 这是使我的主页能被搜索引擎察看的 META Tag，它虽然很难，也可以轻松搞定 注意不要泄露信息将下列源代码插入head /head中网络文本的地址变更时自动更新更新选项指的是过了时间后会自动跳转至其他网页 或者多媒体文件的命令选项，在内容（CONTENT）属性中时间（单位：秒） ，那么如果过了指定时间就会自动转向预定的地址。例如：设定与制作者相关的信息文件名称制作日期制作人员关键词2、 使用标签设定页面1）
3、设定文本的背景色或 BGCOLOR=“颜色名”例如：设定背景色 背景色变成黄色了2） 设定文本的背景图片例如：把我的网页背景装点得像 Windows 桌面一样插入背景图片 23)设定字体的基本颜色和链接色TEXT=“#颜色” ：决定了正文全部文字的颜色。LINK=”#颜色”：超链接中使用的颜色，同时也适用于未曾访问过的链接颜色。默认值为蓝色。ALINK=”#颜色”：适用于用鼠标单击超链接时的颜色。默认值为红色。vlink=”#颜色”：适用于已访问过的链接颜色。例如设置链接文字的颜色：设定链接文字的颜色 至 DAUM至玫瑰家族 Tag 教室我参照颜色表用 16 进数设定颜色，单击已链接部分.3）
4、 设置文本上端和左侧空白设定上端和左侧的空白*网页的上端和左侧的空白均设定为 150pixel. *运行画面中可以确认吧？?3、 运用标签进行分段和对齐1） 换行时使用的标签试试换行 *有一些人教会我怎么去爱.有一些人教会我怎么去爱.有一些人教会我怎么去思念.有一些人教会我情为何物.因此我不再寂寞.某一天，当我渴望感情! 突然地某一天，当我失去微笑!突然地请安抚我渴望的心灵./而且懂得了爱情.*2） 划分大段落时使用的标签标签 是用来分段的，相当于两次换行。具有对齐属性：LEFT CENTER RIGHT标签连续使用与单个使用所取得的效果是相同的。不同。例如：划分段落 即便爱他甚于爱我自己可我
5、太过害羞而不敢说出口.即便因为爱彻夜未眠可我也会因为那爱的泪水而感到满足.我虽然渺小，可希望他能成为栋梁我即便死去，也要他健康存活.祝他幸福这就是暗恋，远远望着终不敢靠近.抵不过暗恋之痛，终于苦求希望这是我最后的爱.耗尽心血的爱一定要这样的3只求前路上忍住泪水，互相祝福.3） 分段时使用的标签标签不在上下方各空一行例如：划分段落 即便爱他甚于爱我自己可我太过害羞而不敢说出口.即便因为爱彻夜未眠可我也会因为那爱的泪水而感到满足.我虽然渺小，可希望他能成为栋梁我即便死去，也要他健康存活.祝他幸福这就是暗恋，远远望着终不敢靠近.抵不过暗恋之痛，终于苦求希望这是我最后的爱.耗尽心血的爱一定要这样的只求
6、前路上忍住泪水，互相祝福.4） 画线时使用的标签例如：画各式的线 hr 的基本形态.设定横长 .通过百分率设定横长，百分率指得是与与浏览器窗口的横宽进行对比的百分率.窗口大小不同，长度也不同.第二条的 pixel 单位是绝对数值，它与窗口大小无关，是固定长度值.调整厚度，用各种数值试试 .现在制做平面性横线 . 要在平面性横线中加色，采用如同 color=“pink”的方式即可.第三条的厚度高为 20. 设定横线为左对齐，对齐属性为 ALIGN. 居中对齐的横线 . 右对齐的横线 . 5） 居中时使用的标签 使用 标签可以使网页画面中的文本和图片居中排列。例如：（11）居中对齐 玫瑰家族 Ta
7、g 教室 46)引用文章时使用的标签这是摘取文章、网站内容或引用他人原话时使用的标签。使用该标签会自动插入所引用的句子，但不能调节插入的间隔。例如：引用文章 介绍禹柳松的歌词+可乐，讨厌 讨厌 +红茶，讨厌 讨厌 +浓咖啡 oh no +热巧克力，讨厌 讨厌 +汽水 ，讨厌 讨厌 +白牛奶 喜欢 喜欢 +味道好，颜色好，营养足 /+最适合我简单的口味 +有蛋白质，维生素 +最适合我健康的口味 +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢+要是没有牛奶 ，想都不敢想. +最喜欢牛奶， 给我牛奶 +milk milk oh 牛奶 +学习来一杯 运动来一杯 +
8、总在我身边的 牛奶 +我喜欢喝奶瓶中的牛奶+新鲜的牛奶才是牛奶 +喝了牛奶长得快 +成为国家的新一代. +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢 +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢 +世上最喜欢 +6） 生成空格时使用的“可乐，讨厌 讨厌 红茶，讨厌 讨厌 浓咖啡 oh no 热巧克力，讨厌 讨厌 汽水 ，讨厌 讨厌 白牛奶 喜欢 喜欢 7） 原封不动显示输入内容的标签使用本标签可以将 HTML 源代码中的文本样式原封不动地显示在网页上。即便中间没有标签或标签也可以维持换行和句子间的间距。例如：克隆文
9、章可自由设定文字位置的 Tag. *“* .!. *“*.“*. “. “ .*“.*.*“:“*.*.也可以这么用跟屁虫 2等一下，就等一下！我是世上最可怕的跟屁虫 和你一起即便变成孤家寡人也还要跟着你 就算你再讨厌我，我也要跟着你.也可以这么用. 5与 标签具有相似属性的一些标签。能显示不同的字体，它忽视内部的标签，只读取 TAB 和换行。改变文本设定文字大小、颜色和模样1)字体标签可以设定为 1-7.1 最小， 7 最大，默认值是3。例如：试着设定不同大小的文字?文字大小 1文字大小 2文字大小 3文字大小 4文字大小 5文字大小 6文字大小 7文字大小-2文字大小+4设定文字基本大小的
10、 标签文本中如果没有使用标签，那么 标签设定的内容将应用于该文本中。例如：设定文字的基本大小一般情况下，BASEFONT Tag 用于 BODY Tag中，可以对文本中所有的文字进行设定. 可是如果在使用 BASEFONT Tag 的句子中 通过设定FONT COLOR=“red”SIZE=“5”来改变部分文字只需要将 FONT Tag 插入其中即可. 容易吧2） FONT COLOR=“字体颜色”3)4）2、设置标题文字的大小、颜色和对齐方式例如：设定标题文字的大小、颜色和对齐方式欢迎!欢迎您访问我们的玫瑰教室的 Tag 教室希望您能通过学习成为 Tag 高手3、 制作四处运动的文字。基本属
11、性：HEIGHT，WIDTH 设定文字运动的幅度和跨度BGCOLOR 设定文字途经区域的背景色。BEHAVIOR=“alternate” 文字反复左右运动BEHAVIOR=“scroll” 文字从右到左连续旋转BEHAVIOR=“slide” 文字从右到左翻转后停止DIRECTION 设定文字的运动方向（左，右，上，下）LOOP 循环次数（默认值为无限次） 。例如 LOOP=3，即运行 3 次。SCROLLAMOUNT 设定运动跨度（数值越大越快）SCROLLDELAY 设定延迟时间（数值越大越慢）例如：*MARQUEE Tag* 玫瑰家族 Tag 教室6 玫瑰家族成员，我爱你 玫瑰家族成员，
12、我爱你 玫瑰家族成员，我爱你 _/ 慢慢移动. 卡嗒.卡嗒.( 紊 .-) m(.)m 在宽为100 的限制内，向上运动. m(. .)m在宽为 100 的限制内，向下运动. 盐娃娃如同为了想知道大海有多深而跑进大海的盐娃娃一样，我为了想知道你的心灵毅然地投进了你，慢慢地融化 悄无声息美化文字的标签许多与文字相关的标签其功能颇为相似，如 和标签，功能都是使文字加粗，在网页上的使用效果基本相同，这些标签可以分为区别字形的物理标签形式和区分内容的逻辑标签形式。1） 物理标签物理标签指的是设定文字自身属性的标签。类型 标签 说明粗体字 文字 使文字加粗斜体字 文字 使文字倾斜打印体 使文字表现为标准
13、打印体上标 文字上标下标 . 文字下标放大 . 文字放大缩小 文字缩小下画线 给文字加下画线加删除线 给文7字加删除线闪光 使文字具有闪亮效果标记地址的标签kijjlllllll 物理风格的 Tag该例题使用的是用于装饰文字的物理Tag显示为加粗文字.显示为斜体文字.显示为打印体文字.上标文字如此显示. 上标文字下标文字如此显示. 下标文字比现在 稍微大一些再大一些 显示为.比现在 稍微小一些 再小一些显示为.显示下划线，因为会和链接混淆，请注意出现失误取消时使用.加粗的斜体字如此表示2)逻辑形式的标签用于区别表现文字的内容特性。链接标签链接标签属性：HREF 将要链接的文件名和网址设为值。T
14、ARGET 是设定档链接成功时以何种方式打开窗口的属性，其值通常是-self -top -blank -parent 或其他指定名称。NAME：当以名称打开网页时用于设定打开部分。通常用于设定书签。1、 链接文本和图片.例如：在文本或图片上设置链接在文本上设置链接玫瑰家族 Tag 教室 DAUM雅虎韩国NAVER在图片上设置链接设定图片链接调节链接颜色例：2、 设定链接页面的出现位置_TOP 全屏替换_BLANK 在新窗口中打开SELF 在当前窗口中打开_PARENT 在当前窗口的父级窗口中打开例 1：设定链接页面的 TARGET8如果要链接数十个网站，那么一个个设定很繁琐。例 2：DAUM雅
15、虎NAVER可以写成：DAUM雅虎NAVER3、 去除链接图片的蓝色边框例如：显示边框不设定 BORDER=“0”不显示边框设定 BORDER=“0”4、 单击小图显示大图点击小图使其变大点击小图使其变大5、 链接下载文件下载文件在因特网上下载文件时要使用链接标签，在“文件名或文件地址“部分输入扩展名或相应文件的路径就可以了。下载文件应考虑下载速度，所以应用压缩文件。并且应直接设定下载文件的位置。例如：在文件下载中设置链接文件下载6、 在特定的位置上进行链接 在页面内进行链接设置 链接至其他页面 设定文本书签名（name）例如：在主页里进行链接 在网页内进行链接好想法 幽默集锦9* 一只蚂蚁*
16、 野蛮小鬼* 坐公车的老奶奶*有信仰的狮子一只蚂蚁在一个男人，生平最大的愿望就是要登上“吉尼斯大全”所在，他在深山里抓了一只蚂蚁，对其进行了十年的训练最后，那只蚂蚁只要一听到音乐就会翩翩起舞。在等待吉尼斯大全对其进行考察的时候，他带着蚂蚁走进一家餐馆餐馆里传来了悦耳的音乐，蚂蚁就开始合着音乐跳起舞来跳得非常带劲.看到这里，这个男人就想要在人前炫耀一番匆匆喊来待者“服务员，快点过来”待者匆忙赶来一下子就把蚂蚁踩死了“对不起，先生！再也不会发生这样的事了”-选自于好的想法-野蛮小鬼这是我大学刚毕业到幼儿园实习时发生的事有一天上美术课，因为想不到好的主题就说道“大家把最喜欢的东西画下来，怎么样？”孩
17、子们开始认真地画画，有画花的，有画蝴蝶的大伙的样子都非常可爱可是，有一个孩子抓起全部的黑色颜料在纸上胡乱画了起来那一刻，我认定得他有自闭症，很是担心，就轻轻走了过去问道：“你在画什么呢？”那小孩答道：“紫菜” 。.- 选自于好的想法 - 滚坐公车的老奶奶坐公车的老奶奶问司机到光华门还远不远？司机说，还远着呢！老奶奶仍然一直问，司机不耐烦说道，你睡会吧，到了光华门我会喊你的。可是司机一转眼就忘了这回事，车过了光华门。事已至此，司机只有把车开回光华门，司机喊道：老奶奶，下车吧，光华门到了。老奶奶睁开眼说，这么快，已经到一半了- 选自于好的想法 - 在其他网页的书签上设置链接链接至其他网页 有信仰的
18、狮子有一个男人正在被狮子追，跑了一会跑进了 一个死胡同里，情急之中男人开始对上天祈祷，“主啊，你让追我的这只狮子有信仰吧！”话音刚落，那只追他的狮子就停了下来，那男人见状长嘘了一口气，这时，狮子很有风度地走到男人身边，开始祷告，“今天也这样，谢谢了！阿门！”- 来自于好的想法 -7、 用链接发送电子邮件例如：在邮件上设置链接108、 事先设置电子邮件的标题例如：在链接电邮时设置标题栏给运营者的电邮目录标签制作有序目录1) 制作数字目录设定目录类型为数字作业 在下面找出错误的词语苹果牛奶 香蕉牛奶 巧克力牛奶 爱情与灵魂自由时代 小聚会 你和我 郊外的树 狐狸 妈妈爸爸 老天爷 熊娃娃声音录音机
19、记事本牛犊 猫2） 制作英文字母目录设定目录类型为英文大写字母问题 1：对下面 A，B，C 的的哪一型风格有好感？经典型 幽默型简洁型 问题 2：最喜欢哪个季节？ 春夏秋冬 3） 制作罗马数字目录用罗马数字标记目录目录 : HTML 的重要 Tag 目录 Tag图像 Tag表格 Tag11边框 Tag超链接 Tag目录 : 目录 Tag 的种类在序的 Tag无序的 Tag定义 Tag4） 制作有序目录的顺序改变有序目录的顺序首先由 1 开始按顺序 出来吧1, 2, 3.想从 10 开始!从这往下继续顺延那就再从 200 开始可要怎么办才好呢？那就从 200 再开始吧。这么做！ 现在懂了吧越学越
20、有意思 神秘的 html 世界5） 在目录中插入另一目录目录标签是可以重叠运用的。比如在有序目录中再插入另一有序目录，也可以在无序目录中再另行插入其他无序目录。目录中插入另一目录第 1 章第 2 章HTMLCSSJAVASCRIPT第 3 章2、 制作无序目录Dise 黑色圆点Circle 空心圆Square 黑色方块制做无序目录 使用 circle 属性值脚主老草葱男宝使用 square 属性值 脚主老草葱男宝使用 disc 属性值脚12主老草葱男宝4） 制作自定义目录多用于定义专业语。DLDT要定义的专业语DD专业语的解释制做自定义目录 IP Address 是 NIC（网络信息中心）分配
21、给每台计算机或网络设备的 32 位数字标识，在互联网上每台计算机或网络设备的 IP 地址都是惟一的.java 由美国 Sun Microsystems 公司研发的编程语言。因其能在不同的工作平台上使用，它多被用于跨平台应用软件的程序编写. 利用菜单标签制作倾斜式目录连续使用该标签，文字将由左向右渐进式倾斜排列，多用于编排诗句或装点文章。制做倾斜目录 今天突然.今天突然想起来世界是如此美丽为什么?为什么如此呢是因为在这世界上和我一起呼吸 的你也存在着2、 用图片装点目录STYLEULlist-style:图片名称（或 URL）inside/STYLE用图片装点目录 ul list-style :
22、 url(icon.gif) inside用图片装点目录 猫爱撒娇猫抓老鼠猫爱粘着主人总爱卖乖猫很温驯 猫很漂亮表格制作1、表格制表开始与结束 表格的行 .表格的单元格 在表格内注标题 .在表格上面注标题 /CAPTION表格的标签属性BORDER 设定表格边框WIDTH 宽度HEIGHT 高度CELLSPACING 设定边框的粗细，用于设定单元格之间的空白CELLPADDING 设定表格中文字与单元格的间距空白ALIGN 对齐方式BGCOLOR 设定表格的背景色BACKGROUND 设定表格的背景图片13TR、TD、TH 标签的属性VALIGN 单元格中的内容向上对齐、居中和向下对齐COLS
23、PAN 合并一行的单元格ROWSPAN 合并上下行的单元格2、基本表格制作3、在表格上注标题./CAPTION在表格上注标题 表 显示表格的标题长得像你的漂亮小孩长得像你的漂亮小孩(2)突然记起母亲的面容什么时候 才能再见思念 何时能停直到我们想见的那一刻吧?我爱你4、 设定表格大小设定表格大小 设定表格大小这女的，真酷 这女的，忘不了5、 设定单元格内文字和图片的位置.设定文字位置 左对齐居中右对齐(向上)(中部)(向下)6、 设定表格的空白例；利用 cellspacing 调整单元格间的间距 14例：利用 cellpadding 调整单元格间的间距7、 合并单元格例如：横向合并单元格制做横
24、向合并单元格的表格爱兰,玫瑰停不了, 天下飞香恰恰 祝贺 高兴抑或悲伤玫瑰家庭与你同在祝一天好心情夸*通告*例如：竖向合并单元格制做竖向合并单元格的表格这是竖向合并单元格的 3 段表格.填入想填的句子 8、 为表格添加表格边框设定表格边框色 15名字 横幅分数 横幅作品 银星的作品 90凉 的作品88北极圣土的作品999、 控制表格边框各位置的颜色边框色显示的相关属性值Box 四边均显示颜色hside 只显示上、下边框的颜色Vsides 只显示左右边框的颜色Above 只显示上边框的颜色Bellow 只显示下边框的颜色Lhs 只显示左边框的颜色Rhs 只显示右边框的颜色void 均不显示例如：
25、设定边框的颜色显示位置名字 横幅分数 横幅作品 银星的作品 90凉 的作品88北极圣土的作品9910、 在表格中添加背景色和背景图片在表格中添加背景色1 行，2 列1 行 3 列2、3 行1 列2 行 2 列2 行 3 列163 行 2 列3 行 3 列在表格中插入背景图片要是谁能幸福的话？- 容惠媛 因为我要是谁能幸福的话对我来说这该是多么吃惊的祝福啊因为我说的一句话因为我送出的小小礼物因为我无意流露的亲切因为我的小小谢意要是谁能幸福的话我们在这片热土上就有生存的意义.因为我的谈谈笑容因为我的举手之劳因为我的无私之爱还因为和我一起分享的点点滴滴要是谁能快乐的话即使末日明日即至，也会有生存的价
26、值.表格变身1、 制作会闪动的虚线边框制做闪动的虚线边框制做闪动的虚线边框2、 制作与原文一样的表格原文式样的表格其实就是利用项中填入所希望的属性值就可。RULES 属性值Basic 或 all 原文式样cols 竖向排列式样rows 横向排列式样None 或 groups 中空式样制作原文式样的表格：原文式样表格 17玫 瑰家族玫 瑰家族玫 瑰世界玫 瑰爱情制作竖向排列式样的表格竖向排列式样表格玫 瑰家族玫 瑰家族玫 瑰世界玫 瑰爱情制作横向排列式样的表格横向排列式样表格玫 瑰家族玫 瑰家族玫 瑰世界玫 瑰爱情制作中空式样的表格中空式样表格 玫 瑰家族玫 瑰家族玫 瑰世界玫 瑰爱情制作多式样
27、表格制做多式样表格 题目:顺石儿唉!真得非常非常 难受啊呜呜今天顺石儿他唉碰上了交 通18事故.那真是太不幸了大家一起祈祷 希望 顺石儿早日能恢复原先模样为了顺石的祈祷眼泪：噢，难怪好久没见你们，肯定很疼吧，加油！ 豪石儿： 谢谢！ 常在你心：不管怎样，希望顺石早日痊愈! 喜欢大老虎：顺石真得出车祸了，太不幸了！理智? : 顺石肯定很疼吧 加油，快点好起来！ 友情有爱。?: . 不管怎样还算万幸，快点好起来吧！? 无所不在：顺石，快点好起来，让我早点看看你; 雷达： 唉 呀， 顺石 快点好起来， 加油!3、 制作菜单表格和公告表格菜单是网页中不可或缺的构件之一。利用表格制作菜单是众多菜单制作方
28、法中最简单的一种。制作菜单制做漂亮的菜单 Photo Shop 讲座我的随笔收到的礼物19日记本推荐网址芳名簿*Rose Family*制作极具幻想效果的框架集1、划分基本框架集1）定义该标签的文本不能写在标签中。COLS 将画面分为左右框架，值为像素或百分比ROWS 将画面分为上下框架，值为像素或百分比FRAMESPACING 用于设定框架内的内容与框架之间的空白FRAMEBORDER 用于设定是否显示框架的边框，值为 0 不显示，为 1 显示2） 画面 各个组成部分称为框架，用于设定被划分的各个框架，没有结束标签。属性：MARGINHEIGHT 用于设定框架内的空白高度MARGINWIDT
29、H 用于设定框架内的空白宽度NAME 用于设定框架的名称SCROLLING 用于设定有无滚动条SRC 用于设定框架内文本或图片的路径或网址TARGET 与 SRC 一起用，用于在特定的窗口中显示相关内容3）。 。 。要想在 HTML 中显示其他的 HTML 文本，就必须要使用内部框架，内部框架标签为。 。 。例题：划分框架集 框架集上下划分： 框架集左右划分： 2、 固定框架的大小 NORESIZE 用于固定框架的大小。使用者可以利用鼠20标改变框架的大小，可在某种情况下，框架的大小一经改变，整个页面就乱了， ，有必要对框架进行固定，不能让使用者随意改变。例题：划分图文框 TOP.HTMLto
30、p.htmlMENU.HTMLmenu.htmlMAIN.HTMLmain.htmlNORESIZE 只能适用于 INDEX.HTML 中。固定图文框大小 3、 在框架中显示滚动条只有放在 index.html 中才起作用。例如：index.html控制滚动条 Top.htmltop.htmlMenu.htmlmenu.htmlMain.htmlmain.html21main在此编辑内容4、 设置框架边缘宽度与高度例如：index.html设定图文框的空白 Top.htmltop.htmlMenu.htmlmenu.htmlMain.htmlmain.htmlmain在此编辑内容5、 设定框架集边框的粗细和颜色例如：Index.html设定图文框区分线的厚度与颜色 rosy_portfolio22Main.htmlmain.htmlmain在此编辑内容Profile.htmlprofile.htmlprofile1. 我的名字：眼泪 2. 兴趣: 与玫瑰家族一起开心 ;3. 最爱：玫瑰家族 Tag 教室，红宝石，敏儿Coolsite.htmlcoolsite.htmlcoolsite=学习 Tag、PhotoShop、Flash的好去处 +玫瑰家族 Tag 教室=搜索引擎集合 +雅虎韩国+NAVER+EMPAS23+GOOGLE
