html-css-js基本理解和简单总结

目录

• 一、对于网页的基本理解
  • 1、网页是一种数据展示和信息交互的载体
  • 2、网页组成部分
  • 3、支撑一个网页的技术模块
• 二、html的理解和技术笔记
  • 1、html理解
  • 2、html技术笔记-html标签
• 三、css的理解和技术笔记
  • 1、css理解
  • 2、css技术笔记
• 四、js的理解和技术笔记
  • 1、js理解
  • 2、js技术笔记-基本知识

一、对于网页的基本理解

1、网页是一种数据展示和信息交互的载体

生活中，我们通过各种各样的方式获取信息，网页是目前被使用最频繁的一种。
早年网页的目的更多在于数据的展示，现在的网页为了提供更好的用户体验，在保持原有目的的基础上，越来越关注：

1. 界面的美观度
2. 交互性的提升
3. 性能的优化和传输效率的提升

2、网页组成部分

1. 网页结构，关注网页'长什么样'
   结构提供了网页骨架、布局
2. 网页数据，关注网页'提供了什么内容'
   数据是网页承载的主要内容，完成了网页的数据展示功能
3. 网页样式，关注网页'好不好看'
   样式是网页的外观，提供对用户最直观的感受
   样式审美和整体风格也代表着隐式的数据表达
4. 网页动作，关注网页'交互性'
   动作提供了交互，良好的交互可以提升用户的体验
   动作优化了性能，良好的数据传输设计(如ajax)可以增加传输效率

3、支撑一个网页的技术模块

1. 结构:html
2. 数据:web框架(数据处理)+数据库(数据存储)
3. 样式:css
4. 动作:js

二、html的理解和技术笔记

1、html理解

就像造房子一样，一栋房子有多个组成部分，html类似于房子的户型，它设计了房子的整体架构、分区、布局，而且还定义了每个区块的功能作用。html技术为后续入住的数据事先搭建好了对应的空间。

2、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         代表一个列表项目

三、css的理解和技术笔记

1、css理解

css类似于房子的装修，装修让这栋房子看上去更加的美观，装修定义了每一块墙面该粉刷成什么颜色，地板应该如何规划，是长方形还是正方形。装修应该从整体主题出发，依据优秀的审美素养规划设计每一个区域的样式设计，整体装修方案也表达了这栋房子的主题。

2、css技术笔记

选择器

选择器的目的是为了得到对目标元素的引用，一旦得到引用，就可以在此引用上执行各类操作。一个元素有很多不同的表征，这些都可以作为寻找引用的依据。

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只应用于元素自身。

定位

相对定位: 不脱离标准流，原区域保留，无浮动效果
绝对定位: 脱离标准流，原区域不保留，浮动效果
固定定位: 脱离标准流,原区域不保留，浮动效果，将会固定在指定区域即使发生滚动

四、js的理解和技术笔记

1、js理解

js类似于房子里的家具，家具提供了交互性功能，给用户提供了更方便、快捷、简单的方法用于处理各类事务：

以前我们需要用钥匙开门，现在有了智能锁只需要指纹
以前我们需要烟囱排烟，现在有了油烟机只需要打开开关
以前我们需要烧水洗澡，现在有了热水器
以前我们需要将食物放到水里保质，现在有了冰箱
以前我们需要到社区大队看电影，现在有了电视、电脑

家具提供了更优秀的用户体验，也提升了用户完成某一件事的效率。

js是运行在客户端上的编程语言，与后端语言本质上是一样的，只是适用的场景不同而已。
js由浏览器负责解释执行，js的使用可以减轻服务器的压力，比如使用js检测输入数据格式、局部数据刷新等等。
js是解释型语言，浏览器会实时编译，所以js和python文件一样，都是直观可见的文本类型源代码。

2、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

1. 元素控制
   一个html页面可以被看成是一棵树，每个节点都是html标签。js可以操作这棵树，提供了很多操作方法。
   使用js，可以方便的增删改查html元素，这为我们提供了控制html页面结构的途径。
2. 属性控制
   js在获取到相应的元素后，可以控制此元素的属性，除了html元素自身的属性之外，还可以通过style控制
   元素的样式属性，这为我们提供了控制html页面样式的途径。
3. 事件控制
   js还可以控制元素的事件响应，注册相应的事件并提供预定义的回调函数，一旦发生期望的事件即可以执行
   回调函数。通过事件控制，js可以快速的增加、删除、修改元素的行为，这为我们提供了控制html页面行为
   的途径。

BOM

js可以通过某些对象来控制浏览器，如:

    navigator
    location
    history
    screen
    window