整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML禁止input,select等输入框页面缓存技巧

要:禁止input缓存,禁止select缓存

有时候,我们页面的输入框,类似:

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

我们再页面里输入内容后,并不保存,但是刷新页面会发现值为输入的页面,完全没有从新去从后台取值,这是怎么回事呢?其实多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,很简单,只需要价格属性即可:autocomplete=”off”

例如上面例子,改为如下就不会缓存啦:

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

听说还有一种直接加在form表单里也可以,但是因为我已经很久没有用form表单提交数据啦,都是用ajax异步提交的,所以我就没有采取这种方法,也很简单的如下:

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

当然,没试过不知道行不行,应该是没问题的!

先,我们来理解一下一个网页的基本组成

代码如下


一个网页是有许许多多的标签对组成的,即开始标签-结束标签,都是成对出现(当然我们后面会说的还存在单标签,表示自闭合标签,例如:<br />)

对上述的标签先来解释一下

html------------超文本标记语言,浏览器识别的语言,主要负责页面的内容和结构

head------------标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

body------------元素定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)


HTML常用基础标签用法及实例

1. <!--注释-->

2. <!--DOCTYPE 声明文档类型-->

3. <!--a--><a href="http://www.baidu.com/">百度一下</a></br><!--超链接标签-->

4. <!--address--><address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息.-->

</address>

5. <!--5.article <article> 标签规定独立的自包含内容。-->

<article>

<h1>百度</h1>

<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。</p>

</article>

6. <!--6.aside <aside> 标签定义其所处内容之外的内容。-->

<p>123123</p>

<aside>

<h1>文本之外的内容</h1>

<p>我也是文本之外的内容</p>

</aside>

7.<!-- audio video-- <audio> 标签定义声音,比如音乐或其他音频流。

<audio src="/i/horse.ogg" controls="controls>

</audio>

8.<!--b 文本加粗-->

<p>普通文本--<b>粗体文本</b></p>

9.<!--big -->

<big>大号字体</big><br>

10.<!-- body body 主体内容-->

11.<!-- br 给文本换行-->

12.<!--button <bubtton> 标签定义一个按钮。-->

<button type="button">点击领取</button>

13.<!--center 对其所包括的文本进行水平居中。-->

14.<!--dl dd dt <dd> 在定义列表中定义条目的定义部分。-->

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

15.<!--del ins <del>定义文档中已被删除的文本。 <ins> 标签定义已经被插入文档中的文本。-->

<p>你叫<del>张3</del><ins>文字</ins>吗?</p>

16.<!--div p h1-h6 div是块标签 p是段落标签 h1-h6是标题标签根据h后面数值调整大小-->

17.<!--em span i strong <em>把文本定义为强调的内容。<span> 标签被用来组合文档中的行内元素。

<i> 标签显示斜体文本效果。<strong>把文本定义为语气更强的强调的内容。

-->

<em>强调文本内容</em>

<p><span>组合文档中的行内元素</span>你好啊</p>

<i>斜体文本</i><br>

<stong>内容重要</strong>

18.<!--footer nav <footer> 标签定义文档或节的页脚。<nav> 标签定义导航链接的部分.-->

<footer>

<p>联系邮箱:<a >href="1758539486@qq.com">1758539486@qq.com</a></p>

</footer>

<nav>

<a href="http://www.baidu.com">百度</a>|

<a href="http://www.douyu.com">斗鱼</a>

</nav>

19.<!-iframe iframe 元素会创建包含另外一个文档的内联框架(即行内框架)-->

20.<!--hr html-- <hr>文本分割线 <html>根文件-->

21.<!--img input label-- img 元素向网页中嵌入一幅图像。

<input>--表单标签(一共八种类型) 如下所示:

<input type="radio" name=""value="单选"/>
<input type="checkbox" name=""value="选择"/>
<input type="submit" name=""value="提交"/>
<input type="button" name=""value="按钮"/>
<input type="password" name=""value="密码"/>
<input type="text" name=""value="文本"/>
<input type="reset" name=""value="清空"/>
<input type="hidden" name=""value="隐藏"/>

<label> 标签为 input 元素定义标注(标记)。

-->

<img src="img/Advertisement_03-3.jpg" alt="" /><br>

<label for="男">男</label>

<input type="radio" name="sex" id="男">

<input type="submit" name="提交" >


22.<!--ol ul li <ol>有序列表 <ul>无序列表 <li>列表项目-->

23.<!--link script <link>标签最常见的用途是链接样式表。<script> 标签用于定义客户端脚本,比如 JavaScript。-->

24.<!--select option <select> 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项。-->

<select name="">

<option value="">请选择</option>

<option value="">选项一</option>

<option value="">选项二</option>

<option value="">选项三</option>

<option value="">选项四</option>

</select>

25.<!--textarea <textarea> 标签定义多行的文本输入控件。-->

<textarea></textarea>

resize禁止拉伸文本框

outline取消文本框选中的颜色

Text-indent:2em首行缩进两个字符


希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。

天这篇文章主要带大家学习一下meta robots和nofollow的使用方法。众所周知,从网站优化的角度来说,站长制作网站如果想获得更多的流量就需要不断优化关键词,不断提升关键词的排名,但是并不是网站的每一个页面都需要参与排名的。比如“公司地址”、“在线报名”等栏目页面,肯定没有人通过搜索“在线报名”这个词语来到我们的站点还进行报名了,这看着都玄乎。 所以我们站点中并不是每一个页面都需要参与搜索引擎排名的,而是通过使用meta robots和nofollow等标签将网站的权重集中到需要参与排名的页面。下面我们来讲解一下meta robots和nofollow的基础语法和使用方法。

一、meta robots标签

meta robots标签是页面HTML代码中head标签中的一部分,它的作用是禁止搜索引擎索引本页面,此页面将不会出现在搜索引擎搜索结果中。

meta robots标签中没有大小写之分,最简单的meta robots书写格式为:

<meta name="robots" content="参数">

meta name="robots"代表着所有的搜索引擎,也可以针对某一个搜索引擎,只需要将robots替换成搜索引擎的蜘蛛名称即可。content指令有六个选项,分别是index、follow、noindex、nofollow、all和none,它们的含义分别是:

index:指令搜索引擎可以索引本页面;

noindex:指令搜索引擎禁止索引本页面;

follow:指令搜索引擎可以跟踪本页面上的链接;

nofollow:指令搜索引擎禁止跟踪本页面上的链接;

all:相当于index和follow指令的总和,指令搜索引擎既可以索引本页面,也可以跟踪页面上的链接;

none相当于noindex和nofollow指令的总和,指令搜索引擎禁止索引本页面和跟踪页面上的链接;

content中的参数可以写在一起,以逗号隔开。根据上面的指令,我们可以组合六种组合:

<meta name="robots" content="index,follow">

也可以写成

<meta name="robots" content="all">

上述指令的意思是告诉搜索引擎可以索引本页面,也可以跟踪页面上的链接;

<meta name="robots" content="noindex,follow">

上述指令的意思是告诉搜索引擎禁止索引本页面,但可以跟踪页面上的链接;

<meta name="robots" content="index,nofollow">

上述指令的意思是告诉搜索引擎可以索引本页面,但禁止跟踪页面上的链接;

<meta name="robots" content="noindex,nofollow">

也可以写成

<meta name="robots" content="none">

上述指令的意思是告诉搜索引擎禁止索引本页面和跟踪页面上的链接;

二、nofollow属性

这里所说的nofollow属性和上面讲解的meta robots中的nofollow是两个不同的概念,严格意义上来说,nofollow属性不算作一个标签,只是a标签的一个属性,使用格式是:

<a href="网站域名" rel="nofollow">锚文字</a>

链接中的nofollow属性只适用于本链接,意思是告诉搜索引擎不要跟踪本链接,也不传递权重。

nofollow标签常用于博客的评论系统、论坛帖子和一些可以留言的地方,因为这些地方任何用户都可以留下自己的站点链接,所以也是垃圾链接出现最多的地方。这种情况下一般站长会有两个选择,一是所有评论和回复全部需要审核,二是在所有可以评论和回复的地方系统自动审核,一旦出现外部链接,系统会自动添加nofollow属性。

另外搜索引擎对nofollw属性的处理方式也不同,百度会视为此链接完全不存在,既不传递权重,也不浪费权重。Google的做法是不传递权重但会浪费权重,添加nofollow属性的页面的权重将会消失,所以在做英文站点的时候添加nofollow一定要慎重,有可能适得其反。

三、meta robots和robots.txt的区别

meta robots是禁止收录的意思,而网站根目录中的robots.txt是禁止抓取的意思。

这里需要提醒大家的是,在SEO优化中抓取和收录是两个不同的概念,站长可以自由设置网站中的某些页面可以被抓取,也可以设置某些页面不被抓取,但是搜索引擎抓取的页面不一样就会被收录,搜索引擎抓取的页面会暂时被放到搜索引擎的临时库中,一些被搜索引擎认为不可读、无用的页面会被搜索引擎舍弃掉,只要被搜索引擎认为有价值的页面才会被放到索引库中,才有排名机会。其实我们常常说的收录就是搜索引擎的索引量。