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

目录

一、超链接

1. 简述

2. 举例

3.链接分类:

4. 属性详解

 阻止a链接跳转

二、行内框架(内联框架)

1. 简介

2. 举例

3. 属性详解

 三、表格

1. 表格基本结构

2. 结构详解

3.表格举例

4.表格属性总结

table的属性:

tr的属性:

td的属性:

了解一下frame和rules属性值:

5. 常用属性详解

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

四、锚点链接


一、超链接

1. 简述

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

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

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

2. 举例

文本或图像

实例

哔哩哔哩

上面这行代码显示为:

哔哩哔哩

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

3.链接分类:

1.外部链接:列如

百度

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

首页

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

首页

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

下载文件

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

4. 属性详解

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

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

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

如:

在新窗口中打开

 阻止a链接跳转

二、行内框架(内联框架)

1. 简介

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

2. 举例


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

HTML—— 超链接 行内框架 表格 知识总结。_第1张图片

3. 属性详解

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

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

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

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

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

 三、表格

1. 表格基本结构

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

  • 表格的完整结构:
  
表格的标题
表头
单元格内容
脚部
  • 表格的基本结构:
表头
单元格内容
脚部

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

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

2. 结构详解

  1. 定义表格的基本框架
  2.   定义表格的行
  3.   定义表格中行内的单元格
  4. 定义表格中行内的单元格(标题),自动将文本加粗,居中对齐

    

标签里面只能嵌套标签,标签里面只能嵌套
标签或者标签,其他的标签只能嵌套在标签或者标签里

3.表格举例

姓名 性别 年龄
单元格1 单元格2 单元格3
单元格4 单元格5 单元格6

效果展示:

HTML—— 超链接 行内框架 表格 知识总结。_第2张图片

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   表格边框
  • cellspacing  单元格与单元格之间的距离
  • cellpadding   内容与单元格四周的距离
  • bordercolor  修改边框颜色
  • bgcolor  背景色,可以整体加也可以单独给单元格加
  • align="center"  使用在
  • 标签中,表示整体单元格居中。

    拓展:

    水平对齐:align="center"在

    标签中使用,会使本行文字水平居中。也可以单独加给单元格

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

    垂直对齐:valign=" middle"

    标签中使用,会使本行文字竖直居中。也可以单独加给单元格

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

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

    或点击下方卡片查看详解

    • colspan   水平合并单元格 以下代码表示水平方向合并两个单元格
  • rowspan  垂直合并单元格
  • 表格创建快捷方式与属性(列表也可使用此种快捷方式)

    table>tr*3>th+td*2>{单元格} 快捷写法
    上方写法等同于下方代码
    		
    标题 标题
    单元格 单元格
    单元格 单元格
    单元格 单元格

     上方部分表格内容借鉴自

    http://t.csdn.cn/i0W4gicon-default.png?t=MBR7http://t.csdn.cn/i0W4g

    四、锚点链接

    举例:

    假装此处有很多内容 我要回顶部

    效果:

     点击后跳转回顶部

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

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

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

    你可能感兴趣的:(web前端基础,大前端,HTML,html,学习,前端)