- html
- ----------------------------------------
html 基本结构
- <html>
- <head></head>
- <body></body>
- </html>
body 中的各种标签组件:
要注意的是:
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 居右
<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: 不支持
5a 链接:
<a> 链接文本 </a>
属性: href: 点击链接之后跳往的目标地址
点击图片跳转 :
- <a href="">
- <img src=""/>
- </a>
- <img src="图形文件名" usemap="# 图的名称">
- <map name="图的名称">
<area shape = 形状 coords = 区域座标列表 href="URL 资源地址">
<!-- 可根据需要定义多少个热点区域 -->
<area shape = 形状 coords = 区域座标列表 href="URL 资源地址">
</map>
1shape -- 定义热点形状
shape=rect: 矩形
shape=circle: 圆形
shape=poly: 多边形
2coords -- 定义区域点的坐标
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>
使用时用第一种或第二种都可以.
第一种更简单第二种更规范
- <input type="checkbox" name=""value=""/>
- &pwd=&sex=m&hobby=swimming&hobby=coding
- </select>
- option:
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- --------------------------------------------
- margin-left: 10px
- margin-right:
- margin-top:
- margin-bottom:
- padding:a;
- padding:a b;
- padding:a b c d;
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
- background:">red | blue | black ;#ffffff ; #fff
- background-image:url("目标图片路径");
- border:1px solid black;
- border-width:
- border-style:
- border-color:
- border-left-width:
- ...
来源: http://www.bubuko.com/infodetail-2536919.html