HTML学习笔记2

常用元素

链接

简单的链接语法

<a href="url">链接文本</a>
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

链接到页内某个元素

通常这种方法可以作为书签来使用。
以某个元素创建一个锚点，只需要指定该元素的id即可：
<h1 id="first">第一个标题</h1>
创建一个链接，当点击该链接的时候，会转到锚点处：
<a href="#first">转到第一个标题</a>
也可以转到其他页面的锚点，只需要指明网页即可：
<a href="http://www.some.com/page1.html#first">转到第一个标题</a>
也可以使用name来代替id属性，不过可能会出现name不唯一的情况，具体有待补充。
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：
< href="http://www.runoob.com/html" >
就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求。

图像

简单的图像语法

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

src：数据源
alt：无法显示图像时的替代文本
width与height：图像尺寸

图像映射

图像映射可以在图像中绑定一个区域，当鼠标点击这些区域后，会执行一个链接。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

img元素利用属性usemap调用了一个map元素，这个元素是一系列area的集合。每个area可以规定一个特定形状和坐标的区域，每个区域绑定一个链接。这样当点击img元素中的某个区域，就可以触发该链接。

表格

表格常见语法

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data）。

<table border="1">
  <tr>
    <td>D1</td>
    <td>D2</td>
  </tr>
  <tr>
    <td>D3</td>
    <td>D4</td>
  </tr>
</table>

边框

border可以指定边框宽度，默认为0.
<table border="1"></table>

表头

表头需要单独占一行（通常为第一行），因而包含在一组<tr>之内,利用<th>指定表头内容。通常会自动显示为粗体居中的文本。

<tr>
  <th>表头 1</th>
  <th>表头 2</th>
</tr>

标题

标题由caption指定，紧跟在table开始标签之后。

<table border="1">
  <caption>标题</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
</table>

表格跨行或跨列

跨行

<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>

跨行

原本是2行3列的表格，第一行的第二个元素指定colspan属性为2，横跨两行。

2.跨列

<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>

跨列的情况理解起来较难：

跨列

单元格的边距与间距

边距:表格内文字距离边界的距离
<table border="1" cellpadding="10"></table>
间距:表格内部分界线的厚度
<table border="1" cellspacing="0"></table>

列表

列表是一系列左对齐的条目。

无序列表

条目前默认为一个圆点。可以手动指定type属性来更改：

list-style-type:disc 圆点
list-style-type:circle 圆圈
list-style-type:square 正方形

<ul style="list-style-type:disc">
  <li>条目1</li>
  <li>条目2</li>
</ul>

有序列表

条目前默认为数字(1,2,3...)。可以手动指定type属性来更改：

A 大写字母(A B C...)
a 小写字母(a b c...)
I 大写罗马数字(I II III...)
i 小写罗马数字(i ii iii...)

<ol type="A">
  <li>条目1</li>
  <li>条目2</li>
</ol>

自定义列表

条目前无内容，但可拥有注释。注释会缩进显示。

<dl>
  <dt>条目1</dt>
    <dd>条目1注释</dd>
  <dt>条目2</dt>
    <dd>条目2注释</dd>
</dl>

列表嵌套

<ul>
  <li>条目1</li>
  <li>条目2
    <ul>
      <li>条目2下级条目1</li>
      <li>条目2下级条目2</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

条目嵌套

区块

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。块级元素可以包含其他元素，内联元素只能包含自身。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div style="color:red">
    <p>this is p1. </p>
    <p>this is p2. </p>
</div>

<div> 元素的另一个常见的用途是文档布局(见下节)。它取代了使用表格定义布局的老式方法。

使用div元素进行布局

div元素可以指定高度和宽度，因而可以用来布局。

<div id="container" style="width:200px">

    <div id="header" style="background-color:red;">TOP</div>

    <div style="background-color:#FFD700;height:200px;width:100px;float:left;">LEFT</div>

    <div id="content" style="background-color:#EEEEEE;height:100px;width:100px;float:left;">RIGHT</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">BOTTOM</div>

</div>

布局

div元素如果没有指定尺寸，会根据内部的元素自动调整。
float(浮动)属性：只有left，right，none这些值，用于横向div元素间的排列。如果书写：
元素A，元素B
则元素A与B在网页中为上下排列的。即，后续元素会在之前元素的下方寻找可用位置。
如果元素A指定float为left,则A会在可用空间尽量靠左排列，后续元素会放置在它的右侧，即某元素的float属性会控制后续元素的定位。但后续元素使用clear:both可以强制不允许左右存在浮动的元素，以消除前者的这种控制。
简单来说，处在同一水平位置上的div元素，拥有相同的float属性值，按次序和方向进行浮动，原理不做深究。

HTML <span> 与元素

HTML <span> 元素是内联元素，可用作文本的容器，也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<p>
    this is <span style="color:red">red</span>
</p>

表单和输入

简单的文本和密码输入框

<form>
Name: <input type="text" name="name"/><br/>
PassWord: <input type="password" name="pwd"/>
</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<input type="radio" name="sex" value="male"/>Male
</form>```
##### 复选框（Checkboxes）
```<input type="checkbox">``` 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
```<form>
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike
</form>```
##### 提交按钮(Submit Button)
```<input type="submit">``` 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>


##### 下拉菜单

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

对于某个选项，当指定selected表示预选。
##### 带边框的表单

<form action="">
<fieldset>
<legend>表单标题:</legend>
Name: <input type="text" size="30">

E-mail: <input type="text" size="30">

Date of birth: <input type="text" size="10">
</fieldset>
</form>


#### 框架 
框架可以显示一个子页面
```<iframe src="demo_iframe.htm" width="200" height="200"></iframe>```
构造一个框架，使用链接将特定内容在指定框架中显示：

HTML学习笔记2