整合营销服务商

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

免费咨询热线:

HTML 链接

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

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样::

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为:: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="http://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架,假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

标签描述
<a>定义一个超级链接

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

大家在浏览网页的时候,是否思考过这样一个问题:怎样才能制作出一个网页呢?制作出一个网页是很简单的,只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页,今天我就为讲解HTML的入门及结构组成。

一、什么是HTML?

1、在我们开始学习HTML之前我们需要知道什么是HTML?

HTML的全称为Hyper Text Markup Language,中文名称为超文本标记语言,阅览方式为网页浏览器,同时HTML也被称为网页。

2、一个简单的HTML文档

二、HTML编辑器

我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。

1、记事本

① 创建一个TXT文本

② 输入HTML代码

③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。

④ 然后双击这个文件运行。

运行结果

2、专业编辑器

① Sublime Text

② HBuilder

③ Adobe Dreamweaver

④ CoffeeCup HTML Editor

这其中我比较推荐HBuilder这款编辑器,界面简单,编辑起来很快。

三、HTML的组成部分

在上面的案例中我们可以看到HTML是由头部(head)和身体(body)所组成的。

1、头部(head)

通常包含标题(title),也就是一个网页的名称

网页标题

2、身体(body)

body的部分是整个网页的重要内容部分,让人一眼就浏览到这个网页的内容,可以插入文本、图片、多媒体等内容。

四、HTML元素

l HTML元素是指以开始标签起始,以结束标签终止的元素:元素内容即为开始标签与结束标签之间的内容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素,在上面的案例中就有六个元素。

l 也有部分元素只有开始标签,例如<br>,以开始标签的结束而结束。

五、HTML的属性

l 一般来说HTML的属性就是HTML元素的属性,属性可以在元素中添加附加信息。

l 属性总是以名称/值对的形式出现,比如:name=”value”。

l 属性一般描述于开始标签。

l style中会有更多的属性。

六、HTML格式化

HTML可定义很多供格式化输出的元素,比如粗体字和斜体字。

HTML文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字


运行结果示意图

HTML“计算机输出”标签

标签

描述

<code>

定义计算机代码

<kdd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

HTML引文、引用及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目

七、HTML超链接

超链接可以是图片、文字、多媒体也可以是一个网址

示例:

结果:

点击带有下划线的两个字就可以进入某度的网站

八、HTML CSS

1、CSS是一种层叠样式表,可以修饰html元素的样式并可以精确地进行排版

2、CSS有三种方式:

l 内部样式,在HTML元素中使用“style”属性

l 内部样式表,在头部<head>区域使用<style>元素来包含CSS

l 外部引用,引用带有后缀css的文件,示例:

html文档

css文档

如果你看到了这里,就说明你已经打开了制作网页的大门啦~

本的网页结构

网页基本结构:

<html>
	<head>
        <title>这是网页标题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="keywords" content="这是关键字"/>
        <link href="css文件路径" rel="stylesheet"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        
    </body>
</html>

常见网页标签:

标签

含义

常用属性

a

超链接

href / target / title

img

图片

src / alt / title / width / heiht

h1-h6



p



br



hr



em



strong



i



span



div



CSS美化网页

css样式使用方式

  1. 行内(内敛)样式
  2. 内部样式
  3. 外部样式

css基本选择器

  1. ID - > #
  2. CLASS -> .
  3. 标签 -> 标签名

优先级

  1. ID > CLASS > 标签 (在同一个元素上的ID , CLASS比较)
  2. 行内 > 内部> 外部
  • *important 最高级别
  • 高级选择器:

    1. 并集选择器
    2. 交集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 兄弟选择器
    6. 属性选择器

    前提: 非继承属性 > 继承属性(除此条件外,基本可以适应以下计算规则)

    ID

    CLASS

    标签

    100

    10

    1

    文本样式

    样式

    含义

    属性值

    字体样式

    列表与表格

    表单

    盒子模型

    浮动

    定位


    上一篇:Java Applet基础
    下一篇:这才是完整的HTML