html部分常用标签的含义及作用

1.a 超链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面。<a> 标签中必须提供 href 属性或 name 属性，它指示链接的目标。

例如：点击 百度一下 跳转到www.baidu.com

<a href="http://www.baidu.com.cn/" target="_blank">百度一下</a>

如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

将图片作为链接

<a href="http://www.baidu.com.cn/"><img src="baidu.jpg" /></a>

链接到同一页面的不同位置，这里是链接到C4区域

<p><a href="#C4">查看 Chapter 4。</a><p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</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>

2.div

<div> 是一个块级元素，常配合CSS使用，为网页中最常用的分区标签。它的内容会自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。在css中，用#xxx{ }来为id xxx添加属性，用.xxx{ }来为class xxx添加属性。

3.span

<div>与<span>区别，<div>是一个块级(block-level)元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline element)，在它的前后不会换行。

<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。可以对同一个 <span> 元素应用 class 或 id 属性，然后在css中为其添加属性。

例如：          div会让每张图片各占一行，span则会让三张图片排列在一行中

<p>div标记不同行</p>

<div><img src="0550372.jpg" border="0"/></div>

<div><img src="0550372.jpg" border="0"/></div>

<div><img src="0550372.jpg" border="0"/></div>

<p>span标记在同一行</p>

<span><img src="0550372.jpg" border="0" /></span>

<span><img src="0550372.jpg" border="0" /></span>

<span><img src="0550372.jpg" border="0" /></span>

span可以在一段内容中赋予自己的属性,这里是让文字显示不同的颜色

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen">碧绿色</span> 的眼睛</p>

4.form

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

 例如：            创建一个密码域

<form>

用户：<input type="text" name="user"><br />

密码：<input type="password" name="password">

</form>

创建一个复选框，用户可以选中或取消选取复选框。

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>

创建一个单选摁钮，用户可以选择其中某一选项。

<form>

男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />

女性：<input type="radio" name="Sex" value="female" />

</form>

简单的下拉摁钮，点击会弹出所有选项，用户可以选择某一项，然后会收回，并显示选择项

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option> 
<option value="audi">Audi</option>
</select>
</form>

selected="selected"使摁钮带有预选值，让Fiat变成默认选项

创建一个文本域，用户可以在文本域中写入文本，宽度为30高度为10

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.

创建一个摁钮，可以给摁钮附加各种属性

<input type="button" value="Hello world!">

value显示摁钮上的内容

创建一个带有提交摁钮的表单
<form action="http://www.baidu.com.cn/">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

如果点击提交，表单数据会被发送到百度的页面。

5.table

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

例如：在表格中可以加入表格或列表

<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

跨两格或跨两列的表格

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

6.nav

<nav> 标签定义导航链接的部分。

例如：

<nav>
<a href="https://www.baidu.com/">百度</a> |
<a href="https://www.sogou.com/">搜狗</a> |
<a href="http://www.google.cn/">谷歌</a> |
<a href="https://www.qq.com/">腾讯</a>
</nav>

7。blockquote

<blockquote> 标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。