一、超链接

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. 结构详解

<table></table> 定义表格的基本框架
<tr></tr> 定义表格的行
<td></td> 定义表格中行内的单元格
<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的属性：

属性名	含义	属性值
width	设置表格的宽度	像素(px)或者百分比(%)，默认为像素
height	设置表格的高度	像素(px)或者百分比(%)，默认为像素
cellpadding	单元格的边框与内容之间的距离	像素(px)或者百分比(%)，默认为1px
cellspacing	单元格之间的间隔	像素(px)或者百分比(%)，默认为2px
align	设置表格水平对齐	left 、center、right
frame	设置表格外边框的线	viod、box、border、above、below、hsides、lhs、rhs、vsides
rules	设置表格内边框的线	none、rows、cols、all
border	设置表格边框的粗细	默认为0
bordercolor	设置表格边框的颜色
bgcolor	设置表格背景颜色
backgroung	设置表格的背景

tr的属性：

属性名	含义	属性值
align	设置单格中的内容水平对齐	left、center、right
valign	设置单格中的内容垂直对齐	top、middle、bottom 、baseline(基线对齐)
bgcolor	设置表格行的背景颜色

td的属性：

属性名	含义	属性值
width	设置单元格的宽度	像素(px)或者百分比(%)，默认为像素
height	设置单元格的高度	像素(px)或者百分比(%)，默认为像素
align	设置单元格中的内容水平对齐	left、center、right
valign	设置单元格中的内容垂直对齐	top、middle、bottom 、baseline(基线对齐)
rowspan	设置跨行(纵向)合并单元格数
colspan	设置跨列(横向)合并单元格数
bgcolor	设置单元格背景颜色
backgroung	设置单元格的背景

了解一下frame和rules属性值：

frame的属性值	含义
viod	不显示外边框
box	显示四周的外边框
border	显示四周的外边框
above	显示上边的外边框
below	显示下边的外边框
hsides	显示上下的外边框
lhs	显示左边的外边框
rhs	显示右边的外边框
rhs	显示左右的外边框

rules的属性值	含义
none	不显示内边框 (默认值)
rows	在行之间显示内边框
cols	在列之间显示内边框
all	显示四周的内边框

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值是唯一的

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

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

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

前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
html表格行内编辑器,表格编辑制作软件——TableEdit
原标题:表格编辑制作软件--TableEdit TableEdit for mac是专门设计了一个简单,干净,优雅的电子表格应用程序为OS X TableEdit设有简约而直观的界面,TableEdi ...
盒模型，块状元素，行内元素
盒子模型: css盒模型分为两种,一种是遵循w3c标准的标准盒模型,另一种是IE盒模型. 标准盒子模型 IE盒子模型通过上面两张图可以看出,两种盒子模型都包括padding,margin,borde ...
【HTML】行内元素与块级元素
一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
HTML行内元素/行级元素/内联元素/行标签/内联标签/行内标签/行元素
文章目录行内元素的特点行内元素清单可变元素列表 inline element. 也叫行级元素.内联元素. 行内元素默认设置宽度是不起作用,需设置 display:inline-block 或者 ...
行内元素（内联元素）与块级元素
在标准文档流里面,块级元素具有以下特点: 块级元素写完后会自动换行,有宽高可以修改. ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关: ...
行内元素与块级元素区别1.0
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/AlanZhuHaiHua/articl ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...

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

一、超链接

1. 简述

2. 举例

3.链接分类：

4. 属性详解

阻止a链接跳转

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

1. 简介

2. 举例

3. 属性详解

三、表格

1. 表格基本结构

2. 结构详解

3.表格举例

4.表格属性总结

table的属性：

tr的属性：

td的属性：

了解一下frame和rules属性值：

5. 常用属性详解

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

四、锚点链接

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

最新文章

热门文章

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

一、超链接

1. 简述

2. 举例

3.链接分类：

4. 属性详解

阻止a链接跳转

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

1. 简介

2. 举例

3. 属性详解

三、表格

1. 表格基本结构

2. 结构详解

3.表格举例

4.表格属性总结

table的属性：

tr的属性：

td的属性：

了解一下frame和rules属性值：

5. 常用属性详解

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

四、锚点链接

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

最新文章

热门文章

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

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