HTML
div标签是块级标签，单独一行，可以作为其他标签的容器，没有特定含义
span是内联标签，可以作为文本内容的容器，没有特定含义
不同的标签有自己含义，一般搭建网站的结构的时候需要用到标签的嵌套来完成不同的结构 规则 1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素 2. 块级元素不能放在<p>里面 3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1、h2、h3、h4、h5、h6、p、dt 4. li 内可以包含 div 标签 5.块级元素与块级元素并列、内嵌元素与内嵌元素并列
首先分析京东的原型图（UI提供），然后根据尺寸和外观去构建块级标签
HTML标签：代表整篇文档是一个网页文件。
HEAD标签：用于描述网页的头部信息。
BODY标签：用于描述要显示的内容信息。
在html中p标签里只可以放置文本，图片和表单，其他的标签p标签是不能识别的
form标签本身是块级标签，它的作用一般在于和后端做数据交互向服务器提交数据，提交表单验证用户账户信息或密码等
form标签的属性：
1.action定义表单被提交时发生的动作，提交给服务器处理程序的地址
注意：通过 与服务器端人员交流 得到 action 的地址默认，提交给本页
2.method
作用：定义表单提交数据时的方式
取值：
1、get (默认值)
意义为：得到，获取
场合：向服务器要数据时使用
特点：
1、明文提交,所提交的数据时可以显示在地址栏上的-安全性较低
2、提交数据有大小限制-最大为2KB
2、post
意义：邮寄，邮递
场合：将数据提交给服务器处理时使用(有保密类型数据时)
特点：
1、隐式提交-所提交的内容是不会显示在地址栏上的，安全性较高
2、无大小限制
3、enctype
作用：编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
取值：
1、application/x-www-form-urlencoded
默认值
允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2、multipart/form-data
允许 将文件提交给服务器
3、text/plain
只允许提交普通字符。特殊字符，文件等都无法提交
4、name
定义 表单的名称
必须是li，ul子元素不允许放置除除li外的任何元素
网页布局的合理化。
有利于和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。
方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等。
便于团队开发和维护。
https://www.jianshu.com/p/04e541183329 根元素:<html> 文档元数据:<link>、<meta>、<style>、<style> 内容分区:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup> 文本内容:<main>、<div>、<p>、<pre>、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr> 内联文本语义: <span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby> 图片和多媒体:<img><audio> <video><track><map><area> 内嵌内容:<iframe>、<embed>、<object> 、<param>、<picture>、<source> 脚本:<canvas>、<noscript>、<script> 编辑标识:<del>、<ins> 表格内容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td> 表单:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select> 交互元素<details>、<summary>、<dialog>、<menu> Web 组件:<slot>、<template> 过时的和弃用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>
CSS
1.基本选择器：标签选择器、类选择器、ID选择器、通用选择器；
2.组合选择器：后代选择器（以空格分割）、子元素（儿子）选择器（以>分割）、相邻兄弟（毗邻）选择器（以+分割）、兄弟（弟弟）选择器（~）
3.属性选择器： ID、class属性，元素的特定属性选择元素。[class='值']、 [class^='开头的值']、 [class$='结尾的值']、[title*="hello"]、表单input[type="text"]
4.分组选择器：在多个选择器之间用，分割；如div,p{ }
5.伪类选择器：没有访问的超链接a标签样式a:link{ }、访问过的超链接a标签样式a：visited { }、鼠标悬浮a：hover{ }、鼠标点击a：active{ }、获取焦点input：focus{ }
6.伪元素选择器：first-letter用于文本的首字母设置样式如p：first-letter、before是在元素内容前面插入新内容如p：before、after用在元素的内容后面插入新内容
类选择器是可以将一类样式需要相同的标签作为同一样式来规范
对于大量需要类规划的标签可以使用类选择器
id选择器可以将需要独立设置的（因为id必须是唯一值）样式设为单独的标签
对于有特殊要求的标签需要单独设置样式的，或者是有动画要求的，提供id给js去操作
1.可以使用通配符选择*{padding:0;margin:0} 2.可以引用别人写好的网页格式化样式去操作<link>
每个HTML元素都可以看作装了东西的盒子
盒子具有宽度（width）和高度（height）
盒子里面的内容到盒子的边框之间的距离即填充（margin）
盒子本身有边框（border）
而盒子边框外和其他盒子之间，还有边界（margin）
border
border-top
border-bottom
border-left
border-right
border-width
border-color
border-style（边框的线型）
padding（边框内壁与内部元素之间的距离）
padding:1px 2px 3px 4px;（顺序是上右下左）
padding:1px 2px;（上下/左右）
padding:1px 2px 3px;（上1px下3px左右2px）
padding-top
padding-bottom
padding-left
padding-right
margin（代表边框外壁与其它元素之间的距离）
margin:1px 2px 3px 4px;（顺序是上右下左）
margin:1px 2px;（上下/左右）
margin:1px 2px 3px;（上1px下3px左右2px）
margin-top
margin-bottom
margin-left
margin-right
简单说，文档流就是一条从左往右、从上往下布局的流水线
文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素
浮动可以让元素浮于文档的上方，脱离文档流
浮动显示让两个元素并排显示，并且两个元素都能设置宽度和高度
浮动的特点
1.浮动会使元素脱离文档流
2.浮动会使元素提升层级
3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容
4.浮动可以使行内元素支持宽高
清除浮动的方式
1.给父元素固定高度。不灵活
2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both 结构冗余
3.常用方法：.wrap:after{
clear: both;
content: "";
height: 0;
visibility: hidden;
display: block;
}
4.给父盒子 添加overflow:hidden属性
1、减少图片的字节
2、减少了网页的http请求，从而大大的提高了页面的性能
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
tatic：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
父元素相对定位，不影响自身位置定位的情况下，提升层级，子元素绝对定位就会以父元素为基准(父元素的左上角)
1.设置了float浮动的标签就会脱离文档流
2.设置绝对位置可以脱离文档流(父相子绝)
3.设置fixed，可以使标签相对于浏览器的窗口定位
脱离文档流就是不在html的默认排版里
顺序规则
如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点
定位规则
如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系
如果将 position 设为 relative (相对定位),
absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高
参与规则
我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用
默认值规则
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分;
但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
从父规则
如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面
层级树规则
可能你会觉得在 DOM 结构中的兄弟节点会拎出来进行比较并确定层级, 其实不然
none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 table-row 此元素会作为一个表格行显示（类似 <tr>）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 table-column 此元素会作为一个单元格列显示（类似 <col>） table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） table-caption 此元素会作为一个表格标题显示（类似 <caption>） inherit 规定应该从父元素继承 display 属性的值。
JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P1</title> </head> <body> <h1 id="id">P1</h1> </body> <script type="text/javascript"> function add() { var txt = document.getElementById('id').innerText; // console.log(txt); return txt } var x = add(); console.log(x); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P2</title> </head> <body> </body> <script type="text/javascript"> var txt = 'hello world'; document.write(txt.split('').reverse().join("")); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P3</title> </head> <body> </body> <script type="text/javascript"> function createObj(name, age, hobby) { var obj = new Object(); obj.name = name; obj.age = age; obj.hobby = hobby; return obj } var o1 = createObj('小白',15,'足球'); console.log(o1.name); </script> </html>
1）setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样
的setTimeout命令，则可循环运行。（即要循环运行，需函数自身再次调用 setTimeout()；而 setinterval是循环运行的，即每
到设定时间间隔就触发指定代码。这是真正的定时器。
2）setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第
一次1秒，第二次2秒，第三次3秒。
1.innerText
2.value
document.getElementById();
document.getElementsByTagName();
document.getELementsByClassName();
setAtrribute()方法
设置多个类型就用key value的形式
鼠标点击 onclick
页面或图像载入 onload
鼠标悬浮于页面的某个热点之上 mouseover
在表单中选取输入框
确认表单 onFocus onSubmit
键盘按键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P9</title> <style type="text/css"> *{ padding: 0; margin: 0; } #div1{ width: 100px; height: 100px; /*background: #2459a2;*/ } </style> </head> <body> <div id="div1">大家好！</div> </body> <script type="text/javascript"> var txt = document.getElementById('div1'); txt.style.background = 'red'; </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P10</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <div id="div1"></div> <button id="btn" onclick="createP()">点我一下</button> <button id="btn2" onclick="del()">删除吧</button> </body> <script type="text/javascript"> function createP() { var p1 = document.createElement('p'); var div1 = document.getElementById('div1'); p1.innerText = 'alexsb'; // alert(p1.innerText); // document.write(p1.innerText); div1.appendChild(p1); } function del() { var p2 = document.getElementsByTagName('p'); // p2.innerText = ''; // document.write(p2.innerText); var div1 = document.getElementById('div1'); div1.removeChild(div1.lastChild); } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P11</title> </head> <body> <button id="btn" onclick="ok()">打开吧！</button> </body> <script type="text/javascript"> function ok() { window.open(url = 'https://www.baidu.com'); } </script> </html>
jQuery
（1）JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
（2）JQuery入口函数是在所有标签加载完之后，就会去执行。
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值
// DOM对象转换为jQuery对象
var box = document.getElementById('box');
console.log($(box));
// jQuery对象转换为DOM对象
// 第一种方式
console.log($('button')[0]);
// 第二种方式
// $('button').get(0)
var isShow = true;
$('button').get(0).onclick = function () {
if(isShow){
$('#box').hide();
$(this).text('显示');
isShow = false;
}else{
$('#box').show();
$(this).text('隐藏');
isShow = true;
}
}
1.jQuery是一个js框架,封装了js的属性和方法。让用户使用起来更加便利,并且增强了 js的功能.
2.使用原生 js是要处理很多兼容性的问题(注册事件等)，由jQuery封装了底层，就不用处理兼容性问题。
3.原生的js的dom和事件绑定和Ajax等操作非常麻烦，jQuery封装以后操作非常方便
attr()方法是由js的setAttribute()方法封装来的
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
append的属性依然存在，只是在原来的基础上再后面增加属性
但是addClass和removeClass则是增加和删除属性，如果删除了，属性就不存在了
简单说就是一个是新增属性，一个是增删属性
* $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 :first $("p:first") 第一个 <p> 元素 :last $("p:last") 最后一个 <p> 元素 :even $("tr:even") 所有偶数 <tr> 元素 :odd $("tr:odd") 所有奇数 <tr> 元素 :eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始） :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 :lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 :header $(":header") 所有标题元素 <h1> - <h6> :animated 所有动画元素 :contains(text) $(":contains('W3School')") 包含指定字符串的所有元素 :empty $(":empty") 无子（元素）节点的所有元素 :hidden $("p:hidden") 所有隐藏的 <p> 元素 :visible $("table:visible") 所有可见的表格 s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素 [attribute] $("[href]") 所有带有 href 属性的元素 [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素 [attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素 :input $(":input") 所有 <input> 元素 :text $(":text") 所有 type="text" 的 <input> 元素 :password $(":password") 所有 type="password" 的 <input> 元素 :radio $(":radio") 所有 type="radio" 的 <input> 元素 :checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素 :submit $(":submit") 所有 type="submit" 的 <input> 元素 :reset $(":reset") 所有 type="reset" 的 <input> 元素 :button $(":button") 所有 type="button" 的 <input> 元素 :image $(":image") 所有 type="image" 的 <input> 元素 :file $(":file") 所有 type="file" 的 <input> 元素 :enabled $(":enabled") 所有激活的 input 元素 :disabled $(":disabled") 所有禁用的 input 元素 :selected $(":selected") 所有被选取的 input 元素 :checked $(":checked") 所有被选中的 input 元素
bind() 向匹配元素附加一个或更多事件处理器
blur() 触发、或将函数绑定到指定元素的 blur 事件
change() 触发、或将函数绑定到指定元素的 change 事件
click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 触发、或将函数绑定到指定元素的 double click 事件
delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die() 移除所有通过 live() 函数添加的事件处理程序。
error() 触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.preventDefault() 阻止事件的默认动作。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.target 触发该事件的 DOM 元素。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type 描述事件的类型。
event.which 指示按了哪个键或按钮。
focus() 触发、或将函数绑定到指定元素的 focus 事件
keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
live() 为当前或未来的匹配元素添加一个或多个事件处理器
load() 触发、或将函数绑定到指定元素的 load 事件
mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready() 文档就绪事件（当 HTML 文档就绪可用时）
resize() 触发、或将函数绑定到指定元素的 resize 事件
scroll() 触发、或将函数绑定到指定元素的 scroll 事件
select() 触发、或将函数绑定到指定元素的 select 事件
submit() 触发、或将函数绑定到指定元素的 submit 事件
toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件
unbind() 从匹配元素移除一个被添加的事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来
unload() 触发、或将函数绑定到指定元素的 unload 事件
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
//get()方式
$.ajax({
url:'./data/index.txt',
type:'get',
dataType:'text',
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
//post()方式
$.ajax({
url:'/index',
type:'post',
data:{name:'张三',age:12},
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}