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

1、一、html的简单规则1、html的构成要素要素以段落式形成内容。要素则由标签表现。开始标签结束标签要素（如要素名为 h1 ,要素内容为“给网页插上css的翅膀“）属性值2、html的基本结构 标签1、使用“head”标签设定网页1）给文本注标题 制作好的标题 稍微长一点没关系，关键是要写入供搜索的内容 简练的标题能准确传达网站特性的内容公司名或商标名用中文表示主页名2）掌握神奇的标签标签是用来对文本自身进行说明的，也就是承载了文本由什么内容组成、关键词是什么、文本由谁制作、何时制作等信息。最好将这些基本信息写入 标签中，这样可以最大限度地被搜索引擎关 注从而增加访问量，也可以确实地向他人告知

2、基本信 息。提供建立网站的相关信息可使网站被搜索引擎关注设定在万维网上便于出现的中文网页文本地址变更时可及时转换画面效果。 例如： 标签可使访问者增加例如： 禾1j用 meta tag meta http-equiv=keywords content=html, css, javascript, design”这是使我的主页能被搜索引擎察看的meta tag ,它虽然很难，也可以轻松搞定注意不要泄露信息将下列源代码插入head/head中 网络文本的地址变更时自动更新更新选项指的是过了时间后会自动跳转至其他网页或者多媒体文件的命令选项，在内容（ content ）属性 中时间（单位：秒），那么

3、如果过了指定时间就会自动 转向预定的地址。例如： 设定与制作者相关的信息 文件名称 制作日期 制作人员 关键词2、使用标签设定页面1）设定文本的背景色或 bgcolor= 颜 色名” 例如：设定背景色 背景色变成黄色了 2）设定文本的背景图片例如：把我的网页背景装点得像 windows桌面一样插入背景图片 3）设定字体的基本颜色和链接色body text= #颜色 link= #颜色 alink= #颜 色vlink= #颜色text= #颜色”：决定了正文全部文字的颜色。link= #颜色：超链接中使用的颜色，同时也适用于未曾访问过的链接颜色。默认值为蓝色。alink= #颜色：适用于用鼠标

4、单击超链接时的颜色。默认值为红色。vlink=#颜色：适用于已访问过的链接颜色。例如设置链接文字的颜色：设定链接文字的颜色 至 daum 至玫瑰家 族 tag 教室 我参照颜色表用16进数设定颜色，单击已链接部分.3）设置文本上端和左侧空白body leftmargin= pixel”topmargin= pixel ”例如：设定上端和左侧的空白 *网页的上端和左侧的空白均设定为150pixel. *运行画面中可以确认吧？3、运用标签进行分段和对齐1）换行时使用的标签例如： 试试换行 *有一些人教会我怎么去爱. 有一些人教会我怎么去爱. 有一些人教会我怎么去思念.有一些人教会我情为何物. 因此

5、我不再寂寞.某一天，当我渴望感情！ 突然地.某一天，当我失去微笑！突然地.请安抚我渴望的心灵./而且懂得了爱情.*2）划分大段落时使用的标签标签是用来分段的，相当于两次换行。具有对齐属性：left center right标签连续使用与单个使用所取得的效果是相同的。不同。例如： 划分段落 即便爱他甚于爱我自己可我太过害羞而不敢说出口.即便因为爱彻夜未眠 可我也会因为那爱的泪水而感到满足.我虽然渺小，可希望他能成为栋梁我即便死去，也要他健康存活. 祝他幸福这就是暗恋，远远望着终不敢靠近.抵不过暗恋之痛，终于苦求希望这是我最后的爱.只求前路上忍住泪水，互相祝福.耗尽心血的爱一定要这样的23）分段时

6、使用的标签标签不在上下方各空一行例如： 划分段落 即便爱他甚于爱我自己可我太过害羞而不敢说出口即便因为爱彻夜未眠可我也会因为那爱的泪水而感到满足.我虽然渺小，可希望他能成为栋梁 我即便死去，也要他健康存活.祝他幸福这就是暗恋，远远望着终不敢靠近.抵不过暗恋之痛，终于苦求 希望这是我最后的爱耗尽心血的爱一定要这样的只求前路上忍住泪水，互相祝福 .4）画线时使用的标签hr size= 像素或百分率“width= 像素或百分率”align= left 或 right 或 center noshade= truecolor= # 颜色”例如：画各式的线hr 的基本形态. 设定横长.通过百分率设定横长，

7、百分率指得是与与浏览器窗口的横宽进行对比的百分率.窗口大小不同，长度也不同.第二条的pixel单位是绝对数值，它与窗口大小无 关，是固定长度值 调整厚度，用各种数值试试现在制做平面性横线 .要在平面性横线中加色，采用如同 color= pink 的方式即可第三条的厚度高为20. 设定横线为左对齐，对齐属性为align. 居中对齐的横线. 右对齐的横线.5)居中时使用的标签使用center标签可以使网页画面中的文本和图片居中排列。例如：(11) 居中对齐 玫瑰家族tag教室6）引用文章时使用的标签 这是摘取文章、网站内容或引用他人原话时使用的标签。使用该标签会自动插入所引用的句子，但不能调节插入

8、的间隔。例如： 引用文章 介绍禹柳松的歌词aa+可乐，讨厌讨厌+红茶，讨厌讨厌+浓咖啡 oh no +热巧克力，讨厌讨厌+汽水，讨厌 讨厌+白牛奶 喜欢喜欢+味道好，颜色好，营养足 /+最适合我简单的口味+有蛋白质，维生素+最适合我健康的口味+牛奶喜欢牛奶喜欢给我牛奶（再多给点）+牛奶喜欢牛奶喜欢世上最喜欢+要是没有牛奶，想都不敢想.+最喜欢牛奶，给我牛奶+milk milk oh 牛奶 +学习来一杯运动来一杯 +总在我身边的牛奶+我喜欢喝奶瓶中的牛奶 +新鲜的牛奶才是牛奶+喝了牛奶长得快 +成为国家的新一代.+牛奶喜欢牛奶喜欢给我牛奶（再多给点）+牛奶喜欢牛奶喜欢世上最喜欢+牛奶喜欢牛奶喜欢

9、给我牛奶（再多给点）+牛奶喜欢牛奶喜欢世上最喜欢+世上最喜欢 + +6）生成空格时使用的“  例如：空格时使用的tag白牛奶喜欢喜欢aa 可乐，讨厌 讨厌  红茶，讨厌讨厌   浓咖啡 oh no      热 巧 克 力，     讨厌讨厌      汽水，讨厌讨 厌        白牛奶喜欢喜欢7）原封不动显示输入内容的标签使用本标签

10、可以将html源代码中的文本样式原封不动地显示在网页上。即便中间没有 标签或标签也可以维持换行和句子间的间距。例如：克隆文章可自由设定文字位置的tag.* .!. *.*. .*.*.*:*.*.也可以这么用跟屁虫2等一下，就等一下！我是世上最可怕的跟屁虫和你一起即便变成孤家寡人也还要跟着你就算你再讨厌我，我也要跟着你 .也可以这么用.aa与标签具有相似属性的一些标签。26 能显示不同的字体，它忽视内部的标签，只 读取tab和换行。改变文本设定文字大小、颜色和模样1）字体标签可以设定为 1-7.1最小，7最大，默认值是3。例如：试着设定不同大小的文字 ？ 文字大小 1 文字大小 2 文字大小

11、3 文字大小 4 文字大小 5 文字大小 6 文字大小 7 文字大小-2 文字大小 +4设定文字基本大小的 标签文本中如果没有使用 标签，那么标签设定的内容将应用于该文本中。例如：设定文字的基本大小 一般情况下，basefont tag 用于 body tag 中，可以对文本中所有的文字进行设定.可是如果在使用basefont tag的句子中通过设定font color= red size= 5” 来改变部分文字只需要将font tag插入其中即可.容易吧2) 3)font face= 字体”4) 2、设置标题文字的大小、颜色和对齐方式 例如：设定标题文字的大小、颜色和对齐方式 欢迎！!欢迎您

12、访问我们的玫瑰教室的tag教室希望您能通过学习成为tag高手3、制作四处运动的文字。 基本属性：height , width设定乂子足动日勺幅度和踏度bgcolor设att文字途经区域的自京色。beha vior= alternate xt 反贬动behavior= scroll”义字从右到左连续旋转behavior= slide”义字从右到左翻转后停止direction设定文字的运动方向（左，右，上，下）loop循环次数（默认值为无限次）。例如loop=3 ,即运行3次。scrollamount设定运动跨度（数值越大越快）scrolldelay设定延迟时间（数值越大越慢）例如：*marque

13、e tag*i 玫瑰家族 tag 教室义 玫瑰家族成员，我爱你13. 口 玫瑰家族 成员，我爱你13. 玫瑰家 族成员，我爱你13. _/慢慢移动. 卡 嗒卡口苔.(已 紊 a .-)n m(.)m 在宽为 100的限制内，向上运动 .m(. .)m 在宽 为100的限制内，向下运动. 盐娃娃 如同为了想知道大海有多深而跑进大海的盐娃娃一样，我为了想知道你的心灵 毅然地投进了你，慢慢地融化悄无声息美化文字的标签许多与文字相关的标签其功能颇为相似，如和标签，功能都是使文字加 粗，在网页上的使用效果基本相同，这些标签可以分为区 别字形的物理标签形式和区分内容的逻辑标签形式。1）物理标签物理标签指的

14、是设定文字自身属性的标签。标签说 明粗体字文 字 使 文字 加 粗斜体字文 字 使 文于 倾 斜打印体 使 文了 表 现 为 标 准 打 印 体上标-文子 上 标下标 .文子 下 标放大 .文子 放 大缩小 文子 缩 小卜画线 给 文了 加 下 画 线加删除线 .给 文于 加 删除 线闪光 使文了 具有闪亮效果标记地址的标签kijjlllllll 物理风格的 tag该例题使用的是用于装饰文字的物理 tag显示为加粗文字.显示为斜体文字.显示为打印体文字.上标文字如此显示 .上标文字下标文字如此显示 .下标文字比现在 稍微大一些 再大一些显 示为.比现在 稍 微 小一些再 小一些 显示为.显示下

15、划线，因为会和链接混淆，请注意 aa出现失误取消时使用.加粗的斜体字如此表示 2）逻辑形式的标签用于区别表现文字的内容特性。链接标签链接标签属性：href 将要链接的文件名和网址设为值。target是设定档链接成功时以何种方式打开窗口的 属性，其值通常是一-self -top -blank-parent或其他指定名称。name :当以名称打开网页时用于设定打开部分。通常用于设定书签。1、链接文本和图片 例如：在文本或图片上设置链接在文本上设置链接 玫 瑰家族tag教室daum 雅虎韩国 na ver在图片上设置链接 设定图片链接调节链接颜色例 ： 2、设定链接页面的出现位置_top全屏替换_b

16、lank在新窗口中打开-self在当前窗口中打开_parent 在当前窗口的父级窗口中打开例1 :设定链接页面的 target如果要链接数十个网站，那么一个个设定很繁琐。例2:daum 雅虎 na ver 可以写成：daum 雅虎na ver3、去除链接图片的蓝色边框例如：显示边框 不设定 border= 0 不显示边框 设定 border= 0 4、单击小图显示大图点击小图使其变大 点击小图使其变大 5、链接下载文件下载文件在因特网上下载文件时要使用链接标签，在“文件名 或文件地址“部分输入扩展名或相应文件的路径就可 以了。下载文件应考虑下载速度，所以应用压缩文件。 并且应直接设定下载文件的

17、位置。例如：在文件下载中设置链接 文件下载 6、在特定的位置上进行链接.在页面内进行链接设置.链接至其他页面.设定文本书 签名(name)例如：在主页里进行链接在网页内进行链接好想法幽默集锦* 一只蚂蚁 * 野蛮小鬼 * 坐公车的老奶奶 * 有信仰的狮子 只蚂蚁 在一个男人，生平最大的愿望就是要登上“吉尼斯大全”所在，他在深山里抓了一只蚂蚁，对其进行了十年的训练最后，那只蚂蚁只要一听到音乐就会翩翩起舞。在等待吉尼斯大全对其进行考察的时候，他带着蚂蚁走进一家餐馆餐馆里传来了悦耳的音乐，蚂蚁就开始合着音乐跳起舞来跳得非常带劲.看到这里，这个男人就想要在人前炫耀一番匆匆喊来待者“服务员，快点过来”待

18、者匆忙赶来一下子就把蚂蚁踩死了“对不起，先生！再也不会发生这样的事了” 选自于好的想法- 野蛮小鬼 这是我大学刚毕业到幼儿园实习时发生的事有一天上美术课，因为想不到好的主题就说道“大家把最喜欢的东西画下来，怎么样？”孩子们开始认真地画画，有画花的，有画蝴蝶的大伙的样子都非常可爱可是，有一个孩子抓起全部的黑色颜料在纸上胡乱画了起来那一刻，我认定得他有自闭症，很是担心，就轻 轻走了过去问道：“你在画什么呢？那小孩答道：“紫菜”。17.17.-选自于好的想法 -滚坐公车的老奶奶坐公车的老奶奶问司机到光华门还远不远？司机说，还远着呢！老奶奶仍然一直问，司机不耐烦说道，你睡会吧，到了光华门我会喊你的。可

19、是司机一转眼就忘了这回事，车过了光华门。事已至此，司机只有把车开回光华门，司机喊道：老奶奶，下车吧，光华门到了。老奶奶睁开眼说，这么快，已经到一半了-选自于好的想法 -在其他网页的书签上设置链接链接至其他网页 有信仰的狮子 有一个男人正在被狮子追，跑了一会跑进了一个死胡同里，情急之中男人开始对上天祈祷，“主啊，你让追我的这只狮子有信仰吧！”话音刚落，那只追他的狮子就停了下来，那男人见状长嘘了一口气，这时，狮子很有风度地走到男人身边，开始祷告，“今天也这样，谢谢了！阿门！ ”-来自于好的想法 -7、用链接发送电子邮件 例如：在邮件上设置链接8、事先设置电子邮件的标题例如：在链接电邮时设置标题栏给

20、运营者的电邮目录标签制作有序目录1）制作数字目录设定目录类型为数字 作业 在下面找出错误的词语苹果牛奶香蕉牛奶巧克力牛奶爱情与灵魂自由时代小聚会你和我郊外的树狐狸妈妈爸爸老天爷熊娃娃声音录音机记事本牛犊 猫2）制作英文字母目录设定目录类型为英文大写字母问题1:对下面a, b, c的的哪一型风格有 好感？经典型幽默型简洁型问题2:最喜欢哪个季节？ 春 夏 秋 冬3）制作罗马数字目录用罗马数字标记目录 目录:html的重要tag 目录 tag 图像 tag 表格 tag 边框 tag超链接tag目录：目录tag的种类在序的tag无序的tag 定义 tag4）制作有序目录的顺序改变有序目录的顺序 首

21、先由1开始按顺序出来吧1,2, 3.想从10开始!！从这往下继续顺延那就再从200开始可要怎么办才好呢？那就从200再开始吧。这么做！ aa现在懂了吧越学越有意思神秘的html世界5）在目录中插入另一目录目录标签是可以重叠运用的。 比如在有序目录中再 插入另一有序目录，也可以在无序目录中再另行插 入其他无序目录。目录中插入另一目录 第1章第2章 html css ja vascript第3章2、制作无序目录dise 黑色圆点circle空心圆square黑色方块制做无序目录使用circle属性值 脚 主 老 草 葱 男 宝使用square属性值 脚 主 老 草 葱 男 宝使用disc属性值 脚 主 老 草 葱 男 宝4）制作自定义目录 多用于定义专业语。dl dt要定义的专业语dd专业语的解释制做自定义目录 ip address是nic （网络信息中心）分配给每台计算机或网络设备的32位数字标识，在互联网上每台计算机 或网络设备的ip地址都是惟一的.java由