《web前端最佳实践》-HTML篇_html/css_WEB-ITnose

一、web标准

很多人把web标准挂在嘴边，却没有引起足够重视，只关注页面外在的表现而忽略页面本身代码的质量。

标准的页面具有哪些优点？

• 保证浏览器正确渲染 最大限度的保证页面在不同浏览器正常解析，同时还能最大限度保证在未来的各种客户端中正常解析。

• 更容易被搜索引擎搜寻，提高网站搜索排名。标准的页面基本完成了一半的搜索引擎优化工作，搜索引擎的网络“爬虫”目的是读懂网站的内容，并找出网站关键字。合理使用标签和属性，可以帮助搜索引擎准确理解网站内容。

• 提高网站易用性。让网站能被更多用户访问，比如视力或肢体障碍用户。

• 更好的维护和扩展。 多个开发者如果遵循统一的标准，则会更好的理解和维护已有的页面。标签、样式、以及行为分离的标准页面显然具有更好的扩展性。

如何做到标准？

• 标准的HTML页面结构，比如文档类型声明、head(title和引入的文件)、body等。

• 正确闭合标签。

• 停止使用不标准的标签和属性，简化代码。

• 样式和结构分离。

• 添加javascript禁用的提示信息。

• 添加必要的标签，比如常用的keywords、description，设置IE浏览器的兼容模式，设置页面在移动设备中的显示等。

二、高可读性HTML

一些小原则

1、注意标签语义化，网页的外观看起来怎样跟浏览器的解析以及搜索引擎的抓取毫无关系，高可读性的html代码除了使开发者自身更易看懂和维护之外，最重要还是给机器去读的。

2、没必要使用的标签就不要用，可以利用其它的方法去做到同样的效果，比如伪元素。 比较常见的使用不当之处有“分隔符”和“空标签清除浮动”等。

3、使用一些非文字内容的时候，虽然看似使用空标签配合css就可以完成，但搜索引擎却不能得知它的作用，可以添加一些文字说明，然后再用css将其隐藏。这样做也便于第三方阅读工具的识别。

4、熟悉各标签上规范的属性，给html标签添加必要的属性 比如常见的：alt、title、for等。

5、
应仅用于文本内容的换行，不应用于行级元素的换行。

6、网页中的图片是使用还是background？ 若作为页面内容的一部分，则使用img，若仅用于装饰，使用background。

常用几类标签的正确使用方式

网页标题层级

标题标签指的是h1~h6这6个标签，统称hx标签，相比其他的语义标签，标签会受到搜索引擎的“特殊照顾。

(1)在标题处应使用。

(2)页面中只使用一个h1标签，搜索引擎会给予它最高权重。其他模块标题标签从h2开始。

(3)标签使用过程中不要跳级，保持层级连贯性。

(4)不要单纯使用标签给内容设置样式。

正确设计表单

(1)不要使用

。

(2)不要用展示表单的文本，应使用(用于为输入控件定义文本)；指定关联控件只需把相关控件的id赋予的for属性，这样做不仅把元素触发的事件指向了相关表单元素，扩大了可操作范围，也从语义上绑定了两者。 (3)使用

给表单控件分组，

用来定义控件组的标题，另外还可以通过设置

的disable属性禁用包含的表单控件。

(4)给输入控件设置合适的水印提示，所谓水印提示，即在未填写之前里面所显示的内容，当控件获取焦点，或者用户开始输入时消失。可使用placeholder属性，IE9以下可使用jquery-placeholder插件模拟。

(5)如有必要，设置tab顺序。很多用户会有使用键盘tab键来切换到下一个输入框的习惯，默认情况下，会安装界面上的分布顺序来处理，如需要特殊设定，可设置tabindex属性值。

(6)使用html5中新引入的表单控件类型，如url、email、search等。高级浏览器有很好的支持，不支持它们的浏览器会以text类型控件展现。

精简html代码

1、删除多余容器，比较典型的是

和，这是两个没有任何语义，常被滥用的标签。

2、装饰性元素使用css实现。如背景、伪元素等。

3、避免使用table布局，是代码更少，更清晰，避免因重绘或重排而降低性能。

过时的块级和行内元素

每个使用css的人都了解过这两个概念，但是，却都是从样式的角度去理解原生的元素，有点不妥，而且它本身跟“结构与表现分离”的思路有违背，html5中淡化了二者的定义，更具体的分成了7类。 它们是：元数据式内容、流式内容、章节式内容、标题式内容、段落式内容、嵌入式内容和交互式内容。

从内容模型来说，以前对于块级和行内元素中内容有一些限制，html5结束了这种复杂的局面，从实际需求出发重新定义了内容模型。比如元素可以包含块状元素了。还有其他的很多差异，需要大家有重新的认识。

三、小叙Html5

先来看几个时间点。

2012年12月17日，HTML5定义完成。

2014年6月17日，发布标准草案的最终征求意见稿。

2014年10月28日，W3C发布HTML5正式推荐标准。

新特性的使用

近几年，HTML5的概念被炒的过头了，给人感觉是酷炫，甚至“无所不能”，然而它只是一个新的web标准。是对几个应用比较广泛的特性的讨论。

1、简化定义方式。

避免不必要的复杂性，比如文档类型声明、定义页面编码、样式和脚步的引用方式等。

2、使用新标签和新属性。

新标签：

语义化标签：

、

等

功能性标签：

新的输入控件类型：tel、search、email等

新属性：

的target属性

和里面的placeholder、required、autofocus属性

标签自定义属性data-*，用于保存自定义数据，同时添加对应API：dataset

小tips

不要使用HTML5中已经弃用的标签和属性

1、没有任何语义，仅为了设置外观 、、

、、、等 2、破坏了可用性的标签 、、

3、移除的标签属性 align、valign、bgcolor等

如何处理兼容性

(1)通过document.creatElement产生标签

(2)使用成熟的框架，如：html5shim

注：此处仅为让浏览器识别新标签的兼容方法，其他还有很多兼容问题，此处不赘述。

此文为读了党建前辈所著《web前端开发最佳实践》HTML部分之后所记录，内容仅仅是冰山一角。阅读过程中意识到了自身的很多不足，受益匪浅。希望大家都能读一下。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• 《web前端最佳实践》-HTML篇_html/cs...

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• html中怎么清除li黑点
• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html的name和value是什么意思
• html如何给背景图片设置透明度
• html中怎么让列表横向排列
• html5怎么创建跳转页尾超链接
• 十分钟搞懂form标签中的GET和POST提交方式

• 404 not found是什么意思
• DOM是什么意思
• url是什么意思？
• 如何改变图片大小
• html是什么
• html如何创建电子邮件链接
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
• 如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作