HTML语言剖析

一、Html简介-目录

全写: HyperText Mark-up Language
译名: 超文本标识语言
简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件 达到预期的显示效果。由文字(字母,数字、标点符号)及标签组合而成。任何文字编辑器都可以,这里推荐用:Dreamweaver
  1. Html
特点:

        描述性语言,结构语言,用于决定网页内容以什么样的形式显示;

        通过标签来控制网页的文档、字符和段落等的格式,以及对脚本语言等的调用;

        纯文本文件,可以使用各种文本编辑器编写; (Dreamweaver是首选)

        文件扩展名: .htm .html

        html文件必须在Web浏览器上运行;(运行环境)

        具有跨平台性。

2.     HTML语法结构:

        HTML文件是由一系列的元素和标签(tag)组成的;

        元素:网页中的内容;

        标签:用于规定元素的属性和它在文件中的位置;

        格式:<元素名称 属性=""...>元素资料</元素名称>,<元素名称 属性=""...>

        不区分大小写。

3.     HTML文件结构:

        起始标记:<html> </html> 表示HTML网页的起始;

        文件头部:<head> </head> 设置初始化文档信息和文档管理标注;

        文件主体:<body> </body> 设置格式化的浏览器显示的文档(内容);

        注释部分:<!--    --> 可以放在任何位置;

        <!      >

  :
<html>
<head>
<title>Html
简介</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<!--
网页内容-->
</body>
</html>




n         标签写法:

        任何标签皆由"<>"所包含,如 <b>

        标签名与小于号之间不能留有空白字符。

        某些标签 要加上参数,某些则不必。如 <font size="+2" >大家好</font>

        参数只可加于起始标签中。

        在起始标签之标签名前加上符号" / "便是其终结标签,如 </font>

        标签字母大小写皆可。

n         成对标签与单标签:
标签按型态分为成对标签与单标签

1. 成对标签
 
 顾名思义,它以起始标签及终结标签将文字围住,令其达到预期显示效果。
  
例如 HTML 源码:
<b>我愿意和大家显示成:我愿意和大家一起学好html/css!大家有信      心吗?
其中
<b> </b> 便称为成对标签。
它以起始标签
<b> 及结尾标签 </b> 标示文字我愿意和大家一起学好html/css!令它显示成粗体,两者失其一都会发生错误显示。

2.    单标签
是指标签单独出现,只有起始标签没有终结标签。

  例如 HTML 源码
I love my hometown.
<br> It's a beautiful place.
显示成:
I love my hometown.
It's a beautiful place.

其中换行标签<br>便属单标签。
它的作用便是将标签后所有东西显示于下一行,可见结尾标签对于它是没意义的, 但有些人会为空标签加上终结标签,如果加上结尾标签,对 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>

选择标记

建立下拉列表

<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

 

三、文件标记-目录

<HTML> <HEAD> <TITLE> <BODY><meta><base><link>-文件头部标签

n         HTML 基本架构:

1.       以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构 :
<HTML>
<HEAD>
<title>HTML
超文本标记语言在线教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="
合肥世杰">
<meta name="keywords" content="html,css,asp,jsp,php">
<meta name="description" content="
世杰教育网站!">
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="2;url=http://www.163.com">
<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
<base href="http://www.sje.com.cn" rel="external nofollow" rel="external nofollow" target="_blank">
<link href="../css.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<link rel="fontdef" src="Amelia.pfr" rel="external nofollow" rel="external nofollow" >
</HEAD>
<BODY>
网页的内容,很多标记都作用于此
</BODY>
</HTML>

2.       特点解说:

        整个文件处于标记<HTML></HTML>之间。<HTML>用以声明这是HTML文件,让浏览器认出并正确处理此HTML文件。

        文件分两部分,由<HEAD></HEAD>称为开头,<BODY></BODY>称主体(或者称之为正文)。
基本上两者各有适用的标记,如<TITLE>只可出现于开头部分。

        开头部分用以保存重要信息,而只有主体部分会被显示。所以大部分标记会运用于主体部分。

        <TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称,所以每页有不同而明确的标题是有必要的。

上述标记中只有<BODY>具有参数设定。


3.       <META>标签相关属性

        文档标题标签:<title>HTML超文本标记语言在线教程</title>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

        作者:<meta name="author" content="合肥世杰">

        关键字:<meta name="keywords" content="html,css,asp,jsp,php">

        描述信息:<meta name="description" content="世杰教育网站!">

        刷新:<meta http-equiv="refresh" content="10">

        跳转:<meta http-equiv="refresh" content="2;url=http://www.163.com">

        文档过期:<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">

        基础地址:<base href="http://www.sje.com.cn" rel="external nofollow" rel="external nofollow" target="_blank"> 为当前文档提供了完整的URL

        链接文件:<link href="../css.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
      <link rel="fontdef" src="Amelia.pfr" rel="external nofollow" rel="external nofollow" >
      定义在当前文档和其它文档之间的关系

属性 描述:

href

提供被链接的文档的Internet地址。

rel

提供向前链接的类型。

rev

指明反向链接。

title

提供一个建议的标题。

type

指明连接的style sheet媒体类型。

        页面过渡效果:
<meta HTTP-EQUIV="page-enter" CONTENT="revealtrans(duration=5,transition=23)">

<meta HTTP-EQUIV="page-exit" CONTENT="revealtrans(duration=5,transition=23)">

n         <BODY> 之参数设定:

  :
<BODY text ="#000000" link ="#0000FF" alink ="#FF0000" vlink ="#0000FF" background ="bg1.gif" bgcolor ="#FFFFFF" leftmargin =2 topmargin =2 bgproperties ="fixed">

        text ="#000000"
用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text=" black " 。各种颜色的值及名称可参考【调色原理】一节。

        link ="#0000FF"
设定一般文字链接颜色。(默认为蓝色)

        alink ="#FF0000"
设定鼠标刚按下时文字颜色。

        vlink ="#0000FF"
设定链接访问后的颜色。(被点击过)。

        background ="bg1.gif"
设定背景图片。GIF JPEG 皆可,可以是绝对途径或相对途径。

        bgcolor ="#FFFFFF"
设定背景颜色。当己设定背景图片时会失去作用,除非图片有透明部分。

        leftmargin =2
设置网页的左边距,单位为像素。 『只适用于IE

        topmargin =2
设置网页的上边距。 『只适用于IE

        bgproperties ="fixed"
固定背景图片,当滚动条拖动时背景图片不会跟着滚动。『只适用于IE

注:标记及参数之字母大小都可以。

您阅读这篇文章共花了: 0小时00分10秒
本博客所有文章如无特别注明均为原创。作者:fyq复制或转载请以超链接形式注明转自 免费精品资源分享
原文地址《HTML语言剖析
生成文章海报

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)