标签：位置 com 图像 图片 简单 字符 单选 表示 决定
（一）关于路径
src <img src=“”/>
路径 URL 统一资源定位器
1，绝对路径 （例如，北京市海淀区万寿路几号。）
http://www.sohu.com/images/1.jpg
协议名 主机名 目录名 文件名
从最根本的协议开始，完整的描述一个路径。
2，相对路径（例如，出门左转，直走几百米。）
相对于当前文件，查找目标文件的路径表达方式。
路径写在谁里边，就相对于谁。
（1）目标文件与当前文件在同一个目录下。（同级）
直接写文件名。<img src="1.jpg"/>
（2）目标文件在子文件夹里。（下级）
子目录名/文件名。<img src="images/img/1/1.jpg"/>
（3）目标文件在上一级目录里。（上级）
一个../ 代表向上一级目录 ../../../向上三级目录
（4）目标文件在上一级目录的子目录（上级的下级）
../子文件夹名/文件名 ../images/1.jpg
3,总结：无论路径多复杂，从文件当前位置出发，
在操作系统里如何找到文件，路径就怎么写。
*特点：如果换了站点，甚至换个文件，同样的路径不一定生效。
*只用于指向本地站点内的文件。
*如果要指向另一台主机上的文件，必须用绝对路径。
（二），img中属性alt、title
可以被搜索引擎抓取
替代文字<img alt=“”/> 但现在基本不用
说明文字 <img title=“”/>可以替代，可以鼠标提示，能被引擎抓取
（三），img中属性width、height
<img src="1.jpg" width="200px"/>
只定义宽度，高度会等比例自动调整；width="200px"
只定义高度，宽度会等比例自动调整；height="300px"
注意：宽度可以写50% 但高度不可以写百分比50%
流式布局
（四），img中属性align:图文混排（少用）
图文并排时候，设置allign的效果：
Top middle bottom（垂直方向）
Left center right （水平方向）
（五），网页中支持的图像格式
Jpg/jpeg 支持真彩色（色彩较多的图像），图片比较小
PNG 支持真彩色、背景透明（IE6不支持透明）
GIF 只支持256色，支持背景透明（效果不好），支持动画
（四），img中属性align:图文混排（少用）
图文并排时候，设置allign的效果：
Top middle bottom（垂直方向）
Left center right （水平方向）
（五），网页中支持的图像格式
Jpg/jpeg 支持真彩色（色彩较多的图像），图片比较小
二，超链接a
可点击；
链接可用于将多个页面串在一起，形成一个完整的网站；
（一）href属性
链接有三种状态。
1，默认状态，蓝色
2，访问过状态，紫色
浏览器会根据历史记录判断是否访问过该链接。
3，激活状态，红色
（二）target属性
Target的作用是定义链接的目标浏览器窗口。
_self是当前窗口（默认），_blank是新窗口。
（三）链接的表现形式
1，目标文档为文件：下载
<a href=”1.zip”>下载资源</a>
2，电子邮件链接：发邮件
<a href="mailto:senica@126.com?subject=主题为此
&cc=senica@163.com&mcc=senica@sina.com">发邮件</a>
3，返回页面顶部的空链接#
4，链接到JavaScript
5，媒体：播放
6，锚点：实现页面跳转 #锚点名称/ #ID
三，锚点链接
1，命名锚记：写了name属性的<a>标签<a name="wenti">
ID：一个元素独一无二的名称<a id="shixian">
* 行内元素只能嵌套行内元素
块元素可以嵌套块、行内元素
<h3>不能套在<a>里边---w3c标准规定
完整成对出现：
<a href=”#wenti”>此处点击指向“问题”模块锚点标记</a>
<a href=”#jiejue”>此处点击指向“解决”模块ID</a>
<a name=”wenti”>问题模块</a>
<a id=”jiejue”>解决模块</a>
2，给图片加链接。返回顶部
空链接中直接用#回返回顶部。
<a href="#">返回顶部</a>
若使用href=”javascript:;”则是完全空链接，不会跳转到顶部
<a href="javascript:;">关于我们</a>
PNG 支持真彩色、背景透明（IE6不支持透明）
GIF 只支持256色，支持背景透明（效果不好），支持动画
TABLE布局
1，table属性
<table border="1px" width="500px" height="300px"
bordercolor="green" bgcolor="silver" background="images/2.jpg">
Cellspacing=”10px”单元格之间间距，可设为0px
Cellpadding=”20px”单元格的内容与边框之间的间距
Align=”center”影响的是整个表格位于浏览器中的位置。
2，tr属性
Height ：高度
Align: 水平对齐 left center right
Valign： 垂直对齐top middle bottom
*当父元素跟子元素属性发生冲突时，以子元素为准。
*但是，width与height不同，父元素跟子元素中，以大的为准。
<tr height="160px" align="center" valign="top">
<td height="180">1</td>
<td align="top">2</td>
</tr>
3，td
Align Valign Width Height
Colspan 跨列 <td colspan="2">111</td>
Rowspan跨行 <td rowspan="2">3</td>
*可以先不管单元格有几个怎么布局，先把colspan写上，
再针对效果进行调整。
<header>头文件</header> <nav>导航</nav> <section>主体内容</section> <article></article> <footer>底部文件</footer> <aside></aside>
****Input 功能控件标记 Type 控件功能，包括： Text这里type=”text”可省略，默认是text类型； Value在这里指文本框的默认值 Password 密码框 Value 默认值 Size 宽度（字符） Maxlength 最大字符数 Radio 单选框 Name 组名。一组单选框name必须相同 Value选项值 checked Checkbox 复选框 Name 组名。 Value选项值 Checked 默认选中 File 文件域（上传文件） Hidden 隐藏域 Submit 提交按钮 Reset 重置按钮 Button 普通按钮 <input type=”submit”/> Submit按钮， 如果不设置按钮上显示什么字，则不同浏览器会显示不同结果， 不同长度；设置按钮名称，用value=”登录” Name 控件名 Value 不同类型作用不同 按钮：按钮上文字 文本框：默认值 Readonly 只读（文本框）,样式不变 Required 必填的(低版本IE，包括8，无效) ：简单的表单验证 Disabled 禁用（按钮），里边文字内容变灰色 Size 单位，字符。代表文本框长度。 单选按钮：radio 要有组名才能实现单选 <input type="radio" name="gender"/>帅哥 <input type="radio" name="gender"/>美女 Checked 表示默认，已勾选。如果有两个，默认选后一个。 *优化HTML代码，提高运行效率。比如，空着的属性；冲突的属性。 复选按钮：checkbox 看后台要求决定怎么写 Name相同或不同皆可，提交的name不同 <input type="checkbox" name="reading" value="reading" checked/>阅读 <input type="checkbox" name="travel" value="travel" checked/>旅游 上传文件<input type="file"/> 隐藏域<input type=”hidden”name=”hide”value=”你看不见我”/> 重置 reset 按钮 button <button>点我</button> <input type=”button”value=”点我”/>
标签：位置 com 图像 图片 简单 字符 单选 表示 决定
原文地址：http://www.cnblogs.com/getdaydayup/p/6284362.html
