HTML5学习讲解.docx

HTML5学习 工具安装 软件：Sublime Text 插件： HYPERLINK http://packagecontrol.io/installation \l st3 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=en head--------------------------------------文档头 meta charset=UTF-8---------浏览器识别用 titleDocument/title----------显示内容 /head body---------------------------------------文档身体（网页内容） /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、rig