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. Iphone上对于动态生成的html元素绑定点击事件$(document).click()失效解决办法

    在Iphone上,新生成的DOM元素不支持$(document).click的绑定方法,该怎么办呢? 百度了N久都没找到解决办法,在快要走投无路之时,试了试Google,我去,还真找到了,歪国人就是牛 ...

  2. bzoj3374[Usaco2004 Mar]Special Serial Numbers 特殊编号*

    bzoj3374[Usaco2004 Mar]Special Serial Numbers 特殊编号 题意: 求比一个数大的最小的一半以上的数位相同的数.数位数≤100. 题解: 模拟题.从低位枚举到 ...

  3. 图灵学院笔记-java虚拟机底层原理

    Table of Contents generated with DocToc 一.java虚拟机概述 二.栈内存解析 2.1 概述 2.2 栈帧内部结构 2.2.1 我们来解析一下compute() ...

  4. java计算下一个整5分钟时间点

    需求背景 我的需求是获取当前时间之后的下一个"整5分钟时间点". 首先,那么何为"整5分钟时间点"? 满足以下两个条件的时间: 分钟数等于以下时间中的一个,且秒 ...

  5. adb连接多个设备时,选择某个设备

    在emulator-5554模拟器上安装ebook.apk: adb -s emulator-5554 install ebook.apk 在真机上安装ebook.apk: adb -s HT9BYL ...

  6. OpenWrt 编译分割

    本文主要参考:http://macbruins.com/2011/05/08/downloading-sources-for-building-openwrt/ OpenWrt系统在buildroot ...

  7. 使用AB对Nginx压测和并发预估

    简介 ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的. # 1.ab每次只能测试一个URL,适合做重复压力测试 # 2.参数很多,可以支持添加c ...

  8. 简单了解InnoDB底层原理

    存储引擎 很多文章都是直接开始介绍有哪些存储引擎,并没有去介绍存储引擎本身.那么究竟什么是存储引擎?不知道大家有没有想过,MySQL是如何存储我们丢进去的数据的? 其实存储引擎也很简单,我认为就是一种 ...

  9. Checkbutton基本写法

    1.Checkbutton(self 窗口对象,text 按钮显示内容,variable 绑定变量->一起变化, onvalue 用户点击时得到的值,offvalue 没有点击得到的值) sel ...

  10. Python os.tcsetpgrp() 方法

    概述 os.tcsetpgrp() 方法用于设置与终端fd(一个由os.open()返回的打开的文件描述符)关联的进程组为pg.高佣联盟 www.cgewang.com 语法 tcsetpgrp()方 ...