HTML_块级标签、图片、文件、链接、列表、表格

(一)div标签和span标签

标签名				功能
<div></div>			<div>是一个块级标签，无实际意义。主要通过css样式为其赋予不同的表现
<span></span>		<span>是一个行内标签，无实际意义。主要通过css样式为其赋予不同的表现

块级标签与行内标签的区别
(1)块级标签
霸占一行，不能与其它任何元素并列
能接受宽、高。如果不设置宽度，那么宽度将默认为父亲节点的100%
(2)行内标签
与其他行内标签并排
不能设置宽、高。宽度和高度由内容决定

(二)字符实体
在HTML中有些字符是预留的，比如<, >等，如果要使用这些字符就要使用字符实体

字符		字符实体
空格		 
>			>
<			&lt;
&			&amp;
￥ 			&yen;
版权		&copy;
注册		&reg;
X			&times;
÷			&divide;

(三)图片标签
能够在html网页中使用的图片类型：jpg(或jpeg)， png, gif, bmp
不能在html网页中使用的图片类型：psd， ai

<img src="图片的地址" alt="" />	单边标签

img：英文中image(图片)的简写
src：英文中source(资源)的简写
alt：英文alternate(替代)的简写，如果图片不存在了，就是用这个alt属性中的文字信息

其他属性
属性名		功能
title		当把鼠标放在图片上时显示的文字信息
width		给图片设置宽度
height		给图片设置高度

(四)文件地址：一个文件在磁盘上的位置(分为相对路径和绝对路径)
绝对路径：一个文件在磁盘上的真实位置
相对路径：相对于当前位置的某个文件位置。两种关系：平级关系和上级关系
. …平级关系：目标文件与当前文件是在同一个目录下面。表示：./+文件名或直接写文件名
. …上级关系：目标文件在当前文件的上一级目录下面。表示： . ./+文件名。 (上两级：. ./. ./)

(五)超级链接：一个网站由很多个HTML网页组成的，HTML网页之间可以通过超级链接实现相互跳转功能。

<a href="链接的目标地址">内容</a>
a：英文中anchor(锚)的简写，从一个网页向另一个网页扔出一个锚
href：hypertext referene(超级链接地址)

a标签其他的一些属性
title		当把鼠标放在超级链接上面显示的文本信息
target		链接的目标文件打开方式(默认原窗口打开)。值：_blank,在新窗口中打开目标文件

实现空连接两种方式

(1)<a href="#">...</a>
(2)<a href="javascript:void(0)">...</a>

锚点链接：通过锚点链接跳转到一个网页的不同位置

实现：
第一步：定义一个锚点（中间没有内容）
<a name="锚点名"></a>或者<a id="锚点名"></a>
第二步：找到锚点
在浏览器中的网址的最后面#锚点名 或者 <a href="#锚点名">内容</a>

(六)列表标签三种：无序列表，有序列表，定义列表。都是组标签

(1)无序列表：没有先后顺序的列表项。默认无序列表前面有小圆圈

<ul>
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
	<li>深圳</li>
</ul>
ul：unordered list(无序列表)
li：list item(列表项)	不能单独存在，必须包裹在ul标签里面。且ul的子元素必须是li，不能有其他元素

ul或者li标签有一个属性，type：表示列表前面的符号的类型。
取值：disc(默认，实心圆点)， circle(空心圆)， square(实心方块)

列表可以嵌套，将ul放在li标签里面

(2)有序列表：有顺序之分的列表项。

<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>
ol：ordered list(有序列表)
li：list item(列表项)	

ol与li的属性：
type：表示列表前面的符号的类型。取值：1(默认值)， a(字母)， A， i(小罗马)， I(大罗马)
start：表示序号从哪里开始。取值：数值

(3)定义列表

<dl>
	<dt>...</dt>
	<dd>...</dd>
	<dt>...</dt>
	<dd>...</dd>
</dl>
dl：defintion list(定义列表)
dt：defintion title(定义标题)
dd：defintion description(描述)
注意：(1)dt，dd这两对标签只能出现在dl标签里面，且dl里面只能有dt和dd。
(2)每个dt可以配多个dd

(七)表格标签（是一种组标签）

<table>
    <tr>
		<th></th>
		<td></td>
		<td></td>
    </tr>
    <tr>
		<td></td>
		<td></td>
    </tr>
</table>

结构说明

<table></table>表示表格开始和表格结束
<tr></tr>表格中的行标签，一个表格中有多少个行就应该有多少个tr
<td></td>表格中的单元格标签，一行中有多少个单元格就有多少个td
<th></th>标题单元格，这个单元格里面的文本会加粗显示并且居中
表格中所有的内容都必须放置在td和th标签里面，只有td和th标签才能存放内容

table标签常用属性

属性名		功能
border		给表格设置边框，单位是像素，取值0到n
width		给表格设置宽度，取值：固定值和百分比
height		给表格设置高度，一般不用，一般由其内容决定
background	给表格设置背景，可以使用相对路径和绝对路径
bgcolor		给表格设置背景颜色
align		给表格设置水平对齐方式， left， right， center
cellpadding	表格中单元格中的内容到边框的距离，内填充
cellspacing	单元格与单元格之间的距离，外边距

tr标签的属性

属性名		功能
align		设置行里面的内容水平方向对齐方式
valign		设置行里面的内容垂直对齐方式，取值：top， middle， bottom
bgcolor		给行设置背景颜色
height		给行设置高度
width		给行设置宽度

td标签的属性

属性名		功能
align		设置单元格里面的内容水平方向对齐方式
valign		设置单元格里面的内容垂直对齐方式，取值：top， middle， bottom
bgcolor		给单元格设置背景颜色
height		给单元格设置高度
width		给行设置宽度
rowspan		跨行合并单元格，取值为合并单元格的数量(数值)
colspan		跨列合并单元格，取值为合并单元格的数量(数值)