网页设计HTML的规则代码教程(很实用).doc

一、 HTML的简单规则1、 HTML的构成要素要素以段落式形成内容。要素则由标签表现。开始标签结束标签要素（如要素名为H1，要素内容为“给网页插上CSS的翅膀“）属性值2、 HTML的基本结构标签1、 使用“head”标签设定网页1） 给文本注标题制作好的标题稍微长一点没关系，关键是要写入供搜索的内容简练的标题能准确传达网站特性的内容公司名或商标名用中文表示主页名2） 掌握神奇的 标签 标签是用来对文本自身进行说明的，也就是承载了文本由什么内容组成、关键词是什么、文本由谁制作、何时制作等信息。最好将这些基本信息写入 标签中，这样可以最大限度地被搜索引擎关注从而增加访问量，也可以确实地向他人告知基本信息。提供建立网站的相关信息可使网站被搜索引擎关注设定在万维网上便于出现的中文网页文本地址变更时可及时转换画面效果。 例如： 标签可使访问者增加 例如： 利用META Tag 这是使我的主页能被搜索引擎察看的META Tag，它虽然很难，也可以轻松搞定 注意不要泄露信息将下列源代码插入head/head中网络文本的地址变更时自动更新 更新选项指的是过了时间后会自动跳转至其他网页 或者多媒体文件的命令选项，在内容（CONTENT）属性中时间（单位：秒），那么如果过了指定时间就会自动转向预定的地址。例如：设定与制作者相关的信息 文件名称 制作日期 制作人员 关键词2、 使用标签设定页面1） 设定文本的背景色 或BGCOLOR=“颜色名”例如： 设定背景色 背景色变成黄色了 2） 设定文本的背景图片例如：把我的网页背景装点得像Windows桌面一样 插入背景图片 3)设定字体的基本颜色和链接色TEXT=“#颜色”：决定了正文全部文字的颜色。LINK=”#颜色”：超链接中使用的颜色，同时也适用于未曾访问过的链接颜色。默认值为蓝色。ALINK=”#颜色”：适用于用鼠标单击超链接时的颜色。默认值为红色。vlink=”#颜色”：适用于已访问过的链接颜色。例如设置链接文字的颜色： 设定链接文字的颜色 至DAUM 至玫瑰家族Tag教室 我参照颜色表用16进数设定颜色，单击已链接部分. 3） 设置文本上端和左侧空白BODY LEFTMARGIN=”Pixel” TOPMARGIN=” Pixel”例如： 设定上端和左侧的空白 *网页的上端和左侧的空白均设定为150pixel. *运行画面中可以确认吧？? 3、 运用标签进行分段和对齐1） 换行时使用的标签br/例如： 试试换行 * 有一些人教会我怎么去爱. 有一些人教会我怎么去爱. 有一些人教会我怎么去思念. 有一些人教会我情为何物. 因此我不再寂寞. 某一天，当我渴望感情! 突然地. 某一天，当我失去微笑! 突然地. 请安抚我渴望的心灵./ 而且懂得了爱情. * 2） 划分大段落时使用的标签标签是用来分段的，相当于两次换行。具有对齐属性：LEFT CENTER RIGHT标签连续使用与单个使用所取得的效果是相同的。不同。例如： 划分段落 即便爱他甚于爱我自己 可我太过害羞而不敢说出口. 即便因为爱彻夜未眠 可我也会因为那爱的泪水而感到满足. 我虽然渺小，可希望他能成为栋梁 我即便死去，也要他健康存活. 祝他幸福 这就是暗恋，远远望着终不敢靠近. 抵不过暗恋之痛，终于苦求 希望这是我最后的爱. 耗尽心血的爱一定要这样的 只求前路上忍住泪水，互相祝福. 3） 分段时使用的标签标签不在上下方各空一行例如： 划分段落 即便爱他甚于爱我自己 可我太过害羞而不敢说出口. 即便因为爱彻夜未眠 可我也会因为那爱的泪水而感到满足. 我虽然渺小，可希望他能成为栋梁 我即便死去，也要他健康存活. 祝他幸福 这就是暗恋，远远望着终不敢靠近. 抵不过暗恋之痛，终于苦求 希望这是我最后的爱. 耗尽心血的爱一定要这样的 只求前路上忍住泪水，互相祝福. 4） 画线时使用的标签例如： 画各式的线 hr的基本形态. 设定横长. 通过百分率设定横长，百分率指得是与与浏览器窗口的横宽进行对比的百分率. 窗口大小不同，长度也不同. 第二条的pixel单位是绝对数值，它与窗口大小无关，是固定长度值. 调整厚度，用各种数值试试. 现在制做平面性横线. 要在平面性横线中加色，采用如同color=“pink”的方式即可. 第三条的厚度高为20. 设定横线为左对齐，对齐属性为ALIGN. 居中对齐的横线. 右对齐的横线. 5） 居中时使用的标签 使用标签可以使网页画面中的文本和图片居中排列。例如：（11） 居中对齐 玫瑰家族Tag教室 6)引用文章时使用的标签这是摘取文章、网站内容或引用他人原话时使用的标签。使用该标签会自动插入所引用的句子，但不能调节插入的间隔。例如： 引用文章 介绍禹柳松的歌词 + +可乐，讨厌 讨厌 +红茶，讨厌 讨厌 +浓咖啡 oh no +热巧克力，讨厌 讨厌 +汽水 ，讨厌 讨厌 +白牛奶 喜欢 喜欢 +味道好，颜色好，营养足 / +最适合我简单的口味 +有蛋白质，维生素 +最适合我健康的口味 +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢 +要是没有牛奶 ，想都不敢想. +最喜欢牛奶， 给我牛奶 +milk milk oh牛奶 +学习来一杯 运动来一杯 +总在我身边的 牛奶 +我喜欢喝奶瓶中的牛奶 +新鲜的牛奶才是牛奶 +喝了牛奶长得快 +成为国家的新一代. +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢 +牛奶 喜欢 牛奶 喜欢 给我牛奶（再多给点） +牛奶 喜欢 牛奶 喜欢 世上最喜欢 +世上最喜欢 + 6） 生成空格时使用的“ ；”例如： 空格时使用的Tag 白牛奶 喜欢 喜欢  可乐，讨厌 讨厌   红茶，讨厌 讨厌    浓咖啡 oh no     热巧克力，     讨厌 讨厌      汽水 ，讨厌 讨厌       白牛奶 喜欢 喜欢 7） 原封不动显示输入内容的标签使用本标签可以将HTML源代码中的文本样式原封不动地显示在网页上。即便中间没有标签或标签也可以维持换行和句子间的间距。例如：克隆文章 可自由设定文字位置的Tag . * .!. *. *. . .* .*.*:*.*. 也可以这么用 跟屁虫2 等一下，就等一下！ 我是世上最可怕的跟屁虫 和你一起即便变成孤家寡人也还要跟着你 就算你再讨厌我，我也要跟着你. 也可以这么用. 与 标签具有相似属性的一些标签。能显示不同的字体，它忽视内部的标签，只读取TAB和换行。改变文本设定文字大小、颜色和模样1)字体标签可以设定为1-7.1最小，7最大，默认值是3。例如： 试着设定不同大小的文字? 文字大小1 文字大小2 文字大小3 文字大小4 文字大小5 文字大小6 文字大小7 文字大小-2 文字大小+4 设定文字基本大小的标签文本中如果没有使用标签，那么标签设定的内容将应用于该文本中。例如： 设定文字的基本大小 一般情况下，BASEFONT Tag用于BODY Tag中， 可以对文本中所有的文字进行设定. 可是如果在使用BASEFONT Tag的句子中 通过设定FONT COLOR=“red”SIZE=“5”来改变部分文字 只需要将FONT Tag插入其中即可. 容易吧 2）FONT COLOR=“字体颜色”3)4）2、设置标题文字的大小、颜色和对齐方式例如： 设定标题文字的大小、颜色和对齐方式 欢迎! 欢迎您访问我们的玫瑰教室的Tag教室 希望您能通过学习成为Tag高手 3、 制作四处运动的文字。基本属性：HEIGHT，WIDTH 设定文字运动的幅度和跨度BGCOLOR 设定文字途经区域的背景色。BEHAVIOR=“alternate” 文字反复左右运动BEHAVIOR=“scroll” 文字从右到左连续旋转BEHAVIOR=“slide” 文字从右到左翻转后停止DIRECTION 设定文字的运动方向（左，右，上，下）LOOP 循环次数（默认值为无限次）。例如LOOP=3，即运行3次。SCROLLAMOUNT 设定运动跨度（数值越大越快）SCROLLDELAY 设定延迟时间（数值越大越慢）例如： *MARQUEE Tag* 玫瑰家族Tag教室 玫瑰家族成员，我爱你 玫瑰家族成员，我爱你 玫瑰家族成员，我爱你 _/ 慢慢移动. .卡嗒.卡嗒.( 紊 .-) m(.)m 在宽为100的限制内，向上运动. m(. .)m在宽为100的限制内，向下运动. 盐娃娃 如同为了想知道大海有多深而跑进大海的盐娃娃一样，我为了想知道你的心灵 毅然地投进了你，慢慢地融化悄无声息美化文字的标签许多与文字相关的标签其功能颇为相似，如 和标签，功能都是使文字加粗，在网页上的使用效果基本相同，这些标签可以分为区别字形的物理标签形式和区分内容的逻辑标签形式。1） 物理标签物理标签指的是设定文字自身属性的标签。类型标签说明粗体字文字使文字加粗斜体字 文字使文字倾斜打印体使文字表现为标准打印体上标文字上标下标.文字下标放大.文字放大缩小文字缩小下画线给文字加下画线加删除线.给文字加删除线闪光使文字具有闪亮效果标记地址的标签kijjlllllll 物理风格的Tag 该例题使用的是用于装饰文字的物理Tag 显示为加粗文字. 显示为斜体文字. 显示为打印体文字. 上标文字如此显示. 上标文字 下标文字如此显示. 下标文字 比现在 稍微大一些再大一些显示为. 比现在 稍微小一些再小一些显示为. 显示下划线，因为会和链接混淆，请注意 出现失误取消时使用. 加粗的斜体字如此表示 2)逻辑形式的标签用于区别表现文字的内容特性。链接标签链接标签属性：HREF 将要链接的文件名和网址设为值。TARGET 是设定档链接成功时以何种方式打开窗口的属性，其值通常是-self -top -blank -parent或其他指定名称。NAME：当以名称打开网页时用于设定打开部分。通常用于设定书签。1、 链接文本和图片.例如： 在文本或图片上设置链接 在文本上设置链接 玫瑰家族Tag教室 DAUM 雅虎韩国 NAVER 在图片上设置链接 设定图片链接调节链接颜色例：2、 设定链接页面的出现位置_TOP 全屏替换_BLANK 在新窗口中打开 SELF 在当前窗口中打开 _PARENT 在当前窗口的父级窗口中打开例1： 设定链接页面的TARGET 如果要链接数十个网站，那么一个个设定很繁琐。例2： DAUM 雅虎 NAVER 可以写成： DAUM 雅虎 NAVER 3、 去除链接图片的蓝色边框例如：显示边框 不设定BORDER=“0” 不显示边框 设定BORDER=“0” 4、 单击小图显示大图 点击小图使其变大 点击小图使其变大 5、 链接下载文件下载文件在因特网上下载文件时要使用链接标签，在“文件名或文件地址“部分输入扩展名或相应文件的路径就可以了。下载文件应考虑下载速度，所以应用压缩文件。并且应直接设定下载文件的位置。例如： 在文件下载中设置链接 文件下载 6、 在特定的位置上进行链接. 在页面内进行链接设置. 链接至其他页面. 设定文本书签名（name）例如：在主页里进行链接 在网页内进行链接 好想法 幽默集锦 * 一只蚂蚁 * 野蛮小鬼 * 坐公车的老奶奶 *有信仰的狮子 一只蚂蚁 在一个男人，生平最大的愿望就是要登上“吉尼斯大全” 所在，他在深山里抓了一只蚂蚁，对其进行了十年的训练 最后，那只蚂蚁只要一听到音乐就会翩翩起舞。 在等待吉尼斯大全对其进行考察的时候，他带着蚂蚁走进一家餐馆 餐馆里传来了悦耳的音乐，蚂蚁就开始合着音乐跳起舞来 跳得非常带劲. 看到这里，这个男人就想要在人前炫耀一番 匆匆喊来待者 “服务员，快点过来” 待者匆忙赶来一下子就把蚂蚁踩死了 “对不起，先生！再也不会发生这样的事了” -选自于好的想法- 野蛮小鬼 这是我大学刚毕业到幼儿园实习时发生的事 有一天上美术课，因为想不到好的主题 就说道“大家把最喜欢的东西画下来，怎么样？” 孩子们开始认真地画画，有画花的，有画蝴蝶的 大伙的样子都非常可爱 可是，有一个孩子抓起全部的黑色颜料 在纸上胡乱画了起来 那一刻，我认定得他有自闭症，很是担心，就轻轻走了过去 问道： “你在画什么呢？”那小孩答道： “紫菜”。. - 选自于好的想法 - 滚坐公车的老奶奶 坐公车的老奶奶问司机到光华门还远不远？ 司机说，还远着呢！ 老奶奶仍然一直问，司机不耐烦说道， 你睡会吧，到了光华门我会喊你的。 可是司机一转眼就忘了这回事，车过了光华门。 事已至此，司机只有把车开回光华门， 司机喊道：老奶奶，下车吧，光华门到了。 老奶奶睁开眼说，这么快，已经到一半了 - 选自于好的想法 - 在其他网页的书签上设置链接 链接至其他网页 有信仰的狮子 有一个男人正在被狮子追，跑了一会跑进了 一个死胡同里，情急之中男人开始对上天祈祷， “主啊，你让追我的这只狮子有信仰吧！” 话音刚落，那只追他的狮子就停了下来， 那男人见状长嘘了一口气，这时，狮子很有风度地走到男人身边，开始祷告，“今天也这样，谢谢了！阿门！” - 来自于好的想法 - 7、 用链接发送电子邮件例如： 在邮件上设置链接 8、 事先设置电子邮件的标题例如： 在链接电邮时设置标题栏 给运营者的电邮 目录标签制作有序目录 1) 制作数字目录 设定目录类型为数字 作业 在下面找出错误的词语 苹果牛奶 香蕉牛奶 巧克力牛奶 爱情与灵魂 自由时代 小聚会 你和我 郊外的树 狐狸 妈妈 爸爸 老天爷 熊娃娃 声音 录音机 记事本 牛犊 猫 2） 制作英文字母目录 设定目录类型为英文大写字母 问题1：对下面A，B，C的的哪一型风格有好感？ 经典型 幽默型 简洁型 问题2：最喜欢哪个季节？ 春 夏 秋 冬 3） 制作罗马数字目录 用罗马数字标记目录 目录 : HTML的重要Tag 目录Tag 图像Ta