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

简介: 目录一、对于网页的基本理解1、网页是一种数据展示和信息交互的载体2、网页组成部分3、支撑一个网页的技术模块二、html的理解和技术笔记1、html理解2、html技术笔记-html标签三、css的理解和技术笔记1、css理解2、css技术笔记四、js的理解和技术笔记1、js理解2、js技术笔记-基本知识一、对于网页的基本理解1、网页是一种数据展示和信息交互的载体生活中,我们通过各种各样的方式获取信息,网页是目前被使用最频繁的一种。

目录


一、对于网页的基本理解

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
相关文章
|
9天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
25 1
|
9天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
19 0
|
5天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
5天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
9天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
11天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
|
8天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
9天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
WK
|
11天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
27 3
|
27天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
下一篇
无影云桌面