从头再学html5

最新推荐文章于 2025-12-02 17:50:12 发布

最新推荐文章于 2025-12-02 17:50:12 发布 · 98 阅读

文章标签：

本文介绍了HTML中图片和超链接的基本用法，包括如何使用<img>标签显示图片，设置图片尺寸及替代文本，以及如何创建指向不同资源的超链接。

一图片相关标签
Img标签和src属性：在HTML里面，图像是由<img>标签定义的。<img>是空标签，意思是说，它只拥有属性，而没有结束标签。想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。
插入图像的语法：

URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下： “http://www.w3schools.com/images/boat.gif”。当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。

alt属性： alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。

“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。
基本注意点——有用的技巧: 如果一个HTML文档包含10个图像，那么为了正确显示这个页面，需要加载11个文件。加载图像是需要时间的，所以请谨慎使用图像。

看个例子吧：

<html> <title> 图片相关标签 </title> <body> 在HTML里面，图像是由< img>标签定义的。< img>是空标签，意思是说，它只拥有属性，而没有结束标签。 <img src="f:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat，找不到！" width="100" height="80" > <img src="F:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat，找不到！" width="150" height="120" > <img src="F:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat，找不到！" width="250" height="220" > You can also use an image as a link: <a href="back.htm"> pictures  </a> </body> </html>

显示如下：

图片的大小事可以自己设定的，一像素为单位，如果不设置大小，则会铺满屏幕。图片地址可以是绝对地址或者相对地址。

二超链相关标签：

锚标签和href属性：
HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。

创建一个锚的语法：

<a href="url">你想要显示的提示</a>

锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

这个连接到百度的主页。

target属性：
使用target属性，你可以定义从什么地方打开链接地址。下面这段代码打开一个新的浏览器窗口来打开链接：

<a href="http://www.baidu.com" target ="_blank">baidu一下</a>

锚标签和name属性name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。下面是命名锚的语法：

你可以为锚随意指定名字，只要你愿意。下面这行代码定义了一个命名锚并指向了一个网页：

基本注意点——有用的技巧：
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.w3schools.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href="http://www.w3schools.com/html/"。命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚，到这些锚的链接被放在页面的顶端。如果浏览器无法找到指定的命名锚，它将转到这个页面的顶部，而不显示任何错误提示。

现在来看个完整的示例吧：

<html> <title> 超链接标签 </title> <body> <a href="http://www.baidu.com" target ="_blank">baidu一下</a> <a name="D:\java资料\html学习\html练习\yin629\yin629.html #tips">第五节。。。。</a> <a href="D:\java资料\html学习\html练习\yin629\yin629.html" target="_blank">Last Page</a> If you set the target attribute of a link to "_blank", the link will open in a new window. </body> </html>

图片如下：

暂时就这么多了，多试试自己写的。