相关文章推荐
老实的牛腩  ·  BASSRUSH presents ...·  2 月前    · 
精明的豆腐  ·  任江洲_搜狗百科·  3 月前    · 
不敢表白的小马驹  ·  深交所向*ST众应发出关注函_手机搜狐网·  3 月前    · 
淡定的楼梯  ·  智慧导览小程序·  1 年前    · 
低调的镜子  ·  独家连载| ...·  1 年前    · 
小百科  ›  Effective后端2：优化html标签 – 不会编程的银猪
前端优化 前端开发 前端 input
俊秀的瀑布
10 月前

借用Effective之名，开始写Effective系列，总结一些前端的心得。

有些人写页面会走向一个极端，几乎页面所有的标签都用div，究其原因，用div有很多好处，一个是div没有默认样式，不会有margin、background等初始化设置，另外可能会觉得不用div还能用啥。所以看他的页面，一展开是div，再展开还是div，展开四、五层都是div。

这样对用户来说虽然没什么区别，但是作为一名有追求的程序员，这种写法看起来是比较难受的。有些人虽然知道html5新增了很多标签，但也不怎么去研究它的用法，反正用传统的div不是挺好的，为啥要去用兼容性不好的新东西。但是要是人人都这么想的话，新技术就不会发展了。有不一样或者更好的选择，当然要尝试下。

补充一点，并不是说使用div不好，该用div还是得用div，只是有其它更好的选择时应该选用其它的。

选用合适的标签

1. 如果它是一段文字，那就用p标签吧，如果它是一个标题，那就用h1~h5标签吧，像下面这样：

不好的示例
XHTML
<p class="title">你好，我是一个标题</p>
<form id="search-form" action="/search"> <input type="search" name="keyword"> <input type="number" name="price"> </form>

而不用自己去获取每个input的值，然后去拼参数跳转。

第二点是，自动监听回车事件提交，只要写一个form，里面有input，用户按回车就能自动提交，而不用自己去监听keypress事件处理。

除了这两点之外，写一个form还有一个很大的好处，当你用传统的jquery的选择器获取表单值的时候：

使用jquery获取表单数据
XHTML
<input id="user-name"> <input id="password"> <script> var userName = $("input#user-name").val(), password = $("input#password").val(); </script>
var form = document.forms.namedItem("register"); //var form = document.getElementById("register"); 或者这样写 var userName = form["user-name"].value, password = form.password.value;

只需要用原生的form属性就可以获取到表单的input，不用jquery，不用查DOM。同时这样有个弊端，就是当那个name的input不存在时，form.password是undefined，然后再获取value就挂了，但是这样早点暴露问题在某些情况下是不是更好呢

如果你用jQuery，还可以再增强一下，给表单对象添加一个函数：

添加一个jQuery对象的函数
JavaScript
$.fn.serializeForm = function() var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; return o;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ . fn . serializeForm = function ( )
{
var o = { } ;
var a = this . serializeArray ( ) ;
$ . each ( a , function ( ) {
if ( o [ this . name ] !== undefined ) {
if ( ! o [ this . name ] . push ) {
o [ this . name ] = [ o [ this . name ] ] ;
}
o [ this . name ] . push ( this . value || '' ) ;
} else {
o [ this . name ] = this . value || '' ;
}
} ) ;
return o ;
} ;

不过，动态设置的type是可以生效的。初始化渲染的时候会被干掉。但是这个的影响应该不会很大。笔者还写了一个html5 input的表单验证插件，为了统一html5表单各浏览器处理不一致的问题，详见： 实现跨浏览器html5表单验证

还有一个小坑，就是 <input type="number"> 在Chrome下面是不允许输入逗号的，如果要支持输入逗号就不能用number了。

(1) 如果内容是一个表格，那就用table，table有自适应的优点；

(2) 如果是加粗就用b/strong，而不是自己手动设置font-weight，这样有个好处，以后要更改字体，只需要设置b/strong的font-family，如果是手动写的font-weight，那就得一个个去找了；

(3) 如果是图片，那就用img，并且写上alt，帮助seo以及做为图片加载不出来显示的帮助文案；同时还可以用picture/srcset做响应式图片；

(4) 如果是输入框，就写个input，而不是自己写个p标签，然后设置contenteditable属性，因为这样在iphone上光标的定位会有问题；

(5) 如果是跳链那就写个a标签 ，而不是自己用javascript监听点击事件，然后自己做跳转。因为用a标签可以让搜索引擎爬取整个网站的内容，并且用a标签还有个好处，就是在手机端上滑的时候不会触发touchstart，如果自己做的跳转，要么用click，要么得搞个click增强库，笔者习惯这样写：

使用a标签做跳转
XHTML
<a style="display:block;color:inherit" href="/list?id=1"> <img src="pic.jpg"> <p>desc</p>

读者可以从这个网站： html5 outliner 进行实验。

上面我们用了section进行划分章节，除了section之外，还有article、nav、aside，这四个标签可以互相嵌套划分层级关系，就像上面那样，section又嵌套了section，而每一个层级都可以任意使用h1~h5标签，同一个层级根据标题标签的主次进行划分。

这四个标签和div区别如下：

  • div ：作为一个普通的容器使用
  • section ：作为一个普通的章节
  • article ：适用于独立性较强的内容，例如笔者的这篇博客外层就用的article标签
  • aside ：可用作和页面主题内容相切的容器，像侧边栏、评论，像这篇博客底部的评论就用的aside

    • 关于html5主义化标签的使用可详见笔者的这篇文章：《 html5语义化标签使用规范 》

    这篇博客无外乎说一件事件，站在浏览器的肩膀上进行开发，因为前端是根浏览器打交道的。这与第一篇《 Effective前端1：能使用html/css解决的问题就不要使用JS 》的原理是相通的。

    扩展阅读：

  • Effective前端1：能使用html/css解决的问题就不要使用JS
  • Effective前端2：优化html标签
  • Effective前端3：用CSS画一个三角形
  • Effective前端4：尽可能地使用伪元素
  • Effective前端5：减少前端代码耦合
    • Post Views: 7,366
     
    推荐文章
    老实的牛腩  ·  BASSRUSH presents RIOT TEN - Hype or Die Fest - Jan 27, 2024 ...
    2 月前
    精明的豆腐  ·  任江洲_搜狗百科
    3 月前
    不敢表白的小马驹  ·  深交所向*ST众应发出关注函_手机搜狐网
    3 月前
    淡定的楼梯  ·  智慧导览小程序
    1 年前
    低调的镜子  ·  独家连载| 零日漏洞：震网病毒全揭秘（49） - 安全牛
    1 年前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南