您的位置: 首页  >  文章  >  夜光带你走进 前端工程师（三）

夜光带你走进 前端工程师（三）

分类: 文章 • 2024-12-08 09:58:16

夜光序言：

 

 

 

失去兴趣的奋斗，就算你有顽强的毅力，那也只不过是镜花水月。但是这样的奋斗却能不断的磨练我们的毅力~

 

 

 

夜光带你走进 前端工程师（三）

正文：

 

 

<input type="text">
 <datalist>
     <option>苹果</option>
     <option>香蕉</option>
     <option>西瓜</option>

 

对比一下发现 ：不可以注释掉<!--   <input type="text">-->，必须要用text引导

<!--   <input type="text">-->
    <datalist>
        <option>苹果</option>
        <option>香蕉</option>
        <option>西瓜</option>
    </datalist>

 

<input type="text" list="datalist"> <!-- //要把id引导进去，所以就写datalist-->
 <datalist id="datalist">  <!--//id 指明一个特殊身份-->
     <option>苹果</option>
     <option>香蕉</option>
     <option>西瓜</option>
 </datalist>

效果图：见下图

夜光带你走进 前端工程师（三）

Boolean型变量：两种逻辑状态值，包含两个值：真和假  true/false,on/off,1/0   {适当了解}

 

 

1：input获取有规定格式的字符串

2：input获取时间

3：input 获取颜色值

4：input获取搜索用词

5：input生成隐藏的数据项

6：input生成图像按钮

7：input上传文件

1：input获取有规定格式的字符串

夜光带你走进 前端工程师（三）

<input type="date">

//那个，IE浏览器不可以显示效果，嘿嘿

 

 

<input type="date">
<input type="color">  //获取颜色的方式

<input type="file">

夜光带你走进 前端工程师（三）

当type=file 时上传文件

一：Multiple

一次允许上传多个文件

二：Required

必须上传一个文件

 

高级程序：

使用input元素上传文件提交表单时，设置如下内容：

 

<form enctype=”multipart/form-data”></form>

 

高级：Html5嵌入图片与创建分区响应图

1：<img>元素

  Src:设置图片的位置

  Width:设置图片的宽度

  Height：设置图片的高度

  Alt:设置图片的备用内容

 

 

<head>
    <meta charset="UTF-8">
    <title>创建图片</title>
</head>
<body>
    <a href="biaodan%20test3.html" target="_blank">
    <img src="sheji.jpg" alt="下载">
    </a>
    <br><br>
    <img src="sheji.jpg" width="128px" height="100px">
</body>
</html>

夜光带你走进 前端工程师（三）

 

 <a href="biaodan%20test3.html" target="_blank">
    <img src="sheji.jpg" alt="下载">
    </a>

针对 <img src="sheji.jpg" alt="下载">设置了一个超链接

 <a href="biaodan%20test3.html" target="_blank">
target="_blank" {调整到另外一个页面}

 

思考{高级}：

如何创建一个图像的超链接，用<a href=“”> <a> 标签

 

 

高级操作：

创建客户端分区响应图

原理：通过点击某张图像上的不同区域让浏览器到不同的URL上

元素

作用介绍

<map>

客户端分区响应图的关键元素

<area>

可以有多个，每个各自代表图像上可被点击的一块区域

 

Area元素属性：分为两类

 

 

 

 

一张图片有六块区域，那么要设置六个area元素来控制

难点：

area元素属性：分为两类

第一类：点击后导航到制定URL

属性

作用介绍

Href

该区域被点击时浏览器应该加载的URL

Alt

定义图片的备用内容

 

第二类：shape属性和coords属性，共同起作用

标明用户可以点击的各个图像区域

Shape值

Coords属性的值解析

Rect

这个值代表一个矩形区域，用四个逗号分隔的整数组成

1：图像左边缘

2：图像上边缘

3：图像右边缘

4：图像下边缘

Rect:举个例子：

<area href="time.html" shape="rect" coords="8，2，150，195" target="_blank">
<area href="">
<area>

Circle

这个值代表一个圆形区域，用三个逗号分隔的整数组成

1：图像左边缘到圆心的距离

2：图像右边缘到圆心的距离

3：圆的半径

Poly

这个值代表一个多边形，至少包含六个逗号分割的整数组成，每一对数字各代表多边形的一个顶点

Default

默认，整张图片，不需要coords值

 

相关推荐