我的前端编码习惯 —— html篇
前言
作为一个前端工程师,我们可能每天都要写html、css、javascript,每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则,下面和大家分享一下我的习惯和准则。
html
首先我们要对文档进行规范,就要添加<!DOCTYPE html>来对文档进行规范。关于<!DOCTYPE html> w3c有相应的说明。 传送门
编码统一采用utf-8,<meta charset="utf-8">即可
-
页⾯中引⼊css样式或js时,不需要加类型声明。如:
<link rel="stylesheet" href="..."> <style>...</style> <script src="..."></script> <script></script>
-
省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL,相对协议URL。好处是无论你是使用 HTTPS 还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。浏览器遇到相对 URL,会根据当前的网页协议,自动在 // 前面加上相同的协议。如当前网页是 http 访问,那么所有的相对引用 // 都会变成http://。https 同理。如果你在本地查看,协议就会变成 file://。这种用法几乎所有的浏览器都能支持,只有在 IE7/8 下会有一点小问题,就是通过相对 URL 引用的 CSS 文件(无论 <link> 或 @import )会被下载两遍。所以对性能有一点影响。
<!-- Not recommended --> <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> /* Not recommended */ .example { background: url("https://www.google.com/images/example"); } /* Recommended */ .example { background: url("//www.google.com/images/example"); }
标签、属性、属性名全部⼩写,属性值⽤"" (双引号) 引起来,每个双标签务必加对应的结束标签(单标签不遵循此标准,仍按原 html 标准,即不需要以"/>"结束)。提醒:IE 下的页⾯变形很多都与标签未闭合或嵌套错误有关系。
-
标签要按顺序合理嵌套.如:
<p><b></p></b> 需修改为: <p><b></b></p>
-
<div>⾥可以包含<p> ,但是<p>⾥不允许包含<div>等块级元素;<ul>和<ol>的⼦级不允许嵌套<li>以外的标签,<dl>的⼦级不允许出现<dt>和<dd>以外的标签;像div之类的标签只能放在li⾥⾯;<table>的⼦级只允许嵌套<caption>, <thead>, <tfoot>, <tbody>以及<tr>标签,<tr>的⼦级只允许嵌套<td>,<th>标签,<td>标签⾥可以有任意标签存在。如以下⼏种情况都是错误的:
<table> <input type="hidden"> <tr> <td></td> <p></p> </tr> </table> <ul> <li></li> <div></div> </ul> 需改为: <table> <tr> <td><input type="hidden"> </td> <p></p> </tr> </table> <ul> <li><div></div></li> </ul>
<li>标签必须被 <ul>或 <ol>包裹,<dt>和<dd>必须被<dl>包裹,类似的,<thead>, <tbody>等表格类标签也不允许单独出现。
<input>和<button>必须指明默认的type,<form>必须有默认的 method,这样可避免在不同浏览器下产⽣⾏为上的差异。
为了⽅便,建议<form>需加action属性,<input>需加 name和id属性,并且最好有对应的<label>标签,<option>需加value属性,a标签需加href属性。
为增强语义化,按钮⽤ <button> ⽽不⽤ <input>。
-
页⾯不⽤ table 做布局,也不要在本该⽤表格的地⽅⽤ <ul> 或其它标签代替,table 的⽬的是⽤来显⽰表格状的数据。
(a) ⼀般内联元素,包括但不限于<a>, <abbr>, <b>, <cite>, <code>, <del>, <dfn>, <em>, <i>,<img>,<input>,<ins>,<kbd>,<label>,<mark>,<q>, <samp>,<span>,<strong>, <sub>, <sup> 前后⽆需换⾏; 在块元素或⼀些内联块元素,包括但不限于 <address>, <area>,<article>,<aside>,<audio>,<bdo>,<blockquote>,<body>,<button>,<canvas>, <caption>,<col>,<colgroup>,<command>,<datalist>,<dd>,<details>,<div>,<dl>, <dt>, <embed>, <filedset>, <figcaption>, <figure>, <footer>, <form>, <frame>, <frameset>,<h1>-<h6>,<head>,<header>,<hgroup>,<hr>,<html>,<iframe>,<legend>, <li>,<link>,<meta>,<meter>,<nav>,<object>,<ol>,<optgroup>,<options>,<output>, <p>, <param>, <pre>, <progress>, <ruby>, <script>, <section>, <select>, <source>, <style>, <summary>, <table>, <tbody>, <tfoot>, <thead>, <ul>, <video>, <tr>, <th>, <td>, <textarea>, <time> 前后需换⾏,中间可以不换⾏; 在 <br>, <wbr> 前⾯不换⾏, 后⾯换⾏。
(b) html 代码采⽤4个空格缩进,不要⽤tab缩进,以保持在各个编辑器中显⽰⼀致。
(c) 连续的多空格请使⽤ ,去除代码⾏尾空格。 合理使用换行、缩进、空格,使代码整洁。
-
html 功能块之间写明注释,以便于此功能块的功能说明或嵌套提⽰,注释亦精不亦多。
<!-- START header --> <div id="header"> ... </div> <!-- END header -->
视情况为链接添加 title,图⽚要添加 alt 及 title。
-
把css调⽤写在head头部,不需预先执⾏的JS尽量写在页⾯尾部,不要在 html 代码中间插入script代码块,script代码块应与html之间留⼀个空⾏,script代码块开头⽆需缩进,如:
<div class="mod"> <ul class="list"> <li> <a href="">list 1</a> <a href="">list 2</a> <a href="">list 3</a> </li> </ul> </div> <script> // all javascript code function abc() { // function's code } </script>
不在html中混合JS及event事件。
明确指定图⽚的width和 height。不仅对seo有⽤,对因各种原因⽆法显⽰图⽚的情况下,也能保持布局样式基本不变。
通过给元素设置⾃定义属性来存放与JS交互的数据,属性名格式为 data-xx(-xx),中间⽤中 划线连接,例如:data-lazyload-url。
禁⽌单独⽤ <div> 标签做容器,使⽤ <div> 时必须⾄少带有⼀个类名。更不要它代替<p>标签,因为 <div> 标签没有明确的含义,应该根据各标签的语义,做到该⽤什么标签就⽤什么标签。
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12558825.html
- 开发者的如何优雅的使用OSX
- 1082 与7无关的数(思维题,巨坑)
- Facebook构建高性能Android视频组件实践之路
- Samba服务的配置总结
- 大型互联网系统的监控流水线
- 10-移动端开发教程-移动端事件
- 灰色理论预测模型
- tweet情感分析流程
- Selenium2+python自动化52-unittest执行顺序
- 基于TensorFlow实现自编码器(附源码)
- Selenium2+python自动化53-unittest批量执行(discover)
- HTML/CSS/JavaScript学习笔记【持续更新】
- Selenium2+python自动化54-unittest生成测试报告(HTMLTestRunner)
- Selenium2+python自动化55-unittest之装饰器(@classmethod)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例