HTML的基本标签,超链接标签

超链接的基本概念,实现页面间的导航,超链接的基本语法,链接地址目标窗口位置链接热点文本或图像。

超链接标签

超链接的基本概念

实现页面间的导航

超链接的基本语法

<a href="链接地址" target="目标窗口位置">链接热点文本或图像</a>

href:用于设定链接地址(HypertextReference超文本引用)

target:指定链接在哪个窗口打开

_blank:将链接的文档加载到一个未命名的新浏览器窗口中

_self:将链接的文档加载到该链接所在的同一框架中,默认值

例:

<a href="router.html" target="_blank">思科路由器</a>

链接路径

相对地址:相对于当前目录的地址,常用

<a href="login/login.htm">登录</a>

绝对地址:指向目标地址的完整描述 ,少用

<a href="http://www.sohu.com">搜狐</a>

例:

<a href="../web1.htm">上级目录</a>

<a href="../../web2.htm">上上级目录</a>

超链接的三种类型

页面间链接

最常用的一种链接,由A页跳转到B页,用于网站导航

<a href="login/login.html">[会员登录]</a>

<a href="flower/product.html">[鲜花产品]</a>

锚链接

A页甲位置到A页(本页)的乙位置

A页甲位置到B页的乙位置

1、实现锚链接(页面内锚链接)

定义标记(锚)

<a name="marker">目标位置</a>

<a href="#marker">当前位置</a>

设置链接到标记位置

适用于页面内容较多,超过一屏的场合(小说等网页)

2、实现锚链接(页面间锚链接)

A页面锚链接,设置链接到标记位置

<a href="content.html#five" target="_blank">第五首:《蜀相》</a>

B页面(content.html)锚链接,定义标记

<a name="five">《蜀相》</a><br />

功能性链接

页面中调用其他程序功能,电子邮件、QQ、下载等

邮箱链接:mailto

<a href="mailto: benet@jb-aptech.com.cn">BENET课程邮箱</a>

子页面上设置返回到主页的链接

<a href="index.htm">回到主页</a><a href="sound.wav">播放音频文件</a>

sound.wav(音乐文件)

<a href=javascript:alert("感谢你,选择了BENET")>我想学习网络工程师 </a>javascript:alert(脚本内容)

文件下载链接

<a href="document.doc">BENET教学大纲下载</a>

document.doc(要下载的文件)

图片链接

小图页面代码

<img src="image\product.jpg" src="http://www.360zimeiti.com/uploads/allimg/160524/0R03K939-5.jpg" style="width: 411px; height: 298px;" title="HTML的基本标签,超链接标签5" />

有序列表标签

列表中列表项之间有明显的先后顺序

<ol>

<li>列表项1</li>

… …

</ol>

例:

<h3>新人上路指南</h3>

<ol>

<li>如何安装游戏?</li>

<li>如何注册登陆账号?</li>

<li>如何领取新手任务?</li>

</ol>

自定义列表标签

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>单元</dt>

<dd>第一单元</dd>

<dd>第二单元</dd>

<dd>第三单元</dd>

<dt>章节</dt>

<dd>第一章节</dd>

<dd>第二章节</dd>

<dd>第三章节</dd>

</dl>

HTML注释

注释的作用

用于增加代码的可读性,不显示

<!--注释内容 -->

例:

<body>

<!—无序列表-->

<ul>

<!--<li>桔子</li>-->

<li>香蕉</li>

<li>苹果</li>

<ul>

</body>

注释行不显示

为什么需要W3C标准

W3C:World Wide Web Consortium,万维网联盟

负责制定和维护Web行业标准

W3C标准包括

HTML内容方面:XHTML

样式美化方面:CSS

结构文档访问方面:DOM

页面交互方面:ECMAscript

W3C:制定统一的Web标准

W3C标准要求的Web页结构

规范的示例

<h1>一级主题1</h1>

<p>一级主题阐述文字</p>

<h2>二级主题</h2>

<p>二级主题阐述文字</p>

<ul>

<li>项目列表1</li>

<li>项目列表2</li>

<li>项目列表3</li>

</ul>

w3C提倡的Web结构:

1、内容(结构)和表现(样式)分离

2、HTML内容结构要求语义化

XHTML 1.0基本规范

标签名和属性名称必须小写

HTML标签必须关闭

属性值必须用引号括起来

标签必须正确嵌套

必须添加文档类型声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

……

</head>

body部分

</html>

DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。

来源:章晓雷博客(微信/QQ号:894331553),转载请保留出处和链接!

本文链接:http://www.zxlblog.com/reed/48.html

更多关注微信:xllx999

CopyRight 2002-2020 闻蜂网