003图片，超级链接及其它

最新推荐文章于 2022-07-20 05:00:00 发布

JimmyTsaiCN

最新推荐文章于 2022-07-20 05:00:00 发布

阅读量985

点赞数

分类专栏： Html全端编程 Zero To Hero 文章标签： css 前端

本文链接：https://blog.csdn.net/zzcaism/article/details/125257930

版权

Html全端编程 Zero To Hero 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、图片标签

1.1、图片标签及属性

img：img是行内标签，用来显示一张图片。主要的3个属性：src、alt、title。

src:指定图片的路径（必选）source的意思，读音：[sɔːrs]
alt:用于描述图片，提供给搜索引擎看（必选）alternate的意思，读音： [ˈɔːlt] （alt的读音)。是图片无法显示的替代文本。当图片显示不出来的时候，会显示alt里面的内容。
title:[ˈtaɪtl] 用于描述图片，提供给用户看（可选）当鼠标移动上去的时候会显示title里面的内容

示例：

<img src="abc.png" alt="我是替代文本" title="图片不显示示例，我是悬停文本" />
<hr>
<img src="http://blocklygame.com/avatar/2022/001.gif" alt="卡通" title="gif图片展示示例">

随堂练习1：进入https://fanyi.baidu.com/利用浏览器F12找出百度翻译的logo的图片网址，并在浏览器新标签中打开该图片

随堂练习2：模仿http://blocklygame.com/web/html/004.html，做一个一样的网页出来（示例中的图片地址，自己通过F12找出来)

1.2、绝对路径和相对路径

在HTML中，路径分为2种：①绝对路径；②相对路径。

绝对路径，指的是图片在你电脑中的完整路径，或是图片在互联网的地址。
相对路径，指的是图片相对当前页面的位置。

绝对路径写法：<img src="D:/website/img/haizei.png" />
相对路径写法：<img src="img/haizei.png" />

随堂练习 1：在上一个练习所做的网页同级目录下创建img文件夹，把网上的图片http://blocklygame.com/avatar/2022/009.jpg和http://blocklygame.com/avatar/2022/011.jpg下载到改文件夹。

随堂练习 2：在上一个练习所做的网页最后面增加显示两张图片的代码，分别采用绝对路径和相对路径

对于图片或文件，可以使用中文名吗?

可以使用，但是建议用英文名称命名图片文件和相关文件夹，确保路径中没有中文名称可以更好的被更多浏览器支持

1.3、位图和矢量图

1.3.1、概念

在网页中，图片格式有2种：一种是“位图”，另外一种是“矢量图”。

位图：又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
常见位图格式（3种）：jpg、png、gif
矢量图：又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。常用的矢量图格式有：.svg

位图和矢量图比较：

矢量图图片无论放大、缩小或旋转等都不会失真。位图则会因为放大之后单位面积的像素点数量变小（密度），导致分辨率不足而模糊失真。

矢量图因为采用路径算法展示图片，要表现色彩和细节复制的图片就比较困难，所以矢量图大多是卡通图。

试验：下载网上的图片http://blocklygame.com/avatar/2022/svg/002.svg，用记事本打开该文件。可以看到这个图片的代码，其中path表示图片的绘制路径

随堂实验：用代码画一个圆

<h3>用svg代码画一个圆</h3>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

随堂练习：通过修改img的style属性里面的高度值，体验svg和jpg图片不同的缩放效果

<h2>一般Svg</h2>
<img src="http://blocklygame.com/avatar/2022/svg/001.svg" alt="鸡鸭" >
<hr>
<h2>Svg指定高度</h2>
<img src="http://blocklygame.com/avatar/2022/svg/001.svg" style="height:100px;" alt="鸡鸭" title="鸡鸭矢量图" />
<hr>
<h2>一般jpg</h2>
<img src="http://blocklygame.com/avatar/2022/011.jpg"  >
<hr>
<h2>jpg指定高度</h2>
<img src="http://blocklygame.com/avatar/2022/011.jpg" style="width:100%;"  />
<hr>

1.3.2、素材库

要设计网页难免需要一些图片做为点缀或内容表现，所以有一些网站专门提供素材给设计师使用

位图素材：
- 花瓣网：https://huaban.com/（国内）
- pinterest:https://www.pinterest.com/ (国外,不一定能访问）
矢量图素材：https://www.iconfont.cn（国内)

二、超级链接

a:a是在HTML中，超链接的标签。可以实现web页面展示内容的跳转。可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置超链接，这个叫做“图片超链接”。a标签有两个重要的属性，href和target [ˈtɑːrɡɪt]

href:链接地址
target:打开方式,_self 是默认值，在相同的窗口中打开（替换当前内容）_blank 在新窗口中打开链接

示例

<a href="http://blocklygame.com/guestblockly/zh-hans/index.html" >blockly游戏</a>

2.1、文本超链接

a标签里面是文本的，称为文本超链接，点击a标签里面的文本可以实现页面内容的跳转，如上示例

随堂实验：参考：http://blocklygame.com/web/html/AHref/A001.html，设计A，B两个页面，实现互相链接

2.2、图片超链接

a标签里面是图片的，称为图片超链接，点击a标签里面的图片可以实现页面内容的跳转

<a href="http://blocklygame.com/guestblockly/zh-hans/index.html" >
    <img src="http://blocklygame.com/avatar/2022/Blockly.png">
</a>

a标签里面甚至是可以整个div（div里面可以有任意的内容）

<a href="http://blocklygame.com/guestblockly/zh-hans/index.html">
    <div style="border: solid chocolate 1px;"><!-- 通过Style设置div的边框 -->
        Blockly 游戏
        <br>
        <img src="http://blocklygame.com/avatar/2022/Blockly.png">
    </div>
</a>

2.3、锚点链接

在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到“当前页面”的某一部分。想要实现锚点链接，需要定义2个：

目标元素的id
a标签的href属性指向该id(要再id前面加一个#号)

示例：

<h2><a href="#1">第一个描点</a></h2>
<h2><a href="#2">第二个描点</a></h2>
<hr>
<!-- 为了实现更加明显的跳转效果，这个地方增加一个高度为900px的空白div -->
<div style="height: 900px;"></div>		
<div id="1">
    第一个描点
</div>
<hr>
<div id="2">
    第二个描点
</div>

随堂练习：参考http://blocklygame.com/web/html/Ahref/A003.html，做一个类似的页面

参考页面有一个pdf文档的下载，可见超级链接到指定文档，可以实现文档下载功能

2.4、其它链接

email的链接

<a href = "mailto:zzcaism@163.com">给我发email（有安装email客户端才有效）</a>

手机号码链接

<a href="tel:13959655410">拨打手机（手机上面打开才有效）</a>

ftp链接

<a href = "ftp://服务器IP地址或域名">链接的文字</a>

三、表单

表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。本阶段只需要做页面效果，不需要管数据处理。

我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

常见表单标签有5种：form、input、textarea、select和option

创建一个表单，就像创建一个表格，我们也必须要把所有表单标签放在form标签内部。

3.1、input标签

3.1.1单行文本框（type=“text”)

常用属性
- value:设置文本框的默认值
- size:设置文本框的长度
- maxlength:设置文本框最多可以输入的字符数

示例：

<input type="text" value="li ping" size="30px" maxlength="10" id="name"/>

和lable标签配合使用，label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来

示例:以下代码实现点击姓名的时候，文本框会获取到输入的焦点(focus)，去掉label的for属性或input的id属性，点击姓名时的关联效果都不会出新

<label for="name">姓名:</label>
<input type="text" value="li ping" size="30px" maxlength="10" id="name"/>

3.1.2、密码文本框(type=“password”)

常用属性
- value:设置文本框的默认值
- size:设置文本框的长度
- maxlength:设置文本框最多可以输入的字符数

示例：

<input type="password" />

3.1.3、单选文本框（type=“radio”)

常用属性
- name:表示单选框所在的组名
- value:表示单选框的取值
- checked:表示选中某一个选项(有这个属性表示默认选中，没有表示默认不选中)

示例：

<h3>同一组的两个单选框</h3>
<hr>
<input type="radio" name="组名1" value="取值" checked>选项一</input>
<input type="radio" name="组名1" value="取值" checked>选项二</input>
<!-- 同一组只能有一个单选框设置属性checked，我们两个都设置的情况下，第一个会被第二个影响，变成没有选中的状态 -->
<h3>不同组的两个单选框</h3>
<hr>
<input type="radio" name="组名2" value="取值" checked>选项一</input>
<input type="radio" name="组名3" value="取值" checked>选项二</input>
<!-- name不同表示两个单选框是不同的组，可以同时处于选中的状态-->

对于单选框，加上value与没加上好像没啥区别啊？为啥还加上呢？

value属性取值一般跟后面的文本相同，之所以加上value属性，是为了方便JavaScript或者服务器操作数据用的。是取值的时候才有用到的。

3.1.3、复选框(type=“checkbox”)

常用属性
- name:表示单选框所在的组名
- value:表示单选框的取值
- checked:表示选中某一个选项(有这个属性表示默认选中，没有表示默认不选中)

示例：

<h3>同一组的两个复选框</h3>
<hr>
<input type="checkbox" name="组名" value="取值" checked>选项一</input>
<input type="checkbox" name="组名" value="取值" checked>选项二</input>			
<!-- 同一组可以有多个复选框设置属性checked -->

3.1.4、按钮

三种按钮，type分别是

button:普通按钮
submit：提交按钮
reset：重置按钮

示例

<input type="button" style="width: 120px;height: 35px;" value="确定" onclick="HandleClick" />

按钮重要的是按下去的时候执行的代码，这个后面javascript课程会详细解说。

<input>做按钮用得不多，因为html几乎所有标签都支持按下去执行代码的功能，所有button有许多替代的做法，重要的是把外观展示出按钮的样子就可以了，比如可以用<div>做按钮，也可以用<span>做按钮

3.1.5、文件上传(type=“file”)

实现文件上传的功能，需要和后端配合

3.2、textarea 标签

常用属性

cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。

示例：

<textarea rows="3" cols="20">这个是多行文本框，可以实现多行文本输入，多用于备注信息的输入</textarea>

3.3、select标签

下拉列表由select和option这2个标签配合使用来表示。

select常用属性
- multiple[ˈmʌltɪpl] :下拉列表可以选择多项
- size:下拉列表显示几个列表项
option常用属性
- selected:是否选中
- value:选项值

示例

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab" selected>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

四、框架

在HTML中，我们可以使用iframe标签来实现一个内嵌框架。

常用属性

width:宽度
height:高度

示例

<h1>我把网易包进来了</h1>
<hr />
<iframe src="https://www.163.com/" width="800" height="300"></iframe>

作业

一、理论知识

1、在img标签中，（     ）属性的内容是提供给搜索引擎看的。
         A. src          B.alt          C.title           D.class
2、下面说法，正确的是（     ）。
		A.当鼠标移到图片上时，就会显示img标签alt属性中的文字
        B. src是img标签必不可少的属性，只有定义它之后图片才可以显示出来
        C. 在实际开发中，我们常用的是绝对路径，很少用到相对路径
        D. 如果想要显示一张动画图片，可以使用png格式来实现
3、想要使得超链接以新窗口的方式打开网页，需要定义target属性值为（     ）。
        A. _self           B._blank        C._parent                 D. _top
4、我们可以使用（     ）快速定位到当前页面的某一部分。
        A. 外部链接               B.锚点链接
        C. 特殊链接               D.target属性
5、下面有关超链接的说法中，正确的是（     ）。
        A. 不仅文本可以设置超链接，图片也可以设置超链接
        B. 锚点链接属于外部链接的其中一种
        C. 可以使用src属性指定超链接的跳转地址
        D. 可以使用target="-blank";指定超链接在新窗口打开
6、大多数表单元素都是使用（     ）标签，然后通过type属性指定表单类型。
        A. input            B. textarea              C. select                  D.option
7、下面表单元素中，有value属性的是（    ）。
        A. 单选框          B.复选框               C.下拉列表           D.以上都是
8、单行文本框使用（    ）实现，密码文本框使用（    ）实现，多行文本框使用（    ）实现。
        A. <textarea></textarea>                     B.<input type="texarea" />
        C. <input type="text" />                       D.<input type="password" />
9、如果想要定义单选框默认选中效果，可以使用（    ）属性来实现。
        A. checked          B.selected            C.type                 D.以上都不是
10、在表单中，input元素的type属性取值为（    ）时，用于创建重置按钮。
        A. reset               B. set                     C. button             D.submit
11、下面有关表单的说法，正确的是（     ）。
        A. 表单其实就是表格，两者是一样的
        B. 下拉列表不属于表单，而是属于列表的一种
        C. 在表单中，group属性一般用于单选框和复选框分组
        D. 在表单中，value属性一般是为了方便JavaScript或服务器操作数据用的
12、下面对于按钮的说法，不正确的是（     ）。
        A. 普通按钮一般情况下都是配合JavaScript来进行各种操作的；
        B. 提交按钮一般都是用来给服务器提交数据的；
        C. 重置按钮一般用来清除用户在表单中输入的内容
        D. 表单中的按钮更多的是使用button标签来实现       
13、在下图的目录结构中，blog与img这两个文件位于同一层级，如果我们想要在page1.html中显示haizei.png这张图片，正确的路径写法是（     ）。
        A. <img src="../../img/haizei.png" alt=""/>
        B. <img src="../img/haizei.png" alt=""/>
        C. <img src="img/haizei.png" alt=""/>
        D. <img src="../blog/img/haizei.png" alt=""/>

在这里插入图片描述