html总结

什么是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···