HTML5学习.docxVIP

HTML5学习工具安装软件：Sublime Text 插件：http://packagecontrol.io/installationhttp://packagecontrol.io/installation#st3插件安装：打开sublime软件，使用ctrl+`调出面板，从插件网页中复制相应代码到软件中，点击回车，插件安装成功。具体插件：安装installpackage在sublime中使用ctrl+shift+p，调出面板，输入install，找到相应插件进行安装：安装成功后，在preferences有package settings菜单，代表安装成功，如下图：安装emmet，方法同上，安装emmet后可以使编码更方便；侧边栏插件，side bar也可安装，安装方法同上。Html5模板html5模板!DOCTYPE html------------------------文档头声明html lang=enhead--------------------------------------文档头 meta charset=UTF-8---------浏览器识别用titleDocument/title----------显示内容/headbody---------------------------------------文档身体（网页内容）/body/html注释的快捷键：ctrl+/Css基础样式Css语法：属性名:属性值；Css引入方式：行间样式的引入写法：在标签中，写一个style的属性，比如：style=”……..”，在引号当中，写相应Css样式缺点：不利于代码维护，不利于代码重用优点：优先级最高内部样式表的引入写法：在head标签里，写一个style的标签，在标签中，通过选择器来控制样式。 选择器？标签选择器写法：Div{ ……Css的样式}ID选择器 写法： 首先在相应标签中设置一个ID的属性， 如：id=”id名” 在样式表中，通过 #+id名{ …….css的样式} 温馨小提示： id名要以英文字母开头；id名不能重复，是唯一的class选择器 写法： 首先在相应标签中设置一个class的属性， 如：class=”class名” 在样式表中，通过 .+class名{…….css的样式} 温馨小提示： class名要以英文字母开头；class名可以重复 优先级：标签名选择器 class选择器 id选择器 行间样式 优点：加载速度快，不需要去请求服务器 缺点：不利于代码重用外部样式表的引入写法：在head标签表里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器来控制样式。 link rel=stylesheet href=1.css温馨小提示： link rel=stylesheet href=css文件路径 优点：利于代码重用 缺点：需要加载服务器Css的基础样式Width 宽Height 高Background 背景背景色设置方式：Background-color:颜色值（英文、十六进制、RGB值） 背景图设置方式：Background-image:url(“图片路径”)背景图平铺设置方式Background-repeat:no-repeat repeat-x repeat-y背景图定位设置方式Background-position:第一个值(X轴位置) 第二个值(Y轴位置);（值与值之间有空格）第一个值：可以是left、center、right；还可以是具体坐标值；第二个值：可以是top、center、bottom；还可以是具体坐标值；复合写法：Background: color image position repeat；背景图随滚动条滚动设置：Background-attachment:fixed;背景图尺寸设置Background-size: 第一个值(X轴比例) 第二个值(Y轴比例);（值与值之间有空格） 温馨小提示：CSS3的样式，不兼容Border 边框复合写法：Border:border-width border-style border-color; Border-width 边框宽度Border-style边框样式 solid 实线 dashed 虚线 dotted 点线（点线IE6不认）Border-color边框颜色 英文单词、十六进制、RGB值边框圆角Border-radius:百分比、数值;透明 transparent Padding 内边距Padding-top 上内边距Padding-left 左内边距Padding-bottom 下内边距Padding-right 右内边距Padding的复合写法：Paddin