html基础学习

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习html中的另外一些组成部分，URL路径、图像、链接、表格、列表。链接和图像标签是构成网页必不可少的组成部分，表格在网页设计中可以算是整个页面布局的半个灵魂（因为后面还有一个DIV）。这一章不光要了解表格的建立方式，还要了解表格中涉及到的一些属性及其用法。

一、URL

目录结构的表示方式

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

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

URL的三种形式:

1、绝对路径

2、相对路径

3、根相对路径

1、绝对路径：文件从最高级目录开始的完整的路径

绝对路径就是完整的URL

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

E:/10.8/01/images/btn_login.JPG

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

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

2、相对路径

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

1、同级目录(直接找)

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

logo.png

2、子级目录(先进入)

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

images/logo.png

3、父级目录(先返回)

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

../ : 表示返回上一级

../../images/logo.png

3、根相对路径

file:///E:/images/ ........ 本地访问

http://www.baidu.com

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

根相对路径：

/ 开始

/images/logo.png

二、图像

语法:<img />（单独出现）

属性:

src : 图像的路径(绝对路径、相对路径、根相对路径)

width : 宽度

height: 高度

alt : 提示，

1、鼠标移入时显示的文本

2、图像不显示时，显示的文本

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8"/>
</head>
<body >
<img src="C:/Users/Administrator/Desktop/login.png" title="这是一幅图像" alt="This is a photo!" width="300px" height="100px" />
</body>
</html>

复制代码

*注意：通常情况下，不需要手动改变图像的宽和高

三、链接

能够完成简单的跳转动作

语法：<a></a> ,anchor 缩写

属性：

href : 链接URL

target ：目标，指定打开新网页的方式

取值 _blank : 在新标签页中打开

_self : 在自身(当前)页面中打开(默认值)

name : 定义锚点名称

链接的表现形式:

1、页面间跳转

<a href="页面路径">文本或图像</a>

eg：<a href="Homework.html" >昨天作业</a>

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

<a href="指定资源路径">文本或图像</a>

资源路径：非html,htm,txt的资源

eg：<a href="xxx.rar">下载</a>

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

eg：<a href="#">返回顶部</a>

跳转到本页(开发、测试阶段使用)

4、电子邮件链接

打开本机邮件客户端，向指定地址处发送email邮件

eg：<a href="xxxxx@163.com">联系我们</a>

5、链接到Javascript

eg：<a href="javascript:js代码段落"></a>

锚点：在页面的任意位置处定义一个标识，随时随地的都可以跳转到这个标识上

什么时候使用:向快速的跳转到网页的某个位置处，可以选择使用锚点

锚点的使用方式：

1、定义锚点

2、链接到锚点

<a href="#anchorName">文本或图像</a>

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<a href="#NO1">第一章倚天屠龙记</a><br />
<a href="#NO2">第二章神雕侠侣</a><br />
<a href="#NO3">第三章射雕英雄传</a><br />
<p>
<a name="NO1">第一章倚天屠龙记<br /></a>
<img src="C:/Users/Administrator/Desktop/login.png"/><br />
</p>
<p>
<a name="NO2">第二章神雕侠侣<br /></a>
<img src="C:/Users/Administrator/Desktop/jd_logo.png"/><br />
</p>
<p>
<a name="NO3">第三章射雕英雄传<br /></a>
<img src="C:/Users/Administrator/Desktop/btn_login.JPG"/><br />
</p>
<p><a href="#">返回顶部</p>
</body>
</html>

复制代码

四、表格

1、什么是表格

有行有列，按照一定的格式(从左到右，从上到下)排列里面的内容

2、表格的作用

组织结构化的信息，按照一定的格式来进行数据显示

3、创建表格

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

定义行:<tr></tr> --> Table Row

创建列(单元格):<td></td> --> Table Data

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

Question:创建一个表格，有3行2列

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table border="1px" >
<tr>
<td >1.1</td>
<td >1.2</td>
</tr>
<tr>
<td >2.1</td>
<td 2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</body>
</html>

复制代码

4、表格属性

table:

width : 宽度

height : 高度

align : 水平对齐方式（left,center,right）

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

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

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

bgcolor : 表格背景颜色

tr :

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

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

td :

align:水平方向对齐方式

valign:垂直方向对齐方式

width:宽度

height:高度

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

rowspan : 单元格跨行(向下合并单元格)（并掉哪行哪列就删除哪列哪行）

5、表格标题

<table>

<tr>

</tr>

</table>

6、表格复杂应用

1、行分组

根据行不同的作用，划分成不同的组

行分组分为3个部分:

表头，表主体，表尾

表头:<thead></thead>

表主体:<tbody></tbody>

表尾:<tfoot></tfoot>

2、不规则表格

1、跨列:colspan

2、跨行:rowspan

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<table cellspacing="10px" cellpadding="10px" border="1px" width="400px" height="400px" align="center">
<caption>表格</caption>
<tr>
<td width="70%" rowspan="2">1.1</td>
<td width="30%">1.2</td>
</tr>
<tr>
<td width="90%">2.1</td>
<td width="10%">2.2</td>
</tr>
<tr>
<td colspan="2">3.1</td>
<td>3.2</td>
</tr>
</table>
</html>