HTML5学习讲述.docx

HTML5学习工具安装软件：Sublime Text 插件：http://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的复合写法：Padding:10px;一个值代表上右下左都是10pxPadding:10px 20px; 两个值，第一个值代表上下，第二个值代表左右；Padding: