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