Day6 HTML 语法简易介绍(三)

常见的 HTML elements

图片 (img)

想要在网页放上图片，可以使用img标签，他不用开头和结尾标签，单独一个img即可，我们称这样的标签为空元素(empty element)。不像段落文字标签，需要开头与结尾这种成双成对的包覆规则，只需要一个标签即可发挥功能。
在使用上，主要是标签的属性，包括图片档案来源src、图片替代文字alt、高度height、宽度width。

例如我要在网页放上一张图片，HTML可以这麽写：

<p> 图片范例 </p>
<img src="minecraft.jpg" alt="minecraft" height="691" width="1632">

程序执行後的网页内容将会是：

img是图片的英单image之简称，取此单字的前三个字母代表。而属性名称src则是来源档案source file之简称，alt是alternative text替代文字，height与width则是高度与宽度的英文。
这边需要注意的是，src属性必须要有图片的副档名，这边的例子是.jpg，如果没有副档名则图片无法显示。

常见的图片附档名包括:

• .jpeg
  静态影像压缩格式的图片，与jpg是相同的意思，只是早期副档名只能三个字母，所以只取jpg。虽有图片失真的缺点，但因为档案小的特性，有利於网页传输，是很常见的网页图片格式。
• .png
  可携式网路图形，图片品质比.jpeg好，但档案较大，可有透明底图，常用於logo图片。
• .gif
  图像互换格式，可以插入多个影格产生动画效果。
• .svg
  可缩放向量图形，向量图的特性就是缩放不失真。

标签的属性虽然有点复杂，但其实只是将属性名称加上等号，要添加的属性填入引号内，不同属性空一格表示。属性可以选择性的添加，依照需求为标签添加属性，当然如是img这类标签，一定要有src属性，才可加上图片。

属性名称="要给属性的值"

而选择性的添加属性的意思是，如只想填写档案来源、替代文字，以及图片高度，宽度并不想设定，那麽浏览器会按照原本的图面比例，调整图片宽度。例如：

<img src="minecraft.jpg" alt="minecraft" height="300" >

程序执行後的网页内容将会是：

超连结 (anchor)

超连结的标签是anchor的缩写，主要使用属性由href展现功能，href是hypertext reference的缩写。

<p> 超连结范例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank">理想混蛋 Bestards【行星】</a>

程序执行後的网页内容将会是：

如范例所示，点选「理想混蛋 Bestards【行星】」後，网页就会转跳到你在href属性所设定的位置或网址。超连结标签除了href这个属性外，还有一个很常用的属性是target，将属性的值设为blank，就可以让超连结自动开新分页，而非预设的直接覆盖掉原本的网页。

超连结标签的内容除了文字，也可以是图片，若想建立图片的超连结，直接将文字替换为img标签即可。

<p> 超连结范例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank"><img src='Galaxy Version.png' alt='Galaxy' height='200'></a>

程序执行後的网页内容将会是：

超连结对於网页是相当常见，如点即某个图片或某个文字，而转跳到网页的特定位置，皆是超连结的呈现。

注解

前面所提到的各种标签都会显示在网页上，但如果在编写HTML时想在某个地方做小笔记，提醒自己或他人，就可以使用注解标签了。

<!-- 填入你的注解-->

在中填入文字，浏览器就不会把显示在网页上。使用Ctrl+/(windows系统)可以在编辑器快速打出注解的符号。