html
概念
Hyper text markup language 超文本标记语言
超文本：能够实现网页跳转的文本（超链接）
标记： html中的标签
Html结构
<! Doctype html> <html> 根标签 <head> <title></title> </head> <body></body> </html>
<! Doctype html> 文档类型
<head></head> html文档头部分
<title></title> 网页的标题
<body></body> html结构的主体部分
标签的分类
单标签
只有开始标签没有结束标签 例如：<! Doctype html>
Ctrl+/ command+/
文本换行标签 <br>
横线标签 <hr>
双标签
有开始标签和有结束标签 例如： <body></body>
标签关系分类
◆并列关系（兄弟）
<head></head>
<body></body>
◆嵌套关系（包含）
<head>
<title></title>
</head>
标签显示方式不同进行的分类
块级元素
典型代表 div,p,li,h1...
特点：
◆元素自己独占一行显示（与宽度无关）
◆可以设置宽度和高度
◆当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。
行内元素
典型代表 Span， a, font, strong...
特点：
◆元素在一行上显示
◆不能直接设置宽度和高度
行内块元素
典型代表 Image, input(表单控件)
特点：
◆元素在一行上显示
◆可以设置宽度和高度
元素之间的转换
Display：inline 将元素转化为行内元素
Display：inline-block 将元素转化行内块元素
Display：block 将元素转化为块元素
常用标签
段落标签 <p></p>
标题标签 <h1></h1>
注意：标题标签只能 取到数字1-6
文本标签 <font></font>
文本格式化标签
◆文字加粗显示 <strong></strong> <b></b>
◆文字斜体 <em></em> <i></i>
◆文字删除线 <del></del> <s></s>
◆文字下横线标签 <ins></ins> <u></u>
图片标签 <img>
属性：
◆src: 设置显示图片（图片名称或者图片路径）
◆title：用来设置鼠标方到图片上显示的文字
◆alt：当图盘无法正常显示的时候，对图片的描述
◆width: 用来设置图片宽度
◆height: 用来设置图片高度
相对路径
◆当图片和文件（html）在同一文件夹中
src属性中直接写上图片名称即可。
◆当图片在文件（html）的下一级目录中
src属性中写上图片所在文件夹名+“/”+图片名称
◆当图片在文件（html）的上一级目录中
src属性中写上 ../图片所在文件夹名+“/”+图片名称
绝对路径
凡是带有磁盘路径的都是绝对路径或者带有网站地址的也是绝对路径
例如: D:\a\1.png www.baidu.com/imags/1.png
超链接 <a>
<a href=””></a> 页面跳转
属性：
◆title: 当鼠标放到超链接上显示 的文字
◆target="_self" 默认值 网页在当前页面中打开
◆target="_blank" 网页在新窗口中打开
优化的写法：
锚链接
任何一个标签设置id属性，并取值
给a标签设置href属性 “#id名称”
文字和图片都可以设置超链接。
Meta标签【本次4种用法均在head标签里面】
◆<meta charset="utf-8">
Charset：字符集
ASCII
ANSI
Unicode
Gbk
Gb2312
Big5
utf-8：编码格式
◆<meta name="keywords" content="">
作用：对网站进行SEO优化的作用
◆<meta name="description" content="">
作用：对网站进行描述，有SEO优化的作用
◆<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
网页重定向
Link标签【本次2种用法均在head标签里面】
◆<link rel="icon" href="favicon.ico">
给网页titile中放置小图标
◆<link rel="stylesheet" href="1.css">
引入外部样式表
标签语义化
概念：
什么样的标签干什么样的事。
意义：
1.网页结构合理
2.有利于seo，和搜索引擎建立良好沟通，有了良好的结构和语义，你的网页内容自然容易被搜索引擎抓去
3.方便其他设备解析(如屏幕阅读器，盲人阅读器，移动设备)
4.便于团队开发和维护
什么样的网页语义化比较好
让网页裸奔（css样式去掉），结构依然清楚。
做法
1.尽可能少的使用无语义的标签div和span；
2.在语义不明显时，既可以使用div或者p时，尽量用有语义的标签
3.不要使用纯样式标签，如：b、font、u等，改用css设置
4.需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）
特殊字符
列表
无序列表 <ul>
<ul>
<li></li> 列表项
<li></li>
......
</ul>
属性介绍：
◆type="square" 小方块显示
◆type="circle" 小圆圈
有序列表 <ol>
<ol>
<li></li>
<li></li>
</ol>
Type属性：
A, a ， i (小写的罗马数字) I(大写的罗马数字)
start="3" li前面的显示从第几个开始
自定义列表 <dl>
<dl>
<dt></dt> 小标题
<dd></dd> 列表项
<dd></dd>
<dd></dd>
</dl>
表格 <table>
作用
显示数据
组成
◆table 定义表格
◆tr 行
◆td 列（单元格）
◆th 设置表格标题，用法和td一样
属性介绍
◆border: 设置表格边框
◆width: 设置表格宽度
◆Height: 设置高度
◆cellspacing：设置单元格之间的距离
◆cellpadding：文字距离单元格边框的距离
◆bgcolor="red" 设置背景颜色
◆align=center left| right 给td或者tr设置让文字居中
◆table设置表格居中
设置表格表头 <caption>
表格结构
<table>
<thead></thead> 头
<tbody></tbody> 身体
<tfoot></tfoot> 脚
</table>
单元格的合并
◆横向和合并：
◆纵向合并：
表单 <form>
作用
表单的作用用来收集信息
组成
提示信息
表单控件
表单域
属性：
◆action：处理用户数据信息
Method：get | post
◆Get数据提交：
通过地址栏的方式进行数据提交，将用户输入的信息显出来。
Get提交安全性差
◆Post提交：
数据通过后台进行提交，不会将用户信息显示出来，安全性比较好。
表单控件
文本输入框
属性：
◆maxlength： 设置文本输入框最多能输多少字符
◆readonly="readonly" 设置文本输入框为只读（只能读不能编辑）
◆disabled="disabled" 控件属于非激活的状态
◆name="username" 给输入框设置名称
◆Value=”” 设置或者显示输入的值
密码输入框
属性用法与文本输入框的用法一样。
单选按钮：
注意：实现单选效果一定要给控件设置相同的名称
属性：
◆checked="checked" 设置默认选中项
下拉列表：
属性：
◆设置默认选中项
◆multiple="multiple" 可以实现多选效果
◆下拉列表分组显示：
◆多选控件：
设置默认选中项： checked=checked
◆多行文本输入框：
◆图片上传控件：
◆按钮系列：
1.表单提交按钮
2.普通按钮
注意：该按钮不能进行表单提交。通常和js代码配合使用
3.重置按钮
将控件中的值恢复到默认值状态
4.图片按钮
该控件也可以进行表单的提交
◆表单分组控件：
◆网址判断
◆邮箱判断
◆日期控件
◆时间控件
◆只能输入数字的控件
◆范围空间
sublime快捷键使用： http://blog.csdn.net/moyan_min/article/details/11530751
Emmet缩写语法 http://www.cnblogs.com/cnjava/archive/2013/07/30/3225174.html
