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

2019独角兽企业重金招聘Python工程师标准>>>

第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")

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.文本属性表

属性	描述
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字体表

属性	描述
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样式-列表

属性	描述
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样式-轮廓

属性	描述
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简单页面效果实例

转载于:https://my.oschina.net/snowbobo/blog/414888