HTML基础

HTML(HyperText Markup Language),超文本标记语言,是一种专门用于创建Web超文本文档的编程语言,它能告诉Web浏览程序如何显示Web文档(即网页)的信息,如何链接各种信息。使用HTML语言可以在其生成的文档中含有其它文档,或者含有图像、声音、视频等,从而形成超文本。
超文本文档本身并不真正含有其他的文档,它仅仅含有指向这些文档的指针,这些指针就是超链接。HTML是用来制作网页的语言,网页中的每个元素都需要用HTML规定的专门标记来定义。
HTML元素的英文名称是element,它通常由首尾两个标记(tag)组成,它一个标记都由一组尖括号“<”的“>”包含。一组首尾标记组成了一个元素。


HTML文件结构
HTML文件可以使用任何文本编辑软件创建和编辑,其扩展名为htm、html或asp。所有HTML文件都具有相同的整体结构,由头部(head)和主体(body)两部分组成。HTML定义了三个标记描述这一结构,如右图所示。
其中<html>、</html>标记表示HTML文件的开始和结束;<head>、</head>标记之间的内容是HTML文件的头部,如网页的主题信息、所使用的脚本;<body>、</ body >标记之间的内容是HTML文件的主体,用于描述网页上显示的主体信息,如文本、链接、图像、表格及它们显示的方式等。[3]
HTML - HTML标记
HTML的主要语法是元素和标记。标记用来规定元素的属性及它在文档中的位置。
标记用<>括起来,不区分大小写。大多数标记是成对出现的,称为双标记,由“始标记”和“尾标记”两部分构成,其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠“/”即成为尾标记。这类标记的语法为:<标记>内容</标记>,其中“内容”部分就是要被这对标记施加作用的部分。例如<title>这是一个例子</title>将句子“这是一个例子”作为该网页的标题。
也有一些标记可以单独使用,不需结束标记,只需单独使用就能完整地表达意思,称为单标记。最常用的单标记是<br>,表示换行。
许多单标记和双标记的始标记内可以包含一些属性,其语法为:
<标记名 属性1 属性2 属性3 … >
各属性间用空格隔开,无先后次序,属性也可省略取默认值。例如,单标记<hr>表示在文档当前位置画一条水平线(horizontal line),一般是从窗口中当前行的最左端一直画到最右端,也可带一些属性,如:
<hr size=3 align=left width="75%">
其中size属性定义线的粗细,属性值取整数,缺省为1;align属性表示对齐方式,缺省为left,还可取center、right;width属性定义线的长度,可取相对值,由一对" "号括起来的百分数,表示相对于充满整个窗口的百分比,也可取绝对值,用整数表示占屏幕像素点的个数,如width=300,缺省值为"100%"。


常用标记
(1)网页标题标记
标记<title>…</title>设置网页标题,是HTML文件头部最重要的内容。
(2)文档标题标记
HTML提供了6级文档标题,通过在标题内容两边加<h1>与</h1>,…,<h6>与</h6>6对标记来设置,标题字号依次减小。标题标记自动换行,并插入一个空行。
(3)字体、字号、字符颜色标记
标记  <font>…</font>设置文本的字体、字号和颜色,格式如下:
<font [face="字体名称"] [size=n] [color=颜色名称或#颜色数值]>…</font>
其中[ ]表示该属性短语为可选。现仅以常用的size属性举例说明,size属性的有效值范围为1~7,缺省值为3,可在其值前加“+/-”来指定相对于字号初始值的增量或减量。
(4)字体效果标记[3]
(5)段落格式标记
文字换行。<body>和</body>之间的文字一直到浏览器窗口右边界才会自动换行。HTML中有两个单标记<br>和<p>可用于换行。<br>标记后面的内容将从下一行开始显示,而<p>标记后面的内容先空一行,再从下一行开始显示。
段落对齐方式。HTML默认的文字都是左对齐的,标记<p align=对齐方式>…</p>设置段落的对齐方式,可选left(左)、center(居中)、right(右)。
预格式文本。如果不想使用复杂的段落设置标记,可使用标记<pre>…</pre>,所有出现在<pre>和</pre>之间的文本按原来在HTML文件中的显示格式显示,包括段落、回车和空格等。
(6)插入图片
插入图片的格式如下:
<img src=“图片文件名” [align=对齐方式] [width=宽度] [height=高度] [alt=“提示信息”]>
其中,src用于指明图片文件存放的位置及文件名,width、height分别为图片显示时的宽度和高度(占屏幕的像素点数),alt为当鼠标移动到该图片上时显示的提示信息。
(7)插入链接
标记<a href="链接目标">…</a>用来插入一个超级链接。例如,在<img>标记前后加上该标记表示插入一个图片链接,单击该图片,将打开“链接目标”所指定的网页或其它资源,如果是“mailto:邮箱地址”则打开新邮件编辑窗口,收件人为该指定邮箱地址,链接目标也可以是一个文本、图像、声音或视频等各种类型的文件。
标记<a name="书签名称">…</a>则在HTML文件中的特定位置设置一个书签(或称为锚),在同一个HTML文件中将#书签名称作为href短语的链接目标,可以定位到该书签位置,如果想从其他HTML文件定位到该书签,需在书签名称前加上其URL地址。
(8)插入表格
表格一般用于网页内容的排版,例如想将文字放在页面的某个位置,就可以做个表格,然后设置表格的相关属性,将相应文字放在表格的某个单元格里,表格线可以设为不可见。除了页面的排版外,表格还可以制作出非常好看的效果,如按钮、变色、边线等。
每个表格的所有内容都在标记<table>和</table>之间,在<table>中可以使用一些短语对表格的宽度、线型、对齐方式等进行设置,常用的短语有:
l        align=表格对齐方式。用于调整窗口的水平位置,有left、center、right三种方式。
l        border=n。用于设置表格边框的阴影宽度,如果缺省,表格将没有任何线条(包括边框线和表内的水平、垂直线)。如果只有关键词border,缺省n值,则默认为1。
l        cellspacing=n。用于设置单元格间距。
l        width=n或n%。用于设置表格的宽度,用数值则以像素为单位,用百分比则表示占浏览器窗口宽度的比例。
HTML中还有一些专门的表格标记,只能出现在<table>和</table>标记之间,用于描述表格的内容,常用的有:
l        <caption>表格标题</caption>用来定义整个表格的标题。
l        <tr></tr>用来定义一行数据。表格中每一行数据都是以<tr>标记开始的,因此在<table>和</table>之间有多少个<tr>,这个表格就有多少行。
l        <td></td>或<th></th>用来定义一个单元格的数据。行数据是由单元格数据组成的,在一对<tr></tr>之间有多少个<td>或<th>,这一行就有多少个单元格。
HTML中也可插入非规则表格。所谓不规则的表格就是行列数不统一的表格,所有非规则表格都可以由规则表格通过合并单元格获得。在<td>或<th>标记中使用短语rowspan=n可以将单元格向下延伸n行,即纵向合并n个单元格。colspan=n可以将单元格向右延伸n列,即横向合并n个单元格。
(9)使用框架拆分浏览器窗口
在制作网页时,有时希望能够将浏览器的工作区拆分为两个甚至多个区域,以显示不同的内容,方便浏览。HTML支持这个功能,并且在一个区域点击的链接可以显示到另一个区域,相当于在一个浏览器窗口可以显示多个HTML文件,它们称为帧,并且互相之间具有关联,这就是所谓的框架结构。
定义一个有框架结构的HTML文件的格式如下:
      <html>
        <head>
          <title>网页标题</title>
        </head>
        <frameset>
          ……
        </frameset>
      </html>
在<frameset>标记中使用rows="分隔方式"或cols="分隔方式"短语表示将网页主窗口进行水平分割或者垂直分割,一次只能使用一种分割方式。用引号括起来的分隔方式用于定义帧的个数和大小,格式是n个数字之间用逗号分开,表示分为n个帧,数字值为每帧的大小。
在标记<frameset>和</frameset>之间使用<frame>标记为每个帧指定一个HTML文件,<frame>是单独使用的标记,框架结构中有几个帧,就需要几个<frame>标记,其格式如下:
<frame src="文件路径名或URL地址" [name="帧名称"] [noresize] [scrolling=滚动条]>
l        src短语用于指定帧中显示文档的文件路径名或URL地址,如果它所指向的HTML文件也有框架结构,则形成框架的嵌套,由于<frameset>标记一次只能进行水平分割或垂直分割,如果要定义一个既有水平分割又有垂直分割的框架,须使用框架嵌套。
l        name短语用于为帧指定一个名称,当在一个帧中插入一个链接,希望在另一帧中显示内容时,可以在<a>标记中使用target="帧名称"指定在其他帧打开链接目标。
l        HTML默认的帧边界线是可以移动的,用于改变帧的大小,加上noresize短语则不允许用户改变帧的大小。
l        scrolling短语用于设置帧内是否有滚动条,有三个可供选择的设置:yes、no、auto。

转载于:https://my.oschina.net/u/1050274/blog/129909

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值