整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发教程之HTML(二)

天的主要分享的是一些最基本、最常用的标签:<img/>、<a></a>、<table></table>、<ul></ul>,以及文件路径。

首先,先来了解一下<img/>标签,它表示图片标签,在页面中会出现很多的图像,主要的编码方式就是通过<img/>来实现的;那是怎么实现的呢?它通过一些自己的属性来规定了这个图像的样式,要实现一个图像最基本的属性有 src属性、width属性、height属性、alt属性,详解一下他们的属性分别是做什么的,是实现图像的哪一个部分的?

src属性:就是你要放置图像,该图像的文件路径,你的文件是放在C盘里面的文件还是D盘里面的文件,那么src就是这个图像的路径;

width属性:就是你的图像的宽度,同理height就是图像的高度;

alt属性:是指一种提示,比如你的鼠标在移动到你的图片的时候或有文字提示、或者因为某种原因图片不能正常显示的时候,会有直接文字提示;

完整的语法:<img src="图像路径" width="100px" height="100px" alt="提示"/>

接下来,我们分享<a></a>链接标签,它是一个能够实现跳转的标签,在小编还是没有完全总结<a>标签的情况下,可以先简单的可以理解为从一个页面跳转到另外一个页面。要实现一个跳转也是需要它自有的一些属性来完成,href属性,target属性,name属性。解一下他们的属性分别是做什么的,是实现跳转的哪一个部分的?

href属性:就是你要跳转到哪个页面,就是这个页面的路径;

target属性:就是你要跳转的网页的打开方式,它有自己的备选答案,其中_blank代表在新的标签中打开,_self代表在当前页面中打开(这个是缺省值)

name属性:就是定义锚点名称(只有当<a>标签当做锚点使用时需要该属性)

完整的语法:<a href="网页路径" target=“_blank”></.a>

总结一下<a>标签常用的表现形式(作用)

1、网页面间跳转

<a href="页面路径"></a>

2、页面上的文档(资源)下载

<a href="资源路径"></a> 其中:资源路径是指非html,htm,txt的资源,一般常见有为压缩包形式 <a href="xxx.rar">下载</a>

3、返回页面顶部的空连接

<a href="#">返回顶部</a> 跳转到本页(一般在开发、测试阶段使用)

4、电子邮件链接

<a href="mailto:zhaoxu@tarena.com.cn"></a>

5、链接到Javascript

<a href="javascript:js代码段落"></a> 就是在点击<a>标签的时候,执行一段js代码

锚点:就是在页面的任意位置处定义一个标识,随时随地的都可以跳转到这个标识上;如果你想要在同一个页面中,快速的到达某个点,这时候用锚点的方式是非常好的。

锚点的使用方式(2步骤):

1、定义锚点 <a name="anchorName"></a>

2、链接到锚点 <a href="#anchorName">文本 或 图像</a> 或者 <a href="url#anchorName"></a>

第三、关于<table>表格标签

表格:有行有列,按照一定的格式(从左到右,从上到下)排列里面的内容;它能组织结构化的信息,按照一定的格式来进行数据显示

要想创建表格:

1.定义表格:<table></table>

2. 定义行:<tr></tr>

3.创建列(单元格):<td></td>

注意:原始的表格中,每行的列数全部都是统一的。

在一些情况下,表格会有:表头,表主体,表尾

表头:<thead></thead>

表主体:<tbody></tbody>

表尾:<tfoot></tfoot>

实战:创建一个表格,有4行3列

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

表格的属性:表格也是通过自己的属性来形成自己风格的table

width:宽度

height:高度

align:水平对齐方式(left,center,right)

border:设置表格的变宽,以px(像素)为单位

cellpadding:内边距,(单元格边框与内容之间的距离)

cellspacing:外边距,(单元格与单元格之间的距离)

bgcolor:表格背景颜色

align:设置该行内容的水平对齐方式(left,center,right)

valign:设置该行内容的垂直对齐方式(top,middle,bottom)

colspan:单元格跨列(向右合并单元格)

rowspan:单元格跨行(向下合并单元格)

表格标题:即表格第一行,文字加粗 语法:<caption>标题</caption>

<table>

<caption></caption>

<tr>

<td></td>

</tr>

</table>

表格除了中规中矩,还有复杂应用,可以形成不规则的表格,实现不规则表格主要是通过跨列:colspan、跨行:rowspan

第四:关于列表<ul>

列表根据使用情景,可以分为:有序列表、无序列表、自定义列表,其中

1、有序列表

语法:<ol><li></li> 列表项</ol>

常用属性:

type : 列表类型,取值可以为:

1 :表示数字(默认值)

a : 表示小写字母

A : 表示大写字母

i : 表示小写罗马数字

I : 表示大写罗马数字

start : 起始编号

2、无序列表

语法:<ul><li></li></ul>

属性: type 取值可以为:

disc : 实心圆(默认)

circle : 空心圆

square : 实心矩形

3、自定义列表

<dl> 定义列表

<dt></dt> 列表内容标题

<dd></dd> 列表数据

</dl>

有序、无序使用场景:

1、从上到下,只有一列显示数据

2、从左到右,只有一行显示数据(导航)

自定义列表使用场景:做图文混排的布局

最后是关于文件路径,即URL

目录结构的表示方式

URL : Uniform Resource Locator , 统一资源定位器 ,俗称,路径

作用:用来标识网络中的资源位置

http://www.baidu.com

images/logo.gif

URL的三种形式: 绝对路径 相对路径 根相对路径

1、绝对路径

文件从最高级目录开始的完整的路径

绝对路径就是完整的URL

1、从本机目录结构查找,从盘符开始

C:\xxx\xxx.jpg

2、网络资源目录结构开始查找

协议、主机、目录路径、文件名称

http://www.baidu.com/images/logo.jpg

2、相对路径

相对于当前文件的位置,查找资源文件

1、同级目录(直接找)

直接输入资源文件名称即可

2、子级目录(先进入)

先进入到指定文件夹,再查找资源文件

3、父级目录(先返回)

先返回到指定的父级目录出,再查找指定资源文件

../ : 表示返回上一级

../../images/logo.png

3、根相对路径

file:///C:/zhaoxu/ ........ 本地访问

http://www.baidu.com

http://localhost/ ...... 从服务器访问数据

lt;font></font>标记和CSS替代语法

文本的大小 文本的颜色 文本的字体

size(1-7,默认值为3) color face

font-size color font-family

<font size=3 color="red" face="楷体">font标签的属性用法</font>
<p style="font-size:20px;color:red;font-family:楷体">文本的CSS用法</p>

<b>标记

font-weight:bold;

<i>标记

font-style:italic;

<u>标记

text-decoration:underline;

实例:

<font color="red" size="3"><b><i>欢迎光临我的网站</i></b></font>
<style type="text/css">
.txt1{color:red;background:white;font-style:italic;font-weight:bold;}
</style>
<font class="txt1">使用CSS</font>
<sup></sup> 文字上标字体标签(super)
<sub></sub> 文字下标字体标签(subscipt)
.txt_super{
vertical-align: super;
}
.txt_sub{
vertical-align: sub;
}


<hr/>标记

水平线的高度 对齐方式 宽度 颜色 边框颜色

size align width color

height text-align width background-color border-color

<hr size=50 align="center" width=100 color="red"/>
<hr style="height:50px;align:center;width:100px";background-color="red"/>

<ul>标记

type属性值

disc 默认值,实心圆。

circle 空心圆。

square 实心方块。

list-style-type:

disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、

upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。

默认值:disc(实心圆)


<ol>标记

type属性值

1 默认值。数字有序列表。(1、2、3、4)

a 按字母顺序排列的有序列表,小写。(a、b、c、d)

A 按字母顺序排列的有序列表,大写。(A、B、C、D)

i 罗马字母,小写。(i, ii, iii, iv)

I 罗马字母,大写。(I, II, III, IV)

list-style-type:

disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、

upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。

默认值:disc(实心圆)


<table>表格

实例:合并图片

利用HTML4提供cellpadding和cellspacing属性,可以达到合并图片的效果,但是HTML5已经确定不再支持这两个属性

<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>

使用CSS样式实现合并图片

<!DOCTYPE HTML>
<html>
<head>
<title>合并图片</title>
<style type="text/css">
table{border-collapse: collapse;} /* 边框会合并为一个单一的边框 */
td{padding:0;}
img{display: block;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>
</body>
</html>

使用CSS语法进行定位

立和使用列表

定义列表

<dl></dl>列表标签定义列表;
<dt>定义列表标题;
<dd>定义列表内容;

说明:

1. dt和dd对应着的, 一个dt可以对应着多个dd;

2. dd完全是为了dt服务的, 对标题进行描述;

实例:

<dl>
<dt>标题1</dt><dd>内容11</dd><dd>内容12</dd>
<dt>标题2</dt><dd>内容21</dd><dd>内容22</dd>
</dl>


有序列表(unordered list)

<ol></ol> 列表标签定义一个标有数字的列表;

<ol type="value"></ol>

1 默认值。数字有序列表。(1、2、3、4)

a 按字母顺序排列的有序列表,小写。(a、b、c、d)

A 按字母顺序排列的有序列表,大写。(A、B、C、D)

i 罗马字母,小写。(i, ii, iii, iv)

I 罗马字母,大写。(I, II, III, IV)

<ol>
<li>联系人:</li>xxx
<li>联系地址:</li>北京市丰台区
<li>邮政编码:</li>100036
</ol>


无序列表(ordered list)

<ul></ul> 列表标签定义一个标有圆点的列表;

<ul type="value"></ul>

disc 默认值,实心圆。

circle 空心圆。

square 实心方块。

<ul>
<li></li>
<li></li>
<li></li>
</ul>


目录列表 所有主流浏览器都支持 <dir> 标签。。

<dir></dir>标签定义目录列表。

<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>

菜单列表 目前所有主流浏览器都不支持 <menu> 标签。

<menu></menu>标签可定义一个菜单列表。

<menu>
<li>html</li>
<li>xhtml</li>
</menu>

在实际工作中, 它的用途较少, 大部分我们还是用ul;

另外还可以使用:

<div align=""></div>分区标签,用来排版大块HTML段落,也用于格式化表


上一篇:9.HTML链接标签
下一篇:HTML 表格