《2022年HTML语言简易入门教程 .pdf》由会员分享，可在线阅读，更多相关《2022年HTML语言简易入门教程 .pdf（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第一课 基础Html 是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html 或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPage Editor 等编辑工具来编写Html 文件。Html 语言使用标志对的方法编写文件，既简单又方便，它通常使用 来表示标志的开始和结束(例如标志对)，因此在 Html 文档中这样的标志对都必须是成对使用的。当我们畅游 Internet时，我们透过浏览器所看到的网站，是由HTML(HyperText Markup Language)语言所构成
2、。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。HTML 标记是由 所括住的指令，主要分为:单标记指令、双标记指令(由，所构成)。HTML 网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后(以.htm 或.html 为文件后缀保存)将 HTML 网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。HTML 文件基本架构 文件开始 标头区开始.标题区 标头区结束 本文区开始本文区内容 本文区结束 文件结束 网页文件格式。标头区:记录文件基本资料，如作者、编写时间。标题区:文件标题
3、须使用在标头区内，可以在浏览器最上面看到标题。本文区:文件资料，即在浏览器上看到的网站内容。注意事项通常一份 HTML 网页文件包含二个部份:.标头区、.本文区。而 和 代表网页文件格式。习惯上一个网站的首页名称通常订为index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出index.htm 文件。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 15 页 -第二课 字体.标题，设定标题字体大小，n=1(大)6(小)会自动跳下一行。通常用在如章节、段落等标题上。如:标题 标题如:标题 (标题置中)标题.粗体字。如:粗体字 粗体字.斜体字。如:斜体字 斜
4、体字.横线(表示删除)。如:横线 .打字体(固定宽度文字)。如:打字体 打字体.上标字。如:字体 上标字 字体上标字.下标字。如:字体 下标字 字体下标字 注解(不会显示在浏览器上)，可以多行。如:名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 15 页 -第三课 表格表格是 html 的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。常用表格标记.表格指令。相关属性:align 调整 bgcolor 背景颜色 border 边框 height 高度 width 宽度.表格标题。相关属性:align 调整.表
5、格列(可省略)。相关属性:align 调整.表格栏标题(表头)粗体字(可省略)。相关属性:align 调整 colspan 栏宽 rowspan 栏高.表格栏资料(储存格)(可省略)。相关属性:align 调整 bgcolor 背景颜色 height 高度 width 宽度 colspan 栏宽 rowspan 栏高举例如:(基础型)太平洋网络学院 太平洋网络学院太平洋网络学院 太平洋网络学院 太平洋网络学院太平洋网络学院太平洋网络学院太平洋网络学院名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 15 页 -如:(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。表格标题
6、行标题 1 行标题 2 列标题 1 a a a a b b b b 列标题 2 c c c c d d d d 表格标题行标题 1 行标题 2 列标题 1 a a a a b b b b 列标题 2 c c c c d d d d 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 15 页 -第四课 标示html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！常用标示标记标示项目。如:第一项 第二项 1.第一项2.第二项.编号标示，可标示数字或英文、罗马字母。如:第一项 第二项 i.第一项ii.第二项.符号标示，可标示数字或英文、罗马字母。如:第一项 第二项 第一项第二项
7、 定义项目。定义资料。.定义标示。如:十进制:0、1、2、3、4、5、6、7、8、9 十六进制:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 十进制:0、1、2、3、4、5、6、7、8、9 十六进制:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 15 页 -巢状式标示巢状式标示如:第一章 第一节 第一段 第二段 第二节第二章 第三章 1.第一章i.第一节第一段第二段ii.第二节2.第二章3.第三章其他标示标记.目录式标示(自动加圆点)。如:网络学院:新手上路 软件教室 设计教室 开发教室 网络学院
8、:新手上路软件教室设计教室开发教室名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 15 页 -注意事项标示项目符号也可以用.标记，以符号字元(、.等)标示。如:特殊符号:在 html 文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。符号替代指令" 或"& 或&> 或> 不可分空格 名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 15 页 -第五课区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。html 所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。常用区段标记产
9、生水平线。如:跳下一行。如:太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。.段落，跳下一行并加一行空白。(可省略)如:太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。.置中。如:置中 置中.不跳下一行。如:太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。.以文件原始格式显示。如:原始格式:文件 原始格式:文件名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 15 页 -第六课 链接链接可说是 html 中最重要的功能！因为html 拥有链接的功能，使你能接上internet、www 享受多姿多彩的网络世界。基
10、本上链接分成:外部链接链接至网络的某个url 网址或文件，可参考考网络链接方式。内部链接链接html 文件的某个区段。网络链接方式网络链接方式:/主机名称/路径/文件名称网址 如:http:/ 传输 如:gropher:/ net news 传输 如:news: e-mail 如:mailto: 常用链接标记设定基本 url 位置或路径，以後只要设定文件名称即会自动加上位置或路径。相关属性:href 链接的 url 位址或文件 target 指定链接到的 url 位址或文件显示于那一个视窗(可和 视窗标记配合使用或开新的视窗)如:.链接指令。相关属性:href 链接的 url 位址或文件 na
11、me 名称 target 指定链接到的 url 位址或文件显示于那一个视窗(可和 视窗标记配合使用或开新的视窗)如:外部链接 名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 15 页 -内部链接 ch1.htm 文件 (欲链接至 html 文件 a 点)(html文件 a 点)ch2.htm文件 (欲链接至 ch1.htm 文件 a 点)表示链接点，可以是文字或图案。(即游标移到时，会变成手指形状的地方)链接指令(用于 head 区，设定 css 文件)。储存应用资讯，可设定时间载入网页(用于 head 区)。相关属性:charset 设定 content 回应表头资料内容,若是
12、数字表示秒数 http-equiv 回应表头,若设定为 refresh 载入 url 设定 url html位置如:设定中文自动跳行。设定十秒回到首页。(若不设定 html 文件位置则再载入原html 文件)设定链接、未链接部份颜色设定链接、未链接部份颜色，用.标记。相关属性:alink 按下链接部份未放开时颜色 link 未看过的链接部份颜色 vlink已看过的链接部份颜色如:名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 15 页 -第八课设置图片图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率有关设定图片的方法共有以下几种:1.设定 html 文件
13、背景图片、背景颜色。.标记。如:.或.2.设定图片。标记。3.设定地图。.标记。常用图片标记 指令相关属性:align 调整 alt 提示字 border 边框 height 高度 src 文件或 url 位址 usemap 地图名称 width 宽度如:可插入图片(gif、jpg 格式)、avi 电影 .地图相关属性:name 名称 设定地图动作区域相关属性:coords 设定动作区域座标(左上角座标:x1,y1;右下角座标:x2,y2)href 动作区域连结点(可载入位址或文件)nohref 动作区域连结点不动作 shape 外型举例设定地图 名师资料总结-精品资料欢迎下载-名师精心整理-
14、第 11 页，共 15 页 -第九课加入声音html 不仅能插入图片，也可以载入midi 音乐、wav 音效喔！常用音乐标记 背景音乐、音效。相关属性:loop 循环,背景音乐播放次数 src 文件或 url 位址(可为 wav、midi 格式)如:内嵌音乐插件.内嵌插件。相关属性:height 高度 width 宽度(可设百分比%)src 设定内嵌物件的url 位址 loop 循环,背景音乐播放次数 autostart 自动播放如:名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 15 页 -第十课 滚动条这是由 ie 提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强
15、喔！【文字卷动标记】.文字卷动(滚动条)。【相关属性】behavior=设定卷动方式-alternate 交替来回卷动-scroll 卷动(预设)-slide 滑动 bgcolor=color 背景颜色 direction=设定卷动方向 height=n 高度 loop=n 循环,卷动次数(预设循环)scrollamount=n 设定卷动距离 scrolldelay=milliseconds 设定卷动时间 truespeed=milliseconds 设定卷动速度 width=n 宽度(可设百分比%)【举例】如:太平洋网络学院 如:太平洋网络学院 名师资料总结-精品资料欢迎下载-名师精心整理-
16、第 13 页，共 15 页 -一 html 的标签table，tbody,tr,td 称为 html 的标签，以双标签的形式出现，所谓双标签，也就是有一个 就有一个对应的 与之对应，同样适用于其他的双标签。一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达，属性可选择使用，不一定全部都用。在整个图片或帖子里双标签以首尾呼应的方式出现。这里是图片,文字或帖子内容.的常用参数设定：width=400 表格宽度，接受绝对值(如 width=80)及相对值(width=80%)。border=1 表格边框的厚度，不同浏览器有不同的内定值。cellspacing=2 表格格线的厚度align=
17、center 表格的摆放位置(水平)，可选值为：left(居左),right(居右),center(居中)valign=top.表格内内容的对齐方式(垂直)，可选值为：top,middle,bottom。background=myweb.gif 表格的背景图片，与bgcolor 不要同用。bgcolor=#0000ff 表格的背景颜色，与background 不要同用bordercolor=#cf0000 表格边框颜色bordercolorlight=#00ff00 表格边框向光部分的颜色bordercolordark=#00ffff 表格边框背光部分的颜色，使用bordercolorligh
18、t 或 bordercolordark 时bordercolor 将会失效。播放器宽度 width和高度 height的值根据需要自定二 帖图格式帖图基本代码如下：名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 15 页 -称图形标记，主要用来插入图形标记。三 文字设制基本代码如下：插入文字 align=center 表示字体居中，可选值为居右（right）居左（left）color=颜色代码face=字体常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等size=字体大小，这里的最大值为7 取值越大文字就越大四 加入音乐 常用属性如下：src=your.mid 设定
19、midi 档案及路径，可以是相对或绝对。autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。loop=true 是否自动反复播放。loop=2 表示重复两次，true 是，false 否。hidden=true 是否完全隐藏控制画面，true 为是，no 为否(内定)。starttime=分:秒 设定歌曲开始播放的时间。如starttime=00:30 表示从第 30 秒处开始播放。volume=0-100 设定音量的大小，数值是0 到 100 之间。内定则为使用系统本身的设定width=整数 和 high=整数 设定控制面板的高度和宽度。(
20、若 hidden=no)align=center 设定控制面板和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom controls=smallconsole 设定控制面板的外观。预设值是console。console 一般正常面板smallconsole 较小的面板playbutton 只显示播放按钮pausecutton 只显示暂停按钮stopbutton 只显示停止按钮volumelever 只显示音量调节按钮贴音乐的完整语法如下:一:隐藏播放器二:不隐藏播放器名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 15 页 -