Effective前端2:优化html标签

mspn7358 8年前
   <p style="text-align:center"><img src="https://simg.open-open.com/show/bf4d64c3628a0e0325d48fdae2b22ac3.png"></p>    <p>借用Effective之名,开始写Effective系列,总结一些前端的心得。</p>    <p>有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有margin、background等初始化设置,另外可能会觉得不用div还能用啥。所以看他的页面,一展开是div,再展开还是div,展开四、五层都是div。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/24d1bb951634ec7bf22aee934370b3a2.png"></p>    <p>这样对用户来说虽然没什么区别,但是作为一名有追求的程序员,这种写法看起来是比较难受的。有些人虽然知道html5新增了很多标签,但也不怎么去研究它的用法,反正用传统的div不是挺好的,为啥要去用兼容性不好的新东西。但是要是人人都这么想的话,新技术就不会发展了。有不一样或者更好的选择,当然要尝试下。</p>    <p>补充一点,并不是说使用div不好,该用div还是得用div,只是有其它更好的选择时应该选用其它的。</p>    <h2><strong>选用合适的标签</strong></h2>    <p>1. 如果它是一段文字,那就用p标签吧,如果它是一个标题,那就用h1~h5标签吧,像下面这样:</p>    <pre>  <code class="language-javascript"><pclass="title">你好,我是一个标题</p>  </code></pre>    <p>明明知道它是一个标题,为什么不用标题标签呢:</p>    <pre>  <code class="language-javascript"><h2>你好我是一个真实的标题</h2>  </code></pre>    <p>这样有个好处,让你的标签多样化,写样式的时候用标签选择器,就不用套很多的class</p>    <p>2. 如果它是一个表单,那就用form吧,用form用很多优点,我在里面已经提到两点,第一点是自动表单提交,通过写一个form的 action 就能实现自动搜索跳转:</p>    <pre>  <code class="language-javascript"><formid="search-form" action="/search">      <inputtype="search" name="keyword">      <inputtype="number" name="price">  </form>  </code></pre>    <p>而不用自己去获取每个input的值,然后去拼参数跳转。</p>    <p>第二点是,自动监听回车事件提交,只要写一个form,里面有input,用户按回车就能自动提交,而不用自己去监听keypress事件处理。</p>    <p>除了这两点之外,写一个form还有一个很大的好处,当你用传统的jquery的选择器获取表单值的时候:</p>    <pre>  <code class="language-javascript"><div>      <inputid="user-name">      <inputid="password">  </div>  <script>  var userName = $("input#user-name").val(),      password = $("input#password").val();  </script>  </code></pre>    <p>在这里,你为了获取两个表单数据,查了两次DOM,假设你有10个,就得查10个,如果是20个呢,对性能就会有影响了吧,特别是在移动端。但是如果你把div换成form,情况就不一样了:</p>    <pre>  <code class="language-javascript"><formid="register">      <inputname="user-name">      <inputname="password">  </form>  </code></pre>    <p>在获取表单数据时,可以这样用:</p>    <pre>  <code class="language-javascript">var form = document.forms.namedItem("register");  //var form = document.getElementById("register"); 或者这样写  var userName = form["user-name"].value,      password = form.password.value;  </code></pre>    <p>只需要用原生的form属性就可以获取到表单的input,不用jquery,不用查DOM。同时这样有个弊端,就是当那个name的input不存在时,form.password是undefined,然后再获取value就挂了,但是这样早点暴露问题在某些情况下会更好呢</p>    <h3><strong>html5 input</strong></h3>    <p>htm5提供了很多类型的input,使用这些input有很多好处,游览器会根据不同的input做出相应的优化,例如在iphone上,使用不同的input会弹出不同的键盘:</p>    <p><input type=”email”></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e922716375ade1242e0f9e54a6cf219b.png"></p>    <p><input type=”number”></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/c8baab69ff881a42de0e0c564cc60e5a.png"></p>    <p><input type=”tel”></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/58a7bc13f54776d31d0ec4dacefca4a0.png"></p>    <p>iphone弹不同类型的键盘,方便输入</p>    <p>即使在非html5浏览器也可以用,因为对不认识的type,浏览器会把它当作默认的text,唯一一个有兼容性的问题就是IE8、IE9会把不认识的input强制设置成text,即一访问页面,IE会把html里面的 <input type="email"> 强制渲染成 <input type="text"> ,这样就导致你没办法用CSS/JS根据这个type控制:</p>    <pre>  <code class="language-javascript">//will not work on ie8/ie9  input[type=email]{        }  </code></pre>    <p>不过,动态设置的type是可以生效的。初始化渲染的时候会被干掉。但是这个的影响应该不会很大。笔者还写了一个html5 input的表单验证插件,为了统一html5表单各浏览器处理不一致的问题,详见: <a href="/misc/goto?guid=4959717152901532825" rel="nofollow,noindex">实现跨浏览器html5表单验证</a></p>    <p>还有一个小坑,就是 <input type="number"> 在Chrome下面是不允许输入逗号的,如果要支持输入逗号就不能用number了。</p>    <p>其它的:</p>    <p>如果内容是一个表格,那就用table,table有自适应的优点;</p>    <p>如果是加粗就用b/strong,而不是自己手动设置font-weight,这样有个好处,以后要更改字体,只需要设置b/strong的font-family,如果是手动写的font-weight,那就得一个个去找了;</p>    <p>如果是图片,那就用img,并且写上alt,帮助seo以及做为图片加载不出来显示的帮助文案;同时还可以用picture/srcset做响应式图片;</p>    <p>如果是输入框,就写个input,而不是自己写个p标签,然后设置contenteditable属性,因为这样在iphone上光标的定位会有问题;</p>    <p>如果是跳链那就写个a标签,而不是自己用javascript监听点击事件,然后自己做跳转。因为用a标签可以让搜索引擎爬取整个网站的内容,并且用a标签还有个好处,就是在手机端上滑的时候不会触发touchstart,如果自己做的跳转,要么用click,要么得搞个click增强库,笔者习惯这样写:</p>    <pre>  <code class="language-javascript"><ul>      <li>          <astyle="display:block;color:inherit">              <imgsrc="pic.jpg">              <p>desc</p>          </a>      </li>  </ul>  </code></pre>    <h2><strong>使用html5语义化标签</strong></h2>    <p>html5新增了很多语义化标签,一个传统的html4的页面结构:</p>    <pre>  <code class="language-javascript"><ulclass="nav">      <li></li>  </ul>  <divclass="header"></div>  <divclass="main">      <divclass="section"></div>      <divclass="section"></div>  </div>  <divclass="footer"></div>  </code></pre>    <p>可以用html5的新标签改装一下:</p>    <pre>  <code class="language-javascript"><nav></nav>  <header></header>  <main>      <section></section>      <section></section>  </main>  <footer></footer>  </code></pre>    <p>这样除了语义化的特点,更重要的是页面的组织发生了根本的变化,以前你在html4只能写一个h1标签,现在你可以写很多个h1标签。因为html5的页面大纲不再是根据h1、h2等标签进行划分,而是根据页面的章节。如下:</p>    <pre>  <code class="language-javascript"><body>      <h1>Effective2</h1>      <section>          <h1>使用合适的标签</h1>          <section><h2>使用form</h2></section>          <section><h2>使用a标签</h2></section>      </section>      <section>          <h1>使用h5标签</h1>      </section>  </body>  </code></pre>    <p>搜索引擎会把这个页面概括为以下大纲:</p>    <p>Effective2</p>    <ol>     <li> <p>使用合适的标签</p>      <ol>       <li> <p>使用form</p> </li>       <li> <p>使用a标签</p> </li>      </ol> </li>     <li> <p>使用h5标签</p> </li>    </ol>    <p>读者可以从这个网站: <a href="/misc/goto?guid=4958854084211912649" rel="nofollow,noindex">html5 outliner</a> 进行实验。</p>    <p>上面我们用了section进行划分章节,除了section之外,还有article、nav、aside,这四个标签可以互相嵌套划分层级关系,就像上面那样,section又嵌套了section,而每一个层级都可以任意h1~h5标签,同一个层级根据标题标签主次划分。</p>    <p>这四个标签和div区别如下:</p>    <ol>     <li> <p>div :作为一个普通的容器使用</p> </li>     <li> <p>section :作为一个普通的章节</p> </li>     <li> <p>article :独立性较强,例如笔者的这篇博客外层就用的article标签</p> </li>     <li> <p>aside :可用作和页面主题内容相切的容器,像侧边栏、评论,像这篇博客底部的评论就用的aside</p> </li>    </ol>    <p> </p>    <p> </p>    <p> </p>    <p>来自:http://yincheng.site/make-the-best-of-html-label</p>    <p> </p>