一周学会HTML----Day02常用标签（上）

扩展

在开始第二天的课程之前，我们先来拓展两个概念。

第一个是前台和后台：前台是指用户看到的界面，而后台是指相关具有前线的人操作的界面

第二个是前端和后端：前端是值用户看到的界面和界布的操作(安卓、ios、网页)；后端的主要是业务逻辑、整体架构

---

img 标签 图片 单标签

属性：
width: 宽
height：高
border：边宽
title：标题 形同功能的alt在新的浏览器里面不再支持了
src：source源

注意：如果只设定宽或者只设定高，是按照等比例进行缩放的，如果设置了宽和高，按照设置的值进行实际变化

video 标签 视频播放器 对标签

video src="movie.ogg" controls="controls" autoplay loop width="300px">



属性：

src：来源

controls：显示控制面板

autoplay：自动播放

width：宽

height：高度

loop：循环次数

preload：预加载

注意：如果不设置他的相关属性，他是不会显示控制播放的界面的，而且，只要出现controls属性就会显示面板，赋值的时候是controls=‘controls’或者直接不赋值，相同属性的有autoplay=’autoplay‘，loop=’loop‘，给loop设置循环次数是不起作用的

audio标签 音频播放器 对标签

属性：

coontrols：显示控制面板，各个浏览器不同

autoplay：是否自动播放

src：资源地址

loop：是否循环

preload：预加载

map标签 ：带有可点击区域的图像映射

属性:

name:标识

area标签

属性：

shape:圆形 circle 矩形 rect 不规则图形poly

1、 circle coords（ 圆心，半径）（x,y,r）

2、rect coords(左上角坐标，右下角坐标)(x1,y1,x2,y2)

3、 poly coords(第一个点坐标，....,第n个点坐标)(x1,y1,x2,y2...xn,yn)

map标签和area标签配和使用

<img src="image.jpg" border="0" usemap="#planetmap" />

<map name="planetmap" id="planetmap">
//在图片画出一个区域当做热区，当点击该区域的时候跳转到指定页面
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
 <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
 <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

a标签(超链接)

在介绍a标签之前先介绍几个概念

__url:__统一资源定位符

__协议：__http、tcp、ip ftp、thunder、magnet、edk

__地址：__服务器地址，可能是域名，也可能是ip

__端口：__http : 80

ftp: 20

https : 443

端口0~65535 0~1023是系统用的

__文件：__yunf/archive/2011/04/12/2013448.html

参数：？后的部分，以键值对方式出现，多个参数之间以&链接

---

属性：

href: 跳转页面地址,本地文件可以使用相对地址或绝对地址

__title :__提示

__target ：__打开方式

• _self 当前窗口打开
• _blank 新窗口打开

__mailto/tel:__发送邮件/拨打电话

锚点: 跳转到锚点 定义锚点 页内锚点 跨页面锚点

其中map标签和a标签比较其他标签用法比较繁琐也比较常用，是重点掌握的知识

颜色表示方式

RGB红绿蓝

0123456789ABCDEF  （16进制）

‘ #FF0000 红色’

‘#00FF00 绿色’

‘#0000FF 蓝色’

__重点：__知道颜色的组成。会使用取色器把颜色给吸出来。吸管工具。Fireworks，photoshop，取色精灵.....

fonts属性

Color  颜色

Size   尺寸

Face   字体（我们在网络上不使用特殊字体，因为传输速度，我们如果有特殊字体使用图片来代替）

table标签 对标签 表格

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

属性:

Border 没有加边框不显示边框

     Width       表格宽度

tr行标签

Bgcolor 写上对应的颜色（大家在做项目的时候，要做出隔行变色效果。避免我们的用户，看错行。）

__Align 值：__center|left|right  控制水平位置

__Valign 值：__top|middle|bottom  上中下

Td 列标签

Colspan  列

Rowspan 行