天天看点

HTML 常用标签及示例

一、基础标签:

<html> 定义 HTML 文档。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。

例:

代码:

<html>
<head>
<span style="white-space:pre">	</span><title>HTML页面</title>
</head>

<body>
<span style="white-space:pre">	</span><h1>标题一</h1>
<span style="white-space:pre">	</span><h2>标题二</h2>
    <span style="white-space:pre">	</span><h3>标题三</h3>
<span style="white-space:pre">	</span><p> body元素的内容会显示在浏览器中。</p>
<span style="white-space:pre">	</span><p> title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
           

结果:

HTML 常用标签及示例

二、表单:

<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表(下拉列表)。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。

例:

代码:

<html>
<head>
	<title>HTML页面</title>
</head>


<body>
    <form name="form1" action="#" method="post">
    <fieldset>
    	<legend>个人信息</legend>
    	姓名:<input type="text" name="username"><br /><br />
        密码:<input type="password" name="password"><br /><br />
        性别:<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女 <br /><br />
        爱好:<input type="checkbox" name="basketball">篮球
        <input type="checkbox" name="singing">唱歌
        <input type="checkbox" name="running">跑步
        <input type="checkbox" name="play_games">打游戏<br /><br />
        车:<select name="cars">
        	<option>Ferrari</option>
                <option>Lamborghini</option>
                <option>Aston Martin</option>
                <option>Bentley</option>
        	</select><br /><br />
        简介:<textarea rows="10" cols="30">个人简介</textarea><br /><br />
        <input type="button" name="submit" value="提交"><br />
    </fieldset>
    </form>
</body>
</html>
           

注释:

action :规定当提交表单时向何处发送表单数据,#代表发送的url地址。method:规定用于发送 form-data 的 HTTP 方法。有get和 post两种方法。

<br /> 表示换行。&nbsp;表示一个空格。

结果:

HTML 常用标签及示例
HTML 常用标签及示例
HTML 常用标签及示例

三、表格:

<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容(脚注)。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。

例:

代码:

<html>
<head>
	<title>HTML页面</title>
</head>


<body>
	<form name="form1" action="#" method="post">
   	  <table >
        	<caption>成绩列表</caption>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
            </tr>
            <tr>
              <td>小明</td>
              <td>85</td>
              <td>90</td>
            </tr>
            <tr>
              <td>小刚</td>
              <td>90</td>
              <td>95</td>
            </tr>
            <tr>
              <td>小陈</td>
              <td>90</td>
              <td>90</td>
            </tr>  
      </table>
      
   	  <table  cellspacing="0">
	    <caption>
	      标题
        </caption>
	    <tr>
	      <th>姓名</th>
	      <th>语文</th>
	      <th>数学</th>
        </tr>
	    <tr>
	      <td>小明总分</td>
	      <td colspan="2" align="center">175</td>
        </tr>
	    <tr>
	      <td>小刚</td>
	      <td rowspan="2">180</td>
          <td>90</td>	   
        </tr>
	    <tr>
	      <td>小陈</td>
	      <td>90</td>
        </tr>
      </table>
	</form>
</body>
</html>
           

注释:cellspacing:规定空格间的空白。rowspan=“2”表示行占两行。colspan=“2”表示列占两列。

结果:

HTML 常用标签及示例
HTML 常用标签及示例

四、列表:

<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。

例:

代码:

<html>

<body>

<h4>无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<h4>有序列表</h4>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="10">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

</body>
</html>
           

结果:

HTML 常用标签及示例
HTML 常用标签及示例

五、框架:

<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。

六、链接:

<a> 定义锚。
<link> 定义文档与外部资源的关系。

例:

<a href="http://www.w3school.com.cn" target="_blank" rel="external nofollow" >W3School</a>

七、图像:

<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。

例:

<img src="img/1.jpg"  alt="图片" />