web前端HTML常用标签(1)

body网页主体
bgcolor网页背景颜色 <body bgcolor="red">
backgroung网页背景图片<body background="images/12.jpg">
text文字颜色<body text="red">
link链接文字属性<body link="red">
margin外边距<body topmargin="100" leftmargin="100">，body只有上和左边距
注释

文字与段落标记
<h1>到<h6>标题，从大到小
align对齐属性<h1 align="left"></h1> <h2 align="center"></h2> <h3 align="right"> </h3>
分别是左，中，右对齐
font字体属性<font face="宋体" size="7" color="red">哈哈</font> face字体，size大小，color颜色
b，strong字体加粗<p>嘿嘿</p> <strong>中国</strong>
i,em,cite斜体<i>斜体</i> <em>斜体</em>
sup上标记用于数学公式

a<sup>2</sup>+b<sup>2</sup>=(a+b)2</sup>-2ab

sub下标记用于化学方程式硫酸分子

H<sub>2</sub>SO<sub>4</sub>

big,small字体大号和小号 <big>树林</big> <small>小的</small>
u下划线<u>太阳</u>
p段落，会使其自动换行<p>自然的力量</p>
br强制换行，单标签我们的优势是高效率</br>
nobr不换行 <nobr>公司视质量为生命......</nobr>
hr水平线，单标签，可设置width宽度，size高度，noshade去掉阴影，color水平线颜色，align水平线对齐方式
&nbsp空格

图像
img src图片源文件

<img src="images/car.jpg" width="300" height="200" alt="环保标记" border="5">

width图片宽度，height图片高度，alt图片提示性文字，border图片边框大小
vspace，hspace图片和文字的垂直边距和水平边距

<img src="images/001.jpg" vspace="10" hspace="20">

align图片对齐方式，属性为bottom，top，middle，left，right，center。
a链接

<a href="#"><img src="images/02.jpg"></a>

列表
ol有序列表

<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ol>

ul无序列表

<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>

dl自定义列表

<dl>
<dt>CSS</dt>
<dd>CSS就是“层叠样式表”，简称样式表</dd>
<dt>Dreamweaver</dt>
<dd>Dreamweaver是常用的网站编辑工具之一，使用起来更方便快捷</dd>
</dl>

menu菜单列表
文学作品

<menu>
<li>诗歌</li>
<li>散文</li>
<li>小说</li>
</menu>

表格
表格由table，tr，td组成

<table>
<tr>
<td>北京</td>
<td>上海</td>
</tr>
<tr>
<td>成都</td>
<td>重庆</td>
</tr>
</table>

表格可以设置caption表格的标题，表头th，宽度width，高度heigth，边框border，对齐方式align，bordercolor边框的颜色，cellspacing内框宽度，cellpadding表格内文字与边框间隔，bgcolor背景颜色，background背景图片

<table width="500" height="300" border="2" align="center" bgcolor="red"
bordercolor="#66CCFF" cellspacing="15" cellpadding="10" 
backgrround="images/12.jpg">
<caption>考试成绩</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<tr>
<td>张三</td>
<td>90</td>
<td>80</td>
<td>82</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>83</td>
<td>81</td>
</tr>
</table>

不仅可以对表格整体设置相关属性，还可以对单独的一行单元格设置相关的属性，语法类似

<table>
<tr width="300" height="200" bordercolor="#FF0000" bgcolor="#99CCFF" 
align="center" valign="top" >
<td>化学</td>
<td>物理</td>
</tr>
</table>

不仅可以对单独一行设置相关属性，还能设置单元格，语法类似

<table>
<tr>
<td width="300" height="200" bordercolor="#FF0000" bgcolor="#99CCFF" 
align="center" valign="top">政治</td>
<td>历史</td>
</tr>
</table>

表格的表头thead和表尾tfoot

<table>
<caption>手工艺品</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
</tr>
</thead>

超级链接
在一个全新的空白窗口打开链接
<a href="index.html" target="_blank">

链接到页面中的锚点，可以链接到页面中的不同位置。

<table>
<tr>
<td><a href="index.html#1"></td>
<td><a href="index.html#2"></td>
<td><a href="index.html#3"></td>
</tr>
</table>

外部链接

<p><a href="http://www.baidu.com">百度</a></p>
<p><a href="http://www.sohu.com">搜狐</a></p>
<p><a href="http://www.taobao.com">淘宝</a></p>

链接到邮箱

<p><a href="mailto:wahaha@163.com"></a></p>

下载文件

<p><a href="mp3.rar">真心话</a></p>
<p><a href="mp3.rar">东风破</a></p>

添加多媒体
滚动标记

<marquee direction="left" behavior="scoll" scrollmount="3" scrollelay="200" 
loop="3" width="300" height="200" bgcolor="red" hspace="50" vspace="40">
乖乖，起床了。这类温馨的开机问候语。
</marquee>

可以设置滚动方向direction，分别是up，down，left，right；
滚动方式behavior，scroll循环滚动，默认效果，slide只滚动一次就停止，altermate来回交替滚动；
滚动速度scrollmount，每次移动的长度，单位为像素；滚动延迟scrolldelay，时间单位为毫秒
滚动次数loop，单位为次数，滚动范围width，height，滚动背景颜色bgcolor；空白空间hspace，vspace。