前端语言串讲|青训营笔记

33 阅读2分钟

前端语言的基本能力

HTML(Hypertext Markup Language)

像骨头一样,撑起了整个页面的大致框架,比如左边需要一个输入框,右边需要一个按钮之类的,都可以用HTML来实现。

HTML各种标签可参考HTML全部标签总集

CSS(Cascading Style Sheet)

HTML实现出来的样式比较单调,CSS就是为它进行“化妆”的,也就是做到美化的效果。

CSS选择器
  1. 基本选择器
    • 通用选择器(选择所有元素)
    • 元素选择器(按照给定的节点名称,选择所有匹配的元素)
    • 类选择器(按照给定的 class 属性的值,选择所有匹配的元素)
    • ID选择器(按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的)
    • 属性选择器(按照给定的属性,选择所有匹配的元素)
  2. 分组选择器
    • 选择器列表(,是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点)
  3. 组合选择器
    • 后代选择器(" "组合器选择前一个元素的后代节点)
    • 直接后代选择器(>组合器选择前一个元素的直接子代的节点)
    • 一般兄弟选择器(~组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点)
    • 紧邻兄弟选择器(+组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点)
    • 列选择器(||组合器选择属于某个表格行的节点)
  4. 伪选择器
    • 伪类(:伪选择器支持按照未被包含在文档树中的状态信息来选择元素)
    • 伪元素(::伪选择器用于表示无法用 HTML 语义表达的实体)

详细可参考mdn CSS选择器

JavaScript

与用户进行交互,将用户的行为提交到后台服务器等

  1. 借鉴C语言的基本语法
  2. 借鉴Java语言的数据类型和内存管理
  3. 借鉴Scheme语言,将函数提升到“第一等公民”的地位
  4. 借鉴Seif语言,使用基于原型(prototype)的继承机制

Browser.png

前端语言的协作配合

CSS in HTML

1682384438780.jpg

Javascript in HTML

1682384570002.jpg

你不知道的HTML(5)

HTML DTD

HTML并非图灵完备,它只是一门标记语言。 1682385125316.jpg

HTML head

1682385246155.jpg

HTML ARIA

了解ARIA并非只是为了供盲人阅读,他可以为我们设计UI系统提供指导意义。

课程总结

1682386832060.jpg