前端开发三剑客基础知识

最新推荐文章于 2024-05-14 12:35:36 发布

也就这几年了

最新推荐文章于 2024-05-14 12:35:36 发布

阅读量900

点赞数 18

文章标签：前端 web javascript css html

本文链接：https://blog.csdn.net/weixin_42883207/article/details/135828055

版权

web开发基础三件套

HTML

全称 Hypertext Markup Language，超文本标记语言

使用它来控制网页的内容和结构，是一个网页的骨架

有语义标签的重要性

方便团队开发中其他成员维护理解代码，提高了代码的可维护性和可读性
当css文件丢失时，网站也可以很好的展示逻辑和页面结构
语义化标签可以被屏幕阅读器等辅助设备识别和解析，从而提高网页的可访问性

html5

html5，即HTML的第五个版本，和之前的版本比较，主要新增和修改了：

新增语义化标签：header, nav, article, section, aside, footer等结构标签
新增了video和audio标签定义音乐和视频
新增了canvas标签提供画布表示图形
新增了summary, details, mark, progress, meter等标签
修改了文档类型声明的写法，<!DOCTYPE html>
等。。。

CSS

全称 Cascading Style Sheets，层叠样式表

通过它来控制网页内容的样式，比如大小，颜色，位置等，是一个网页的外观

选择器

CSS通过选择器来选择标签来修改它们的属性，分为基础选择器和复合选择器

基础选择器权重：ID选择器 > class选择器 > 标签选择器 > 通配符

复合选择器：

后代选择器：选中A标签内所有的B标签
1. ```
A B {
    font-size: 12px;
    color: blue;
}
```
子选择器：选中A标签内最近一级的B标签
1. ```
A>B {
    margin-top: 10px;
    font-weight: 700;
}
```

并集选择器：类似于多选

A, B {
    background-color: black;
    color: white;
    font-size: 16px;
}

伪类选择器：

a:link { }
a:visited { }
a:hover { }
a:active { }
.ele:first-child { }
input:focus { }

引入方式

三种在html文件中引入css的方式，按照权重依次是：

行内式，即内联样式，一般在标签的style属性中定义；
嵌入式，即内联样式表，一般在<style>标签内定义；
链接式，即外部样式表，一般通过<link>标签引入的方式定义，这种方法让样式表得到复用并且易于管理

css3

css3升级了：

选择器：E:last-child, E:nth-child(n)
背景：background-image/repeat/size 等
边框：border-radius，borer-color 等
颜色和透明度：新增了hsl, rgba, hsla, opacity
弹性盒子模型：display属性设置为‘’flex”,
多栏布局：column-width/count/gap/span 等
变形：transform
过渡和动画：transition, animation
自定义文字：@font-face
媒体查询：@media
文字特效：text-shadow 等

Javascript

简称JS，是一个脚本语言，使用它来控制网页的动态交互。

它由三部分组成：

ECMAScript：是JS语言的核心，描述了JS的语法和基本对象；
DOM（Document Object Model）：文档对象模型，描述了JS处理网页内容的方法和接口；
BOM（Browser Object Model）：浏览器对象模型，描述了JS与浏览器进行交互的方法和接口；

ECMAScript

ECMA -European Computer Manufacturers Association 欧洲计算机制造商协会

ECMAScript 是由ECMA在标准ECMA-262种定义的脚本语言规范，简称ES，我们常说的ES6是指它的第六个版本。

JS实现了ES的语言标准，并且新增了拓展，使我们可以在浏览器中操作DOM和BOM，在Node环境中读写文件等操作，所以说JS是ES的拓展语言。

DOM

DOM是浏览器厂商提供的JS操作网页的API，不同厂商提供的API肯呢个不同，所以DOM存在少部分兼容性问题；

浏览器将html文档解析成一系列的节点，再由这些节点组成一个树状结构 - DOM Tree

DOM有哪些：

document: 文档节点-根节点，常用api: title, getElementById, createElement；
element: 根节点的唯一子节点，指<html>标签内包含的元素，常用api: innerHTML, styles, set/getAttribute；
Node: 指DOM Tree中的节点，有元素节点，属性节点，文本节点，注释节点等；
Event: 事件对象，包含了出发事件时相关的事件类型，目标元素等，常用api: stopPropagation, preventDefault；
WIndow：浏览器窗口，提供了与窗口相关的方法和属性，如定时器，弹出框等；

BOM

BOM则是对浏览器窗口进行访问和操作，常见的BOM有：

window：打开新窗口，关闭当前窗口，设置定时器等操作；
navigator：获取浏览器信息、类型、版本、操作系统等；
location：获取当前url，路径，重新加载操作等；
history：获取浏览器窗口当前历史记录，进行前进或后退等操作；
screen：获取浏览器窗口屏幕信息：当前可用宽、高等

也就这几年了

关注

18
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
前端开发三剑客基础知识

网页前端开发三件套，html, css和js分别是什么，他们之间是如何配合完成一个丰富多彩的网页
复制链接

扫一扫