什么是html？html是超文本标记语言，超文本包含图片，文字，链接，视频，音频等，标记是指标签，所以叫超文本标记语言。
超文本元信息
元信息标签：所谓元信息，是指描述自身的信息，元信息类标签，就是html用于描述文档自身的一类标签。
它们通常出现在head标签中，一般不会在页面被显示出来（与此相对，其他标签，如语义类标签，描述的是业务）元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。
head：元信息容器
meta：元信息通用标签（name和http-equiv两种键）
base：页面的基准url（容易出错，不建议使用，通常也不会用）
title：文档标题
meta常用写法：
<meta charset=”utf-8” />：定义解析文档的格式，建议放第一行
<meta http-equiv=”content-type”content=”text/html;charset=utf-8” />：同时添加content-type这个http头，并且指定了http编码格式。
<metaname=”viewport”content=”width=device-width,initial-scale=1,minimum-scale=1,masimum-scale=1,user-scalab=no” />：针对viewport的标准的适配移动端的meta元信息
description：页面描述，可能被用于搜索引擎或者其他场合
keywords：页面关键字，对于seo场景非常关键
语义化标签
错误的使用语义标签，会给机器阅读造成混淆、增加嵌套，给css编写加重负担。
所以，对于语义标签，我的态度是：“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。
实际上，html这种语言，并不像严谨的编程语言一样，有一条非此即彼的线。
一些语义的使用其实会带来争议，所以我的建议是：你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。
合理使用标签，语义化结构
标签合理嵌套
span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p
严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：
p：文本段落；
dl：定义列表，可包括标题和内容简介的列表；
ul：无序列表；
ol：有序列表；
h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；
strong/em：强调文本；
img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；
table：数据网格，规则的分栏布局，尽可能显性的定宽和定高。
合理化表单结构
使用fieldset元素包裹相同类别的字段；
使用legend元素表示字段类别名称；
使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；
文本框不使用size属性定义宽度，而使用css的width属性；
添加maxlength属性限制输入字符的长度。
替换型元素和链接型元素
链接型元素：使用href引用外部文件的标签是链接型元素（如link标签引入css）。
替换型元素：使用src引入外部文件的标签是替换型元素，如img；picture；video；audio；iframe。
script标签：该标签可以引入js，也可以直接写js，所以script是链接型标签，也是替换型标签。
标签的属性
标签的属性通常以键值对形式出现，属性只能出现在开始标签或自闭和标签中。
属性名字全部小写，属性值必须使用双或单引号包裹，如果属性值和属性名完全一样，直接写属性名即可
命名规则
良好统一的命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。
id
页面主体结构可以使用id，其余时候id尽量留给js和后台使用。
class
样式方面尽量只使用class来控制。
类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线 （-）组成。
可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。
避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。
尽量用单个单词简单描述class名称。双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title
name：
命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是CSS命名空间？通过统一的命名规范定义命名的范围，成为CSS class & id命名空间。
布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout-main，只改变layout-命名空间后面的命名，layout始终保留。布局的命名空间为layout-xxx。
模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod-news，照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。
元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。
css通用命名
(1)页面框架命名，一般具有唯一性，推荐用ID命名
|
ID名称 |
命名 |
ID名称 |
命名 |
|
头部 |
header |
主体 |
main |
|
脚部 |
footer |
容器 |
wrapper |
|
侧栏 |
side_bar |
栏目 |
column |
|
布局 |
layout |
|
|
(2)模块结构命名
|
CLASS名称 |
命名 |
CLASS名称 |
命名 |
|
模块(如：新闻模块) |
mod (mod_news) |
标题栏 |
title |
|
内容 |
content |
次级内容 |
sub_content |
(3)导航结构命名
|
CLASS名称 |
命名 |
CLASS名称 |
命名 |
|
导航 |
nav |
主导航 |
main_nav |
|
子导航 |
sub_nav |
顶部导航 |
top_nav |
|
菜单 |
menu |
子菜单 |
sub_menu |
(4)一般元素命名
|
CLASS名称 |
命名 |
CLASS名称 |
命名 |
|
二级 |
sub |
面包屑 |
breadcrumb |
|
标志 |
logo |
广告 |
Bner (禁用banner或ad) |
|
登陆 |
login |
注册 |
regsiter/reg |
|
搜索 |
search |
加入 |
join |
|
状态 |
status |
按钮 |
btn |
|
滚动 |
scroll |
标签页 |
tab |
|
文章列表 |
list |
短消息 |
msg/message |
|
当前的 |
current |
提示小技巧 |
tips |
|
图标 |
icon |
注释 |
note |
|
指南 |
guide |
服务 |
service |
|
热点 |
hot |
新闻 |
news |
|
下载 |
download |
投票 |
vote |
|
合作伙伴 |
partner |
友情链接 |
link |
|
版权 |
copyright |
演示 |
demo |
|
下拉框 |
select |
摘要 |
summary |
|
翻页 |
pages |
主题风格 |
themes |
|
设置 |
set |
成功 |
suc |
|
按钮 |
btn |
文本 |
txt |
|
颜色 |
color/c |
背景 |
bg |
|
边框 |
border/bor |
居中 |
center |
|
上 |
top/t |
下 |
bottom/b |
|
左 |
left/l |
右 |
right/r |
|
添加 |
add |
删除 |
del |
|
间隔 |
sp |
段落 |
p |
|
弹出层 |
pop |
公共 |
global/gb |
|
操作 |
op |
密码 |
pwd |
|
透明 |
tran |
信息 |
info |
|
重点 |
hit |
预览 |
pvw |
|
单行输入框 |
input |
首页 |
index |
|
日志 |
blog |
相册 |
photo |
|
留言板 |
guestbook |
用户 |
user |
|
确认 |
confirm |
取消 |
cancel |
|
报错 |
error |
轮播（走马灯） |
carousel |
|
插件（项目外和js.css等平级的文件夹） |
plugIn |
工具 | tool |
图片命名
背景图片：bg001，bg002，bg003···
一般图片：img001，img002，img003···
按钮图片：btn001，btn002，btn003···
特别图片：如banner,logo按照具体情况命名
全局基础样式
文本颜色：text-c1，text-c2，text-c3···
背景颜色：bg-c1，bg-c2，bg-c3···
边框颜色：border-c1，border-c2，border-c3···
