当前位置: 首页 > Web前端 > HTML

Web最佳实践阅读总结(二)

时间:2023-04-03 00:28:38 HTML

代码符合标准的页面将确保正确呈现。页面很容易被搜索引擎搜索到,从而提高搜索排名(SEO)并提高网站的可用性。更好的维护和扩展网页(Validator,HTMLValidator是Firefox的一个插件)。停止使用非标准的。标签和属性,简化HTML代码标签没有实际意义,只是设置样式(不推荐)不推荐闪烁,marquee使HTML具有更好的语义去除不常用的HTML标签样式和结构分离HTML页面链接一个CSS(优化),改进loadingspeedHTML内嵌CSS(单页最好,减少请求加载CSS样式文件,加快加载InlineCSS样式,可以用JS动态统一修改,很少用,JQ用其他实现动画效果参考CSS样式文件中的CSS文件,避免加入JS禁用提示信息,使用noscrpt,HTML4只在body起作用,HTML5可以出现在head,支持HTML,不支持XHTML,最好用noscript,使用渐进增强模式,平滑降级添加必要的meta标签元属性:name、http-equiv、content、charsetname和content属性组合,形成name/value对keywordsinname、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标签页面只使用一个h1hx,使用过程中不要跳级,不要使用hx设置样式设计形式:使用label标签,并设置label标签的for属性设置合适的水印forinputcontrol提示inputcontrol设置taborder使用HTML5中引入的formcontrolnewHTML5feature使用async和defer属性不要使用内联延迟:并行下载脚本而不是阻塞。加载脚本后,浏览器将在DOM触发之前按引用顺序运行它。JSasync:异步下载脚本,下载完成后立即执行代码,无需等待页面解析结束。在设置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+)。颜色{颜色:绿色\;}(IE8.IE9):root.color{color:green\0;}(IE9+).color{颜色:绿色\9\0;}(IE9+).color{颜色:绿色\9;}(IE10以下(含IE10))*::-ms-backdrop,.color{color:red;}(IE11)*html.color{颜色:红色;}(仅限IE6)*+html.color{颜色:红色;}(仅限IE7)@mediascreen\9{.color{颜色:黑色;}}(IE6.IE7)@media\0screen{.color{颜色:黑色;}}(仅限IE8)@media\0screen,screen\9{.color{color:black;}}(IE6.IE7.我E8)@mediascreen\0{.color{颜色:黑色;}}(IE8.IE9.IE10)@mediascreenand(min-width:0\0){.color{color:black;}}(IE9.IE10)@mediascreen和(-ms-high-contrast:active),(-ms-high-contrast:none){.color{color:black;}}(IE10ONLY)@mediaalland(-ms-high-contrast:none){.color{color:greeny\0;}}(IE10+)@mediaalland(-ms-high-contrast:none){*::-ms-backdrop,.color{color:green\0;}}(IE11+)em,px,%px:绝对大小,em:应用元素字体大小的两倍,%:相对于父元素的百分比尽量只在元素大小可预测的情况下设置相对大小仅当使用em设置字体大小时才使用绝对大小。CSS常用的meta方法:em、rem区分scriptdefer和async