整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1.用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
2.嵌套元素应当缩进一次（即两个空格）。
3.对于属性的定义，确保全部使用双引号，绝不要使用单引号。
4.不要在自闭合（self-closing）元素的尾部添加斜线
5.不要省略可选的结束标签（closing tag）（例如，</li> 或</body>）。
6.为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。<!DOCTYPE html>
7.语言属性
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等.
<html>
<!-- ... -->
</html>
8.IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<metahttp-equiv="X-UA-Compatible"content="IE=Edge">
9.字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
10.引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
11.
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
<input type="checkbox" value="1" checked>
12.
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：
<!-- Not so great -->
<span>
<img src="...">
</span>
<!-- Better -->
<img src="...">
13.
不要使用 @import
与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
14.
class 命名
class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
TML 文档由 HTML 元素定义。
HTML 元素
<phtml 元素指的是从开始标签（start="" tag）到结束标签（end="" tag）的所有代码。<="" p="" style="color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; white-space: normal;">
| 开始标签 * | 元素内容 | 结束标签 * |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> |
*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
<p大多数 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
以上实例包含了三个 HTML 元素。
HTML 实例解析
<p> 元素:
<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: This is my first paragraph.
<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
The <body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
The <html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落
<p>这是一个段落
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
着岗位竞争的越来越激烈，而设计师掌握的技能要求也越多，设计师不光只会设计，而且也要懂（会）代码（会手写代码更会加金的），所以我们要做一位懂代码设计师，还好Jason在大学学过代码，毕业也做过一段时间的设计+前端，我将我在代码方面的知识总结分享给大家，赶紧往下看吧
基础认识
html语句是由标签+属性构成的
html 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，但某些 html 元素没有结束标签，比如 <br />、<img>，这类标签称为单标签。
属性的语法
1、写在标签的<>内，而且在标签代码之后，如<p *></p>
2、属性名=""(一定得是英文的引号，不能是中文的引号。其实不用引号对于它的显示没有影响，但加上引号为标准做法)
如 align="center" align为属性名 center left right是属性值
3、有的标签没有任何属性（<br>），有的标签虽然有属性，但可以不加上也不影响它的使用(<p></p>),但有的标签则是必须与属性连用方能正常显示(<a></a>)
网页的基本结构
<html>
<head></head>
<body></body>
</html>
html，head，body 是html代码必不可少的三大标签，其中
html标签：用于定义html文件的标签，这个标签意味着这个文件是一个html文件
head标签：里面的内容不能再浏览器中直接呈现，但它会用后台运作的方式为html页面提供种种功能
body标签：里面出现的内容会在浏览器中得到直接呈现，供读者浏览
必须要记住的标签和属性
放在<head></head>之间的
<title> </title>
<title> </title>标签定义html文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
<meta>标签
<meta>标签类可以插入很多很有用的元素属性。常用的有以下四种：
<meta name="keywords" content="study,computer">
用来标记搜索引擎在搜索你的页面时所取出的关键词。
<meta name="author" content=“wutao">
用来标记文档的作者。
<meta http-equiv=“content-type” content=“text/html; charset=gb2312”>
用来标记你的页面的解码方式。
<meta http-equiv=“refresh” content=“5;url=http://www.xnc.edu.cn”>
用来自动刷新网页
放在<body></body>之间的
与文字相关的标签
文字标题
<h#> ... </h#>
#=1, 2, 3, 4, 5, 6
段(paragraph) <p>
空白占位符
换行<br>
文字的分区显示
<div align=#> ... </div> (#=left, center, right)
<i> 显示斜体文本效果。
<b> 呈现粗体文本效果。
<big> 呈现大号字体效果。
<small> 呈现小号字体效果。
无序列表
无序列表是由<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
<ul>和<li>中均可加入type属性，type的属性值有：disc(圆)、circle（圆圈）、square（方块）
有序列表 start 值为数字
有序列表由<ol>和<li>定义:
<ol>
<li>sports</li>
<li> drink</li>
<li> friends</li>
</ol>
....................................................................
我的微信公众号：UI严选 —越努力，越幸运
*请认真填写需求信息，我们会在24小时内与您取得联系。
