HTML

HTML超文本标记语言（Hyper Text Markup Language）
详情：http://www.w3school.com.cn/html/html_intro.asp

HTML和JavaScript和CSS的关系是：
HTML负责页面结构（如应该有一个输入框，按钮、进度条等元素）
CSS负责页面的样式（如：输入框应该是什么颜色，宽度、字体等）
JavaScript负责页面行为（如：应该如何处理输入框中的输入）
当我们将样式CSS和结构HTML 分离之后，我们就需要一某种方法从外部样式表中引用当前页面的元素，这种方法就是选择器（选中元素，然后给其添加样式）

XML和HTML的关系：一个是超文本标记语言，一个是扩展标记语言。
他们的不同之处：
1可扩展性：HTML不具备扩展性，而XML是原标记语言，可以用于定义新的标记语言。
2侧重点： HTML侧重于如何表现信息，而XML是侧重于如何结构化的描述信息。
3语法要求： HTML不要求标记的嵌套，配对等，不要求标记间具有一定的顺序，而XML则是严格要求嵌套，配对，遵循DTD的树形结构。
4可读性和维护性：HTML难于阅读维护，而XML结构清晰，便于阅读维护
5数据和显示关系：HTML的内容描述和显示整合唯一（描述什么样展示的就是什么样）而XML则是相分离的
最后一点就是他们的编辑浏览工具了，HTML有一堆的编辑浏览工具，而XML尚不成熟。

HTML不是编程语言而是一种标记语言：就是由一组标记标签组成的语言

1、标记标签：规定的这个标签对应着什么确定的功能、或者什么内容（一般包含起始和结束标签）
2、整个HTML页面被称为文档，每个标签被称为是文档的元素
5、大多数的标签都有属性，属性提供了元素的更多信息
属性以名值对的形式出现例如：name=“value”，属性的值始终应该包裹在双引号里面，但是如果属性值本身就有双引号，那必须使用单引号例如：name=‘Bill“Helloween”action’
6、如果你想看某个网页的源代码，只需要在网页单机邮件选择查看源文件/源代码就可以啦
7、浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等），而仅仅只保留一个（如多个空格），也就是说你不用浏览器规定的标签浏览器不承认
8、一般来说从今往后，那些关于字体和颜色等的标签和属性是会被逐渐遗弃的，而使用样式（style属性）来代替
9、《br/》:注意这是换行符 ，而《p》是用来标记一个段落的一般不要用作换行
10、Style：属性：样式，HTML4引入的，为了视图分离提供的一种改变所有 HTML 元素的样式的通用方法。
例如：这里定义了网页的body部分的背景颜色是黄色，注意：background-color的写法，是中横线，不是下横线，还有支持常用颜色white等，当然也支持直接#123456这样的，但不支持透明度
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸，如下：

<p style="font-family:verdana;color:blue;font-size:8px;">A Demo</p>

Style可以定义多个子属性，键值对之间使用分号（；）键与值之间用冒号（：）
11、
\r :回车 代表让打印机将打印头回到左边起始位置，但是垂直位置不动
\n :换行 代表让打印机将打印头向下移动一行，但是水平位置不动
Enter = \r + \n :回车换行

12、http的状态响应码：

200 – 交易成功
202 – 接受和处理，但是处理尚未完成
204 – 请求收到，但返回信息为空
304 – 客户端已执行了get，但文件未变化
400 – 请求错误，如语法错误
401 – 未授权
407 – 类似401，用户必须首先在代理服务器上得到授权
500 – 服务器内部错误
502 – 网关错误
详见：http://job.xdnice.com/content/BiShiJingYan/2012-11/3992.htm

13、href ：定义超链接 （超级链接：即可以链接到认可允许的地方）
name ：定义锚点（可以直接跳到本文档的任意位置，而不需要滑动）
使用例如：

<a href=“#Ccc”跳到一个位置</a> 点击会跳转到下面定义的锚点名为Ccc的锚点<h2><a name=“Ccc”>锚点</a></h2>

14、如何给一个标签添加多个样式？直接在Class属性的值里面放两个class类名，中间用空格隔开
例如：

<img class=”class1 class2”>

15、元素嵌套：把一个元素放在另一个元素里面，例如：

<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>

16、 就是一个输入框，placeholder属性的值是提示文本，required属性标志此元素是必填项（注意此属性没有属性值）

17、单选按钮：
单选按钮只是input输入框的一种类型，每一个单选按钮都应该嵌套在它自己的label(标签)元素中。注意：所有关联的单选按钮应该使用相同的name属性,checked:默认被选中 ,当type=“checkbox”便是复选框

<label><input type="radio" name="indoor-outdoor" checked>Indoor</label> 

18、类选择器：
定义在style里面，必须添加.为前缀，ID选择器也是定义在style里面，必须加 # 为前缀，在HTML的元素里面使用的时候，只需给class属性的值设为定义的类选择器的名字，或者ID属性的值设为ID选择器的名字，就可以使用了。例如：
类选择器： .gray-background { background-color: gray; }
ID选择器： #cat-photo-form{ background-color:green; }

<h2 class="gray-background" id="cat-photo-form">CatPhotoApp</h2>

但是注意：ID是有特殊意义的，你给一个元素定义一个ID，那么这个ID就可能成为此元素的唯一标识，所以ID选择器其实就相当于对应元素的私人订制

19、样式表里面的padding、margin 等属性；
除了分别指定元素的 padding-top、padding-right、padding-bottom 和padding-left 属性外，你还可以集中起来指定它们，举例：padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

20、样式的继承和覆盖：
（注意：关于字体，padding，margin，color，等等和样式有关的属性都应该放在样式表里面）（body可以直接定义样式）（注意样式表里面的属性和值之间是使用 : 分隔开来的）例如:

body {  background-color: black；    color: green;   }.pink-text{ color:pink; }   <h1 class="pink-text">Hello World!</h1>

h1的class样式里面有关color的属性会覆盖body里面的color属性
当多个class声明在一个元素中的时候，哪个会覆盖那个呢？例如：

<h1 class="pink-text blue-text">Hello World!</h1>

注意：在 HTML 中这些 class 如何排序是无所谓的。然而，在

<h1 style="color: white" id="orange-text" >Hello World!</h1>

还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的（常用于确保某个元素的样式不被其他样式覆盖）
.pink-text { color: pink !important; }当某个元素使用了这个样式那么其他所有优先级高的都会被屏蔽掉。

22、样式中的颜色表示：
样式颜色支持直接使用十六进制数字来表示颜色：color：#000000 (黑色）
在 CSS 中表示颜色的另一个方法是使用 rgb 值。
代表黑色的 RGB 值：rgb(0, 0, 0) 白色：rgb(255, 255, 255)
使用： background-color: rgb(255,0,0); 背景颜色：红色

响应式设计框架Bootstrap:
1、Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念
2、通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
通过添加下列代码到HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

3、Bootstrap是响应式设计的框架，里面包含了许多定义好的css样式库，我们只需要在对应的元素里面给class设置Bootstrap里面定义好的class样式的值就可以，将这些样式设置给这些元素
例如：Delete
此button使用了Bootstrap的各种样式，具体效果如下（宽度适应屏幕大小）

4、Bootstrap 使用一种响应式网格布局—可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：

注意，在此图示中，我们使用了 col-md-* class 。此处 md 代表中等，* 指定了元素宽度应该占用的栏数。 在这个案例中，我们指定了元素在中等大小的屏幕上所占用的栏数。
而在我们创建的 Cat Photo App 中，将会使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
Bootstrap是将一个屏幕的宽分成十二等长，如果你想要把那几个元素放在一行里面，你就可以使用

元素来将那几个元素包裹起来，这代表这几个元素将会显示成一行，然后再给每一个元素添加到

元素里面，X代表这个元素占据十二分之几的宽度。这样就可以适应任何大小的屏幕了
例如：把 Like, Info 和 Delete 三个按钮一并放入一个此元素中

 <div class="row">

然后，其中的每一个按钮都需要各自被一个此元素包裹

<div class="col-xs-4"> 

效果就是：三个按钮各占屏幕的三分之一

5、Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感
在你的每一个class为col-xs-6的div 元素中都嵌入一个带有 well class 属性的 div 元素。

6、Font Awesome 是一个非常方便的图标库:
这些图标都是矢量图形，被保存在 .svg 的文件格式中
1、这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

2、i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。
你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：

<i class="fa fa-info-circle"></i>

将此元素添加到某些元素例如：button里面就会给button元素添加一个图标，图标主要是由class的值来指定的

最流行的JavaScript库jQuery
jquery主要关注前端内容，也就是和HTML页面和CSS相关的内容
jQuery使用了CSS选择器

当我们开始使用jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改
首先在页面顶端增加一行script元素，然后写上结束符，浏览器会运行script 里所有的Javascript，包括jQuery。如下：

<script>  $(document).ready(function() {    }); </script>

1、接下来我们来学习如何写方法，方法里面的代码会被浏览器加载。
在没有document ready function以前，你的代码会在HTML没有渲染完成就执行，这样会产生bug。
2、现在让我们开始写第一个jQuery语句，所有jQuery方法都是由$开始的，通常称作为 美元符号，
jQuery通过选择器来选择一个元素的，然后操作元素做些改变。
举个例子，要让所有的按钮做弹回效果，只要把这段代码（jQuery语句）写在document ready function里面就可以了：

$("button").addClass("animated  bounce");

（给所有的button元素添加回弹动画效果），这个方法的语法是，通过执行这行jQuery语句，选中页面中的所有button元素，给他们添加css样式（即：添加class），什么样式？回弹动画（class=”animated bounce”），这两个样式存在于Animate.css库里面
我们已经在后台为你引入了jQuery库和Animate.css库，这样你就可以在编辑器里直接可以使用这两个库，进而通过jQuery给button元素添加bounce回弹动画效果。

3、如何给所有类名中含有well的元素添加animated shake这两个属性
首先，我们来使用$(“.well”)来获取所有class为well的div元素。
仔细想想为什么需要在well前面添加.
然后使用jQuery的.addClass()方法添加2个class：animated、shake
注意到给class属性为well的元素添加class和给指定元素名的元素添加class的区别了吗？一个直接是元素名，一个需要添加一个 . 为什么呢？
因为class在style里面其本来的状态就是 .class 所以当然需要 . 了。

4、现在你已经了解了3种选择器：
元素选择器：("button")、class选择器：(“.btn”)、id选择器：$(“#target1”)。

5、注意选择器的addClass()方法的效果可以累积
也就是说，只要一个元素满足几个选择器的条件，那个就会执行几遍addClass（）方法，而addClass（）方法又是用来添加class的，所以效果就可以累积了

6、removeClass（）用来移除class属性

7、jQuery有一个叫做.css()的方法能让你改变元素的CSS样式，例如：

$("#target1").css("color","red");

8、还可以用jQuery改变除了CSS以外的属性。比如，你可以让按钮变不可选。
jQuery有一个.prop()的方法让你来调整元素的属性.例如：让按钮不可选

    $("button").prop("disabled", true);

9、jQuery不仅可以改变元素开始标记和结束标记间的文本，甚至可以改变元素标记本身。

jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
我们是通过em[emphasize]标签：重写和强调标题文本的：

$("h3").html("<em>jQuery Playground</em>");

jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能修改标记。换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示

10、jQuery的常用方法：
jQuery 有一个.remove() 的方法可以移除HTML元素。
JQuery有一个appendTo()方法可以把选中的元素加到其他元素中。
例如：

$("#target2").appendTo("#right-well");

jQuery的clone()方法可以拷贝元素。

$("#target2").clone().appendTo("#right-well");

你有没有发现两个jQuery方法合在一起使用了？这就叫方法链function chaining，使用起来很方便。

11、每个HTML元素根据继承属性都有父parent元素。
jQuery有一个方法叫parent()，它允许你访问指定元素的父元素。
举个例子：让left-well 元素的父元素parent()的背景色变成蓝色。

12、jQuery有一个方法叫children()，它允许你访问指定元素的子元素

$("#right-well").children().css("color","orange");

13、jQuery选择器可以通过id属性来选取元素，但是你不能总是写这么整齐的id。幸运的是，jQuery有一些另外的技巧可以达到同样的效果。
jQuery 用CSS选择器来选取元素，target:nth-child(n) CSS选择器允许你按索引顺序(从1开始)选择目标元素的所有子元素。
示例：你可以给目标元素的第三个子元素添加bounce class。

$(".target:nth-child(3)").addClass("animated bounce");

（获取class为target且位于父元素的第三个位置（索引为2）的所有元素）

14、获取class为target且索引为偶数的所有元素，也就是target#1(索引为0)等，并给它们添加class animated 和 shake even：偶数

$(".target:even").addClass("animated shake");$(".target:odd").addClass("animated shake");//设置所有索引为奇数的元素$("body").addClass("animated hinge");//（给body添加折页效果，挺好看的）

15、javaScript动态修改HTML（元素内容、元素样式）的常用方法
getElementByID（）：根据ID得到对应元素
getElementsByTagName（）根据标签名字得到对应的元素列表
getElementsByClassName（“color”）返回包含class=“color”的所有元素的列表
innerHTML（）方法改变HTML元素的内容
Document.write()可用于直接向HTML输出流写内容
不要在文档加载之后使用 document.write()。这会覆盖该文档
getElementById(“div”).src=”xxx”得到ID名为div的元素然后修改其src属性
改变元素样式
document.getElementById(“p2”).style.color=”blue”;改变元素样式的颜色
HTML的DOM使得javaScript可以对HTML事件作出响应

16、HTML 事件的例子：
当网页已加载时onLoad()、 当鼠标移动到元素上时onmouseover()、
当输入字段被改变时onChange()、 当用户触发按键时：onClick 等

<button type="button" onclick="document.getElementById('id1').style.color='red'">点击这里！</button>       

响应事件修改对应元素的样式（注意这些响应事件的形式是双引号里面是可以执行的javaScript代码）

<h1 onclick="changetext(this)">请点击该文本</h1>//（当然也可以是执行一个javaScript函数）document.getElementById("myBtn").onclick=function(){displayDate()};//还可以采取在javaScript里面为HTML的DOM元素设置事件响应

创建新的HTML元素、删除已有元素
向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

var para=document.createElement("p");//创建元素节点var node=document.createTextNode("这是新段落。");//创建文本节点para.appendChild(node); //向新元素添加文本节点var element=document.getElementById("div1");// 获得已存在的元素element.appendChild(para);      //向已存在元素添加新元素child.parentNode.removeChild(child);//一种不需要获得父元素就可以删除指定元素的方法

17、编辑的时候莫名其妙出错？
在这些编辑器里面经常出现你以为你的代码是正确的，但是却就是无法运行起来，那很可能是因为你的某个符号写错了（写成中文的），或者少了某个符号（例如分号，结束的括号，双引号的结束等）
还有一种可能就是，你前面的一行代码书写格式出错，那也会导致之后的代码无法正确的运行，所以检查代码要检查的全面一点
18、innerHTML（）方法改变HTML元素的内容,document.write()用于向输出流输出数据
19、获取对应元素的父元素
为什么可以由父元素得到子元素，由子元素得到父元素，其根本原因就是DOM文档树将文档中元素的相互关系展示的淋漓尽致，所以就可以从上往下找，也可以从下往上找

$("#left-well").parent().css("background-color", "blue")

20、MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。

设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。