html 标签优化_如何优化网站HTML标签代码优化

时间: 2018-05-21阅读: 1213标签: 标签

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


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


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


01选用合适的标签


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

<p>你好,我是一个标题</p>

明明知道它是一个标题,为什么不用标题标签呢:

<h2>你好我是一个真实的标题</h2>

这样有个好处,让你的标签多样化,写样式的时候用标签选择器,就不用套很多的class


2. 如果它是一个表单,那就用form吧,用form用很多优点,我在《Effective前端1:能使用html/css解决的问题就不要使用JS》里面已经提到两点,第一点是自动表单提交,通过写一个form的action就能实现自动搜索跳转:

<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

<div>
    <input id="user-name">
    <input id="password">
</div>
<script>
var userName = $("input#user-name").val(),
    password = $("input#password").val();
</script>

在这里,你为了获取两个表单数据,查了两次DOM,假设你有10个,就得查10个,如果是20个呢,对性能就会有影响了吧,特别是在移动端。但是如果你把div换成form,情况就不一样了:

<form id="register">
    <input name="user-name">
    <input name="password">
</form>

在获取表单数据时,可以这样用:

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;
};

这个函数的作用在于借助jQuery的serializeArray获取所有的表单数据,然后再转化成一个object,以后需要获取这个表单的内容只需调一下:

var userData = $("#user-form").serializeForm();

即可,userData里面的属性就是input/select的name


3. html5 input

htm5提供了很多类型的input,使用这些input有很多好处,游览器会根据不同的input做出相应的优化,例如在iphone上,使用不同的input会弹出不同的键盘:

<input type=”email”>
<input type=”number”>
<input type=”tel”>

iphone弹不同类型的键盘,方便输入

即使在非html5浏览器也可以用,因为对不认识的type,浏览器会把它当作默认的text,唯一一个有兼容性的问题就是IE8、IE9会把不认识的input强制设置成text,即一访问页面,IE会把html里面的<input type="email">强制渲染成<input type="text">,这样就导致你没办法用css/js根据这个type控制:

IE强制阉割不认识的input type为textcss

/* will not work on ie8/ie9 */
input[type=email]{

}

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

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


4.其它的:

(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

<ul>
    <li>
        <a href="/list?id=1">
            <img src="pic.jpg">
            <p>desc</p>
        </a>
    </li>
</ul>


02使用html5语义化标签


html5新增了很多语义化标签,一个传统的html4的页面结构:

html4页面结构XHTML

<ul>
    <li></li>
</ul>
<div></div>
<div>
    <div></div>
    <div></div>
</div>
<div></div>

可以用html5的新标签改装一下:

<nav></nav>
<header></header>
<main>
    <section></section>
    <section></section>
</main>
<footer></footer>

这样除了语义化的特点,更重要的是页面的组织发生了根本的变化,以前你在html4只能写一个h1标签,现在你可以写很多个h1标签。因为html5的页面大纲不再是根据h1、h2等标签进行划分,而是根据页面的章节。如下:

<body>
    <h1>Effective2</h1>
    <section>
        <h1>使用合适的标签</h1>
        <section><h2>使用form</h2></section>
        <section><h2>使用a标签</h2></section>
    </section>
    <section>
         <h1>使用h5标签</h1>
    </section>
</body>

搜索引擎会把这个页面概括为以下大纲:

  Effective2

1. 使用合适的标签

    1. 使用form

    2. 使用a标签

2. 使用h5标签

读者可以从这个网站:html5 outliner进行实验(https://gsnedders.html5.org/outliner/)。

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

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

  1. div:作为一个普通的容器使用

  2. section:作为一个普通的章节

  3. article:适用于独立性较强的内容,例如笔者的这篇博客外层就用的article标签

  4. aside:可用作和页面主题内容相切的容器,像侧边栏、评论,像这篇博客底部的评论就用的aside


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/794

关闭

a标签调用js的几种方法

<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;

在<a></a>标签中如何调用javaScript脚本

在日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结,希望对大家有一个帮助。javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

HTML <link> 标签 PC移动网站适配

在pc版网页上,添加指向对应移动版网址的特殊链接rel=alternate标记,这有助于百度发现网站的移动版网页所在的位置;同时在移动版网页上,添加指向对应pc版网址的链接rel=canonical标记。

HTML5新增和废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

XPath当匹配标签判断text()判断内容失败的问题及解决

在爬取网站的时候我使用XPath去抓取网页上的内容,XPath表达式来精准获取需要的标签内容。当我对如下一段html代码编写XPath表达式抓取的时候出现了问题,代码如下。片名两个字中间有七个空格,我想要获取<dd></dd>中的内容。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!