当前位置:首页 » 网站运营 » 正文

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

2016年05月23日 09:20:16  分类: 网站运营  参与: 1192人  点这评论


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>

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

锚链接

A页甲位置到A页(本页)的乙位置
       A页甲位置到B页的乙位置
       1、实现锚链接(页面内锚链接)
       定义标记(锚)
       <a  name="marker">目标位置</a>
       <a  href="#marker">当前位置</a>
       设置链接到标记位置

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

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

适用于页面内容较多,超过一屏的场合(小说等网页)
       2、实现锚链接(页面间锚链接)
       A页面锚链接,设置链接到标记位置
       <a href="content.html#five" target="_blank">第五首:《蜀相》</a>
       B页面(content.html)锚链接,定义标记
       <a name="five">《蜀相》</a><br />

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

功能性链接
       页面中调用其他程序功能,电子邮件、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" alt="小图" title="小图"></a>
       大图页面代码
       同上
       列表标签
       无序列表标签
       列表中列表项之间没有先后顺序
       <ul>
       <li>列表项1</li>  
       …… 

</ul>
       例:


<h3>金庸小说:</h3>

<ul> 
<li>《书剑恩仇录》</li>
<li>《碧血剑》</li> 
<li>《射雕英雄传》</li> 
<li>《神雕侠侣》</li> 
<li>《倚天屠龙记》</li>
<li>《雪山飞狐》</li> 
<li>《天龙八部》</li>
</ul>

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

有序列表标签
       列表中列表项之间有明显的先后顺序
       <ol> 
       <li>列表项1</li>   
       … … 
       </ol>
       例:


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

<ol> 
<li>如何安装游戏?</li> 
<li>如何注册登陆账号?</li> 
<li>如何领取新手任务?</li>

</ol>

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

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


<dl>

<dt>单元</dt>

<dd>第一单元</dd>
<dd>第二单元</dd>
<dd>第三单元</dd>

<dt>章节</dt>
<dd>第一章节</dd>
<dd>第二章节</dd>

<dd>第三章节</dd>

</dl>

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

HTML注释
       注释的作用
       用于增加代码的可读性,不显示
       <!--注释内容 -->
       例:


<body>

<!—无序列表--> 
<ul>   
<!--<li>桔子</li>-->   
<li>香蕉</li>   
<li>苹果</li> 
<ul>
</body>

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

注释行不显示
       为什么需要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>

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

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

本文标签:超链接标签  

章晓雷博客版权声明:

①凡注明来源的文章,版权均为本站独家所有,转载需注明“来源:章晓雷博客(www.zxlblog.com)”。

②本站注明其他来源的稿件,转载请注明原文来源地址。如若产生纠纷,本站不承担其法律责任。

③ 如本站转载稿件涉及版权等问题,请作者联系博主QQ894331553及时删除或者做相关处理。

<< 上一篇 下一篇 >>

  • 评论(11)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

最近更新

Tags

好文分享

热评文章

文章归档

博主空间 | 博主微博 | 原创投稿 | 侵权声明 | 网站地图

Copyright © 2015-2016 ZXLBLOG.COM 版权所有 京ICP备15052414号-1