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
显示全部