#WEB安全基础 : HTML/CSS | 0x2初识a标签
教你点厉害玩意,尝尝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标签的更多相关文章
- #WEB安全基础 : HTML/CSS | 0x1初识CSS
"我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你 ...
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站
没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST
HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...
- #WEB安全基础 : HTML/CSS | 0x10实现交互_表单
先看看表单如何工作吧 请求 响应 简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件 这是显示 你可以向空白框框 ...
- #WEB安全基础 : HTML/CSS | 0x8CSS进阶
你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页 这是index.html的代码 <html> <head> <title ...
- #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
随机推荐
- Javascript高级编程学习笔记(40)—— DOM(6)CDATASection、DocumentType
CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...
- Android7.0适配APK安装
Android7.0适配APK安装 适配的原因 对于面向Android7.0的应用,Android框架执行的StrictMode API政策禁止在您的应用外部公开file://URL.如果一项包含文件 ...
- Linux — 文件、目录管理
目录与路径 . 此层目录 .. 上层目录 - 之前一个工作目录 ~ 主文件夹 ~ account 指定用户的主文件夹,account --账号名称 cd 切换目录 pwd (print worki ...
- python 中几种基本的矩阵操作应用
在图像处理中,python 的矩阵运算经常会用到一些简单的操作,可是,由于好久没用,很多东西还是忘记了,这里做个备忘: #-*-coding:utf-8-*- import numpy as np a ...
- Maven - 在Eclipse中创建Maven项目
本文的前提条件: windows7-64bit jdk1.8.0 Maven-3.5.0 1- 更新Eclipse中Maven配置 1.1- 修改Eclipse根目录下eclipse.ini文件 D: ...
- Ubuntu 18.04基础软件安装
1.fcitx 这个应该是最基础的了,虽然系统自带的也有,不过说实话可能是我还不会配置,我觉得是不好用,坚持用了一周后还是换回了小企鹅,最初是装小企鹅时失败了被迫坚持用了一周,当时失败情况是这样的,使 ...
- 使用C语言实现一个自动刷弹幕的程序
本文使用两种方式来进行刷弹幕操作 1 模拟键盘输入,自动输入文字,然后点击回车. 2 操作剪切板,直接将剪切板的文字粘贴到输入框,然后回车. 模拟键盘输入 如果要输入"弹幕"这两个 ...
- odoo开发笔记--开启后台日志记录
odoo后台日志记录功能 修改启动文件odoo.conf 将参数logfile注释放开, logfile = /var/log/odoo/odoo-server.log login_message = ...
- ubuntu16.04 在线安装docker ce
官方文档:https://docs.docker.com/install/linux/docker-ce/ubuntu/ ubuntu创建普通用户: adduser dk001 给该用户添加sud ...
- Android--UI之GridView
前言 这篇博客介绍一下Android平台下,GridView控件的开发.针对GridView控件的一些常用属性.方法,以及注意事项进行讲解,最后将以一个Demo展示GridView控件的使用. Gri ...