HTML语言入门教程

语言入门教程(一)

第一课基础

Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名>来表示标志的开始和结束(例如标志对)，因此在Html文档中这样的标志对都必须是成对使用的。

当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。

HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >，< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm

.html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。

HTML文件基本架构

文件开始

标头区开始

... 标题区

标头区结束

本文区开始

本文区内容

本文区结束

文件结束

网页文件格式。

标头区 : 记录文件基本资料，如作者、编写时间。

标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。<BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容。注意事项通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。第二课字体<hn>...</hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。如 : <h2> 标题 </h2>标题如 : <h3 align = center> 标题 </h3> ( 标题置中 )标题... 粗体字。如 : 粗体字 粗体字... 斜体字。: 斜体字 斜体字<del>...</del> 横线 ( 表示删除 )。如 : <del> 横线 </del><tt>...</tt> 打字体 ( 固定宽度文字 )。如 : <tt> 打字体 </tt>打字体... 上标字。如 : 字体 上标字 字体上标字... 下标字。如 : 字体 下标字 字体下标字<!...> 注解 ( 不会显示在浏览器上 )，可以多行。如 : <! 更新日期 : 2000/1/1>第三课表格表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。常用表格标记<table>...</table>表格指令。相关属性 :·align 调整·bgcolor 背景颜色·border 边框·height 高度·width 宽度<caption>...</caption>表格标题。相关属性 :·align 调整<tr>...</tr>表格列 ( </tr>可省略 ) 。相关属性 :·align 调整<th>...</th>表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 ) 。:·align 调整·colspan 栏宽·rowspan 栏高<td>...</td>表格栏资料 ( 储存格 ) ( </td>可省略 ) 。相关属性 :·align 调整·bgcolor 背景颜色·height 高度·width 宽度·colspan 栏宽·rowspan 栏高举例如 : ( 基础型 )<table border=1 align=center><tr><td>太平洋网络学院<td>太平洋网络学院<tr><td>太平洋网络学院<td>太平洋网络学院</table>太平洋网络学院太平洋网络学院太平洋网络学院如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。<table border=1 align=center bgcolor=#ccccff><caption>表格标题</caption><tr><td><th colspan=2>行标题 1 <th colspan=2>行标题 2<tr><th rowspan=2>列标题 1 <td>a <td>a <td>a <td>a<tr><td>b <td>b <td>b <td>b<tr><th rowspan=2>列标题 2 <td>c <td>c <td>c <td>c<tr><td>d <td>d <td>d <td>d</table>表格标题行标题 1 行标题 2a a a a列标题 1b b b bc c c c列标题 2d d d d第四课标示html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！常用标示标记<li> 标示项目。如 :<ol><li>第一项<li>第二项</ol>1.第一项2.第二项<ol>...</ol> 编号标示，可标示数字或英文、罗马字母。如 :<ol type=i><li>第一项<li>第二项</ol>i.第一项ii.第二项<ul>...</ul> 符号标示，可标示数字或英文、罗马字母。如 :<ul><li>第一项<li>第二项</ul>?第一项?第二项<dt> 定义项目。<dd> 定义资料。<dl>...</dl> 定义标示。如 :<dl><dt>十进制 :<dd>0、1、2、3、4、5、6、7、8、9<dt>十六进制 :<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f </dl>十进制 :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巢状式标示巢状式标示如 :<ol><li>第一章 <ol type=i> <li>第一节<ul> <li>第一段 <li>第二段</ul> <li>第二节 </ol><li>第二章<li>第三章</ol>1.第一章i.第一节?第一段?第二段ii.第二节2.第二章3.第三章其他标示标记<dir>...</dir> 目录式标示 ( 自动加圆点 )。如 :网络学院 :<dir><li>新手上路软件教室<li>设计教室<li>开发教室</dir>网络学院 :?新手上路?软件教室?设计教室?开发教室注意事项标示项目符号也可以用... 标记，以符号字元( ○、◆、◎、?、■...等 ) 标示。如: ● 特殊符号 :在html文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。符号替代指令" " 或 "& 或 &< < 或 <> > 或 >不可分空格 第五课区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。html所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。常用区段标记<hr>产生水平线。如 : <hr aling=certen width=90%> 跳下一行。如 : 太平洋网络学院， 网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。...段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，<center>...</center>置中。如 : <center>置中</center>置中...不跳下一行。如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。<pre>...</pre>以文件原始格式显示。如 : <pre>原始格式: 文件</pre>原始格式: 文件第六课链接链接可说是html中最重要的功能！因为html拥有链接的功能，使你能接上internet、www ……享受多姿多彩的网络世界。基本上链接分成 :外部链接——链接至网络的某个url网址或文件，可参考考网络链接方式。内部链接——链接html文件的某个区段。网络链接方式 : //主机名称 / 路径 / 文件名称网址如 : http : //https://www.360docs.net/doc/707366004.html,/文件传输如 : ftp : //https://www.360docs.net/doc/707366004.html,/gropher 传输如 : gropher : //https://www.360docs.net/doc/707366004.html,/远端登入如 : telnet : //https://www.360docs.net/doc/707366004.html,/文件下载如 : file : //data/html/file.zipnet news 传输如 : news : https://www.360docs.net/doc/707366004.html,e-mail 如 : mailto : pcedu@https://www.360docs.net/doc/707366004.html,常用链接标记<base>设定基本url位置或路径，以後只要设定文件名称即会自动加上位置或路径。相关属性 :·href 链接的url位址或文件·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和<frame> 视窗标记配合使用或开新的视窗 ):<base href="http : //https://www.360docs.net/doc/707366004.html,/"><a href="kk.htm">■</a><base href="http : //https://www.360docs.net/doc/707366004.html,/" target=frame1><a>...</a>链接指令。相关属性 :·href 链接的url位址或文件·name 名称·target 指定链接到的url位址或文件显示于那一个视窗 ( 可和<frame> 视窗标记配合使用或开新的视窗 )如 :外部链接<a href="http : //https://www.360docs.net/doc/707366004.html,/">■</a><a href="http : //www.pconline.co https://www.360docs.net/doc/707366004.html,/" target=frame1>■</a>第六课链接内部链接·ch1.htm 文件<a href=#a>■</a> ( 欲链接至html文件 a 点 )文件 a 点 )·ch2.htm文件<a href=ch1.htm#a>■</a> (欲链接至ch1.htm 文件 a 点 )" ■ " 表示链接点，可以是文字或图案。( 即游标移到时，会变成手指形状的地方 )<link>链接指令 ( 用于head区，设定css文件 )。<meta>储存应用资讯，可设定时间载入网页 ( 用于head区 )。相关属性 :·charset 设定·content 回应表头资料内容 , 若是数字表示秒数·http-equiv 回应表头 , 若设定为refresh载入url设定·url html位置如 :·设定中文自动跳行。<meta http-equiv="content-type"content="text/html;charset=gb2312">·设定十秒回到首页。 ( 若不设定html文件位置则再载入原html文件 )<meta http-equiv="refresh" content=10 url=index.htm>设定链接、未链接部份颜色，用<body>...</body>标记。相关属性 :·alink按下链接部份未放开时颜色·link未看过的链接部份颜色·vlink已看过的链接部份颜色如 : <body link=#0000ff alink=#ff0000 vlink=#00ff00>第八课设置图片图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率有关设定图片的方法共有以下几种 :1.设定html文件背景图片、背景颜色。<body>...</body>标记。如 : <body background=a.gif>...</body> 或<body bgcolor=#000000>...</body>2.设定图片。<img>标记。3.设定地图。<map>...</map>标记。常用图片标记相关属性 :·align 调整·alt 提示字·border 边框·he ight 高度·src 文件或url位址·usemap 地图名称·width 宽度如 : 可插入图片 ( gif、jpg格式 )、avi电影<center><img src="../../../images/pcedu_lo.gif" alt="太平洋网络学院" align=top border=1></center><map>...</map> 地图相关属性 :·name名称<area> 设定地图动作区域·coords设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 )·href 动作区域连结点 ( 可载入位址或文件 )·nohref 动作区域连结点不动作·shape 外型举例设定地图<img border=0 src=a.gif usemap=#a><map name=a><area shape=rect coords=0,0,200,100 href=1.htm><area shape=rect coords=0,100,200,200 nohref><area shape=rect coords=0,200,200,300 href=3.htm></map>第九课加入声音html不仅能插入图片，也可以载入midi音乐、wav 音效喔！常用音乐标记<bgsound> 背景音乐、音效。·loop 循环 , 背景音乐播放次数·src 文件或url位址 (可为wav、midi格式 )如 :<bgsound src=m-1.mid loop=true>内嵌音乐插件<embed>...</embed> 内嵌插件。相关属性 :·height 高度·width 宽度 ( 可设百分比% )·src 设定内嵌物件的 url 位址·loop 循环 , 背景音乐播放次数·autostart 自动播放如 :<embed src=m-1.mid width=145 height=60 autostart=true loop=true></embed>第十课滚动条ie提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！【文字卷动标记】<marquee>...</marquee> 文字卷动 ( 滚动条 )。【相关属性】·behavior = 设定卷动方式-- alternate 交替来回卷动-- scroll 卷动 ( 预设 )-- slide 滑动·bgcolor = color 背景颜色·direction = 设定卷动方向·height = n 高度·loop = n 循环 , 卷动次数 ( 预设循环 )·scrollamount = n 设定卷动距离·scrolldelay = milliseconds 设定卷动时间·truespeed = milliseconds 设定卷动速度·width = n 宽度 ( 可设百分比% )【举例】</div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "76191e0b79563c1ec5da71a1"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>