HTML基础（三）

HTML基础

图片

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们只需要掌握它的3个属性：src、alt和title。

1. src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径，src是img标签必不可少的属性。
2. alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
3. title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
4. 在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

<img src="img/haizei.jpg" alt="海泽王之索隆" title="海泽王之索隆">

在实际开发中，不论是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径。

图片格式：位图、矢量图

位图，又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

在实际开发中，最常见的位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。

	- jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景。
	- png格式是一种无损格式，可以无损压缩以保证页面打开速度。此外，png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片。
	- gif格式的图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
	- 总结：如果想要展示色彩丰富的高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片。

矢量图的常见格式有“.ai”、“.cdr”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。

超链接

超链接，英文名是hyperlink。超链接能够让我们在各个独立的页面之间方便地跳转。在HTML中，我们可以使用a标签来实现超链接。

<a href="https://baidu.com">百度</a>

href表示你想要跳转到的那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。文本和图片都可以被设置为超链接。

默认情况下，超链接都是在当前浏览器窗口打开新页面的。可以使用target属性来定义超链接打开窗口的方式。

属性值	说明
_self	在原来窗口打开（默认）
_blank	在新窗口打开
_parent	在父窗口打开
_top	在顶层窗口打开

在HTML中，超链接有两种：一种是外部链接，另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。内部链接的href属性值为页面文件在本地的相对路径。

锚点链接：是内部链接的一种，它的链接地址（也就是href）指向的是当前页面的某个部分。

所谓锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。

想要实现锚点链接，需要定义以下2个参数：目标元素的id，a标签的href属性指向该id。给a标签的href属性赋值时，需要在id前面加上“#”（井号），用来表示这是一个锚点链接。

表单

表单相关的标签可以用来实现动态网页。表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

在HTML中，表单标签有5种：form、input、textarea、select和option。

根据外观进行划分，表单可以分为以下8种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。

1. form标签

form标签用来创建一个表单，必须要把所有表单标签放在form标签内部。

form标签的常用属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

• method属性用于指定表单数据使用哪一种http提交方法。

method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。

• action属性用于指定表单数据提交到哪一个地址进行处理。
• form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。
• 在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

2. input标签

在HTML中，大多数表单都是使用input标签来实现的。

input是自闭合标签，它是没有结束符号的。其中type属性的取值有：
text、password、radio、checkbox、button、submit、reset、file

3. 单行文本框

单行文本框：type属性取值为“text”。

<form method="post">
	姓名：<input type="text" />
</form>

属性	说明
value	单行文本框的默认值，即默认情况下单行文本框显示的文字
size	设置单行文本框的长度
maxlength	设置单行文本框最多可以输入的字符数

4. 密码文本框

密码文本框：type属性取值为“password”。

在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

密码：<input type="password" />

属性与说明同单行文本框。

密码文本框只能使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术。

5. 单选框

单选框：type属性取值为“radio”。

<form method="post">
	性别：
	<input type="radio" name="gender" value="男"/>男
	<input type="radio" name="gender" value="女" />女
</form>

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。一组单选按钮的name属性值必须要相同。

checked属性可以使单选框在默认情况下被选中。

最后有一点要说明一下，为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

<label><input type="radio" name="gender" value="男"/>男</label>

对于所有的表单元素，value属性，是为了方便JavaScript或者服务器操作数据。

6. 复选框

复选框：type属性取值为“checkbox”。

<form method="post">
	你喜欢的水果：
	<input type="checkbox" name="fruit" value="苹果" />苹果
	<input type="checkbox" name="fruit" value="香蕉" />香蕉
	<input type="checkbox" name="fruit" value="西瓜" />西瓜
</form>

复选框的name、checked属性用法与单选框一致。

7. 按钮

在HTML中，常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。

提交按钮一般都是用来给服务器提交数据的，重置按钮一般用来清除用户在表单中输入的内容。重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。提交按钮也是针对当前所在form标签而言的。

value属性的取值就是按钮上的文字。

8. 文件上传

文件上传：type属性取值为“file”。

9. 多行文本框

在HTML中，多行文本框使用的是textarea标签，而不是input标签。

<textarea rows="行数" cols="列数" value="取值">
	默认内容
</textarea>

多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

10. 下拉列表

在HTML中，下拉列表是由select和option这两个标签配合使用来表示的。

<form method="post"> 
	<select>
		<option>HTML</option>
		<option>CSS</option>
	</select>
</form>

select标签的常用属性：

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option标签的常用属性：

属性	说明
selected	是否选中
value	选项值

表单元素不一定都要放在form标签内。**对于要与服务器进行交互的表单元素，必须放在form标签内才有效。**如果表单元素不需要与服务器进行交互，那就没必要放在form标签内。

框架

在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，是指在当前页面再嵌入另外一个网页。

<iframe src="https://baidu.com" width="200" height="150"></iframe>