1.1 HTML
1.1.1 htm
一套浏览器认识的规则
开发者：
学习HTML规则
开后台程序：
-写HTML文件（充当模板的作用）
-数据库获取数据，然后替换到HTML文件的指定位置（web框架）
本地测试
-找到文件路径，直接浏览器打开
-pycharm打开测试
编写html文件
-doctype对应关系
-html标签，标签内部可以写属性（只能有一个html标签）
-注释：<!-- 注释的内容 -->
20个标签
1.1.2 css
颜色
位置
Meta（metadata informa）
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1.页面编码（告诉浏览器什么是编码）
<meta http-equiv="content-type" content="text/html;charset=utf-8">
2.刷新和跳转
<meta http-equiv="Refresh" content="30"> <meta http-equiv="Refresh" content="5; Url=http://www.baidu.com" />
3.关键词
<meta name="keywords" content="JOY">
4.描述
<meta name="description" content="JOY">
5.X-UA-Compatible
一种依照IE浏览器的开发标准
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
1.2 head
1.2.1 Title
网页头部信息
1.2.2 head标签
<meta ->编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7" />
1.2.3 link
1.2.3.1 网站图标
1) CSS
<link rel=”stylesheet” type=”text/css” href=”css/common.css”>
2) icon
<link rel=”shortcut icon” href=”image/favicon.ico”>
1.3 body
1.3.1 网站特殊符号代码
- 空格符  (连续空格符之间用分号)
https://www.cnblogs.com/bigberg/p/8422573.html
1.3.2 标签
1.3.2.1 块级标签
<p>标签相当于段落
特点：段落和段落之间有间距
<h1>标签表示标题 h1-----àh6依次变小
特点：字体加大加粗
<div>标签
特点：白板
1.3.2.2 行内标签
<span>多个标签内容在一行内展示
特点：白板（借助CSS可以改变样式）
1.3.2.3 form标签
<form action="http://192.168.1.160:8888/index" method="POST" enctype="multipart/form-data">
1.3.2.4 Br
<br/>标签表示换行
1.3.2.5 Input系列
Input type=’text’ - name属性，value=’’（默认值）
Input type=’password’ - name属性， value=’’（默认值）
Input type=’submit’ – value=’提交’提交按钮
Input type=’button’ – value=’登录’ 按钮
Input type=’radio’ – 单选框 value,name属性（name相同则互斥）
Input type=’checkbox’ – 单选框 value,name属性（批量获取数据）
Input type=’file’– 依赖form表单属性enctype=’multipart/form-data’
input type="reset" value="重置"
<textarea name="meno"></textarea> -name 属性
1.3.2.6 Select标签
Select标签 - name,内部option value，提交到后台，size，muiltiple
1.3.2.7 a标签
l 跳转
<a href="http://www.baidu.com">百度</a>
l 锚
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height:900px;">第一章的内容</div>
<div id="i2" style="height:900px;">第二章的内容</div>
<div id="i3" style="height:900px;">第三章的内容</div>
标签的ID不能重复
1.3.2.8 Img标签
src：图片名及路径
alt：描述
title：主题
<body> <a href="http://wuxia.qq.com"> <img src="tian.PNG" title="tiandao" style="height:900px;weidh:900px;" alt="tianyamingyuedao"> </a> </body>
1.3.2.9 列表
ul：>li
ol：>li
dl：>dd/dt
<ul> <li>11</li> <li>12</li> </ul> <ol> <li>22</li> <li>23</li> </ol> <dl> <dd>33</dd> <dt>34</dt> </dl>
1.3.2.10 table
<table border="1"> <tr> <td>第一行，第一列</td> <td>第一行，第二列</td> <td>第一行，第三列</td> </tr> <tr> <td>第二行，第一列</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> </table> l thead tr th l tbody tr td colspan =’’列合并 数字表示列数 rowspan=’’行合并 数字表示行数 <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>
1.3.2.11 label
用于点击文字使得关联的标签获取光标
<label for="passd">密码：</label> <input id="passd" type="password" name="pwd" />
1.3.2.12 fieldset
legend
1.4 CSS
1.4.1 Style
- 标签的style属性
- 写在head里面，style标签中写样式
1.4.2 id选择器
#i1{
background-color: #2459a2;
height: 48px;
}
1.4.3 class选择器
.名称{
…
}
<标签 class=’名称’></标签>
1.4.4 标签选择器
<div style="height: 48px;"></div> div { …… }
所有div设置成此样式
1.4.5 层级选择器（空格）
.c1 .c2 div{
}
1.4.6 组合选择器（逗号）
#c1,.c2,div{
}
1.4.7 属性选择器
对选择到的标签再通过属性再进行一次筛选
.c1[n=”alex”]{100px; height:200px;}
1.4.8 注释
/* */
1.4.9 优先级
标签上的style优先，编写顺序，最近原则
CSS样式可以写在单独文件中然后引用
<link rel=”stylesheet” href=”cllor. css”/>
1.4.10 边框
宽度 样式 颜色 border: 4px dotted red;
border-left
height：高度 百分比
width：宽度 像素 白百分比
text-align:center 水平方向居中
line-height：垂直方向根据标签高度居中
color：字体颜色
font-size：字体大小
font-weight：字体加粗
1.4.11 float
块级别标签可以堆叠
<div style="clear:both;"></div>
1.4.12 display
display: inline; 转行内标签
display: block; 转块级标签
display:inline-block; 两者属性都有
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
1.4.13 padding边距
margin：外边距
padding内边距
1.4.14 position
fixed：绝对定位
absolute：相对定位
relative：
1.4.15 z-index
值的大小决定展示的优先级、
1.4.16 opcity
设置透明度0-1
1.4.17 overflow
hidde：超过范围影藏
auto：超过范围出现滚动条
1.4.18 hover
指针悬浮样式
background –url（）x y
background-position-x
background-position-y
1.5 javascript
1.5.1 代码存在形式
HTML中的script标签
单独写文件 <script src=”js文件路径”</script>
1.5.2 数据类型
数字
a =18
字符串
a = alex
a.chartAt(索引位置)
a.substring(起始位置，结束位置)
a.lenght 获取当前字符串长度
列表
字典（数组）
布尔类型
条件语句‘’
for 循环 a = [11,22,33,44] for (var item in a ){ console.log(item) } for(var i=0;i<10;;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 定时器 SetInterval(‘func()’, 1000); <body> <div id="u1" style="text-align: center;font-size: 28px;background: cyan;color: red;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> <script> function func() { // 根据ID获取指定标签的内容，定于局部变量接收 var tag = document.getElementById('u1'); // 获取标签内部的内容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1, content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()', 500); </script> </body>
1.5.3 变量
name = ‘a’#全局变量
var name = ‘eric’局部变量
1.5.4 数组
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, …) 插入、删除或替换数组的元素
obj.splice(n, 0, val) 指定位置插入元素
obj.splice(n, 1, val) 指定位置替换元素
obj.splice(n,1) 指定位置元素删除
obj.slice() 切片
obj.reverser() 反转
obj.join(sep) 将数组连接起来构建一个字符串
obj,concat(val,…) s数组连接
1.5.5 函数
1.5.5.1 普通函数
function func() {
}
1.5.5.2 匿名函数
function func(arg) {
return arg+1
}
setInterval('func()', 260);
setInterval (function(){
console.log(123);
},5000)
1.5.5.3 自执行函数(创建函数并且自动执行)
function func(arg){
console.log(arg);
}
// func(1)
func()
(funcation(arg){
Console.log(arg);
}(1)
1.6 DOM
1.6.1 查找
直接查找
var obj = document.getElement(‘a1’)
间接查找
文件内容操作：
l innerText
l innerHTML
l value
input value获取当前标中的值
select 获取选中的value值(selectedIndex)
textarea value获取当前标签中的值
搜索框实例
创建标签，并添加到HTML中：
- 字符串形式
- 对象的方式
document.createElement(‘div’)
提交表单
任何标签通过DOM都可以提交表单
document.getElementById(‘form’).submit()
其它：
console.log()
alert
var v = confirm v:true false
location.href = “” 重定向，跳转
location.reload 页面刷新
location.href = location.href <====>location.reload.()