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

表情吖
50 阅读5分钟

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

课程内容

  1. 前端语言的基本能力
  2. 前端语言的协作配合
  3. 你不知道的HTML5
  4. 拓展分享

前端语言的基本能力

HTML

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html

HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息

CSS

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”（层层叠加的样式），它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。

JavaScript

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

Browser

image (26).png

前端语言的协作配合

前端语言之间可以通过相互调用、数据交换等方式进行协作配合。例如，JavaScript 可以与 HTML 和 CSS 配合，实现动态页面的设计和交互功能。另外，也可以使用 AJAX 技术实现异步通信，使不同语言之间的数据交换更加高效方便。此外，前端框架和库的出现也为协作开发提供了更加方便高效的工具支持

Trending

通常是指当前最热门、最流行的话题、事件、产品或服务，这些内容通常通过社交媒体、搜索引擎、新闻网站等途径进行传播和推广。在网络时代，Trending成为了一种重要的营销手段和社交现象。

CSS和HTML的协作

  • 在标签 style 属性上设置 "key:value value ...;key:value ..."，以此来修改标签样式

    • <标签 key:value value ...;key:value ...>内容</标签>

  • 在 head 标签中使用 style 标签来定义各种自己想要的CSS样式

    • 选择器（标签或其它标志）{

                key: value value ...;

           }

  • 将CSS样式写成一个单独的CSS文件，再通过link标签将CSS文件引入HTML文件即可。

    • div{
	height: 80px;
}

    • <link rel="stylesheet" type="text/css" href="css1.css">

JavaScript和HTML的协作

JavaScript和HTML是紧密协作的技术，它们一起构成了Web页面的基础。HTML定义了Web页面的结构和内容，而JavaScript可以用于操作和动态更新页面的内容。简单来说，HTML是Web页面的“骨架”，而JavaScript则是负责让页面“动起来”的“肌肉”。JavaScript可以基于HTML元素的事件触发，来实现各种复杂的交互效果，包括验证表单、动态改变页面元素的属性和样式等。同时，JavaScript也可以基于AJAX技术实现异步加载数据，从而让Web页面获得更好的用户体验。

JavaScript和css的协作

JavaScript 和 CSS 在网页开发中有着密切的协作关系。JavaScript 可以通过操作 CSS 样式来改变网页的外观和行为，而 CSS 可以通过设置样式规则来控制 JavaScript 中元素的显示和隐藏，以及动态添加或删除元素等。比如，JavaScript 可以通过修改 DOM 元素的类名来改变元素的样式，也可以通过获取和设置元素的 CSS 属性来调整元素的位置、尺寸和样式。而 CSS 则可以通过设置伪类和伪元素的样式来实现一些特殊的效果，比如:hover、:active、:before、:after 等。总之，JavaScript 和 CSS 的协作为网页开发带来了更加丰富和动态的交互体验。

你不知道的HTML5

HTML5的设计目的是为了在移动设备上支持多媒体。 增加了新特性：语义特性，本地存储特性，设备兼容特 性，连接特性，网页多媒体特性，三维、图形及特效特 性，性能与集成特性，CSS3特性。 废弃一些元素和属性比如 font 、center 等

  • 新增语义化标签

    • <header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：块级标签
<aside>：侧边栏标签
<footer>：尾部标签

  • 新增多媒体标签

  • 音频： wu di o

    • <audio src="文件地址" controls="controls"></audio>

  • 视频： video di o

    • < video controls="controls" >

  • 新增 input 表单、表单属性

image (27).png

  • 全屏 退出全屏

    • requestFullscreen( ); 全屏 exitFullscreen( )； 退出全屏

      注意：全屏是该元素全屏 退出全屏是document 比如box.requestFullscreen( ) 退出是document.exitFullscreen( )；

  • 等其他新增功能

拓展交流

Web的风靡

Web 的风靡是因为它使得信息在全球范围内可以快速、简便地共享和传播，从而促进了人类的交流和合作。它为广大用户提供便捷的在线服务，让人们可以不受时间、地点限制地获取所需的信息和资源，满足了人们不同方面的需求，为人们的生活和工作提供了巨大的帮助。此外，Web 还为企业和组织提供了广泛而有效的渠道，可以推广他们的产品和服务，同时也为在线的商业活动和数字经济的发展提供了支持。

avatar
文章
阅读
粉丝