您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

7个让你惊叹的HTML技巧

时间:2021-08-13 14:12:54  来源:  作者:杭州程序员小张

我们倾向于使用htmlcssJAVAScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?

下面是一些很酷的HTML技巧,你可以用它来建立一个真正的动态网站。

技巧1. Image Maps

image map基本上是具有可点击区域的图像。我们可以使用该可点击区域链接到网页的其他部分、文档或新链接。

好吧,并不是每个人都知道 <map> 元素可以定义用户可以单击的图像区域。我们需要做的就是使用 <area> 元素并在 <map> 元素中提及其对应的 XY 坐标。

下面是一个例子,你的网站访问者可以在点击世界地图的不同大洲时了解你在全球的业务。

<h1 style="text-align:center;">World Map</h1>
<h4 style="text-align:center;">➤ Click on the dots in the map to get respective continent information</h4>
<map name="continents_map">
<area shape="circle" coords="70,70,10" href="https://en.wikipedia.org/wiki/North_America">
<area shape="circle" coords="133,185,10" href="https://en.wikipedia.org/wiki/South_America">
<area shape="circle" coords="270,137,10" href="https://en.wikipedia.org/wiki/Africa">
<area shape="circle" coords="292,44,10" href="https://en.wikipedia.org/wiki/Europe">
<area shape="circle" coords="469,201,10"
href="https://en.wikipedia.org/wiki/Australia">
<area shape="circle" coords="374,65,10" href="https://en.wikipedia.org/wiki/Asia">
<area shape="circle" coords="340,267,10" href="https://en.wikipedia.org/wiki/Antarctica">
</map>
<figure style="text-align:center;">
<img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />
</figure>
7个让你惊叹的HTML技巧

 

技巧2:Icon Adder

Icon Adder基本上是指使用图标代替网站图标。

你只需要在body标签内的link标签中包含你的源图像文件的路径链接。

<!DOCTYPE html>
<html>
<head>
<title>Icon Adder</title>
<meta name="theme-color" content="green;">
<link rel="icon" href="download.jpg"
type="image/x-icon"/>
<style>
.container {
text-align: left;
}
h1 {
color: darkred;
}
</style>
</head>
<body>
<div class="container">
<h1>Hi, I am NISHI KASHYAP!!</h1>
<b>You can see the icon adder above in place of the favicon.</b>
</div>
</body>
</html>

输出

7个让你惊叹的HTML技巧

 

技巧3:允许用户选择背景颜色

使用此技巧,网站访问者只需将鼠标指针拖到书面文本的某些字母上即可更改其网页的背景颜色。

例子:在这种情况下,访问者可以通过将鼠标指针拖到“Drag Your Mouse Over Letters To Change Colors!”的文字上来改变颜色。

<center>
<a href="" onmouseover="document.bgColor='turquoise'">D</a>
<a href="" onmouseover="document.bgColor='pink'">r</a>
<a href="" onmouseover="document.bgColor='blue'">a</a>
<a href="" onmouseover="document.bgColor='red'">g</a>
<a href="" onmouseover="document.bgColor='yellow'">Y</a>
<a href="" onmouseover="document.bgColor='green'">o</a>
<a href="" onmouseover="document.bgColor='white'">u</a>
<a href="" onmouseover="document.bgColor='teal'">r</a>
<a href="" onmouseover="document.bgColor='olivedrab'">M</a>
<a href="" onmouseover="document.bgColor='green'">o</a>
<a href="" onmouseover="document.bgColor='seagreen'">u</a>
<a href="" onmouseover="document.bgColor='magenta'">s</a>
<a href="" onmouseover="document.bgColor='fusia'">e</a>
<a href="" onmouseover="document.bgColor='purple'">O</a>
<a href="" onmouseover="document.bgColor='navy'">v</a>
<a href="" onmouseover="document.bgColor='green'">e</a>
<a href="" onmouseover="document.bgColor='white'">r</a>
<a href="" onmouseover="document.bgColor='royalblue'">L</a>
<a href="" onmouseover="document.bgColor='Skyblue'">e</a>
<a href="" onmouseover="document.bgColor='almond'">tt</a>
<a href="" onmouseover="document.bgColor='coral'">e</a>
<a href="" onmouseover="document.bgColor='brown'">r</a>
<a href="" onmouseover="document.bgColor='almond'">s</a>
<a href="" onmouseover="document.bgColor='coral'">To</a>
<a href="" onmouseover="document.bgColor='olivedrab'">C</a>
<a href="" onmouseover="document.bgColor='teal'">h</a>
<a href="" onmouseover="document.bgColor='pink'">a</a>
<a href="" onmouseover="document.bgColor='blue'">n</a>
<a href="" onmouseover="document.bgColor='red'">g</a>
<a href="" onmouseover="document.bgColor='yellow'">e</a>
<a href="" onmouseover="document.bgColor='green'">C</a>
<a href="" onmouseover="document.bgColor='olivedrab'">ol</a>
<a href="" onmouseover="document.bgColor='black'">or!</a>
</center>

输出

7个让你惊叹的HTML技巧

 


7个让你惊叹的HTML技巧

 

技巧4:添加Title Tooltip

Tooltip是“HTML中使用的一个概念,用于显示关于特定选定元素的一些额外信息”。

这个技巧基本上显示了当访问者将鼠标指针悬停在一个元素上时,网站创建者提供的额外信息。

语法

<span title="Can you see this? This is the tooltip.:)">Drag Your Mouse Over Me!</span>

输出

7个让你惊叹的HTML技巧

 

技巧5:语音识别

此功能类似于您在 google 搜索文本框中看到的功能,其中语音识别功能可帮助您将句子放入输入字段。

当你使用语音识别输入时,在输入字段的边上会有一个小的麦克风图标显示,当访问者点击该语音图标时,他们的声音会被记录下来并作为用户的输入。

为此,您只需将 x-webkit-speech 属性添加到输入框。

<input type="text" x-webkit-speech />

让我给你看一个例子:

<!DOCTYPE html>
<html>
<head>
<title>Voice Recognition</title>
<style>
.container {
text-align: center;
}

h1 {
color: darkred;
}
</style>
</head>

<body>
<div class="container">
<h1>Voice Recognition Field</h1>
<input type="text" x-webkit-speech>
<i><br><br>The above field  accepts the input as a Voice.<i>
</div>
</body>
</html>

输出,然而,在实时服务器中,你会看到这个:

7个让你惊叹的HTML技巧

 

但当你从其他浏览器查看时,你也会看到输入栏中的麦克风图标,用户可以通过它输入语音。

技巧6:隐藏字段

能够公开查看内部字段被Reddit士兵称为“编程恐怖”——毫无疑问,没有人想在自己的网站上体验这种恐怖。

但是这个问题可以通过使用HTML的隐藏字段特性来解决。

一个隐藏字段可以让web开发人员控制哪些数据可以被修改,哪些数据不能被修改,以及当用户提交表单时需要更新的记录。

语法

<input type="hidden">

它是这样工作的:

<!DOCTYPE html>
<html>
<head>
<title>Hide Field</title>
<style>
h1 {
color: darkred;
}
body {
text-align: center;
}
</style>
</head>

<body>
<h1>HIDE FIELD</h1>
<form action="#">
<input type="hidden" id="myFile" value="1234">
Name: <input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>

从上面的代码中,结果输出将是一个访问者无法看到的隐藏字段。

输出

7个让你惊叹的HTML技巧

 

技巧7:输入建议

此功能基本上提供了一个预定义选项的下拉列表,使访问者更容易找到他们正在寻找的内容。

示例:下面的代码让访问者从下拉列表中找到不同大陆的名称,并将其用作输入。

<!DOCTYPE html>
<html>
<head>
<title>Input Suggestions</title>
</head>
<body>

<h1>Choose the Continent</h1>
<input type="text" list="text_editors">
<datalist id="text_editors">
<option value="Africa"></option>
<option value="Asia"></option>
<option value="North America"></option>
<option value="South America"></option>
<option value="Antarctica"></option>
<option value="Europe"></option>
<option value="Australia"></option>
</datalist>
</body>
</html>

输出

7个让你惊叹的HTML技巧

 



Tags:HTML   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML  点击:(22)  评论:(0)  加入收藏
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  Tags: HTML  点击:(322)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  Tags: HTML  点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  Tags: HTML  点击:(26)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: HTML  点击:(99)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML  点击:(343)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  Tags: HTML  点击:(89)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  Tags: HTML  点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  Tags: HTML  点击:(141)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  Tags: HTML  点击:(218)  评论:(0)  加入收藏
▌简易百科推荐
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(322)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(26)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(89)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  简易编程    Tags:meta标签   点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  科技现象    Tags:HTML   点击:(141)  评论:(0)  加入收藏
背景日常工作中,项目编程免不了需要使用配置文件,早期yaml出现之前,大部分配置文件采用xml形式,但是以xml格式储存的数据要比以其他格式(如json、yaml)储存占有的空间要大得多,因为...【详细内容】
2021-06-21  爱读书的程序员    Tags:yaml   点击:(265)  评论:(0)  加入收藏
XML; 是什么? Extensible Markup Languare 可扩展标记型语言 为什么要有XML? 1.HTML的标签是固定的,不可以改变,也不可以进行一个&middot;&middot;&middot;扩展 2.HTML语法松散...【详细内容】
2021-06-01  LeviT    Tags:XML   点击:(193)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  IT洞察者    Tags:Html   点击:(218)  评论:(0)  加入收藏
HTML5语义化与新特性什么是HTML语义化?表示选择合适的标签(语义化标签)便于开发者阅读和写出更优雅的代码为什么要使用语义化标签?1). 在没有CSS样式的情况下,页面整体也会呈现...【详细内容】
2021-03-02      Tags:HTML   点击:(236)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条