一、什么是响应式设计1.1 定义真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。1.2 响应式设计的优势开发、维护、运营成本优势:页面只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势:移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活:响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。二、屏幕的相关概念2.1 分辨率 resolutio 是指显示器所能显示的像素的多少像素密度 单位: dpi(dots per inch) ppi 像素密度(pixels per inch)也称PPi，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。 像素密度=√{ (长度像素数^2+宽度像素数^2) }/ 屏幕尺寸 iphone3G 165dpi 320px 480px iphone4 326 dpi 640px960px iphone6s 326dpi 1334px*750px每像素包含点的数量(dppx) 用 iPhone4 举个例子，它有 326 DPI 显示屏，根据上表，智能手机的典型观看距离大概16.8英寸，基准像素为 160 DPI。所以要显示一个 CSS 像素，苹果选择将像素比设置为2，所以看起来就和 163 DPI 手机中显示的一样了。 设备像素比(dip或dpr) 同 dppx视网膜(Retina)屏幕是苹果公司在部分移动产品使用的一种屏幕。第一次被人们熟知，是苹果将其用在iphone 4手机上，它将960x640的分辨率压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸(ppi)，称之为“视网膜屏幕”。通常电脑显示屏幕的分辨率为72ppi，iPhone 4的分辨率为电脑的4倍多。由于其具备超高像素密度的液晶屏，因此屏幕显示异常清晰、锐利。三、viewport视口3.1 什么是viewportviewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。3.2 设置viewportwidth:控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素) height:和 width 相对应，指定高度。 initial-scale:初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例 minimum-scale:允许用户缩放到的最小比例 user-scalable:用户是否可以手动缩放。四、媒体查询 @media4.1 媒体类型4.2 媒体特性aspect-ratio 可视窗囗宽高比 min/max device-aspect-ratio 设备的宽高比 min/max orientation 设备的使用方向 landscape(水平方向) portrait(垂直方向) width 可视窗口的宽度 max/min device-width 设备的宽度 max/min height 可视窗口的高度 max/min device-height 设备的高度 max/min resolution 屏幕密度 单位dppx max/min webkit内核请使使用 -webkit-min-device-pixel-ratio4.3 媒体查询用法用法一： 用法二：@import url(css文件) mediaType 用法三：@media mediatype and (media feature) { CSS-Code; } @media (media feature) { CSS-Code; }4.4 媒体查询语法运算符and 并且 , 或者 not 否定 一定要指定媒体类型，因为媒体类型默认al，not后永远返回假 only only + 媒体类型五、断点设置5.1 常用设置一三个断点:768px 992px 1200px 手机 超小屏幕 <= 768px 平板 小屏幕 769px ~ 992px 中等屏幕 993px ~ 1200px 大屏幕 >1200px5.2 常用设置二四个断点:576px 768px 992px 1200px 超小屏幕 <= 576px 小屏幕 577px ~ 768px 中等屏幕 769px ~ 992px 大屏幕 993px ~ 1200px 超大屏幕 > 1200px5.3 推荐设置三两个断点: 640px 1024px 小屏幕 <= 640pX 中等屏幕 641px ~ 1024px 大屏幕 > 1024px六、响应式图片设置图片宽度百分比 使用背景图片 paddint-top background-size 使用H5 标签 使用picturefill插件
一、布局相关的标签 定义文档中的分区或节 这是一个行内元素，没有任何意义 HTML5新增 定义 section 或 page 的页眉 HTML5新增 定义 section 或 page 的页脚 <mainx/main> HTML5新增 标签规定文档的主要内容。 元素中的内容对于文档来说应当是唯一的。它不应包含在 文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别 /nav> HTML5新增 表示链接导航部分 如果文档中有”前后”按钮，则应该把它放到元素中 <sectionx/section> HTML5新增 定义文档中的节 通常不推荐那些没有标题的内容使用section HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论 HTML5新增 相关内容，相关辅助信息，如侧边栏二、盒子模型2.1 什么是盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) 清除边框外的区域，外边距是透明的。Border(边框)围绕在内边距和内容外的边框。Padding(内边距)清除内容周围的区域，内边距是透明的。Content(内容)盒子的内容，显示文本和图像。2.2 块级元素和内联元素（行内元素）块级元素和其他元素都在一行上 高，行高及外边距和内边距部分可改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 外边界只能对左右起作用，内边距都起作用块级元素和内联元素的转换display: block | inline | inline-block2.3 盒子模型之间的关系document树父元素 子元素 后代元素 祖先元素 兄弟元素标准文档流1.行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。 2.块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。盒子在标准流中的定位原则行内元素之间的水平margin 块级元素之间的竖直margin(margin的塌陷) 嵌套盒子之间的margin,(子元素父元素margin合并) 将margin设置为负值2.4 盒子模型相关css属性2.4.1 布局属性display| 值 | 描述 | | ------------ | ---------------------------------------------------- | | none | 此元素不会被显示。 | | block | 此元素将显示为块级元素，此元素前后会带有换行符。 | | inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | | inline-block | 行内块元素。（CSS2.1 新增的值） |float| 值 | 描述 | | ------- | ---------------------------------------------------- | | left | 元素向左浮动。 | | right | 元素向右浮动。 | | none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 | | inherit | 规定应该从父元素继承 float 属性的值。 |clear| 值 | 描述 | | ------- | ------------------------------------- | | left | 在左侧不允许浮动元素。 | | right | 在右侧不允许浮动元素。 | | both | 在左右两侧均不允许浮动元素。 | | none | 默认值。允许浮动元素出现在两侧。 | | inherit | 规定应该从父元素继承 clear 属性的值。 |visibility| 值 | 描述 | | -------- | ------------------------------------------------------------ | | visible | 默认值。元素是可见的。 | | hidden | 元素是不可见的。 | | collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 | | inherit | 规定应该从父元素继承 visibility 属性的值。 |overflow| 值 | 描述 | | ------- | -------------------------------------------------------- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 |overflow-xoverflow-y2.4.2 尺寸width/max-width/min-width height/max-height /min-height2.4.3 内补白padding /padding-left/padding-right/ padding-top /padding-bottom2.4.4 外边距margin margin-left margin-right margin-top margin-bottom三、浮动3.1 什么是浮动CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动 设置浮动，脱离普通文档流 浮动元素都会变为块级元素 如果不设置宽度，会尽可能的窄 浮动元素之后的元素将围绕它 浮动元素之前的元素将不会受到影响.3.2 设置浮动.item { float:left } .item { float:right } /*float 属性的默认值是 none 表示没有浮动*/3.3 清除浮动浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。 因此，创建浮动框可以使文本围绕图像：要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。clear: both clear: left clear: right3.4 浮动实验实现以下实现 1.设置第一浮动的div 2.设置第2个浮动div 3.设置第3个浮动div 4.改变第三个浮动方向 5.改变第二个浮动方向 6.全部向左浮动,增加第一个的高度 7.使用clear属性清楚浮动的影响 8. 扩展盒子的高度(元素高度和浮动的元素) 9.段落首字母浮动 10.图片浮动 11.简单浮动布局3.5 浮动相关css属性总结float 值: none(默认) /left /right clear 值: none(默认) /both /left /right3.6 浮动布局小案例
一、文字样式文字样式是用来控制字体或文本的显示方式的。/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/ font-family: "STSong", "微软雅黑"; /*字体大小*/ font-size: 40px; /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900; /*行高: 字体文本默认在行高中垂直居中显示*/ line-height: 200px; /*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */ text-decoration: overline; /*字间距*/ letter-spacing: 2px; /*词间距*/ word-spacing: 5px; /*首行缩进：1em相当于一个字的宽度*/ text-indent: 2em; /*字体颜色*/ color: red; /* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */ text-align: center;二、背景样式标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。/*背景图片：url函数可以链接网络或本地图片*/ background-image: url('https://www.baidu.com/favicon.ico'); /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺) background-repeat: no-repeat; /*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/ background-position-x: 10px; /*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/ background-position-y: 10px;三、显示样式HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。display:block; display:inline; display:inline-block;
什么是css选择器？css选择器本质就是css与html两种语法建立关联的特定标识符: 就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们 而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍一、基础选择器 1.1 通配选择器/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */ /* 通配选择器控制页面中所有的标签(不建议使用) */ * { /* 样式块 */ } 1.2 标签选择器/* 特定标识符 标签名 */ /* 标签选择器控制页面中标签名为标签选择器名的所有标签*/ div { /* 控制页面中所有div标签的样式 */ /* 样式块 */ } 1.3 class选择器（提倡使用） /* 特定标识符 点(.) */ /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/ .box { /* 控制页面中所有标签全局属性class值为box标签的样式 */ /* 样式块 */ } 1.4 id选择器/* 特定标识符 井号(#) */ /* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/ #box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */ /* 样式块 */ } 1.5 基础选择器优先级在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系: 文字内容 <!-- 1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高 2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次 3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次 4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink 优先级：通配选择器 < 标签选择器 < class选择器 < id选择器 -->二、复杂选择器 2.1 群组选择器/* 连接标识符 逗号(,) */ /* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */ div, p, .box, #ele { /* 样式块 */ } 2.2 后代选择器/* 连接标识符 空格( ) */ /* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ } 2.3 子代选择器/* 连接标识符 大于号(>) */ /* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ }<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 --> 2.4 兄弟选择器/* 连接标识符 波浪号(~) */ /* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ } 2.5 相邻选择器/* 连接标识符 加号(+) */ /* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ } 2.6 交叉选择器/* 连接标识符 紧挨着(没有任何连接符) */ /* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */ div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/ /* 样式块 */ }<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开 2.7 基础选择器优先级简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢?1. 复杂选择器的种类并不会影响优先级 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样 2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级 -- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i 3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器 -- id选择器：#i 大于 n层class选择器：.box .i -- class选择器：.box 大于 n层标签选择器：body div总结选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了 我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢?下面我们就一起来学习一下具体的样式设置。
一、css3是什么CSS3就是css语言，数字3是该语言的版本号;css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式(css语言代码也可以直接写在html文件中)，采用的语言是级联样式表(Cascading Style Sheet)，也属于标记语言。二、css3如何学习学习方向:从css代码书写位置、css选择器和css具体样式设置三部分进行学习 学习目的:完成页面样式布局和位置布局三、css代码书写位置css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。 3.1 行间试 css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式 内容 3.2 内联式 css样式书写在head标签内的style标签中，样式格式为 css选择器{样式块}，样式块由一条条样式组成 3.3 外联式 css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件(建议在head标签中引入)css文件夹下的my.css/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */ p { width: 50px; height: 50px; background-color: orange; }根目录下的first.html 根目录下的second.html 总结行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差; 内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护 外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。 在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢?答案就是用于建立css与html之间联系的css选择器
一、文档声明 你可使用此声明在 Internet Explorer6 及以后版本中切换为严格的标准兼容模式。 abc 二、主体结构 此元素可告知浏览器其自身是一个 HTML 文档。 用于定义文档的头部，它是所有头部元素的容器。， 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 </doby>定义文档的主体三、HEAD头部标签 定义文档标题 标签为页面上的所有链接规定默认地址或默认目标! 元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。标签永远位于 head 元素内部。 标签定义文档与外部资源的关系 标签用于定义客户端脚本，比如JavaScript。script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。四、meta元信息content 定义与 http-equiv 或 name 属性相关的元信息 name 把content属性关联到一个名称 author description keywords generator revised robots others http-equiv 把 content 属性关联到 HTTP 头部 content-type expires refresh set-cookie charset字符集编码 编码字符集 HTML5 支持 HTML5向下兼容 HTML 4支持 网页关键字： 网页描述信息 所有搜索引擎，抓取这个页面、爬行链接、禁止快照： all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将被检索，但页面上的链接不可以被查询； noarchive：文件将被检索，但禁止保存快照； 网页作者： 网页网页生成工具 定义页面最新版本 网页版权信息： 网页刷新信息： 10秒后跳转到百度页面五、格式排版标签 换行标签，完成文字的紧凑显示。可以使用连续多个 标签来换行 水平分割线标签，用于段落与段落之间的分割 段落标签,里面可以加入文字,列表,表格等，可以 或<p />使用 按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来 标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行 没有任何语义的标签六、文本标签表示强调，通常为斜体字 表示强调(语气更强)，通常为粗体字 标签定义文档中已删除的文本 <insx 标签定义已经被插入文档中的文本 文字下标字体标签 文字上标字体标签 <markx/mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索 引擎搜索页面 H5新增 标签定义 ruby 注释(中文注音或字符) 在东亚使用，显示的是东亚字符的发音。 H5新增 标签定义字符(中文注音或字符)的解释或发音 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字 定义一个定义项目 定义计算机代码文本 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 定义缩写 配合title属性 (IE6以上) 来覆盖默认的文本方向 dir属性 值: lrt rtl 定义变量。您可以将此标签与 及 标签配合使用。 标签定义小型文本（和旁注） 粗体字标签 根据 HTML 5 的规范， 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 为文本加下划线，用户会把它混淆为一个超链接。 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字) 标签定义摘自另一个源的块引用。浏览器通常会对 元素进行缩进。(大段文字) (块状元素) 定义地址 通常为斜体 (注意非通讯地址) 块状元素 H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息 H5已删除 打字机文字 H5已删除 大型字体标签 H5已删除 添加删除线 H5已删除 首字母缩写 请使用代替 H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用) H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面 H5新增 定义预定义范围的度量 H5新增 标签标示任务的进度（进程） H5新增 定义时间和日期 H5新增 规定在文本中的何处适合添加换行符。Word Break Opportunity
一、HTML1.1 什么是HTMLHTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编译,直接由浏览器执行 HTML文件是一个文本文件,包含了一些HTML元素,标签等 HTML文件必须使用.html或.htm为文件名后缀 HTML是大小写不敏感的,HTML与html是一样的 HTML是由W3C的维护的HTML 是通向 WEB 技术世界的钥匙。1.2发展历史HTML是从2.0版本开始的，实际上没有1.0的官方规范,在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0--1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2--1997年1月14日，W3C推荐标准 HTML 4.0--1997年12月18日，W3C推荐标准 HTML 4.01(微小改进)--1999年12月24日，W3C推荐标准 HTML5-2014年10月28日，W3C推荐标准1.3HTML5的由来HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日，万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。 2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。1.4HTML5的优点1、提高可用性和改进用户的友好体验 2、有几个新的标签，这将有助于开发人员定义重要的内容 3、可以给站点带来更多的多媒体元素(视频和音频) 4、可以很好的替代FLASH和Silverlight 5、当涉及到网站的抓取和索引的时候，对于SEO很友好 6、将被大量应用于移动应用程序和游戏 7、可移植性好。1.5HTML5的兼容性Internet Explorer 9 以及 以上版本 chrome、Safari、opera、Firefox和各种以wekkit为内核的国产浏览器二、HTML基本语法2.1HTML标签标签是HTML中最基本单位,也是最重要组成部分 通常要用两个角括号括起来:<和> 标签都是闭合的(两种形式:成对与不成对) 双标签(成对):<标签名>内容</标签名>如: 即分起始和结束 单标签(不成对):<标签名 />;如: 、 标签是大小写无关的,body>;跟<B0DY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准 对于HTML标签来讲，最重要的是语义2.2HTML标签属性HTML属性一般都出现在HTML的开始标签中,是HTML标签的一部分。 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。 标签可以拥有多个属性。 属性由属性名和值成对出现。 语法格式如下: <标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">2.3HTML代码格式任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。2.4HTML注释 2.5HTML实体（特殊字符）