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>
创建一个复选框,用户可以选中或取消选取复选框。
<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> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。