Web最佳实践阅读总结(2)
代码符合标准
- 标准的页面会保证正确的渲染
- 页面容易被搜索引擎搜索,提高搜索排名(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)的更多相关文章
- Web最佳实践阅读总结(1)
介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动 ...
- PHP-PHP核心技术与最佳实践阅读
1.对象的实质: 对象就是数据, 对象本身不包含方法, 但是对象有一个"指针"指向一个类, 这个类里可以有方法 2.反射是指在PHP运行状态中, 扩展分析PHP程序, 导出或者提取 ...
- Web 前端最佳实践
Web 最佳实践 前端 选择器 尽量使用ID选择器 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找 // Fast: $( "#container div ...
- 【转】优化Web程序的最佳实践
自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各 ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- 【Web前端开发最佳实践系列】前端代码推荐和建议
一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...
- 《modern-php》 - 阅读笔记 - 最佳实践
过滤.验证和转义数据 过滤数据 不要相信任何外部数据! 常见的有以下几种数据需要过滤:HTML,SQL查询,用户提交的信息(邮件地址.电话号码.身份证) HTML htmlentities() HTM ...
- JavaScript Web 应用最佳实践分析
[编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,Jav ...
- 【社区公益】送《Web前端开发最佳实践》给需要的人
算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...
随机推荐
- 一、linux-mysql 运维DBA介绍
一.DBA数据库管理人员需要在整个架构中解决数据库的压力,前端业务通过扩展,加机器就可以很好的解决,但是存储.数据库就不是很好的可以进行扩展,数据也是分配不均的,所以,1)通过在数据库前面添加Memc ...
- “Spring Boot+Marklogic实战应用(1)”
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议.本文链接:http://www.blbk.info Spring Boot+Marklogic应用 摘要: 在前一节的介绍,相信 ...
- 项目引入nacos 日志不显示问题
禁用nacos的日志即可解决 idea当中 添加vm options参数即可 -Dnacos.logging.default.config.enabled=false 打包后的启动命令 java - ...
- [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 ...
- 关于MyBatis的运行原理(转载)
1.获取sqlSessionFactory对象: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSessionFactory: 注意: ...
- UVALive 3835:Highway(贪心 Grade D)
VJ题目链接 题意:平面上有n个点,在x轴上放一些点,使得平面上所有点都能找到某个x轴上的点,使得他们的距离小于d.求最少放几个点. 思路:以点为中心作半径为d的圆,交x轴为一个线段.问题转换成用最少 ...
- [LC] 246. Strobogrammatic Number
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...
- [SDOI2006] 线性方程组
洛谷 P2455 传送门 刚开始写了个消成上三角的,结果狂wa. 后来经过研究发现,消成上三角那种不能直接判断无解或无穷多解,需要其它的操作. 所以干脆学了个消成对角线的,写了一发A了. 其实两种消元 ...
- [洛谷P2785] 物理1(phsic1)-磁通量
随便翻到的一道题...... 题目传送门 这道题是用向量叉积求多边形面积. 首先讲一下向量叉积(也叫外积). 设两个向量的坐标表示为(x1,y1).(x2,y2). 那么它们的叉积为x1*y2-x2* ...
- 吴裕雄--python学习笔记:os模块函数
os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...