文档章节

小黑小波比.极客学院.HTML5学习笔记

BobbyLou
 BobbyLou
发布于 2015/05/14 15:58
字数 2917
阅读 7
收藏 0

第1阶段HTML开发前准备

1_开发前准备

1_开发前的准备

为什么学习HTML5?

因为HTML5的时代要来了。跨平台运行。然后硬件要求低双核 2GB即可

什么是HTML5?

HTML5是一种描述网页的一种语言
HTML5是指超文本标记语言(Hyper Text Marup Language)
不是编程语言,是标记语言

新特性

canvas标签

video和audio元素

离线储存更好支持

新的特殊内容元素:article、footer、 header、nav、section

新的表单控件:calendar、date、time、email、url、search

浏览器支持:safari、Chrome、 Firefox以及Opera包括IE9基本支持了HTML5

开发工具

很多流行的开发工具。notepad++、text sublime Eclipse 现在推荐使用Intellij IDEA,因为android开发工具android studio是基于IDEA开发的。学好IDEA,android开发工具更好用了。

常见问题解决

找原因,查看参考,参考示例,搜索引擎,问题反馈等

掌握技能要求

HTML5

XHTML

CSS3

JavaScript

jQuery:

jQuery-UI

jQuery-Mobile





2_开发前的准备-快捷键

快捷键设置

prefenrences-keymap-keymaps:eclipse的快捷键

快捷键一览表

如果不用其它的快捷键的话,比如eclipse的快捷键,使用默认的intellij IDEA快捷键。

查询快捷键

CTRL+N   查找类

CTRL+SHIFT+N  查找文件

CTRL+SHIFT+ALT+N 查找类中的方法或变量

CIRL+B   找变量的来源

CTRL+ALT+B  找所有的子类

CTRL+SHIFT+B  找变量的类

CTRL+G   定位行

CTRL+F   在当前窗口查找文本

CTRL+SHIFT+F  在指定窗口查找文本

CTRL+R   在当前窗口替换文本

CTRL+SHIFT+R  在指定窗口替换文本

ALT+SHIFT+C  查找修改的文件

CTRL+E   最近打开的文件

F3   向下查找关键字出现位置

SHIFT+F3  向上一个关键字出现位置

F4   查找变量来源

CTRL+ALT+F7  选中的字符查找工程出现的地方

CTRL+SHIFT+O  弹出显示查找内容 


SVN 管理

把SVN库添加到IDEA中 SETTING ->  VERSIONCONTROL -> VCS = SVBVERSION 

把SVN 过滤目录或者文件类型那个 SETTING -> VERSION CONTROL ->  IgnoredFiles


自动代码

ALT+回车  导入包,自动修正

CTRL+ALT+L  格式化代码

CTRL+ALT+I  自动缩进

CTRL+ALT+O  优化导入的类和包

ALT+INSERT  生成代码(如GET,SET方法,构造函数等)

CTRL+E或者ALT+SHIFT+C 最近更改的代码

CTRL+SHIFT+SPACE 自动补全代码

CTRL+空格  代码提示 (和系统输入法冲突,请在Settings->Keymap->mainmenu -> code ->Completion->basic,右键添加自己的快捷键)

CTRL+ALT+SPACE  类名或接口名提示

CTRL+P   方法参数提示

CTRL+J   自动代码

CTRL+ALT+T  把选中的代码放在 TRY{} IF{}ELSE{} 里 


复制快捷方式

F5   拷贝文件快捷方式

CTRL+D   复制行

CTRL+X   剪切,删除行

CTRL+SHIFT+V  可以复制多个文本 


高亮

CTRL+F   选中的文字,高亮显示上下跳到下一个或者上一个

F2 或SHIFT+F2  高亮错误或警告快速定位

CTRL+SHIFT+F7  高亮显示多个关键字. 


其他快捷方式

CIRL+U   大小写切换

CTRL+Z   倒退

CTRL+SHIFT+Z  向前

CTRL+ALT+F12  资源管理器打开文件夹在WINDOW窗口快速定位到文件或者文件夹的位置

ALT+F1   查找文件所在目录位置

SHIFT+ALT+INSERT 竖编辑模式

CTRL+/   注释//  

CTRL+SHIFT+/  注释

CTRL+W   选中代码,连续按会有其他效果

CTRL+B   快速打开光标处的类或方法

ALT+ ←/→  切换代码视图

CTRL+ALT ←/→  返回上次编辑的位置

ALT+ ↑/↓  在方法间快速移动定位

SHIFT+F6  重构-重命名

CTRL+H   显示类结构图

CTRL+Q   显示注释文档

ALT+1   快速打开或隐藏工程面板

CTRL+SHIFT+UP/DOWN 代码向上/下移动。

CTRL+UP/DOWN  光标跳转到第一行或最后一行下

ESC   光标返回编辑框

SHIFT+ESC  光标返回编辑框,关闭无用的窗口

F1   帮助 (不建议使用,很慢)

CTRL+F4   关闭当前打开文件

总结

从eclipse切换过来的Developer们,可以设置成eclipse的快捷键模式 (只需要把keymaps选择成eclipse模式即可)

资料查询:IDEA 14 的新特性。特别是选择多行编辑!完全跟textsublime一样一样的

http://liyouhai.com/java/how-to-build-j2ee-application-using-intellij-idea.html

第2阶段HTML5基础

1_HTML5特性简介
2_HTML5元素属性和格式化
3_HTML5样式链接和表格
4_HTML5列表块和布局
5_HTML5表单提交和PHP环境搭建
6_HTML5框架、背景和实体
7_HTML5XHTML的使用规范

1_XHTML使用规范

1.什么是XHTML?

XHTML指的是可扩展超文本标记语言
与HTML4.01几乎是相同的
是更严格更纯净的HTML版本
是以XML应用的方式定义的HTML
得到所有主流浏览器的支持

2.为什么使用XHTML?

为了代码的完整性和良好性

3.文档声明

DTD:规定了使用通用标记语言的网页语法

4.三种XHTML文档类型

严格类型 过渡 框架

5.

6.HTML元素语法

正确嵌套、必须始终关闭、必须小写、必须有一个根元素

7.XHTML属性语法规则:

小写(WIDTH错误)、属性值必须用引号包围、最小化也是禁止的(<input button>错误)

第3阶段|CSS3基础

1_CSS3入门基础知识

1_CSS样式-背景

背景属性

属性
描述
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否及如何重复

注意:background-image:url("文件名.jpg")

CSS3背景
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域


background-origin的测试代码
#MyDIV
{
    height: 800px;
    padding:25px;
    border:10px dotted #000000;
    background-image:url('1.jpg');
    background-origin:padding-box;
    background-repeat:no-repeat;
}

background-clip的测试代码
#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-color:yellow;
background-clip:border-box;
}



2_CSS样式-文本

1.文本属性表
css文本
属性 描述
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素重空白的处理方式
word-spacing 字间距











2.CSS3文本效果
text-shadow:向文本添加阴影
word-wrap:规定文本的换行规则
word-wrap用法:
p{
   width:300px;
   text-wrap:normal;
}

width:设定每行的宽度

3_CSS样式-字体

1.CSS字体表
CSS字体
属性 描述
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本
font-weight 设置字体的粗细


2.font-family自定义
@font-face {
    font-family: myfont;
    src: url();
}
div{
    font-family: myfont;
}

其中url("font/xxx.ttf");字体ttf文件




4_CSS样式-链接

1.四种状态:
a:link 普通的 未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
用法:
a:link{
  color:#FF0000;
}



2.常见的链接样式:
text-decoration属性大多用于去掉链接中的下划线
3.设置背景颜色:
background-color

5_CSS样式-列表

CSS列表
属性 描述
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型






6_CSS样式-表格

1.CSS表格

<table id="tb">
      <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
      </tr>
      <tr>
          <td>小王</td>
          <td>20</td>
          <td>男</td>
      </tr>
      <tr>
          <td>小王</td>
          <td>20</td>
          <td>男</td>
      </tr>
      <tr>
          <td>小王</td>
          <td>20</td>
          <td>男</td>
      </tr>

  </table>

2.表格边框

#tb,tr,th,td{
    border:1px solid blue;
}


3,折叠边框

当有外内两边框需要重叠的时候用
#tb{
    border-collapse: collapse;
}


4.表格宽高

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}


5.表格文本对齐

#tb,tr,th,td{
    border:1px solid blue;
    text-align: center;
}


6.表格内边距

#tb td,#tb th{
    border: 1px solid aqua;
    padding: 5px;
}


7.表格颜色

#tb,tr,th,td{
    border:1px solid blue;
    text-align: center;
    background-color: cyan;
}


7_CSS样式-轮廓

CSS轮廓
属性 描述
outline 设置轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度










此表中的属性可以同时使用

2_CSS基本样式讲解

1_CSS基础-介绍及语法

1.CSS概述:

CSS指层叠样式表
CSS杨时报极大地提高了工作效率

2.CSS基础语法:

selector{
       property:value
}

例:h1{color:red;font-size:14px;}
属性大于1个之后,属性之间用分号隔开
如果值大于1个单词,则需要加上引号:
p{font-family:"sans serif";}

3.CSS高级语法:

1.选择器分组:
h1,h2,h3,h4,h5,h6{color:red;}
2.继承
body{
  color:green;
}


2_CSS基础-派生选择器

</head>
<body>
  <P><strong>p标签hello Css</strong></P>
  <ul>
      <li><strong>li标签:Hello css</strong></li>
  </ul>
</body>
</html>

li strong{
    color:red;
}
strong{
    color: blue;
}



3_CSS基础-id选择器

1.id选择器:

id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义

2.id选择器和派生选择器:

目前比较常用的方式是id选择器常常用于建立派生选择器
#pid a{
    color: blueviolet;
}
#divid p{
    color:red;
}

只有a和p标签才能显示自定义颜色.在这个标签外的字体显示正常颜色

4_CSS基础-类选择器

1.类选择器:

类选择器以一个点显示
.class{color:red;}

2.class也可以用作派生选择器

.class a{color:red;}

5_CSS基础-属性选择器

1.属性选择器:

对带有指定属性的HTML元素设置样式

<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>


2.属性和值选择器:

[title]{
    color:blue;
}
[title=te]{
    color: red;
}


3_CSS盒子模型

1_CSS盒子模型-概述

1.盒子模型的内容范围包括:

margin、border、padding、content部分组成

2_CSS盒子模型-内边距

1.内边距:

内边距在content外,边框内

2.内边距属性:

内边距
属性 描述
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距







3_CSS盒子模型-边框

1.CSS边框:

我们可以创建出效果出色的边框,并且可以应用于任何元素

2.边框的样式:

border-style:定义了10个不同的非继承样式,包括none

3.边框的单边样式:

border-top-style

border-left-style

border-right-style

border-bottom-style

4.边框的宽度:

border-width

5.边框单边的宽度:

border-top-width

border-left-width

border-right-width

border-bottom-width

6.边框的颜色

border-color

7.边框单边的颜色:

border-top-color

border-left-color

border-right-color

border-bottom-color



1.CSS3边框

border-radius:圆角边框

box-shadow:边框阴影

box-shadow: 10px 10px 5px #FFCCFF;

右边 底部 模糊程度 颜色

border-image:边框图片


4_CSS盒子模型-外边距

1.外边距:

围绕在内容边框的区域就是外边距,外边距默认为透明区域

外边距接受任何长度单位、百分数值

2.外边距常用属性:

外边距
属性 描述
marigin 设置所有边距
margin-bottom 设置底边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距








5_CSS盒子模型-外边距合并

1.外边距合并:

外边距合并就是一个叠加的概念

6_CSS盒子模型-盒子模型应用

1.外边距合并


4_CSS定位

5_CSS选择器

6_CSS常用操作

7_CSS动画-页面特效

8_HTML与CSS简单页面效果实例




本文转载自:http://blog.csdn.net/u010489586/article/details/41078453

BobbyLou
粉丝 8
博文 149
码字总数 5825
作品 0
海淀
程序员
私信 提问
大喊三声,极客学院送会员啦,注册一个送三十天,谢谢各位大神,,,

免费拿极客学院VIP,1000+高清视频,学习Android、HTML5、iOS各种开发技术,限时领取,手快的戳:http://e.jikexueyuan.com/invite/index.html?ZnJvbV9jb2RlPTk3N0dMSCZ1bmFtZT1qaWtlX3dobm...

闻海南
2015/07/16
66
2
总理给极客学院鼓励,极客学院传递福利!抢楼赢大奖!

5月7日上午,国务院总理现身北京中关村创业大街,并在联想集团创始人柳传志的陪同下,参观了联想之星,和包括极客学院在内的多家创业公司就“大众创业,万众创新”进行了交流。 李总理参观联...

极客学院
2015/05/08
1K
31
前端开发攻城师不可忽视的五个HTML5新特性

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTM...

gbin1
2013/07/03
6.3K
17
来极客学院当Part Time布道师,轻轻松松一月挣个iPhone 6

极客学院合作布道师招募入口:http://www.jikexueyuan.com/evangelist/apply.html?hmsr=osc_recurit_evangelist 极客学院开放外部专家课程合作了,欢迎申请! 我们是谁? 极客学院--中国最...

oliolioli
2015/01/08
668
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 自定义登录认证(二)

一、前言 本篇文章将讲述Spring Security自定义登录认证校验用户名、密码,自定义密码加密方式,以及在前后端分离的情况下认证失败或成功处理返回json格式数据 温馨小提示:Spring Security...

郑清
18分钟前
1
0
php yield关键字以及协程的实现

php的yield是在php5.5版本就出来了,而在初级php界却很少有人提起,我就说说个人对php yield的理解 Iterator接口 在php中,除了数组,对象可以被foreach遍历之外,还有另外一种特殊对象,也就是继承...

冻结not
31分钟前
2
0
servlet请求和响应的过程

本文转载于:专业的前端网站➥servlet请求和响应的过程 1.加载 Servlet类被加载到Java虚拟机中,并且实例化。在这个过程中,web容器(例如tomcat)会调用Servlet类的公开无参构造函数,产生一...

前端老手
31分钟前
2
0
golang 1.13 errors 包来了,不用写“err 气功波”代码

引 这篇是对 errors 包 的姿势挖掘 气功波错误代码 从 http.Get()返回的错误 判断 syscall.ECONNREFUSED 错误.以前要对 go 标准库 error 结构有点熟悉,才能写出下面的代码 func CmdErr(err ...

guonaihong
35分钟前
25
0
喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
36分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部