HTML基础设施

(1)文件应以<!DOCTYPE.....>首行顶格开始,这句话告诉浏览器这是一个什么文件,我们推荐使用<!DOCTYPE html>。

(2)必须在head元素内部的meta标签内声明文档的字符编码charset, 如:<meta charset="UTF-8">,这句代码告诉浏览器应该此HTML文件使用的字符集是什么,如果不加此行代码,那么在浏览器中可能显示为乱码。

(3) 页面的title是极为重要的不可缺少的一项。

2.HTML代码结构和视觉顺序基本保持一致

(1).按照从上之下,从左到右的视觉顺序书写HTML结构。

(2).有时候为了便于搜索引擎抓取我们也会将重要内容在HTML结构顺序上提前,以为搜索引擎抓取网页内容是自上而下的,所以将重要内容在HTML结构顺序上提前可便于抓取重要的内容。

(3).不要使用table布局,现在基本上被淘汰了,而应该代之以div来布局,方便控制。

3.结构、表现、行为三者分类,避免内联。

(1).使用link引入外部css文件到head中。注意:一般我们不适用@import来引入外部css文件。

(2).使用script将js文件引入,并置于body底部,这时js文件会最后加载,html会最先加载,用户体验会更好。

4.保持良好的树形结构

  • 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾的空格。
  • 使用4个空格代替1个Tab(大多数编辑器中可设置)。
  • 对于内容较为简单的表格,建议将tr写成单行。
  • 你也可以在大的模块之间用空行隔开,使模块更清晰。
!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>404</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style></style> </head> <body>
<div class="box">
<div class="box__img">
<p>******</p>
</div>
<div class="box__desc">
<p>******</p>
<ul>
<li>******</li>
</ul>
</div>
</div>
</body>
</html> 

5.其他需要注意的问题

(1).一个标签上引用的className不要过多,越少越好。

(2).对于一个语义化的内部标签,应该尽量避免使用className。

6.属性排序

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

1.class
2.id,name
3.data-*
4.src,for,type,href
5.title,alt
6.aria-*,role

例如:

<a class="" id="" data-model="model" href="javascript:void(0);">
example
</a>
<input class="control" type="text">
<img src="" alt="">

HTML代码格式

1.说明文案的注释方法

(1)开始注释:<!-- 注释文案 -->

(2)结束注释:<!-- /注释文案 -->

(3)允许只有开始注释。

<!-- 顶部 -->
<div class="box">
<!-- logo -->
<div class="box__img">
  <p></p>
</div>
<!-- /logo -->
<!-- 导航 -->
<ul class="box__nav">
<li></li>
<li></li>
<li></li>
<li></li>
<!-- 更多 -->
</ul>
<!-- /导航 -->
</div>
<!-- /顶部 -->

2.严格嵌套

(1).应当以最严格的xhtml strict标准来嵌套,不如内联元素不能包含块级元素等等。

(2).正确闭合标签且必须闭合。

3.严格的属性

(1).属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。

(2).没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。

(3).可以省略style标签和script标签的type属性。

HTML 命名规范!的更多相关文章

  1. JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

    本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...

  2. Java命名规范

    驼峰法则: 将所有字母都小写(包括缩写),然后将单词的第一个字母大写. 每个单词的第一个字母都大写,来得到大驼峰式命名. 除了第一个单词,每个单词的第一个字母都大写,来得到(小)驼峰式命名. 为避免歧 ...

  3. JavaScript知识点总结(命名规范,变量的作用域)

    命名规范 有人说JavaScript的宽容性是这个语言最糟糕的方面之一.比如说想把2个数字加在一起,JavaScript会把其中一个数字解析成字符串,那么就会得到一个奇怪的字符串,而不是2个数字的和. ...

  4. js的命名规范

                   js的命名规范   1.驼峰命名法:首字母是小写的,接下来的字母都以大写字符开头.例如: var testValue = 0; var oneValue = 10; 2. ...

  5. 浅谈Android编码规范及命名规范

    前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...

  6. [No000099]软件版本命名规范

    软件版本阶段说明 Base: 此版本表示该软件仅仅是一个假页面链接,通常包括所有的功能和页面布局,但是页面中的功能都没有做完整的实现,只是做为整体网站的一个基础架构. Alpha: 此版本表示该软件在 ...

  7. Google C++命名规范

    时间:2014.03.02 地点:基地 -------------------------------------------------------------------------------- ...

  8. javascript命名规范

    javascript命名规范 3.命名 命名的方法通常有以下几类: a).命名法说明 1).camel命名法,形如thisIsAnApple 2).pascal命名法,形如ThisIsAnApple ...

  9. Android 命名规范 (提高代码可以读性)

    android文件众多,根据名称来辨别用途很重要,因此命名要规范 这篇文章可参考:Android 命名规范 (提高代码可以读性) 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名 ...

  10. Android资源(图片)命名规范

    (转自:http://www.jb51.net/article/38796.htm) 图片命名注意: 1,不能以下划线("_")开头: 2,以数字加下划线("[0-9]_ ...

随机推荐

  1. redis入门指南(三)—— 事务、过期时间、SORT命令、消息通知与管道

    写在前面 学习<redis入门指南>笔记,结合实践,只记录重要,明确,属于新知的相关内容. 事务 1.redis中的事务由一组命令的集合组成,要么都执行,要么都不执行,同时redis的事务 ...

  2. bzoj4397[Usaco2015 dec]Breed Counting*

    bzoj4397[Usaco2015 dec]Breed Counting 题意: 给定一个长度为N的序列,每个位置上的数只可能是1,2,3中的一种.有Q次询问,每次给定两个数a,b,请分别输出区间[ ...

  3. 【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!

    写在前面 很多时候,我们根据当时的项目情况和业务需求安装完Nginx后,后续随着业务的发展,往往会给安装好的Nginx添加其他的功能模块.在为Nginx添加功能模块时,要求Nginx不停机.这就涉及到 ...

  4. Python 3基础教程8-if else语句

    终于更新到了,教程8, 如果对python软件测试.接口测试.自动化测试.面试经验交流.感兴趣可以加君羊软件测试交流: 1079636098,还会有同行一起技术交流. 本文介绍if else语句,不多 ...

  5. 前端需要知道的 HTML5 SEO优化

    title标签,字数不能过长(不超过70个字符最优) <title>淘宝网 - 淘!我喜欢</title> 使用description以及keyword标签(不超过300个字符 ...

  6. Django开发之Ajax POST提交403报错

    问题现象 Django开发时,前端post提交数据时,由于csrf机制,如果不做处理会报403报错 问题解决 通过在data字段中添加 csrfmiddlewaretoken: '{{ csrf_to ...

  7. setTimeout、clearTimeout、setInterval

    setTimeout(cb, ms) setTimeout(cb, ms) 全局函数在指定的毫秒(ms)数后执行指定函数(cb).:setTimeout() 只执行一次指定函数. 返回一个代表定时器的 ...

  8. PHP checkdate() 函数

    ------------恢复内容开始------------ 实例 检查一些日期是否是有效的格利高里日期: <?phpvar_dump(checkdate(12,31,-400));echo & ...

  9. ZROI 提高十连测 DAY3

    由于我不太会写 觉得从比赛开始就冷静分析.然后看完三道题心态有点爆炸没有紧扣题目的性质. 这个心态是不可取的尽量不要有畏难心理 不要草草的写暴力. LINK:[最长01子序列](http://zhen ...

  10. python程序设计PDF高清完整版免费下载|百度云盘

    百度云盘:python程序设计PDF高清完整版免费下载 提取码:bvsz Python 程序设计基础难易程度适中.除Python应用开发基础知识之外,还适当介绍了Python标准库以及内置对象的工作原 ...