嵌套标签我们已经讲一次了，在0X4.1里，我们把列表嵌套了

你觉得文字链接难看得令人作呕，好，你再也不会有这种感觉了

 

一如既往，一个html文件和一个存放图片的文件夹

index.html的代码，很简单

 <html>
 <head>
 <title>TEST</title>
 </head>
 <body>
 <p>
 <a href = "http://www.baidu.com/" title = "百度" target = "_blank"><img src = "images/drinks.jpg" alt = "百度" title = "百度" width = "400" height = "200"></a>
 </p>
 </body>
 </html>

我把img元素放在a元素用于页面显示的地方

这是显示效果

点击这个图片，看看会发生什么

当然了，会在新窗口打开百度

嵌套是一种思路，一种思想，请好好运用它

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

转载请注明出处  by:M_ZPHr

最后修改时间：2019-01-17

#WEB安全基础 : HTML/CSS | 0x6嵌套标签(图片链接)的更多相关文章

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

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

  2. #WEB安全基础 : HTML/CSS | 0x2初识a标签

    教你点厉害玩意,尝尝HTML的厉害! 我为了这节课写了一些东西,你来看看

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

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

  4. #WEB安全基础 : HTML/CSS | 0x5a标签拓展和class、id属性的使用

    a标签不只是能链接到其他网页,也能链接到网页中的元素 class属性让你用CSS对特定的元素进行修饰 这些是一个网页设计者的有力武器 这节课还是一个index.html文件   以下是代码 <h ...

  5. #WEB安全基础 : HTML/CSS | 0x4.1嵌套列表

    如果你认为列表只有ul和ol那你就错了 我要为你展示新的列表 这次只有一个index.html文件 这是它的效果 以下是它的代码 <html> <head> <title ...

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

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

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

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

  8. web前端基础——初识CSS

    1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...

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

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

随机推荐

  1. nginx+letsencrypt搭建https站点

    1. 申请好自己的域名 dockerhub.xxx.com,并解析好IP. 2. 安装nginx(默认开通了http) ,修改 server_name dockerhub.xxxx.com; 启动. ...

  2. [Swift]LeetCode239. 滑动窗口最大值 | Sliding Window Maximum

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  3. [Swift]LeetCode274.H指数 | H-Index

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  4. [Swift]LeetCode593. 有效的正方形 | Valid Square

    Given the coordinates of four points in 2D space, return whether the four points could construct a s ...

  5. php中mysqli_fetch_assoc()和mysqli_fetch_row()的区别

    mysqli_fetch_assoc() 函数 从结果集中取得一行作为关联数组: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_ ...

  6. windows下golang实现Kfaka消息发送及kafka环境搭建

    kafka环境搭建: 一.安装配置java-jdk (1)kafka需要java环境,安装java-jdk,下载地址:https://www.oracle.com/technetwork/java/j ...

  7. javascript ES6 新特性之 Promise，ES7 async / await

    es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...

  8. Python爬虫入门教程 36-100 酷安网全站应用爬虫 scrapy

    爬前叨叨 2018年就要结束了,还有4天,就要开始写2019年的教程了,没啥感动的,一年就这么过去了,今天要爬取一个网站叫做酷安,是一个应用商店,大家可以尝试从手机APP爬取,不过爬取APP的博客,我 ...

  9. 洛谷：P1036：选数

    题目描述 已知 nn 个整数 x1,x2,…,xnx1​,x2​,…,xn​ ,以及 11 个整数 kk ( k<nk<n ).从 nn 个整数中任选 kk 个整数相加,可分别得到一系列的 ...

  10. springboot+mybatis+dubbo+aop日志第二篇

    本篇主要介绍dubbo-demo-api接口层和dubbo-demo-service层,以及如何通过dubbo把服务发布出去,介绍代码前,咱们先来回顾一下整个demo工程的结构,如下图所示: 1.du ...