HTML—— 超链接 行内框架 表格 知识总结。

目录

一、超链接

1. 简述

2. 举例

3.链接分类：

4. 属性详解

 阻止a链接跳转

二、行内框架（内联框架）

1. 简介

2. 举例

3. 属性详解

 三、表格

1. 表格基本结构

2. 结构详解

3.表格举例

4.表格属性总结

table的属性：

tr的属性：

td的属性：

了解一下frame和rules属性值：

5. 常用属性详解

表格创建快捷方式与属性（列表也可使用此种快捷方式）

四、锚点链接

一、超链接

1. 简述

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接

2. 举例

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

实例

<a href="http://www.bilibili.com"  target="_blank">哔哩哔哩</a>

上面这行代码显示为：

哔哩哔哩

点击这个超链接会把用户带到 哔哩哔哩 的首页

3.链接分类：

1.外部链接：列如

<a href="http://www.baidu.com" target="_blank">百度</a>

2.内部链接：网站内部页面之间的相互链接（本地目录），直接链接内部页面名称即可（或像图片格式跳转路径 ../ /等），列如

<a href="index.html">首页</a>

3.空链接：如果当时没有确定链接目标时

<a href="#">首页</a>

4.下载链接：地址链接的是  文件 .exe  或者是  zip等压缩包形式

<a  href="（文件名）.zip">下载文件<a/>

5.网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接。

4. 属性详解

1.href:用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接功能，并引入跳转页面的路径，该路径可以是：网址、相对路径地址、锚链接

2.target：用于指定链接页面的打开方式

target="_blank"该代码表示会在新窗口中打开链接，该代码可以省略，省略则默认为在当前窗口打开链接。

如：

<a href="链接地址"  target="_blank">在新窗口中打开</a>

 阻止a链接跳转

<a href="javaScript：;" ></a>或<a href="javaScript：void(0);" ></a>

二、行内框架（内联框架）

1. 简介

在当前页面中引入另一个页面，可以设置该页面显示的大小范围

<iframe src=" " frameborder=" " scrolling=" " width="" height=" "></iframe>

2. 举例

<iframe src="https://www.huaban.com"frameborder="0"></iframe>
<iframe src="https://www.taobao.com/" frameborder="1"></iframe>

以上代码会在页面中显示花瓣和淘宝的首页界面，效果如下

3. 属性详解

1. src  引入的页面路径 填写路径或网址，引入一个页面或者网址  有些网站会拒绝连接（必须属性 绑定使用）

2.frameborder  框架边框   默认有边框     1有边框  0无边框（据情况使用）

3.scrolling   滚动条设置   默认值auto（自适应）     yes有滚动条   no无滚动条（据情况使用）

4.width  设置引入页面显示的宽度   可设置指定数值或百分比（据情况使用）

5.height 设置引入页面显示的高度   可设置指定数值或百分比（据情况使用）

 三、表格

1. 表格基本结构

在了解表格属性之前先来了解一下表格的结构，thead是头部，tbody是身体部分即内容，tfoot是脚部。

• 表格的完整结构：

  <!--table表示表格（整体）-->
<table>  
	<caption>表格的标题</caption>
	<thead>
	      <!--tr表示行-->
		<tr>   
			<th>表头</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		  <!--td表示单元格（列）-->
			<td>单元格内容</td> 
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>脚部</td>
		</tr>
	</tfoot>
</table>

• 表格的基本结构：

<table>
	<tr>
		<th>表头</th>
	</tr>
	<tr>
		<td>单元格内容</td>
	</tr>
	<tr>
		<td>脚部</td>
	</tr>
</table>

注：在上面的结构中thead、tbody、tfoot可以省略不写，不写时，则默认为tbody；th标签有字体加粗文本居中的样式。

         好了，了解了表格的结构，接下来来了解一下表格的属性，其实表格的大多数属性都被html5废弃了，在css出现之前，html4之后，常用table表格来布局页面。

2. 结构详解

1. <table></table> 定义表格的基本框架
2. <tr></tr>  定义表格的行
3. <td></td>  定义表格中行内的单元格
4. <th></th> 定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

     <table>标签里面只能嵌套<tr>标签，<tr>标签里面只能嵌套<th>标签或者<td>标签，其他的标签只能嵌套在<th>标签或者<td>标签里

3.表格举例

<table border="1" cellspacing="0" width="300" align="center" >
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td align="center">单元格1</td>
			<td align="center">单元格2</td>
			<td align="center">单元格3</td>
		</tr>
		<tr>
			<td align="center">单元格4</td>
			<td align="center">单元格5</td>
			<td align="center">单元格6</td>
		</tr>
	</table>

效果展示：

4.表格属性总结

table的属性：

tr的属性：

td的属性：

了解一下frame和rules属性值：

5. 常用属性详解

• border   表格边框

  <table border="1">
  			

• cellspacing  单元格与单元格之间的距离

  <table cellspacing="0px">

• cellpadding   内容与单元格四周的距离

  <table cellpadding=10px">

• bordercolor  修改边框颜色

  <table bordercolor="black">

• bgcolor  背景色，可以整体加也可以单独给单元格加

  <table bgcolor="pink">

• align="center"  使用在<table>标签中，表示整体单元格居中。

  <table align="center">

拓展：

水平对齐：align="center"在<tr>标签中使用，会使本行文字水平居中。也可以单独加给单元格

水平对齐方式：left 左对齐 right右对齐 center居中。

垂直对齐：valign=" middle"在<tr>标签中使用，会使本行文字竖直居中。也可以单独加给单元格

top为居上，middle为居中，bottom为居下。 

简述：vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。

或点击下方卡片查看详解

• colspan   水平合并单元格 以下代码表示水平方向合并两个单元格

  <th colspan="2">标题</th>

• rowspan  垂直合并单元格

  <th rowspan="2">标题</th>

表格创建快捷方式与属性（列表也可使用此种快捷方式）

table>tr*3>th+td*2>{单元格} 快捷写法

上方写法等同于下方代码
		<table>
			<tr>
				<th></th>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<th></th>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<th></th>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</table>

 上方部分表格内容借鉴自

http://t.csdn.cn/i0W4ghttp://t.csdn.cn/i0W4g

四、锚点链接

举例：

<p id="dingbu"></p>
假装此处有很多内容
<a href="#dingbu">我要回顶部</a>

效果：

​

 点击后跳转回顶部

注意：每个页面的id值是唯一的

           锚点设置以英文设置最好，或英文+数字 且数字不能放在开头，

           若设置汉字可能会出现乱码