moon 01/19 HTML5第8章 --标记文字<a>元素以及W3C中介绍

     <a>--href 最重要的元素
描述
URL 超链接的 URL。可能的值:

  • 绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")
  • 相对 URL - 指向站点内的某个文件(href="index.htm")
  • 锚 URL - 指向页面中的锚(href="#top")

8.1 生成超链接

超链接是HTML中关键特性,是用户赖以在内容中(同一文档中和不同页面间)导航的基础。超链接用a元素生成。

元素类型:  包含短语内容时称为短语元素, 包含流内容时称为流元素。

允许具有父元素

内容:短语内容、流元素

习惯样式:

a:link,a:visited{
    color:blue;
    text-decoration:underline; cursor: atto;
}
a:link:active, a:visited:active{
    color:blue:
}

     8.1.1 生成指向外部的超链接---绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")

1.将a元素的href的属性设置为一http://开头的URL---即生成到其它HTML文档的超链接

8.1.2 使用相对URL--

1  a元素的href属性值不是以类似值http://这样的已知的协议开头,则浏览器会将该超链接视为相对引用。

<!DOCTYPE HTML>
<html>
        <head>
                 < title>Example</title>
                 <base  href="http://titan/listing/">
        </head>
        <body>
                 <p>
                        I like <code id="applecode">apples</code>and oranges
                 </p>
                  <a href="http://apress.com">Visit  Apress.com</a>
                  <a href="page2.html">page 2</a>
        </body>
</html>

       次例中的基准URL为base 元素中的http://titian/listings/。其中titan为我的开发服务器名称,而listings是服务器上包含本书实例文件中的目录

文档最后a元素生成的超链接的a元素,它使用了page2.html这一相对URL,点击这个超链接,浏览器会将基准URL和相对URL拼接成完整的URL:

http://titan/listing/page2.html

如果不用base元素 或不在base元素里面的href元素设置一个基准URL,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准例如 假设 浏览器

从http://baidu.com/app/mypage.html这个URL载入了一个文档,该人当中有一个超练级使用了myotherpage.html这个相对URL,那么点击这个超链接时

浏览器将尝试从http://baidu.com/app/myotherpage.html这个绝对URL加载第2个文档

8.1.3生成内部超链接----锚 URL - 指向页面中的锚(href="#top")

超链接可以将同一文档中的另一个元素移入视野。为此需要用到形如CSS中针对目标元素的ID选择器的表达式:#<id>,如下面代码

注意 :浏览器找不到具有制定属性为id属性值的元素,那么它会再次进行一次查找,试图找到一个name 属性值与之匹配的元素

<html>
         <head>
                   <title>Example</title>
                   <meta  name="author"  content="Adam Freeman"/>
                   <meta  name="shortcut icon"  content="A simple example"/>
         </head>
         <body>
                   you can see other fruits I like <a href="#fruits">here</a>
                   <p  id="fruits">
                   I also like bananas,mangoes,cherries,apricots,plums and grapes
                   </p>
         </body>
</html>

  次例中 将超链接的href属性值设置为#fruits。点击here,浏览器将查找文章中id属性值为fruits的元素。如果元素不在视野中,那么浏览器将会将文档滚动到能看到他的位置

注意 :浏览器找不到具有制定属性为id属性值的元素,那么它会再次进行一次查找,试图找到一个name 属性值与之匹配的元素

时间: 2024-10-19 04:29:55

moon 01/19 HTML5第8章 --标记文字<a>元素以及W3C中介绍的相关文章

html5 +css3 第一章学习和笔记

各位同学.身为本版的斑竹.,希望各位童鞋都能学到Html5 .特此没两天更新一个学习笔记和大家一起学习Html5.... 语法改变       1.新增的元素和废除的元素       2.新增的属性和废除的属性       3.全局属性 html5和4的区别:DOCTYPE.声明.内容类型.字符的编码的制定方法.元素标记的省略.布尔值的类型.引号的省略 一:html5中的标记方法        1内容类型:.html  .htm        2DOCTYPE声明: <!DOCTYPE html

moon javaScript简介 第1章和 在HTML中使用javaScript第2章

javaScript基础知识 javaScript 是脚本语言 是一种轻量级的编程语言. 是可插入 HTML 页面的编程代码. 插入 HTML 页面后,可由所有的现代浏览器执行. javaScript由3个不同的不封组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) 1.1  ECMAScript:定义了JavaScript基础.web浏览器只是ECMAScript实现的宿主环境之一(宿主环境) 组成部分:a 语法  b 类型  c 语句 d 关键字 e 保留字

2017-02-08 01:19:09 Scrapy: pk5_mylist

[TOC] ###2017-02-08 01:19:09 Scrapy: pk5_mylist.md > Save the records with MongoDB #### settings.py ``` # -*- coding: utf-8 -*- BOT_NAME = 'bengbeng' SPIDER_MODULES = ['bengbeng.spiders'] NEWSPIDER_MODULE = 'bengbeng.spiders' ROBOTSTXT_OBEY = True IT

现代软件工程团队项目贝塔阶段_开发日志_2018.01.15-2018.01.19

现代软件工程团队项目贝塔阶段_开发日志_2018.01.15-2018.01.19 2018.01.15 已完成: 1.版本上线 1.1上线操作步骤 1.1.1将网站整体文件夹拷贝到keqi1 1.1.2修改microDefinition.php的数据库名和根目录名 1.1.3修改注册界面发送验证码后直接填充功能 1.1.4修改del的主id的class为hide 1.1.5重新运行根目录的111.php(消除红点,也就是消除服务器返回的多余字符) 1.2修复上线过程中遇到的bug  1.2.1

HTML5权威指南 -- 标记文字

一.生成超链接 1.属性:href.hreflang.media.rel.target.type 2.生成指向外部的超链接:用的最多的协议就是http,但也支持其他协议,如https.ftp.mailto:还可以生成基于图像的超链接 3.使用相对URL:如果href属性值不是以类似http://这样的已知协议开头,那么浏览器会将该超链接视为相对引用,会假定目标资源与当前文档位于同一位置 4.生成内部超链接:超链接也可用于将同一文档中的另一元素移入视野,为此需要用到形如css中针对目标元素的ID选

HTML5 Placeholder实现input背景文字提示效果

这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息. 语法基本是这个样子:<input placeholder=”提示信息...”> HTML代码 <form> <input

19.把1~100存到二维数组a[10][10]中,并按二维矩阵形式输出

#include<iostream>using namespace std; int main(){    int a[10][10];    for(int i=0;i<10;i++)    {        for(int j=0;j<10;j++)        {            a[i][j]=i*10+j+1;//二维数组逻辑上还是一维数组的存储方式        }    }    for(int j=0;j<10;j++)    {        for

第二章:列表与元素

本章将引入一个新的概念:数据结构.数据结构是通过某种方式(例如对元素进行编号)组织在一起的数据元素的集合.这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在python中,最基本的数据结构是序列.序列中的每个元素被分配一个序号--即元素的位置,也称为索引.第一个索引为0,第二个1,以此类推.序列中的最后一个数被标志为-1,倒数第二个为-2,.... 2.1 序列概览: python有6种内建的序列,其中常见的两种序列:列表和元组,其他的有字符串,Unicode字符串,buffer对象和x

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM