标签：总结 元素 layout 标签 认知 html 模块 命名 mod
什么是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这种语言，并不像严谨的编程语言一样，有一条非此即彼的线。
一些语义的使用其实会带来争议，所以我的建议是：你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。
2.4. 合理使用标签，语义化结构
1) 标签合理嵌套
a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p
2) 严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：
p：文本段落；
dl：定义列表，可包括标题和内容简介的列表；
ul：无序列表；
ol：有序列表；
h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；
strong/em：强调文本；
img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；
table：数据网格，规则的分栏布局，尽可能显性的定宽和定高。
3) 合理化表单结构
a) 使用fieldset元素包裹相同类别的字段；
b) 使用legend元素表示字段类别名称；
c) 使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；
d) 文本框不使用size属性定义宽度，而使用css的width属性；
e) 添加maxlength属性限制输入字符的长度。
超链接标签
link：
a：
area：area可以实现点击局部跳转
替换型元素和链接型元素
链接型元素：使用href引用外部文件的标签是链接型元素（如link标签引入css）。
替换型元素：使用src引入外部文件的标签是替换型元素，如img；picture；video；audio；iframe。
script标签：该标签可以引入js，也可以直接写js，所以script是链接型标签，也是替换型标签。
标签的属性
标签的属性通常以键值对形式出现，属性只能出现在开始标签或自闭和标签中。
属性名字全部小写，属性值必须使用双或单引号包裹，如果属性值和属性名完全一样，直接写属性名即可
元素类型
块级元素：
行内元素：
行内块元素：
命名规则
良好统一命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。
id用驼峰命名法，class用中划线，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 。
-
样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母
（a-z）、数字（0-9）、中划线（-）组成。 -
可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用
123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2"，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。 -
双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：
news-list、mod-feeds、mod-my-feeds、cell-title
主容器： main
页头： header
页脚： footer
内容区域： content
LOGO： logo
主导航： main-nav
二级导航： sub-nav
css通用命名
(1)页面框架命名，一般具有唯一性，推荐用ID命名
|
ID名称 |
命名 |
ID名称 |
命名 |
|
头部 |
header |
主体 |
main |
|
脚部 |
footer |
容器 |
wrapper |
|
侧栏 |
side_bar |
栏目 |
column |
|
布局 |
layout |
|
|
(2)模块结构命名
|
CLASS名称 |
命名 |
CLASS名称 |
命名 |
|
模块(如：新闻模块) |
mod (mod_news) |
标题栏 |
title |
|
内容 |
content |
次级内容 |
sub_content |
(2)导航结构命名
|
CLASS名称 |
命名 |
CLASS名称 |
命名 |
|
导航 |
nav |
主导航 |
main_nav |
|
子导航 |
sub_nav |
顶部导航 |
top_nav |
|
菜单 |
menu |
子菜单 |
sub_menu |
(3)一般元素命名
|
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 |
1.5 通用命名
(1)页面框架命名，一般具有唯一性，推荐用ID命名
| ID名称 | 命名 | ID名称 | 命名 |
|---|---|---|---|
| 头部 | header | 主体 | main |
| 脚部 | footer | 容器 | wrapper |
| 侧栏 | sideBar | 栏目 | 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 | 注册 | register/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 | |
3.1. Css 命名规则
1) 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。
2) 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class=”left_news”、class=”2” ，以避免当状态改变时名称失去意义。
3) 尽量用单个单词简单描述class名称。
4) 双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。例如：news_list、mod_feeds、mod_my_feeds、cell_title
3.2. Class和ID的使用方法
把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id=”page_index”)，页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名
3.3. 命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是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 。
- 图片命名
1) 背景图片：bg001,bg002,bg003……
2) 一般图片：img001,img002,img003……
3) 特定图片：如banner,logo按照具体情况命名
4) 按钮图片：btn_submit,btn_cancel…….
(5)全局皮肤样式
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……
标签：总结,元素,layout,标签,认知,html,模块,命名,mod 来源： https://www.cnblogs.com/llqwm/p/11582336.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。