html5入门

包括html,css,javascript的最基础的知识。Javascript介绍较为简单。。。

                                 HTML基础
***********************************************************************************************************
Copyright @yankonghan
Year: 2015


**********************************************************************************************************
零 综述
 HTML和XHTML的区别
 XHTML是将HTML用XML的形式序列化之后发送到客户端供浏览器解析显示，为了避免解析错误，所以格式较HTML要求严格
 区别如下：
 0.1 标记的嵌套使用
 HTML会自动忽略错误的嵌套，而XHTML则会解析错误
 0.2 引号的使用
 HTML或HTML5中引号使用随意，特性的值单引号或双引号或是不使用引号都可以。但是XHTML则必须加引号，即使是数字。
 简单一句话，尽量加上吧。
 0.3 尽量用小写标记。






一：字体和排版标记


总述：
h1~h6 标题
p 段落
<br/> 换行
<hr> 另一种换行
<pre> 预格式化标记
<span> 行内定义区域
<div> 区块标记
<b> 粗体标记
<i> 斜体标记
<sup> 上标形式
<sub> 下标形式


分说：


1.1 p标记和br标记


由于多个空格和回车均只解释为一个空格，因此要想表示换行得用 <br/>，而<p>...</p>表示一个段落


1.2 hr标记
<hr style = "width:80%; height:3px;">
这个hr标记，宽度为父div的80%.
作用：另起一行，并且绘制一条水平直线，直线上下留有一定的空白.


1.3 pre标记
pre标记中的内容将会按照原始格式显示出来。(省的写一大堆<br/>或是&nbsp;)


1.4 i标记与b标记嵌套
<i><b>斜粗体</b></i>  只能是外套斜体内套粗体


二 列表和图像显示
总述：
o1 li 有序列表
ul li 无序列表
dl dt dd 自定义列表
img 图像标记


分说：
2.1 有序列表和自定义列表
通过 list-style-type来设置标号
对于：有序列表，有 "upper-roman","decimal","lower-alpha"(小写字母)等形式。
 无序列表，有 disc(默认), circle, square等方式。


2.2 自定义列表
dl标记表示自定义列表，dt表示标题，而dd为标题的内容
eg:
<dl>
<dt>小猫</dt>
<dd>年龄：2岁</dd>
<dd>爱好：吃鱼</dd>
<dt>小狗</dt>
<dd>年龄：3岁</dd>
<dd>爱好：啃骨头</dd>
</dl>
显示效果
小猫
年龄：2岁
爱好：吃鱼
小狗
年龄：3岁
爱好：啃骨头


2.3图像标记
<img alt="smile" scr="smile.jpg" style="height:100px; width:100px;"/>
其中alt的值会在鼠标停留在图片上时显示。

三 超链接和页内框架
3.1 超链接
<a href="http://www.baidu.com" target="_blank",title ="这是一个链接" >链接</a>
target取值为_blank时为打开新的窗口,title为鼠标停留在链接上方的显示超链接的描述。


3.2 页内框架 iframe
iframe特性：
src, id ,title, name, scrolling
eg: <iframe name="iframe1" src="LiBai.html" >
您使用的浏览器不支持页内框架
</iframe>
<div>
<ul>
<li><a href="LiBai#将进酒" target="iframe1">将进酒</a></li>
<li><a href="LiBai#秋浦歌" target="iframe1">秋浦歌</a></li>
</ul>
</div>
在LiBai.html中要有<a id="将进酒"></a>，也可以是<a name="将进酒"></a>作为锚点


         四  表格
总说：用tr和td进行。
eg: <table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
    </table>
对于横跨行或横跨列的情况，则用colspan和rowspan进行。
eg: <table>
<tr>
<td colspan="4">1</td>

</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td rowspan="2">24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>

</tr>
</table>
                          
                            五  音频和视频
总说：audio特性
autoplay
controls 显示播放按钮和进度条
loop
preload 加载页面时就加载音频，预备播放
src
 video特性:
  除了audio的所有属性外，还有：
  width
  height
  start开始播放位置


  六  语义化标记
总说：nav , section, aside, hgroup, header, footer, figure, figcaption, mark等
6.1 导航标记nav
<nav>
<ul>
<li><a href="index.html"></a></li>
<li><a href="about.html"></a></li>
</ul>
</nav>


6.2 文章标记
article: 标记描述的是文字信息
section: 文字信息的某一段
header: 某段文字信息的标题


6.3 页脚标记(footer)
一般定义作者的姓名，文档的创作日期等。


                             CSS基础
***********************************************************************************************************
Copyright @yankonghan
Year: 2015


***********************************************************************************************************
CSS是Cascading Style Sheets缩写，级联样式表。控制HTML元素呈现的样式


一 CSS的种级联控制
其实很简单啦。
1:内联式  
<div style="text-align:center; color:red;"></div>
2:嵌入式
就是在head部分加入<style> 呗
...
 </style>
3:外部链接式
引入外部.css文件。需要<link href="test.css" type = "text/css" rel="Stylesheet" />


4:利用@Import在css中引入其他css内容
@import url(30-2.css);

二 CSS的单位
1. 长度单位
绝对单位:一般是 px 较多
相对单位：em 和 %
em表示相对父元素的字体的大小比例，一般用来表示一行文字的高度，在控制字间距和行间距中较多使用。


2. 颜色单位
rgb, rgba, hsl, hsla等。
其中hsl为：色调(Hue),饱和度(Saturation),亮度(Lightness)。
其中Hue: 0~360, 而后两个用百分号表示。


  三  CSS选择器
1. 五种基本选择器


1.1通配符选择器*
*{color:red;}


1.2元素选择器
p{font-size:14px;}


1.3类选择器
.student{color:red;}
当然类选择器可以和元素选择器连用，显而易见的吧。就是表示某个元素下的某个类。
div..student{color:red;}


1.4 id选择器
#div1{
background:purple;
}


1.5 群组选择器
其实就是很多歌元素选择器用逗号隔开呗。。
div1,div2,div3{
color:orange;
}


2. 关系选择器


只介绍后代选择器，就是在某个父元素下的子元素。
如： p b{color:"red"}
还有子选择器，相邻兄弟选择器，兄弟选择器不作介绍。


3.特性选择器
3.1
  E[att] 有att特性的元素 a[class] {color=#aaa} //申明了class的a元素
  E[att="val"]
 其他还有E[att$="val"]等等。


 4 伪元素选择器
 E::first-letter 设置首字符下沉
 E::first-line 设置首行样式
 还有E::before E::afterE::selection等。不做介绍


 5 伪类选择器
 一般是超链接的伪类较多
 A:link 未访问过的超链接样式
 A:visited
 A:active 超链接处于选中状态
 A:hover

  
       四        CSS盒模型
简介：其实就3个东西：外边距margin，边框border 和内边距padding。
值得注意的是width并不是指盒子整个的宽度，而是指内容框的宽度，内容框距盒子内边还有一定的距离，这个距离就是padding，
当然盒子也有一定的厚度，就是边框border。因此，整个盒子的宽度为两个border的宽度加上左右的padding值还要加上width.


4.1 margin的一些注意点：


4.1.1 如何居中显示？
要想块级元素居中显示，则只需将左右两边的外边距设置为auto即可。


4.1.2 margin(border也同理)的写法的简写
margin: 10px 20px 30px;从上开始顺时针旋转赋值，如果缺少的则取对边值。
因此左边距和右边距都为20px
五   定位和布局控制


5.1  width和height
可以用直接px定义，也可以用%, 如果设置为auto，则对象的大小取决于其他属性值。
另外可以设置对象的最小最大宽度高度。用min-width等就行了，很容易吧！


5.2  定位控制
如何正确摆放“盒子”呢？这就需要用到定位


5.2.1 四种定位属性值
position有下面四个值：
static 流布局
relative 相对布局
absolute 绝对布局
fixed 固定布局
static:流布局就是指页面的元素按照从左至右，从上至下的顺序显示，各元素之间不重叠。此为默认的布局。


relative：元素在其正常的位置上，偏移某些像素。即相对定位是指“相对自身”。
absolute: 元素相对于父元素的位置。即相对父元素的top,right,bottom,left进行一定像素的偏移。
注意点：relative的定位，虽然是相对自身进行偏移，但其他的元素并不会挤占其原有位置。


absolute定位，要求其父元素要有positive属性，如果没有则一直上溯直到body.解决办法是直接在父元素写
position:relative; 而不设定其父元素的top等值。


fixed定位， 类似与绝对定位，只不过不是对于其父元素而言，而是相对于浏览器窗口进行定位，fixed定位的对象不会相对于滚动条滚动。 


5.2.2  z-index
就是一句话，值大的盖住值小的.
eg:
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<style type="text/css">
#test1{
width: 300px;
height: 300px;
background-color: green;
}
p{
margin: 0px;
padding: 0px;
}
#p1{
width: 100px;
height: 100px;
background-color: blue;
/*采用相对定位，这里是相对于原始的top和left各移动20px
相对定位是指“相对自身”的定位*/
position: relative;
top:20px;
left: 20px;


}
#p2{
width: 100px;
height: 100px;
background-color: orange;

}
#test2{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
#p3{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top:20px;
right: 20px;
z-index: 100;
}
#p4{
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
top:30px;
right: 40px;
z-index: 99;
}
</style>
</head>
<body>
<div id="test1">
<p id="p1">相对定位</p>
<p id="p2">相对定位</p>
</div>
<div id="test2">
用绝对定位时，父元素要求有position属性才行，
否则上溯一直到body.<br/>
<p id="p3">绝对定位是指相对于父元素的定位</p>
<p id="p4"></p>
</div>
</body>
</html>


5.3  布局控制
总说：控制元素的显示的样式，是否浮动，溢出时如何处理等
5.3.1 display
块元素：从新的一行开始，也就是说每个块独占一行。显然块的大小不能大于其子容器。
内联元素：不从新的一行开始，根据其本身的内容的高度和宽度调整大小。
常见的有:none,block,inline,inline-block;
none:隐藏对象，不保留其物理空间。
inline:内联对象，相当于<span></span> 
inline-block: 内联块元素


******不同元素居中的办法****
文本：p{text-align:center}


块元素：左右的margin为auto即可。


***************************


5.3.2  visibility
visiable,hidden和collapse
一般collapse用来隐藏表格的行或列。visibility取值为hidden，其物理空间人就存在。相比较于dispaly的none，后者为浏览器忽略该元素。


5.3.3  float, clear
float左浮或右浮呗。浮动元素会覆盖在普通元素上方，而普通元素要想其上方没有浮动元素覆盖则要用clear，显然
clear:left是清除上方的左幅元素，而clear:both是清除其上方的所有浮动元素。


5.3.4  溢出 overflow
auto: 自动判断是否显示滚动条以便查看溢出的内容
hidden: 剪切掉溢出的内容
scroll：以滚动条形式查看溢出内容。
visible: 溢出内容呈现在元素框之外 (默认)
很简单吧~~ 比如当你的div高度只有100px时，而打了一大堆有换行的文字，这是就溢出了呗~~然后你再设置overflow的属性值呗。



六    边框控制
其实就是3个border-width , border-style, border-color和border-radius
其中border-style:
none
hidden
dotted 点状边框
dashed 虚线边框
solid
double 双线边框
而border-radius为边框圆角，类似margin，从上左顺时针赋值。


七   字体和文本控制
7.1 字体控制
font-style italic, oblique,normal
font-variant(小型的大写字母)
font-weight(字体粗细) normal,bold,lighter等
font-size
font-family


7.2  文本控制
概述：
text-indent   文本缩进
text-overflow     是否使用省略标记(...)标示文本溢出
text-align
text-transform 文本的大小写    uppercase(转化成大写)
text-decoration 下划线，闪烁等
text-shadow
letter-spacing
word-spacing
vertical-align
line-height
white-space normal(忽略空白),pre(不合并空白距离)


八 背景控制
background
background-color
background-repeat repeat-x,repeat-y,repeat(默认）,no-repeat
background-size
详细内容自己参考手册。



Javascript基础知识
***********************************************************************************************************
Copyright @yankonghan
Year: 2015


***********************************************************************************************************
一  快速领略


1.变量作用域
变量用var声明，但是未用var声明的变量一律视为全局变量，即使其在局部的函数内部声明。


2. 局部变量和全局变量同名
这一点很不一样。局部变量会覆盖全局变量，但是要注意，即使输出该变量是在其局部定义之前，仍旧会输出该局部变量，不过是以undefined的形式.
window.onload=function()
{


var i = 8;
function function1()
{
document.write(i);
var i = 5;
document.write(i);
}
function1();
}
输出为:undefined5
可以看到：第一个document.write(i)是在局部变量i定义之前，但是输出的并不是全局变量的i，而是输出局部变量i，由于执行此行时局部变量i并未定义，因此输出undefined.
由此可见：*****Javascript的函数内声明的变量作用域是整个函数，而不受函数内块的约束****


3. if,switch,for,while,do-while和C++一样
而遍历数组或集合可以用
for( var i in Arr)
{
//...
}
和C#的foreach作用相同.

二  内置函数和对象
2.1 自定义函数和对象
自定义函数：
以function开头，参数类型都不写，也不要写返回值类型，介绍完毕。


自定义对象：
先一个var，然后直接一个大括号，里面用x:value1，y:value2...
很简单吧。
如：var ball = {x:100, y:100, radius:20};


2.2 内置函数
总说：
数学函数
字符串函数
数组函数
日期和时间函数
其他函数
2.2.1 数学函数
例如:Math.round(), Math.random(), Math.ceil(),Math.cos()等等
2.2.2 字符串函数
和C#或java的类似，不做讲解，一般有substring(a,b), split(".."), length(), indexOf(".."),charAt("..")等


2.2.3 数组函数
Javascript是弱脚本语言，因此它的没一个元素可以是任何的值，其实就相当于C#中的object对象的数组。
var a = ["aa",12];
2.2.3.1 数组和字符串的转换
var a = [1,2,3];
var s = a.join(",");   //数组转化成字符串，结果为"1,2,3"
var a1 = s.split(","); //字符串转换成数组，结果为[1,2,3]


2.2.3.2 合并数组
连个数组的合并用contact
var b = [4,5];
var a2 = a.contact(b);  //a2=[1,2,3,4,5]


2.2.3.3 数组截取
我们知道字符串截子串用substring呗，那数组截一段用啥呢？用slice函数,python里叫切片~~
var a3 = a.slice(0,2); //依旧是左闭右开的老样子啊，哈哈


2.2.3.4  splice
这个函数式在原有的数组进行改变，同时返回新的数组。这一点与上面介绍的其他数组函数不同，上面的函数都是返回一个新的数组，而不会对原有的数组进行改变。
这个函数是在原有基础上截取一段并返回，而原数组则为被截下的剩余部分。
var c = [1,2,3,4,5,6];
var c1 = c.splice(3); //c1=[4,5,6], c=[1,2,3]
上面的c1是从c的第四个位置4开始截取直到末尾。


var d = [1,2,3,4,5,6];
var c2 = d.splice(2,3); //c2 = [3,4,5], d=[1,2,6]
其中splice的第二个参数表示截取的个数。


2.2.3.5 数组排序
sort()
reverse();


2.2.4 日期函数
var d1 = new Date();
var d2 = new Date(2015,0,1,0,0,0) // 月份从0开始
由d2可以直接获得年月日分秒等
getFullYear(),getMonth(),getDate(),getDay(),getMinutes(),getMilliseconds();
注意getDate()自然是获取日期，而getDay()是为星期几。


2.3  数据类型转换
其实吧，一般也就是字符串和数字之间的转换。
parseInt(string,radix);
radix表示进制，2~36之间，默认为10；
如：parseInt("12",2);
parseInt("lf",16);
类似的有parseFloat等。


将整数或浮点数转换成字符串
当然是用toString(num)呗。


注意，如果字符串不能转换成数字则会返回NaN结果。
如： var b = isNaN(parseInt("hello"));  //结果为false

三  浏览器对象和客户端事件
1. DOM
概述：DOM(Document Object Model for HTML,文档对象模型)，其实就是通过它使得客户端脚本(如:Javascript)或者在服务端的高级编程语言建立与HTML沟通的桥梁。
<html>
<head>
<title>文档标题</title>
</head>
<body>
<h1>标题1<h1>
<a href = "http://www.baidu.com">链接</a>
</body>
</html>
这个文档的DOM首先是document节点，然后是Element:html，接着分成2个分别是Element:head节点和Element:body;
以此类推，其中到达Element:a下面是Attribute:"href",再下面是Text:"链接"
Javascript可以修改DOM的所有节点特性。


2. window对象
常用的window方法和属性
screenX
screenY 浏览器相对于屏幕的左上角的位置
alert()
comfirm(string)弹出string，点击“确定”则返回true
prompt
setTimeout var id = setTimeout(脚本，延迟时间),经过指定时间执行脚本
clearTimeout 类似上，只不过是经过指定时间清除脚本:clearTimeout(setTimeout的脚本id,延迟时间)
setInterval 一般在动画中运用啦，每隔一定的时间重复执行脚本
clearInterval
可以用setTimeout设计一个计时器，其实就是每个一秒中调用自身的函数即可。
如：
var timecount = 0;
var t;
function timedCount()
{
document.getElementById("txt").value = timeCount +"秒"
timeCount++;
t = setTimeout("timedOCount()",1000);
}


2.1 获取浏览器窗口信息
//浏览器窗口
var windowWidth = window.outerWidth;
//浏览器工作区(不包括工具条，菜单条，状态条)
var viewportHeight = window.innerHeight; 
//浏览器窗口对于屏幕左上角位置
var windowX = window.screenX;


3 document对象
在DOM中的树形结构中，根节点是document对象。一般利用document对象的getElementById方法获得要操作的节点元素对象，如果希望操作多个元素，可通过parrentNode树形得到父节点对象，或者通过childNodes属性得到子节点对象数组。再逐层检索，最后定位到希望操作的HTML元素。
3.1 常用方法
getElementById 略
getElementsByTagName通过标签名获取
createElement      var x = document.createElement("div")
createTextNode创建HTML文本


3.2 Node对象
常用属性或方法
属性 方法


childNodes appendChild
firstChild lastChildcloneNode
attributes setAttributeNode
nextSibling hasChildNodes
nodeName insertBefore
nodeType removeChild
nodeValue replaceChild
parentNode

上面的都比较好理解，这里有一个innerHTML属性，返回的是在该标签所夹的html内容。
eg: document.getElementById("test").innerHTML = ...
这里举一个appendChild的例子，一般用于动态网页添加内容的场合。
<div id= "test"></div>
<script>
var newDiv = document.createElement("div");
var newText = document.createTextNode("一个新的div")
newDiv.appendChild(newText)
document.getElementById("text").appendChild(newDiv);
</script>


4   客户端事件


4.1 鼠标事件
onclick ondbclick
ondrag ondragend
ondrop
onmousedown onmousemove
onscroll 等等


4.2 键盘事件
onkeydown
onkeypress
onkeyup


4.3 窗体事件
窗体事件只能在body的开始标记中，以特性声明
onload onolineonoffline
onerror


4.4 表单事件
oninput onchange
onformchange onforminputonsubmit
oninvalid onselect