如何使用HTML基本标签和属性制作网页?

创建日期:2014年5月12日

HTML(Hypertext Markup Language)是用于描述网页文档的一种标记语言。它是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆·伯纳斯-李创建,由IETF用简化的SGML(标准通用标记语言)语法进行进一步发展的HTML,后来成为国际标准,由万维网联盟(W3C)维护。

  

1、HTML文档结构:

开头 <html>
头部
标题
<head>
<tile> 网页标题</title>
</head>
内容 <body>
网页内容
</body>
结束 </html>
  

2、<meta>标签:

Meta标签:网页信息,如:网页编码信息。

     

3、bgcolor=”#ffccff”;设置背景色。

Background=”back_image.gif”;设置背景图片。使用方法:把网页的背景色设置成绿色。<body bgcolor=”green”>网页内容</body>。

  

4、<font>标签用于控制网页上文本的显示外观。文本大小,字体类型,和颜色等属性。

语法:<font size=”1” color=”red” face=”隶书”>文本内容</font>。

说明:size属性是用来设置字体大小,可以为字体指定大小范围为1~7。最大为7,最小为1。

Color属性用于指定字体的颜色,可以指定颜色名称或十六进制值。

Face属性用于指定字体类型。

  

5、列表:

1)无序列表:语法:

<ul type=”circle”>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
 </ul>

Type可以取DISE表示实心。CIRCLE表示空心圆。SQUARE表示空心正方形。

2)有序列表:语法:

<ol type=”1”>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
</ol>

Type可以取:1,a,A,i,I。分别表示数字序列,小写英文字母序列,大写字母序列。小写罗马序列,大写罗马序列。

6、超链接:用于创建超级链接,它是可以到另一个文档或文件(图形,音频,视频)甚至到同一文档的另一部分的链接。

语法:<a href=”register/register.html”>注册链接</a>其中,href用来指定要链接的地址,链接的热点文本。

链接到本页面。

<a name=”marker”>锚点位置</a>

<a href=”#marker”>链接到锚点</a>

电子邮件链接:<a href=”mailto:xxx@xx.cn”>邮箱</a>

7、表格:

<table width="200" bgcolor=”green” border="1" cellpadding="5" cellspacing="5">(table表格标签)
    <tr>           //tr行标签
      <td>一个单元 格;</td> (td单元格标签)
      <td colspan="2">跨两列的单元格</td>
    </tr>
    <tr>
      <td rowspan="2">跨两行的单元格</td>
      <td>一个单元格</td>
      <td>一个单元格</td>
    </tr>
    <tr>
      <td>一个单元格</td>
      <td>一个单元格</td>
    </tr>
</table>

其中,border为表格边框。colspan跨列,rowspan跨行,cellpadding填充,cellspacing间距,bgcolor整个表格的背景。

8、表单:

<form method="post" action="">(表单标签,表单开始)

    <input type="text" name="单行文本框" />(单行文本框)

    <input type="password" name="密码框" />(密码框)

    <textarea name="多行文本框"></textarea> (多行文本框)

    <input type="checkbox" name="checkbox" value="复选框" /> (复选按钮)

    <input type="radio" name="RadioGroup1" value="单选" />(单选按钮)

    <select name="select">(下拉列表)

    </select>

    <input type="submit" name="Submit" value="提交" />(提交按钮)

    <input type="reset" name="reset" value="提交" />(重置按钮)

    <input name="浏览…" type="file" />(浏览文件按钮)

</form>(表单结束)

9、框架:

<frameset border=”5” rows=”20%,*”>(分成上下两个窗口)

<frame src=”top.html” name=”topframe” scrolling=”no” >(没有滚动条)

<frameset cols=”20%,*”>(分成左右两个窗口)

<frame src=”left.html” name=”leftframe” scrolling=”no”>

    <frame src=”right.html” name=”rightframe” >

    </frameset>

(分成左右两个窗口,分别为left和right窗口,显示的文档分别为left.html和right.html)

</frameset>

如何设置窗口链接的显示位置,框架页面之间的链接。

1)设计好框架集页面,并为每个框架窗口定义名称。

如:<frame src=”right.html name=”rightframe”>

2)设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名称。

如:<a href=”right.html” target=”rightframe”>

注意:HTML中最重要的是表格和表单,如需了解更多HTML的应用请参考相关书籍或网络资料。