html-css-js基本理解和简单总结
目录css
1、对于网页的基本理解
一、网页是一种数据展现和信息交互的载体
生活中，咱们经过各类各样的方式获取信息，网页是目前被使用最频繁的一种。
早年网页的目的更多在于数据的展现，如今的网页为了提供更好的用户体验，在保持原有目的的基础上，愈来愈关注：html
- 界面的美观度
- 交互性的提高
- 性能的优化和传输效率的提高
二、网页组成部分
- 网页结构，关注网页'长什么样'
结构提供了网页骨架、布局 - 网页数据，关注网页'提供了什么内容'
数据是网页承载的主要内容，完成了网页的数据展现功能 - 网页样式，关注网页'好很差看'
样式是网页的外观，提供对用户最直观的感觉
样式审美和总体风格也表明着隐式的数据表达 - 网页动做，关注网页'交互性'
动做提供了交互，良好的交互能够提高用户的体验
动做优化了性能，良好的数据传输设计(如ajax)能够增长传输效率
三、支撑一个网页的技术模块
- 结构:html
- 数据:web框架(数据处理)+数据库(数据存储)
- 样式:css
- 动做:js
2、html的理解和技术笔记
一、html理解
就像造房子同样，一栋房子有多个组成部分，html相似于房子的户型，它设计了房子的总体架构、分区、布局，并且还定义了每一个区块的功能做用。html技术为后续入住的数据事先搭建好了对应的空间。python
二、html技术笔记-html标签
html 表明包含一个网页文档，是一个网页的根元素(某些浏览器将body做为根元素)
head 表明文档的头部，包含控制信息
meta 表明控制信息，经过标签中的属性来提供页面控制，如:charset='UTF-8'控制编码格式
title 表明网页标题
link 外部文件连接，主要是css连接
body 表明文档的主体，包含数据、主体骨架、布局、样式、行为事件和回调函数等
script 表明一个js代码的引用,包含内联的js代码或一个js文件地址
a 表明一个连接，包含一个去往某连接的文字说明
h1-6 表明文章主题，h1的字体最大
p 表明一个段落，包含段落中的内容
img 表明一个图像，包含一个展现图像
i 表明一个图标，包含一个图标
div 表明一个盒子模型，通常用于布局
span 表明一个行内文本，通常用于须要特别处理的行内文本标记
hr/br 表明水平分隔符/换行符
button 表明一个按钮，button在form中会默认type=submit
form 表明一个表单，能够内含不少表单组件，通常用于用户数据提交
input 表明一个表单组件，经过type来切换不一样功能，通常用于数据的输入
text 表明一个文本输入框，通常用于输入小段文本
email 表明一个email输入框,会对输入的邮件格式作格式判断
password 表明一个密码输入框，输入的密码会被转换成一个黑点或者星号
radio 表明一个单选框，多个相同name的单选框组成一个组，选项互斥
checkbox 表明一个复选框，多个项目name的复选框组成一个组
textarea 表明一个文本输入域，通常用于输入大段文本
select 表明一个下拉框，包含多个下拉选项
option 表明一个下拉选项
label 表明一个标记，通常用于指向对应的输入框用于实现点击label时输入框产生焦点
file 表明一个文件上传框
submit 表明提交表单，一旦点击，所属表单的全部组件值会被统一提交
table 表明一个表格，包含不少表格元素
thead 表明表格头部，通常是一行
tr 表明一行
th 表明表格数据的名称，即属性名，如：名字、年龄、学校、工资等
tbody 表明表格数据主体
tr 同上
td 表明数据单元格，包含一个单元格的数据
ul/ol 表明一个无序/有序列表，包含列表项目
li 表明一个列表项目
3、css的理解和技术笔记
一、css理解
css相似于房子的装修，装修让这栋房子看上去更加的美观，装修定义了每一块墙面该粉刷成什么颜色，地板应该如何规划，是长方形仍是正方形。装修应该从总体主题出发，依据优秀的审美素养规划设计每个区域的样式设计，总体装修方案也表达了这栋房子的主题。web
二、css技术笔记
选择器
选择器的目的是为了获得对目标元素的引用，一旦获得引用，就能够在此引用上执行各种操做。一个元素有不少不一样的表征，这些均可以做为寻找引用的依据。ajax
1. 基本查找方式:
id: id是一个标签元素在html中的惟一标识，使用id能够快速且惟一的寻找到元素引用
class: class表示了一个标签元素所属的类，类和标签属于多对多关系，一个类能够有多个标签，一个标签也能够属于多个类，使用class会寻找到归属于此类的多个标签元素
tagName: tagName是一个标签的名称，经过标签名能够找到文档中全部同名标签
优先级: 使用id > 使用class > 使用tagName
2. 高级查找方式:
div p: 表示文档中，全部div子树中的p都被抓取，不论p是div的儿子辈仍是孙子辈
div>p: 表示文档中，全部div子树中的直接后辈p都被抓取，即p必须是div的儿子辈
div#box1: 表示文档中，全部id是box1的div(其实应该只有1个)，查询结果等价于#box1
div.box1: 表示文档中，全部class中含有box1的div
div, p, li: 表示组合，即对多个元素组合执行相同的操做
3. 属性查找
[school]: 表示文档中，全部含有school属性的全部标签
div[school]: 表示文档中，含有school属性的全部div
div[school='abc']: 表示文档中，含有school属性且值为'abc'的全部div
div[school^='a']: 表示文档中，含有school属性且值以'a'开头的全部div
div[school$='a']: 表示文档中，含有school属性且值以'a'结尾的全部div
4. 伪类选择器
某元素:link 表示当此元素未被访问时的样式(即初始默认样式)
某元素:hover 表示当鼠标移到此元素上时的样式
某元素:active 表示当鼠标点击瞬间(未释放鼠标)时的样式
某元素:visited 表示当此元素被访问过(释放鼠标后)时的样式
以上4种伪类选择器定义了当发生某些动做时的样式改变，能够用于提供简单的界面交互
p:first-child 表示当p是某一个父元素的第一个子元素时被获取
p:last-child 表示当p是某一个父元素的最后一个子元素时被获取
p:nth-child(x) 表示当p是某一个父元素的指定第x个子元素时被获取
p:nth-child(2n) 表示当p是某一个父元素的指定偶数个子元素时被获取
以上4种伪类的理解容易发生误差，且使用时容易出错，产生意外结果
5. 伪元素选择器
li:first-letter 表示此元素的第一个文本字符被获取
li:before
li:after
以上2种通常配合content属性使用，表示此元素的原有文本前/后增长对应内容,first-letter不能应用于a等行内元素
样式
字体属性
颜色属性
文本属性
背景属性
元素分类:块级、行内、行内块级正则表达式
盒子模型
一个盒子模型能够被认为是一个操做单元，页面的布局由多个盒子组成数据库
外边距margin：表明盒子外边界到边框的距离
边框border：表明盒子边框，边框能够有必定的宽度
内边距padding：表明盒子边框到内容区的距离
内容区width/height：表明内容区的宽高编程
浮动
html文档被浏览器所解析时，浏览器会将各元素按照标准文档流放入页面中。浮动的做用是将某个元素脱离文档流，看上去就好像它悬浮在原有页面上同样。浮动使用float属性设置，能够选择向左或者向右。
此外，浮动的元素会被看做是块级元素，即一个行内元素一旦浮动，就可拥有width和height属性浮动通常会配合盒子模型使用，将浮动元素包含在盒子中，再经过盒子完成页面布局。子元素的浮动通常会致使父元素的height塌陷至0，致使父元素盒子不可见，此时须要在父元素上完成清除浮动。后端
清除浮动
浮动能够实现多个块级元素并排在一行。浮动元素会提高层级，这会致使父元素高度塌陷。
父元素设置overflow便可将高度扩展至子元素中最大的高度。
多个浮动的元素在一行，经过clear 的left和right能够取消并排效果，注意clear只应用于元素自身。数组
定位
相对定位: 不脱离标准流，原区域保留，无浮动效果
绝对定位: 脱离标准流，原区域不保留，浮动效果
固定定位: 脱离标准流,原区域不保留，浮动效果，将会固定在指定区域即便发生滚动
4、js的理解和技术笔记
一、js理解
js相似于房子里的家具，家具提供了交互性功能，给用户提供了更方便、快捷、简单的方法用于处理各种事务：
之前咱们须要用钥匙开门，如今有了智能锁只须要指纹 之前咱们须要烟囱排烟，如今有了油烟机只须要打开开关 之前咱们须要烧水洗澡，如今有了热水器 之前咱们须要将食物放到水里保质，如今有了冰箱 之前咱们须要到社区大队看电影，如今有了电视、电脑
家具提供了更优秀的用户体验，也提高了用户完成某一件事的效率。
js是运行在客户端上的编程语言，与后端语言本质上是同样的，只是适用的场景不一样而已。
js由浏览器负责解释执行，js的使用能够减轻服务器的压力，好比使用js检测输入数据格式、局部数据刷新等等。
js是解释型语言，浏览器会实时编译，因此js和python文件同样，都是直观可见的文本类型源代码。
二、js技术笔记-基本知识
语法
1. 驼峰式命名
2. ;号结尾
3. {}代码块
4. var 变量声明
数据类型
Number
数字类型，数字类型有一个特殊值:NaN，表明当尝试转换成Number类型失败时的值，如Number('abc')
String
字符串类型，js中的字符串也是不可变对象，即全部尝试针对原字符串修改的操做都会返回一个新字符串
字符串可使用[]和charAt()访问，也能够经过for来遍历
Boolean
布尔类型，true或者false，
注意Boolean('false')的值是true,
注意Boolean([])的值是true，
如下值的布尔值是false:
0,-0,'',NaN,undefined,null,false
其余值都是true
Array
数组类型，js的数组类型也是动态的，不只长度可变，也能够涵盖多个不一样类型的元素
注意，以下方式遍历数组，将会获得数组的元素下标
var arr = ['a','b',c'];
for(var i in arr){
console.log(i);
}
Date
时间类型，用于表示时间，初始值是当前时间。时间对象有不少关于时间操做的函数可使用。
Math
数学函数，使用Math.abs(x)获取绝对值等
RegExp
正则类型，用于表示一个正则表达式，通常用于处理字符串
undefined和null
undefined表示声明了，可是未定义值
null表示声明了，可是定义了一个空值
流程控制
判断
if [else if] else
分支判断
switch(x) {
case 1:
break;
default:
//code
}
for循环
for(var i = 0, len = x.length; i < len; i++) {
//code
}
while循环
while(condition){
//code
}
do循环（至少执行一次）
do{
//code
}while(condition)
函数
函数声明 --> 定义函数方法1
function f(args){
//code
}
函数表达式 --> 定义函数方法2
var f = function(args){
//code
}
自定义对象
字面量方式
var stu = {
name:'xiaoming',
age:26
};
构造函数方式
function Stu(stuName, stuAge){
this.stuName = stuName;
this.stuAge = stuAge;
}
var stu = new Stu('xiaoming', 26);
DOM
- 元素控制
一个html页面能够被当作是一棵树，每一个节点都是html标签。js能够操做这棵树，提供了不少操做方法。
使用js，能够方便的增删改查html元素，这为咱们提供了控制html页面结构的途径。 - 属性控制
js在获取到相应的元素后，能够控制此元素的属性，除了html元素自身的属性以外，还能够经过style控制
元素的样式属性，这为咱们提供了控制html页面样式的途径。 - 事件控制
js还能够控制元素的事件响应，注册相应的事件并提供预约义的回调函数，一旦发生指望的事件便可以执行
回调函数。经过事件控制，js能够快速的增长、删除、修改元素的行为，这为咱们提供了控制html页面行为
的途径。
BOM
js能够经过某些对象来控制浏览器，如:
navigator
location
history
screen
window
- 1. Sift 理解简单总结
- 2. spark基本概念（总结和理解）
- 3. Android中4种基本布局简单介绍和总结
- 4. JVM原理简单总结
- 5. Maven和Solr简单总结
- 6. http 和 https 简单总结
- 7. Hibernate 注解简单总结
- 8. 简单总结Tomcat总体结构和工做原理
- 9. ES6简单总结（搭配简单的讲解和小案例）
- 10. MyBatis基本原理总结
- 更多相关文章...
- • Lua 基本语法 - Lua 教程
- • C# 基本语法 - C#教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Sift 理解简单总结
- 2. spark基本概念（总结和理解）
- 3. Android中4种基本布局简单介绍和总结
- 4. JVM原理简单总结
- 5. Maven和Solr简单总结
- 6. http 和 https 简单总结
- 7. Hibernate 注解简单总结
- 8. 简单总结Tomcat总体结构和工做原理
- 9. ES6简单总结（搭配简单的讲解和小案例）
- 10. MyBatis基本原理总结