HTML语言源代码实例

第二章超文本标记语言HTML1HTML语言源代码实例1.第一个HTML示例htmlheadtitle第一个HTML示例/title/headbodyHTML的基本结构。/body/html2.换行标签brhtmlheadtitle测试换行标签/title/headbody天津公安警官职业学院br电教中心br授课教师李平br/body第二章超文本标记语言HTML2/html3.强制不换行标签nobr/nobrhtmlheadtitle测试强制不换行标签/title/headbody黄鹤楼brbrnobr昔人已乘黄鹤去，此地空余黄鹤楼。黄鹤一去不复返，白云千载空悠悠晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？/nobr烟波江上使人愁。/body/html4.自动换行标签wbr/wbrhtmlhead第二章超文本标记语言HTML3title测试自动换行标签/title/headbody风中，花儿谢了brbrwbr凄怜的娇花在悲凉的秋风中，从曾经绚烂娇媚的枝梢，轻曼着彩蝶般的舞姿，漫天飞洒，一片片无奈地落在那冰冷森寒的风刃之上。于是，万千飞舞的蝶便化成纷扬的花絮，轻盈地随风而起，又随风飘得很远、很远。/wbr/body/html5.分段控制标签p/phtmlheadtitle测试分段控制标签/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，第二章超文本标记语言HTML4悲哀无助地发出一声声垂死的鸣叫。/ppalign=left或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=center而美丽苦短的花期/ppalign=right却是那最后悲伤的秋风挽歌中的瞬间插曲。/p万千飞舞的蝶便化p成纷扬br的花絮/body/html6.原样显示文字标签PREhtmlHEADTITLE测试原样显示文字标签/TITLE/HEADBODYpre列表标签文档中的列表是很重要的，它将使文档一目了然，在HTML中的列表分为无序列表和有序列表。有序列表与无序列表类似，但项目符号为序号数字。/PRE/BODY/html第二章超文本标记语言HTML57.居中对齐标签CENTER/CENTERhtmlHEADTITLE测试居中对齐标签/TITLE/HEADBODYPRECENTER关山月明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戌客望边色，思归多苦颜。高楼当此夜，叹息未应闲。/CENTER/PRE/BODY/html第二章超文本标记语言HTML68.水平分隔线标签hrhtmlHEADTITLE测试水平分隔线标签/TITLE/HEADBODYCENTER天津公安警官职业学院HRcolor=red/CENTERPRE侦察系hrsize=6网络专业hrwidth=40%color=green网页设计与制作hrwidth=60align=leftHTML超文本语言hrsize=120width=3align=centercolor=green/PRE/body第二章超文本标记语言HTML7/html说明：“像素”是屏幕上的一个逻辑点，是图像显示的最小单位。电子枪通过屏幕网罩的小孔打到荧光屏上由三个荧光点（RGB）组成的一个小点称为物理点。在某种显示方式下，包含一个或多个物理点的最小显示单位称为逻辑点。9.设定背景和文字的颜色BODYBGCOLOR=htmlHEADTITLE设定网页背景和文字的颜色/TITLE/HEADbodyBGCOLOR=redtext=greenCENTERPre春夜喜雨hr好雨知时节，当春乃发生。随风潜入夜，润物细无声。/PRE/CENTER/BODY/html10.设定各级标题Hn/HnHTML第二章超文本标记语言HTML8HEADTITLE设定各级标题/TITLE/HEADBODYH1ALIGN=CENTER一级标题。/H1H2二级标题。/H2H3三级标题。/H3H4四级标题。/H4H5ALIGN=RIGHT五级标题。/H5H6ALIGN=RIGHT六级标题。/H6/BODY/HTML11.控制文字的格式fonthtmlheadtitle控制文字的格式/title/headbodycenterprefontface=黑体size=7color=red天津公安警官职业学院/font第二章超文本标记语言HTML9/centerfontface=隶书size=5color=green多媒体网页制作/fontfontface=楷体size=4color=#00ffff第二章HTML超文本标记语言/font/pre/body/html12.特殊文字样式htmlheadtitle字体的物理类型/title/headbodyb这些文字是粗体的/bbri这些文字是斜体的/ibru这些文字带有下划线/u/body/html第二章超文本标记语言HTML1013.列表元素文档中的列表是很重要的，它将使文档一目了然，在HTML中的列表分为无序列表和有序列表。⑴无序列表：UL元素和LI元素ul元素可用于创建一个以圆点等项目开始的无序列表，列表中的每一项用li加以识别htmlHEADTITLE无序列表的使用/TITLE/HEADBODYULLI天津公安警官职业学院LI电教中心LI授课教师：李平LI授课内容《HTML标记语言》HRwidth=200align=leftcolor=greenLI无序列表/UL/BODY/html⑵有序列表：OL元素和LI元素有序列表与无序列表类似，但项目符号为序号数字。html第二章超文本标记语言HTML11headtitle有序列表的使用/title/headbodyoltype=Astart=4LI天津公安警官职业学院LI电教中心LI授课教师：李平LI授课内容《HTML标记语言》LI有序列表hrwidth=40%align=leftcolor=red/ol/body/html⑶嵌套列表HTMLHEADTITLE嵌套列表/TITLE/HEADbodybgcolor=greenolLI天津公安警官职业学院第二章超文本标记语言HTML12LI电教中心ultype=squareLI授课教师：李平LI授课内容《HTML标记语言》/ulHRcolor=red/ololtype=astart=2LI无序列表LI有序列表oltype=Istart=2LI嵌套列表/ol/ol/body/html14.空格标签 htmlheadtitle空格方法/title/head第二章超文本标记语言HTML13bodyp花儿什么也没有。它们    只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地/p  发出一声声垂死的鸣叫。/body/html15.上下标sup标签：用来表示上标签。sub标签：用来表示下标签。htmlHEADTITLE上下标标签/TITLE/HEADBODY12sup2/sup=144p(1111)sub2/sub/BODY/html第二章超文本标记语言HTML1416.超链接HTMLHEADTITLE超级链接/TITLE/headbodyCENTERh3天津公安警官职业学院/h3aHREF=jy1.html著名高校网址/aBR/CENTER/body/HTML注：建立超链接的标签为a和/a格式：ahref=链接位置超链接名称/a如果需要链接的文件放在同一台机器的同一个目录下，这属于最简单的本地链接，在链接文件时只需写文件名而不需要写文件的路径，但是，要链接的文件若放在不同的目录下进行链接时，则必须写明文件路径。路径名的写法有两种，相对路径和绝对路径。17.超链接实现发送邮件HTML第二章超文本标记语言HTML15HEADTITLE发送邮件/TITLE/headbodyCENTERh3天津公安警官职业学院/h3aHREF=mailto:[e-mail]给我写信/aBR/CENTER/body/HTML格式：ahref=mailto:邮件地址subject=邮件主题描述文字/a18.背景音乐htmlHEADTITLE背景音乐/TITLEbgsoundsrc=aa.mp3loop=1/HEADBODYpre背景音乐的歌名是“隐形的翅膀”/pre第二章超文本标记语言HTML16/BODY/html注：src是声音文件的路径，loop是设置循环播放的意思。19.插入多媒体文件htmlHEADTITLE插入多媒体文件/TITLE/HEADBODYembedsrc=aa1.mp3autostart=falseloop=truewidth=200height=200/BODY/html注：embed是嵌入文件的意思，src是声音文件的路径，autostart=true是自动播放/false是停止播放，loop=true是循环播放的意思，width和height是设置播放器大小的意思。20.背景图像的设定htmlHEADTITLE用平铺图像作为背景/TITLE/HEAD第二章超文本标记语言HTML17bodybackground=tx.gifPRECENTERh1天津公安警官职业学院/h1h3电教中心/h3授课教师：fontface=隶书size=6color=red李平/font授课内容《HTML标记语言》/CENTER/PRE/body/html21.网页中插入图像htmlHEADTITLE在网页中插入图像/TITLE/HEADbodyCENTERh2网页制作教材/h2aHREF=#imgsrc=dw1.jpgalt=这幅图像好看吗？第二章超文本标记语言HTML18/CENTER/body/html注：img是单独标签。格式：imgsrc=图像文件名alt=”“width=”“height=”“属性alt表示显示图像替代文字、width和height是设置图像大小。如果图像的显示有问题，应该检查以下方面：1.文件名是否书写正确；2.图像文件是否是.BMP.GIF.JPG格式。22.表格标签在HTML中，建立表格将使用四个标签table/table，tr/tr，th/th