HTML初级知识点

浏览数：22 / 时间：2015年06月09日

简介：

1）HTML指的是超文本标记语言（Hyper Text Markup Language），HTML文档包含HTML标签和纯文本。

　　<html>与</html>标签之间，定义了整个HTML文档。

　　<head>与</head>标签之间，定义文档的头部。<base><meta><link><script><style><title>可用在其中。

　　<body>与</body>标签之间，定义了HTML文档的主体，是可见的页面内容。

　　<h1>与</h1>标签之间，定义了标题

　　<p>与</p>标签之间，定义了段落

　　<table>与</table>标签之间，定义了HTML表格

常见用法：

1）HTML图像通过img标签进行dinginess，图像的名称与尺寸以属性的形式提供。如下：

<img src="aa.jpg" width="104" height="142" />
<!-- 将服务器的图片显示到网页中 -->
<img src="http://www.wddoer.com.cn/i/wddoer_logo_white.gif" />
<!-- alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 -->
<img src="boat.gif" alt="Big Boat">

2）HTML链接通过a标签定义，Target属性可以定义被链接的文档在何处显示。如下：

<a href="http://www.wddoer.com.cn/" target="_blank">This is a link</a>
<!-- 下例演示如何使用图像作为链接 -->
<p>您也可以使用图像来作链接：<a href="/example/html/lastpage.html">
<img border="0" src="http://www.wddoer.com.cn/i/eg_happy.gif" />
</a></p>
<!-- 下例演示HTML没有下划线的链接 -->
<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a>
<!--  align="center"拥有关于对齐方式的附加信息 -->
<h1 align="center">This is heading 1</h1>

3）a标签中name属性规定锚anchor的名称。如下：

<!--  我们将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个命名锚了 -->
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>
<a href="http://www.wddoer.com.cn/html/html_links.asp#tips">有用的提示</a>
<!--  本例演示如何使用name链接跳转至文档的另一个部分 -->
<p><a href="#C4">查看 Chapter 4。</a></p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

4）发邮件时，用%20替代单词之间的空格，这样浏览器就可以正确地显示文本。如下：

<!--  本例在安装邮件客户端程序后才能工作 -->
<p>这是邮件链接：
<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>
<a href="mailto:[email protected]?cc=[email protected]&bcc=[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送另一个邮件</a>
</p>

5）表格由table标签定义，表头用th标签定义，表格行由tr标签开始，表格内数据由td标签开始。如下：

<!--  下例为制作一个两行三列的表格。cellpadding单元格边距cellspacing单元格间距nbsp空格占位符bgcolor背景颜色background背景图像 -->
<!--  caption定义表格标题，thead定义表格的页眉，tbody定义表格的主题，tfoot定义表格的页脚，col定义列属性，colgroup定义表格列的组 --> 
<body>
<table width="400" border="1" cellpadding="10" cellspacing="5" bgcolor="red" background="/i/eg_bg_07.gif">
<th>Heading</th>
<tr>
  <td align="left">100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>&nbsp;</td>
</tr>
</table>
<!--  border属性为table添加边框 --> 
<table border="8">
<tr>
  <td bgcolor="blue">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<!--  frame框架有box,above,below,hsides,vsides5个属性 --> 
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
<!--  有序列表始于ol标签，无序列表始于ul标签，每个列表始于li标签，dl定义定义列表，dt定义定义项目，dd定义定义的描述 -->
<body>
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>