*****html中的常用标签组件
html
----------------------------------------
html基本结构
<html>
<head></head>
<body></body>
</html>
body中的各种标签组件：
1、正文中的标题标签：h1~h6
要注意的是：
1)<h1>的字体最大，<h6>字最小。跟<font>标签的size属性是反的，size值为1最小，值为7最大。
2)必须是独占一行
3)使用<h1>到<h6>标签，会让文字变大变粗。但千万不要因为想让文字变大变粗就给他加一个标题标签，这是错误！你可以使用<font>或<b>标签来实现
4)搜索引擎会把文章中出现的<h1>到<h6>标签来作为文章的结构与主次，从而进行索引。懂seo的朋友就知道，这个很重要！
2、段落与换行：
换行标记： <br/>
段落标记： <p></p>
把p标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行.
3、分割线：
<hr 属性名="属性值" />
属性：
width： 宽度 300px ；50% 占用父标记宽度的百分比
align： 对齐方式：left 居左; center 居中; right 居右
4、图片标签： (单标记)：可以在页面中显示一张图片
<img />
属性：
src：指定目标图片的路径
width：宽度 px
height：高度
宽高同时设置时会出现失真的现象,若需要等比例 缩放,则只需要设置其中一个即可.
路径：
①绝对路径：
操作系统绝对路径：windows： 以盘符开头的路径为绝对路径；c：\Program Files\xxxx.jpg
linux / Unix / Mac： 以/(根目录)开头的路径为绝对路径
/home/soft01/xxx.jpg：网络端绝对路径：
以http：//开头的url路径： http：//tts6.tarena.com.cn/xxx.jpg
②相对路径：
指的是通过当前html文档和目标文件生成的路径.
相对路径也可以指向目标文件.
不以盘符和/(根目录)开头的路径：
网页所支持的图片格式：
JPG/JPEG： 体积小 图像有较小的失真
png： 显示颜色种类较多 体积较大 图像保存完好
gif： 支持动态图 体积小 显示的颜色非常少
png/gif： 支持透明色
jpg： 不支持
5、a链接：
<a> 链接文本 </a>
属性：href： 点击链接之后跳往的目标地址
点击图片跳转 ：
<a href="">
<img src=""/>
</a>
图片热点链接：这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect： 矩形
shape=circle：圆形
shape=poly： 多边形
【2】coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
语法：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
例：
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http：//www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http：//www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http：//www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http：//www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虚线框 -->
</map>
6、表格：
表格的第一种规范：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table：表格标记
属性：
width： 宽度
height： 高度
border： 边框宽度
align： 对齐方式 left|center|right
cellpadding： 单元格的内边距
cellspacing： 单元格与单元格之间的距离
tr： 表格行
td： 单元格
属性：
rowspan： 合并行
colspan： 合并列
表格的第二种规范：
<table>
<caption></caption> 表格标题
<thead> 表头
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody></tbody>表体
<tbody></tbody>
<tfoot></tfoot>表脚
</table>
使用时用第一种或第二种都可以.
第一种更简单、第二种更规范
7、表单标签：
表单用于收集用户信息, 一个表单中可以含有多个表单组件.
input标签：
文本框
<input type="text" name="" value=""/>
type：定义了input组件的样式(文本框)
name：定义了input组件的名称, 只有写上name属性
的组件在提交的时候才可以向服务器传递数据.
value：定义了页面加载后文本框中的默认值.
提交按钮：
<input type="submit" value=""/>
value：定义按钮上的文字
密码框：
<input type="password" name=""/>
单选按钮：
<input type="radio" name="" value=""/>
name：多个单选按钮 若name相同,则为一组单选按钮. 一组单选按钮只能选择一个.
value：提交给服务器的参数值.
checked="checked" 若希望某个单选钮默认被选中,则需要添加该属性.
多选框：
<input type="checkbox" name="" value=""/>
&pwd=&sex=m&hobby=swimming&hobby=coding
checked="checked" 默认被选中
普通按钮：
<input type="button" value=""/>
value：代表按钮上的文字
重置按钮：
作用： 把当前表单中的所有组件的值恢复默认.
<input type="reset" value=""/>
非input标签：
下拉列表框：
<select>
<option value="">text</option> 下拉项
<option></option> 下拉项
</select>
option：
text： 表示显示在下拉项中的文字
value： 代表当前下拉项的值
多行文本域：
<textarea name=""></textarea>
列表标记：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
--------------------------------------------
8、css样式属性：
布局属性： (box模型)
1>外边距(margin)：
margin： 10px; 上下左右外边距全为10px
margin： 10px 20px; 上下外边距为10px 左右为20px
margin： 0px auto; div水平居中
margin： a b c d; 上 右 下 左方向外边距
margin-left： 10px
margin-right：
margin-top：
margin-bottom：
2>内边距(padding)：
padding：a;
padding：a b;
padding：a b c d;
padding-top：
padding-right：
padding-bottom：
padding-left：
常用的简单样式属性：
1>背景属性： background
background：">red | blue | black ；#ffffff ； #fff
background-image：url("目标图片路径");
background-repeat： 背景图像平铺方式
repeat：repeat-x：；repeat-y：；no-repeat：
background-position： 背景图像定位
2>字体属性： font-
color： 字体颜色
font-size： 字体大小 px
font-family： 字体 黑体 宋体 ...
font-weight： 磅值 (粗细)：normal；bold；bolder；lighter；100~900
font-style：normal 普通；italic 斜体
3>文本属性： text-
text-align： 文本对齐方式：left；center；right
line-height： 行高 主要用于控制文本的垂直居中
text-decoration：none；underline；overline；line-through
4>边框属性： border-
border：1px solid black;
border-width：
border-style：
border-color：
border-left-width：
...
5>列表相关属性：
list-style：none;
6>复杂属性：
display：可以控制组件的隐藏与显示
none： 隐藏组件
block： 显示组件
block还可以把行级标记当做块级标记来显示.
因为只有块级标记可以设置width和height
行级标记： 多个标记占用一行
<a></a><input/> <span></span> <s></s> <b></b><strong>
块级标记： 一个标记占用一行h1~h6 p div li ul ol
float：浮动属性
left：
right：
clear：清除浮动
left： 左边不允许有浮动对象
right： 右边不允许有浮动对象
both： 两边不允许有浮动对象
9、html实体：
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
当要在页面中展现特殊字符时：
>： > great than
<： < less than 或 <
空格：
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体
10、HTML 中有用的字符实体
注释：实体名称对大小写敏感！
|
显示结果 |
描述 |
实体名称 |
实体编号 |
|
|
空格 |
|
  |
|
< |
小于号 |
< |
< |
|
> |
大于号 |
> |
> |
|
& |
和号 |
& |
& |
|
" |
引号 |
" |
" |
|
' |
撇号 |
' (IE不支持) |
' |
|
￠ |
分 |
¢ |
¢ |
|
£ |
镑 |
£ |
£ |
|
¥ |
日圆 |
¥ |
¥ |
|
€ |
欧元 |
€ |
€ |
|
§ |
小节 |
§ |
§ |
|
© |
版权 |
© |
© |
|
® |
注册商标 |
® |
® |
|
™ |
商标 |
™ |
™ |
|
× |
乘号 |
× |
× |
|
÷ |
除号 |
÷ |
÷ |
