首页 > 代码库 > HTML超文本标记语言的介绍

HTML超文本标记语言的介绍

2024-08-07 17:51:01   220人阅读

一、概念

     1、定义

       超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。

       简而言之：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

       解释：HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。

二、特点及工作原理

     1、原理

        网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

        浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

        需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

     2、特点

      HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：     

      （1） 简易性，HTML版本升级采用超集方式，从而更加灵活方便。     

      （2） 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。    

      （3） 平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

三、格式规范

      一个简单的 HTML 文件
            <html>
                  <head>
                        <title>页面的标题</title>
                  </head>
                  <body>
                        <p>这是我的第一个页面。</p>
                        <b>此文本是粗体的。</b>
                  </body>
            </html>
      简单的段落
            <html>
                  <body>
                        <p>这是段落。</p>
                        <p>段落元素由 p 标签定义。</p>
                  </body>
            </html>
      标题
            <h1>This is a heading</h1>
            HTML 会自动在标题前后添加一个额外的折行。
      段落
            段落使用 <p> 标签进行定义。
            <p>This is a paragraph</p>

            HTML 会自动在段落前后添加一个额外的空行。
      换行符
            当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。
            <p>This <br> is a para<br>graph with line breaks</p>
            <br> 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br> 的终止标签。
            <br> 还是 <br />
            您会越来越多地发现 <br> 与 <br /> 很相似。由于 <br> 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。
把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
      注释
            注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。
            <!-- This is a comment -->
            注意：左括号后需要写一个惊叹号，右括号前就不需要了。
      元素
            每个 HTML 元素都有一个元素名（比如 body、h1、p、br）
            开始标签是被括号包围的元素名
            结束标签是被括号包围的斜杠和元素名
            元素内容位于开始标签和结束标签之间
            某些 HTML 元素没有内容
            某些 HTML 元素没有结束标签
总结如下图


四、扩展

      HTML的功能远不止这些，下边我们列出一些其他的标记。至于其他的功能在以后的学习过程中再慢慢研究。

标记类型译名或意义作 用备注
文件标记
<HTML>●文件声明让浏览器知道这是 HTML 文件 
<HEAD>●开头提供文件整体资讯 
<TITLE>●标题定义文件标题，将显示于浏览顶端 
<BODY>●本文设计文件格式及内文所在 
排版标记
<!--注解-->○说明标记为文件加上说明，但不被显示 
<P>○段落标记为字、画、表格等之间留一空白行 
<BR>○换行标记令字、画、表格等显示于下一行 
<HR>○水平线插入一条水平线 
<CENTER>●居中令字、画、表格等显示于中间反对
<PRE>●预设格式令文件按照原始码的排列方式显示 
<DIV>●区隔标记设定字、画、表格等的摆放位置 
<NOBR>●不折行令文字不因太长而绕行 
<WBR>●建议折行预设折行部位 
字体标记
<STRONG>●加重语气产生字体加粗 Bold 的效果 
<B>●粗体标记产生字体加粗的效果 
<EM>●强调标记字体出现斜体效果 
<I>●斜体标记字体出现斜体效果 
<TT>●打字字体Courier字体，字母宽度相同 
<U>●加上底线加上底线反对
<H1>●一级标题标记变粗变大加宽，程度与级数反比 
<H2>●二级标题标记将字体变粗变大加宽 
<H3>●三级标题标记将字体变粗变大加宽 
<H4>●四级标题标记将字体变粗变大加宽 
<H5>●五级标题标记将字体变粗变大加宽 
<H6>●六级标题标记将字体变粗变大加宽 
<FONT>●字形标记设定字形、大小、颜色反对
<BASEFONT>○基准字形标记设定所有字形、大小、颜色反对
<BIG>●字体加大令字体稍为加大 
<SMALL>●字体缩细令字体稍为缩细 
<STRIKE>●画线删除为字体加一删除线反对
<CODE>●程式码字体稍为加宽如<TT> 
<KBD>●键盘字字体稍为加宽，单一空白 
<SAMP>●范例字体稍为加宽如<TT> 
<VAR>●变数斜体效果 
<CITE>●传记引述斜体效果 
<BLOCKQUOTE>●引述文字区块缩排字体 
<DFN>●述语定义斜体效果 
<ADDRESS>●地址标记斜体效果 
<SUB>●下标字下标字 
<SUP>●上标字指数（平方、立方等） 
清单标记
<OL>●顺序清单清单项目将以数字、字母顺序排列 
<UL>●无序清单清单项目将以圆点排列 
<LI>○清单项目每一标记标示一项清单项目 
<MENU>●选单清单清单项目将以圆点排列，如<UL>反对
<DIR>●目录清单清单项目将以圆点排列，如<UL>反对
<DL>●定义清单清单分两层出现 
<DT>○定义条目标示该项定义的标题 
<DD>○定义内容标示定义内容 
表格标记
<TABLE>●表格标记设定该表格的各项参数 
<CAPTION>●表格标题做成一打通列以填入表格标题 
<TR>●表格列设定该表格的列 
<TD>●表格栏设定该表格的栏 
<TH>●表格标头相等于<TD>，但其内之字体会变粗 
表单标记
<FORM>●表单标记决定单一表单的运作模式 
<TEXTAREA>●文字区块提供文字方盒以输入较大量文字 
<INPUT>○输入标记决定输入形式 
<SELECT>●选择标记建立 pop-up 卷动清单 
<OPTION>○选项每一标记标示一个选项 
图形标记
<IMG>○图形标记用以插入图形及设定图形属性 
连结标记
<A>●连结标记加入连结 
<BASE>○基准标记可将相对 URL 转绝对及指定连结目标 
框架标记
<FRAMESET>●框架设定设定框架 
<FRAME>○框窗设定设定框窗 
<IFRAME>○页内框架于网页中间插入框架IE
<NOFRAMES>●不支援框架设定当浏览器不支援框架时的提示 
影像地图
<MAP>●影像地图名称设定影像地图名称 
<AREA>○连结区域设定各连结区域 
多媒体
<BGSOUND>○背景声音于背景播放声音或音乐IE
<EMBED>○多媒体加入声音、音乐或影像 
其他标记
<MARQUEE>●走动文字令文字左右走动IE
<BLINK>●闪烁文字闪烁文字NC
<ISINDEX>○页内寻找器可输入关键字寻找于该一页反对
<META>○开头定义让浏览器知道这是 HTML 文件 
<LINK>○关系定义定义该文件与其他 URL 的关系 
StyleSheet
<STYLE>●样式表控制网页版面 
<span>●自订标记独立使用或与样式表同用 

注：

  • ● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
  • ○ 表示该标记属空标记，即不需要关闭标记。
  • IE 表示该标记只适用于 Internet Explorer。
  • NC 表示该标记只适用于 Netscape Communicator。
  • 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
  • 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
  • 新 表示该标记是 HTML 4.0 中新增的。



HTML超文本标记语言的介绍


联系
我们