教你点厉害玩意，尝尝HTML的厉害！

我为了这节课写了一些东西，你来看看

这是images文件夹里的东西

废话少说，看代码

这是index.html的

 <html>
 <head>
 <title>Head First Lounge</title>
 </head>
 <body>
 <h1>Welcome to the New and Impproved Head First Lounge</h1>
 <img src = "images/drinks.jpg" alt ="果汁" title = "果汁">
 <p>
 Join us any evening for refershing <a href = "elixir.html" title ="elixirs" target = "_blank">elixirs</a>
 </p>        <!--target = _blank是在新标签打开链接-->
 <h2>Directions</h2>
 <p>
 You'll find us right the center of downtown Webbille. If you need help finding us, check out our <a href = "directions.html" title = "directions" target = "_blank">detailes directions</a>
 Come join us!
 </p>
 </body>
 </html>

这是它的效果

看见detailes directions了吗？那是个链接，点击它，看看会发生什么

聪明的你不用想就知道，对吧？

它在新窗口打开了另一个网页

 

这是directions.html,以下是代码

<html>
<head>
<title>Head First Lounge Directions</title>
</head>
<body>
<h1>Directions</h1>
<p>
Take the 305 S exit to Webville - go 0.4 mi
</p>
<p>
Continue on 305 - go 12 mi
</p>
<p>
Turn right at Structure A ve N - go 0.6 mi
</p>
<p>
Turn right and head toward Structure A ve N - go 0.0 mi
</p>
<p>
Turn right at Structure A ve N - go 0.7 mi
</p>
<p>
Continue on Structure A ve S - go 0.2 mi
</p>
<p>
Turn right at SW Persebtation Way - go 0.0 mi
</p>
<p><a href = "index.html" title = "回到主页面">回到主页面</p>
</body>
</html>

点击回到主页面，就会回到index.html

别忘了主页面还有一个elixir呢，别忘了点它，它不会受伤的（除非你用自己的手捅破屏幕）

这就是elixir.html页面

以下是它的代码

<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Yellow Tea Cooler</h2>
<img src = "images/yellow.jpg" width = "100" height = "100">
<p>
Chaeck full of vitamins and mineral, this elixir comblines the herlthful benefits of yellow tea with a twist of chamorimile biossoms and ginger root.
</p>
<h2>Resberry Ice Concentration</h2>
<img src = "images/red.jpg" width = "100" height = "100">
<p>
Concentration resberry juice grass, citrus peel and roschips, this icy drink will mack your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<img src = "images/blue.jpg" width = "100" height = "100">
<p>
Blueberry and chreey essence mixed into a base of elderflower herb tea will put you in a relexd state of bliss in no time.
</p>
<h2>Cranberry Antioxdant Blast</h2>
<img src = "images/lightyellow.jpg" width = "100" height = "100">
<p>
Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<p>
<a href = "index.html" title = "回到主页面">回到主页面
</p>
</body>
</html>

怎么样，别被强有力a标签吓到了

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处  by:M_ZPHr

最后修改日期：2019-01-16

#WEB安全基础 : HTML/CSS | 0x2初识a标签的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 0x1初识CSS

    "我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你 ...

  2. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  3. #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

    没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下

  4. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  5. #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

    HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...

  6. #WEB安全基础 : HTML/CSS | 0x10实现交互_表单

    先看看表单如何工作吧 请求   响应   简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件   这是显示   你可以向空白框框 ...

  7. #WEB安全基础 : HTML/CSS | 0x8CSS进阶

    你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页   这是index.html的代码 <html> <head> <title ...

  8. #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

    标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...

  9. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

随机推荐

  1. 面试官问我，Redis分布式锁如何续期？懵了。

    前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...

  2. Tomcat 部署项目无法加载静态资源

    首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行 ...

  3. 项目文件与 SVN 资源库同步提示错误 Attempted to lock an already-locked dir

    问题描述 之前为了图方便,在eclipse中直接把三个jsp文件复制到了eclipse中我新建的一个文件夹中,把svn版本号信息也带过来了,然后我又删除了这三个jsp文件,接着先把这三个jsp复制到桌 ...

  4. [Objective-C语言教程]关系运算符（8）

    运算符是一个符号,告诉编译器执行特定的数学或逻辑操作. Objective-C语言内置很多运算符,提供如下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 按位运算符 分配运算符 其它运算符 本教 ...

  5. 运维笔记--ubuntu rm删除文件后 恢复

    待补充 特别注意:umount分区,尝试恢复文件,文件夹(目录),全部文件 https://www.cnblogs.com/wangxiaoqiangs/p/5630288.html https:// ...

  6. mysql 开发进阶篇系列 52 权限与安全(系统四个权限表的粒度控制关系)

    一.概述 接着上篇的权限介绍,当用户进行连接的时候,权限表的存取过程有以下两个阶段: (1) 先从user表中的host,user, authentication_string 这3个字段中判断连接的 ...

  7. sql server 性能调优之 资源等待 LCk

    一.  概述 这次介绍实例级别资源等待LCK类型锁的等待时间,关于LCK锁的介绍可参考 “sql server 锁与事务拨云见日”.下面还是使用sys.dm_os_wait_stats 来查看,并找出 ...

  8. 第二次作业：分布式版本控制系统Git的安装与使用

    本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 第一个git仓库地址:https://github.com/ ...

  9. 项目ITP(一) 二维码

    前言 系列文章:[传送门] 上几周碌碌无为,不行啊不行啊.博客园,不知道你几时改版.老家了,我不会忘记你呢.呵呵,我也会在os,csdn更新的.每天一搏,不管有用没用. 正文 正文先有项目起步,项目中 ...

  10. vue-14-less 语法的使用

    vue-15-rem-less 在计算手机端页面的时候, 使用rem和less的方式, 可以方便的设置需要的大小等 1, 在index.html中添加rem的script 代码 在head中添加 &l ...