代码符合标准
  • 标准的页面会保证正确的渲染
  • 页面容易被搜索引擎搜索,提高搜索排名(SEO)
  • 提高网站的易用性
  • 网页更好维护和扩展(Validator,HTML Validator 属于Firefox插件)
停止使用不标准的标签和属性,简化HTML代码
  • 标签没有实际意义,仅设置样式(不推荐使用)
  • 不推荐使用blink,marquee
  • 让HTML拥有更好的语义
  • 移除不常用的HTML标签
样式和结构分离
  • HTML页面链接一个CSS(最优),提高加载速度
  • HTML内嵌CSS(单一页面最佳,减少加载CSS样式文件的请求数目,加快加载速度
  • 内联CSS样式,可以使用JS动态来统一修改,很少使用,JQ中使用其实现动画效果
  • 在CSS样式文件中引用CSS文件,避免使用
添加JS禁用提示信息
  • 使用noscrpt,HTML4只在body中起作用,HTML5中可以出现在head中,支持HTML,不支持XHTML
  • 最好使用noscript,采用渐进增强的模式,平稳降级
添加必要的meta的标签
  • meta的属性:name,http-equiv,content,charset
  • name和content属性组合,构成名称/值对
  • name中keywords,description最常用
  • http-equiv和content属性结合,构成http命令
  • 其中content-type,default-style,refresh已经确定,content-language,set-cookie 未正式确定
  • charset设置编码
常用的meta方法
  • 设置IE浏览器的兼容性
  • 设置页面在移动设备中的显示
  • 设置IE浏览器的固定网站功能
HTML语义化
  • 语义化使搜索引擎和第三方抓取工具更容易读懂代码
  • 去掉CSS也可以保持良好的外观
  • div,span尽量少使用
  • 把无关的元素重HTML中删除
  • 添加一些隐藏文字
  • 要求:

    • 熟悉所有规范中的HTML标签,理解各标签的语义
    • 熟悉各标签上规范的属性,给HTML标签设置必要的属性
    • 样式和结构的分离
  • 构建页面标题的最佳实践:

    • 使用hx标签
    • 页面只是使用一个h1
    • hx使用过程中不要跳级
    • 不要使用hx设置样式
  • 设计表单:

    • 使用label标签,并设置label标签的for属性
    • 给输入控件设置合适的水印提示
    • 输入控件设置tab顺序
    • 使用HTML5中引入的表单控件
HTML5新特性使用
  • async和defer属性

    • 不使用在内联里面
    • defer:以并行的方式下载脚本,而不是阻塞的方式下载,在脚本加载完成后,浏览器会在DOM触发之前按照引用顺序运行JS
    • async:以异步的方式下载脚本,在下载结束后立即执行代码,而不会等待页面解析结束
    • 在设置async时候,推荐同时设置defer属性,提高脚本加载执行的性能
  • 标签上的自定义属性data-*
  • script可以编写HTML模板和XML数据
选择器注意
  • 尽量不使用ID选择器
  • 减少子选择器的层级(less和Sass的滥用)
  • 使用组合CSS类选择器

兼容IE浏览器
  • 兼容旧浏览器的代码,被称为hack代码
  • 熟悉IE浏览器中常见的兼容样式
  • 分离样式兼容代码

    .color{ _color:green;}  ( IE6 (含 IE6 ) 以下)
    
    .color{ *color:gray; }  ( IE7 ( 含 IE7 )以下)
    
    .color { color:green \0; } ( IE8 + )
    
    .color { color:green \ ; }   ( IE8 . IE9 )
    
    :root .color { color:green \0; } ( IE9 + )
    
    .color { color:green \9\0; }   ( IE9+ )
    
    .color { color:green \9; }   ( IE10 ( 含 IE10 ) 以下 )
    
    *::-ms-backdrop, .color{ color:red; }   ( IE11 )
    
    * html .color { color: red; } (IE6 ONLY )
    
    *+html .color { color: red; } ( IE7 ONLY )
    
    @media screen\9 {
    .color { color: black; }
    } ( IE6 . IE7 )
    @media \0screen {
    .color { color: black; }
    } ( IE8 ONLY )
    @media \0screen, screen\9 {
    .color { color: black; }
    } ( IE6 . IE7 . IE8 )
    @media screen\0 {
    .color { color: black; }
    } ( IE8 . IE9 . IE10 )
    @media screen and (min-width: 0\0) {
    .color { color: black; }
    } ( IE9 . IE10 ) @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .color { color: black; }
    } ( IE10 ONLY ) @media all and (-ms-high-contrast:none){
    .color { color:greeny \0; }
    } ( IE10 + ) @media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .color { color:green \0; }
    } ( IE11 + )
em,px,%
  • px:绝对尺寸,em:应用元素上字体大小的两倍,%:相对于父元素的百分比
  • 尽量设置相对尺寸
  • 只有在可预知元素尺寸的情况下才使用绝对尺寸
  • 使用em设置字体的大小

Web最佳实践阅读总结(2)的更多相关文章

  1. Web最佳实践阅读总结(1)

    介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动 ...

  2. PHP-PHP核心技术与最佳实践阅读

    1.对象的实质: 对象就是数据, 对象本身不包含方法, 但是对象有一个"指针"指向一个类, 这个类里可以有方法 2.反射是指在PHP运行状态中, 扩展分析PHP程序, 导出或者提取 ...

  3. Web 前端最佳实践

    Web 最佳实践   前端   选择器 尽量使用ID选择器 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找   // Fast: $( "#container div ...

  4. 【转】优化Web程序的最佳实践

    自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各 ...

  5. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  6. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  7. 《modern-php》 - 阅读笔记 - 最佳实践

    过滤.验证和转义数据 过滤数据 不要相信任何外部数据! 常见的有以下几种数据需要过滤:HTML,SQL查询,用户提交的信息(邮件地址.电话号码.身份证) HTML htmlentities() HTM ...

  8. JavaScript Web 应用最佳实践分析

    [编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,Jav ...

  9. 【社区公益】送《Web前端开发最佳实践》给需要的人

    算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...

随机推荐

  1. 一、linux-mysql 运维DBA介绍

    一.DBA数据库管理人员需要在整个架构中解决数据库的压力,前端业务通过扩展,加机器就可以很好的解决,但是存储.数据库就不是很好的可以进行扩展,数据也是分配不均的,所以,1)通过在数据库前面添加Memc ...

  2. “Spring Boot+Marklogic实战应用(1)”

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议.本文链接:http://www.blbk.info Spring Boot+Marklogic应用 摘要: 在前一节的介绍,相信 ...

  3. 项目引入nacos 日志不显示问题

    禁用nacos的日志即可解决 idea当中 添加vm options参数即可 -Dnacos.logging.default.config.enabled=false 打包后的启动命令  java - ...

  4. [LC] 124. Binary Tree Maximum Path Sum

    Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any ...

  5. 关于MyBatis的运行原理(转载)

    1.获取sqlSessionFactory对象: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSessionFactory: 注意: ...

  6. UVALive 3835:Highway(贪心 Grade D)

    VJ题目链接 题意:平面上有n个点,在x轴上放一些点,使得平面上所有点都能找到某个x轴上的点,使得他们的距离小于d.求最少放几个点. 思路:以点为中心作半径为d的圆,交x轴为一个线段.问题转换成用最少 ...

  7. [LC] 246. Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  8. [SDOI2006] 线性方程组

    洛谷 P2455 传送门 刚开始写了个消成上三角的,结果狂wa. 后来经过研究发现,消成上三角那种不能直接判断无解或无穷多解,需要其它的操作. 所以干脆学了个消成对角线的,写了一发A了. 其实两种消元 ...

  9. [洛谷P2785] 物理1(phsic1)-磁通量

    随便翻到的一道题...... 题目传送门 这道题是用向量叉积求多边形面积. 首先讲一下向量叉积(也叫外积). 设两个向量的坐标表示为(x1,y1).(x2,y2). 那么它们的叉积为x1*y2-x2* ...

  10. 吴裕雄--python学习笔记:os模块函数

    os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...