前端开发规范:2-HTML
HTML标签
文档声明,除非必须要兼容IE6等远古浏览器,否则一律使用HTML5文档类型申明<!DOCTYPE html>
标签闭合,img、br、hr 等自闭合标签不使用闭合斜杠
meta标签,声明编码
静态资源引入顺序, css文件在head结束之前引入,js文件在body结束之前引入并加上async属性,不需要写Type属性。
公共样式和框架要放在其他文件前面, 如common.css要放在style.css前面,文件在前的会被先解析渲染,而后面的规则会覆盖掉前面的。
正确的html文档格式
例:home.html
<!DOCTYPE html>
我是标题
to do sth...
HTML标签语义化
网站标题
网站副标题
更多查阅 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的更多相关文章
- WEB前端开发规范
WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
- WEB前端开发规范文档(转)
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
- Web 前端开发规范手册
一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...
- Web前端开发规范手册
一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. ...
- Web前端开发规范文档(google规范)
(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml 区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...
- Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...
随机推荐
- Spring bean 初始化失败
在一个*context.xml 配置文件 A 中, 有个定义的bean B, 把 A 添加到 application-context.xml 中,发现B不能正常初始化. 解决办法: 添加 <co ...
- 深入理解 BigDecimal
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- NAT回流(Twice NAT)Hairping 参数详解
内网用户需要通过域名访问内网的服务器,一般商用环境是无法访问的,需要经过以下配置,原理不说了,直接说配置. nat (inside,inside) source dynamic inside-net ...
- [TimLinux] JavaScript 获取设置在CSS类中的属性值
1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...
- [TimLinux] Python学习内容框架
以下内容主体来自<Python学习手册第四版>,大致整理出的方向 1. 第一部分:使用入门 介绍Python语法之前,先对Python的的各个方面进行一个比较宽广的介绍,包含对Python ...
- B.Box
题目:盒子 题目:排列p是一个整数序列 p = [p1, p2,...,pn],由n个唯一的正整数组成 唯一的线索是你需要打开上锁的盒子 你只知道前缀的最大数,q1, q2, ..., qn,保证qi ...
- FPGA_VIP_V101 摄像头视频采集 调试总结之SDRAM引起的水平条纹噪声问题
FPGA_VIP_V101 摄像头视频采集 调试总结之SDRAM引起的水平条纹噪声问题 此问题困扰我很近,终于在最近的项目调整中总结了规律并解决了. 因为之前对sdram并不熟悉,用得也不是太多,于是 ...
- 【重温基础】17.WebAPI介绍
本文是 重温基础 系列文章的第十七篇. 今日感受:挑战. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 [重温基础 ...
- Hybrid App 应用开发中 9 个必备知识点复习(WebView / 调试 等)
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 <Hybrid APP 混合应用专题> 主题的第二期和第三期的合集. 这一期共整理了 10 个问题,和相应的参考答 ...
- 自建邮件服务器域名解析设置(A与MX记录)
自建邮件服务器域名解析设置(A与MX记录) 前言 如果域名没有做解析,只能用于内网收发邮件.要想实现与外网邮箱的收发,需要做域名解析.是在"域名解析后台"进行设置(域名提供商提供& ...