index的注释和理解之HTML-body部分

1、分块<div>

搜索框：（body部分）

伪装成一个搜索框，一般都是<input>标签+<button>标签

<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="关键字" x-webkit-speech>
 <button class="btn" title="SEARCH"> </button>
</fieldset>
</form>

其中 x-webkit-speech 支持语音输入功能

<input>标签用于搜集用户信息，根据不同的type属性值，输入字段拥有很多种形式，输入字段可以是文本字段、

复选框、掩码后的文本控件，单选按钮、按钮等等

<input>标签 placeholder属性

定义与用法：

placeholder 属性提供可描述输入字段预期值的提示信息（hint）

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的<input> 类型：text，search，url，telephone，email以及password。

延伸另一种搜索框方法：<input>标签的 search属性

实例：实现一个文字搜索功能，要求输入时，键盘回车按钮提示显示为“搜索”。

1、input type=text 并不能达到这种效果，使用type=search可以做到（但需要input type=search外面包上一层带action属性的form)

 <div class="search-input-wrap clearfix">

<div class="form-input-wrap f-l"> 

 <form action="" class="input-kw-form"> 

 <input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw"> 

 </form> 

 <i class="iconfont if-message"></i> 

 <i class="iconfont if-close"></i>

</div> 

 <i class="search-cancel f-l">取消</i> 

 </div>

作者：EvelynJS
链接：http://www.jianshu.com/p/f3878babccee
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明。

a.type=search会有很多默认样式和行为

。会默认下拉框显示搜索历史记录

设置input autocomplete =“off”去掉弹出的下拉框

。输入时自动弹出”X“

取消：

input[type="search"]::-webkit-search-cancel-button{
  display: none;
}

。IOS手机输入框是椭圆形

-webkit-appearance: none;

。同时，如果提交搜索时想使用Ajax，那么可以阻止表单的默认行为

container.on('submit', '.input-kw-form', function(event){
    event.preventDefault();
})

这是画图软件画的初始图片，后来有人推荐给我一个在线绘图工具感觉很好用https://www.processon.com/

画出来的效果

怎么感觉我画的比较好看哈哈哈哈哈