HTML超文本标记语言的介绍

一、概念

     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 中新增的。



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值