2022年HTML语言源代码实例 .pdf

《2022年HTML语言源代码实例 .pdf》由会员分享，可在线阅读，更多相关《2022年HTML语言源代码实例 .pdf（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二章 超文本标记语言HTML1 HTML 语言源代码实例1.第一个 HTML 示例 第一个 HTML 示例 HTML 的基本结构。2.换行标签 测试换行标签 天津公安警官职业学院 电教中心 授课教师李平 名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 26 页 -第二章 超文本标记语言HTML2 3.强制不换行标签 测试强制不换行标签 黄鹤楼 昔人已乘黄鹤去，此地空余黄鹤楼。黄鹤一去不复返，白云千载空悠悠晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？烟波江上使人愁。4.自动换行标签 名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 26 页 -第二章 超文本标记语

2、言HTML3 测试自动换行标签 风中，花儿谢了 凄怜的娇花在悲凉的秋风中，从曾经绚烂娇媚的枝梢，轻曼着彩蝶般的舞姿，漫天飞洒，一片片无奈地落在那冰冷森寒的风刃之上。于是，万千飞舞的蝶便化成纷扬的花絮，轻盈地随风而起，又随风飘得很远、很远。5.分段控制标签 测试分段控制标签 花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 26 页 -第二章 超文本标记语言HTML4 悲哀无助地发出一声声垂死的鸣叫。或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬

3、间插曲。万千飞舞的蝶便化 成纷扬 的花絮 6.原样显示文字标签 测试原样显示文字标签 列表标签文档中的列表是很重要的，它将使文档一目了然，在 HTML 中的列表分为无序列表和有序列表。有序列表与无序列表类似，但项目符号为序号数字。名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 26 页 -第二章 超文本标记语言HTML5 7.居中对齐标签 测试居中对齐标签 关山月明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戌客望边色，思归多苦颜。高楼当此夜，叹息未应闲。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 26 页 -第

4、二章 超文本标记语言HTML6 8.水平分隔线标签 测试水平分隔线标签 天津公安警官职业学院 侦察系 网络专业 网页设计与制作 HTML 超文本语言 名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 26 页 -第二章 超文本标记语言HTML7 说明：“像素”是屏幕上的一个逻辑点，是图像显示的最小单位。电子枪通过屏幕网罩的小孔打到荧光屏上由三个荧光点（RGB）组成的一个小点称为物理点。在某种显示方式下，包含一个或多个物理点的最小显示单位称为逻辑点。9.设定背景和文字的颜色 设定网页背景和文字的颜色 春夜喜雨 好雨知时节，当春乃发生。随风潜入夜，润物细无声。10.设定各级标题 名师资

5、料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 26 页 -第二章 超文本标记语言HTML8 设定各级标题 一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。11.控制文字的格式 控制文字的格式 天津公安警官职业学院 名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 26 页 -第二章 超文本标记语言HTML9 多媒体网页制作 第二章HTML 超文本标记语言 12.特殊文字样式 字体的物理类型 这些文字是粗体的 这些文字是斜体的 这些文字带有下划线 名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 26 页 -第二章 超文本标记语言HTML10 13.

6、列表元素文档中的列表是很重要的，它将使文档一目了然，在HTML 中的列表分为无序列表和有序列表。无序列表：ul 元素可用于创建一个以圆点等项目开始的无序列表，列表中的每一项用li加以识别 无序列表的使用 天津公安警官职业学院电教中心授课教师：李平授课内容 HTML 标记语言 无序列表 有序列表：有序列表与无序列表类似，但项目符号为序号数字。名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 26 页 -第二章 超文本标记语言HTML11 有序列表的使用 天津公安警官职业学院电教中心授课教师：李平授课内容 HTML 标记语言有序列表 嵌套列表 嵌套列表 天津公安警官职业学院名师资料总

7、结-精品资料欢迎下载-名师精心整理-第 11 页，共 26 页 -第二章 超文本标记语言HTML12 电教中心 授课教师：李平 授课内容 HTML 标记语言 无序列表有序列表 嵌套列表 14.空格标签  空格方法 名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 26 页 -第二章 超文本标记语言HTML13 花儿什么也没有。它们    只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地  发出一声声垂死的鸣叫。15.上下标标签：用来表示上标签。标签：用来表示下标签。上下标标签 12

8、2=144(1111)2 名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 26 页 -第二章 超文本标记语言HTML14 16.超链接 超级链接 天津公安警官职业学院 著名高校网址 注：建立超链接的标签为和 格式：超链接名称 如果需要链接的文件放在同一台机器的同一个目录下，这属于最简单的本地链接，在链接文件时只需写文件名而不需要写文件的路径，但是，要链接的文件若放在不同的目录下进行链接时，则必须写明文件路径。路径名的写法有两种，相对路径 和绝对路径。17.超链接实现发送邮件 名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 26 页 -第二章 超文本标记语言HTM

9、L15 发送邮件 天津公安警官职业学院 给我写信 格式：描述文字 18.背景音乐 背景音乐 背景音乐的歌名是“隐形的翅膀”名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 26 页 -第二章 超文本标记语言HTML16 注：src 是声音文件的路径，loop是设置循环播放的意思。19.插入多媒体文件 插入多媒体文件 注：embed 是 嵌 入 文 件 的 意 思，src 是 声 音 文 件 的 路 径，autostart=true 是自动播放/false是停止播放，loop=true 是循环播放的意思，width 和 height是设置播放器大小的意思。20.背景图像的设定 用平

10、铺图像作为背景 名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 26 页 -第二章 超文本标记语言HTML17 天津公安警官职业学院 电教中心 授课教师：李平授课内容 HTML 标记语言 21.网页中插入图像 在网页中插入图像 网页制作教材 名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 26 页 -第二章 超文本标记语言HTML18 注：是单独标签。格式：属性 alt 表示显示图像替代文字、width 和 height是设置图像大小。如果图像的显示有问题，应该检查以下方面：1.文件名是否书写正确；2.图像文件是否是 .BMP.GIF.JPG 格式。22.表格标

11、签在 HTML中，建 立表 格 将 使用 四 个 标签，下面是四个标签的说明。1.定义表格标签 标签用于定义一个表格元素，一个表格元素是由多个横行（）、单元格（）和表头单元格（）子元素所组成的。2.定义表格行标签 标签用于定义表格的一行。在一组标签内可建立一行表格，也可以包含多组由 或标签所定义单元格。3.定义表头标签 标签用于定义一个表格内的表头单元格，此单元格中的文字名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 26 页 -第二章 超文本标记语言HTML19 将以粗体的方式显示。在创建表格中也可以不使用定义表头单元格。4.定义单元格标签 标签用于定义表格的单元格。一组标签

12、将建立一个单元格。标签必须放在 标签内。注意：在一个最基本的表格元素中必须包含一组标签，一组标签，一组标签。border属性的参数值是数字，此属性用于设置表格边框尺寸。一个简单的表格 学生名单 姓名 性别 年龄 专业 名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 26 页 -第二章 超文本标记语言HTML20 王强 男 19 计算机 张红 女 18 网络 23.网页特效举例：在许多网站中，常常在第一个网页的画面停留几秒后，就自动切换到另一个网页。这个技巧就是利用标签，然后将http-equiv 属性设置为 refresh(表示自动更新)，并在 content属性中名师资料总结

13、-精品资料欢迎下载-名师精心整理-第 20 页，共 26 页 -第二章 超文本标记语言HTML21 指定秒数和自动更新所显示的网页地址。格式：网页自动切换 本网站正在升级 3 秒之后将自动切换到高校网。24.注释标签 注释标签 名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 26 页 -第二章 超文本标记语言HTML22 A.menuitem COLOR:menutext;TEXT-DECORATION:none A.menuitem:hover COLOR:highlighttext;BACKGROUND-COLOR:highlight DIV.contextmenu BOR

14、DER-RIGHT:2px outset;BORDER-TOP:2px outset;Z-INDEX:999;VISIBILITY:hidden;BORDER-LEFT:2px outset;BORDER-BOTTOM:2px outset;POSITION:absolute;BACKGROUND-COLOR:buttonface function Year_Month()var now=new Date();var yy=now.getYear();var mm=now.getMonth()+1;var cl=;if(now.getDay()=0)cl=;if(now.getDay()=6)

15、cl=;return(cl+yy+年+mm+月);名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 26 页 -第二章 超文本标记语言HTML23 function Date_of_Today()var now=new Date();var cl=;if(now.getDay()=0)cl=;if(now.getDay()=6)cl=;return(cl+now.getDate()+);function Day_of_Today()var day=new Array();day0=星期日;day1=星期一;day2=星期二;day3=星期三;day4=星期四;day5=星期五;d

16、ay6=星期六;var now=new Date();var cl=;if(now.getDay()=0)cl=;if(now.getDay()=6)cl=;return(cl+daynow.getDay()+);function CurentTime()var now=new Date();名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 26 页 -第二章 超文本标记语言HTML24 var hh=now.getHours();var mm=now.getMinutes();var ss=now.getTime()%60000;ss=(ss-(ss%1000)/1000;va

17、r clock=hh+:;if(mm 10)clock+=0;clock+=mm+:;if(ss 10)clock+=0;clock+=ss;return(clock);function refreshCalendarClock()document.all.calendarClock1.innerHTML=Year_Month();document.all.calendarClock2.innerHTML=Date_of_Today();document.all.calendarClock3.innerHTML=Day_of_Today();document.all.calendarClock

18、4.innerHTML=CurentTime();var webUrl=webUrl;document.write();document.write();名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 26 页 -第二章 超文本标记语言HTML25 document.write(font);document.write(style=cursor:hand;color:#ff0000;font-family:宋体;font-size:14pt;line-height:120%);if(webUrl!=netflower)document.write(font);document.

19、write(style=cursor:hand;color:#2000ff;font-family:宋体;font-size:9pt;line-height:110%);document.write();document.write();document.write();document.write();document.write();document.write();document.write();document.write();document.write();document.write();document.write();document.write();setInterval(refreshCalendarClock(),1000);    用脚本语言编写的程序可直接运行，不用服务器的支持。名师资料总结-精品资料欢迎下载-名师精心整理-第 26 页，共 26 页 -