前端开发规范:2-HTML

HTML标签
文档声明,除非必须要兼容IE6等远古浏览器,否则一律使用HTML5文档类型申明

标签闭合,img、br、hr 等自闭合标签不使用闭合斜杠






meta标签,声明编码

静态资源引入顺序, css文件在head结束之前引入,js文件在body结束之前引入并加上async属性,不需要写Type属性。

公共样式和框架要放在其他文件前面, 如common.css要放在style.css前面,文件在前的会被先解析渲染,而后面的规则会覆盖掉前面的。

正确的html文档格式
例:home.html





我是标题




to do sth...




HTML标签语义化



网站标题


网站副标题




第一部分 第二部分
©2018 GaoFang Huang

更多查阅 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

SEO优化
合理使用h1~6标签
标题内容尽量使用h1~h6等标签,在HTML5标准中同一个页面已经可以使用多个h1标签,应根据页面内容选择不同量级。

给外链加上nofllow属性
通常认为使用了nofllow属性的链接不会被搜索引擎跟踪(该观点有争议),更不会给链接页面传递权重。最常用的方式是使用nofllow属性来避免页面权重不必要的流失从而达到权重集中的目的。

合作伙伴
canonical继承原页面权重
有时候同一个内容的网页会存在多条URL,用于关联原页面和 百度MIP 页,保证 MIP 页继承原页面权重,在移动搜索时优先展现 MIP 页。在head标签结束之前使用,建议放在meta标签下,其中的链接使用绝对链接。


图片加描述alt属性

块级元素与内联元素的换行


abcefg

abc
efg


内联元素中含换行符也是会占用空间的,为了避免元素错位,在编辑器中内联元素也推荐换行处理。

VScode编辑器推荐安装插件Beautify,来自动处理代码格式化排版的问题。

常用meta标签说明
meta标签共有两个属性,分别是http-equiv属性和name属性。

基础meta
基本每个网页都必备的meta

搜索引擎相关

浏览器配置相关

移动端适配相关


你可能感兴趣的:(前端开发规范:2-HTML)