前端框架概述| 豆包MarsCode AI刷题前端语言串讲思维导图前端语言的基本能力工具对于一个网页，HTML定

前端语言串讲

思维导图

前端语言的基本能力

工具

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为。

# HTML文档示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页标题</title>
    <link rel="stylesheet" type="text/css" href="./mycss.css" />
    <script type="text/javascript" src="./myjs.js"></script>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

文档告诉浏览器：我遵循W3C标准XHTML1.0过渡版本规范（文件类型声明），请用这个标准解析我，我采用的编码是utf-8，我的标题是:网页标题，描述我的模样的样式表是我同级的mycss.css文件，与我有关的javascript代码在我同级的myks.js文件中，我的内容有一个段落，段落的内容是“这是一个段落”。

1.HTML
（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。

HTML的发展是一个不断修改的过程。目前我们只需要学习XHTML和HTML5，因为现在能看到的大部分网页是使用XHTML或者HTML5这两个版本的， XHTML 与 HTML 4.01 几乎是相同的，HTML从最初发展到XHTML的过程中变得更加的严谨，更加的灵活，与CSS结合的更好。

html5很快就会取代xhtml，不管是移动端还是pc端成为html应用的主流版本。

构建框架结构：内容布局，网页结构，web页基石\

2.CSS层叠样式表
用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})。

CSS的发展是一个不断补充的过程。使用CSS的时候，不需要像HTML那行申明使用的标准，高版本的浏览器认识高版本的CSS定义，低版本的浏览器略过不认识的CSS定义。不管什么版本，CSS的语法很简单，选择器：{属性：属性值}，所以火爆的CSS3无外乎是扩展了选择器和属性。

添加样式，适应web，look and feel\

3.Javascript
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。JavaScript一种直译式脚本语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，即：JavaScript是由客户端的浏览器解释执行的。

通常说的JavaScript 由核心（ECMAScript）和浏览器给JS提供的API（Web API）构成，这些API中最基础和著名的就是DOM（文档对象模型）和BOM（浏览器对象模型）,直到现在还有人说JavaScript=ECMAScript+DOM+BOM，其实现代浏览器为JS提供了很多API，除了DOM和BOM，还有用于从服务器获取数据的API，如XHR，Fetch,用于客户端存储的API，如：cookie,localStorage,用户数据管理的API，如IndexedDB，绘制和操作图形的API，如Canvas,地理定位API,音频和视频API等等。

ECMAScript(JavaScript语言的标准)，ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。可以使用babelES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

增加交互

HTML

1.1 HTML的结构

文档声明：用于声明当前HTML的版本，<!DOCTYPE html>是HTML5的声明
html根标签：除文档声明以外，其它内容全部放在根标签html内部
文档头部配置：head标签，是当前页面的配置信息，外部引入文件
文档显示内容：body标签，里边的内容会显示到浏览器页面上
语法规范及常用标签，含CSS，JavaScript

CSS

语法：

declaration声明 CSS选择器 eg： 1）伪类、伪元素选择器举例：元素自身状态，伪类，单个冒号；元素内容，伪元素：

2）根据属性筛选方括号[] 需要时去Mbi查找

Javascript

基本语法：

Browser浏览器

上述三个语言如何在浏览器中运转。浏览器（web browser）通俗的说浏览器用于通过网址（URL）来获取并显示Web网页的一种软件工具，当一个用户输入一个正确的网址，按下回车键，浏览器经过一系列的工作（DNS解析->建立TCP连接->发起HTTP请求->接受服务器响应，得到html代码），在互联网的某一台服务器上请求到了一个html文档，并下载该文档关联的资源（如css文件，图片，js文件），之后浏览器调动自己手下的一个部门：渲染引擎，把页面绘制出来，让另一个部门：js引擎来解释javascript代码。

浏览器所渲染和解释的代码，html、css和javascript是由前端编写的，换言之前端程序猿编写的代码最终是要交给浏览器执行；由于浏览器的种类很多，前端要保证大部分主流浏览器对你的代码都能按你的想法正确的解析和执行，这是个很繁琐的工作，幸好出现了一个W3C组织(万维网联盟,创建于1994年), 大部分现代浏览器都遵从W3C规定的标准解析网页。

W3C标准规定了三个方面的标准：

1、结构化标准（HTML，XML） 2、表现标准（CSS） 3、行为标准（ECMAScript）

大部分浏览器执行这些标准的时候比较宽容，宽容的程度又有所不同，所以前端在编写网页的过程中要一定要遵从W3C标准。

浏览器包含：
1）渲染引擎

加载页面，根据HTML获取dom树结构，根据css构架css om树。结合dom特性和css样式特性，计算最终页面排版，推断哪些部分作为整体变为一个图层，提高渲染效率，最后绘制页面

2）Javascript引擎

源码通过词法语法转化为AST树

前端语言协作配合

css in HTML

inline css:直接在html中通过style/class添加样式
internal css：style标签
external css：link标签

javascript in html

捕获-冒泡
javascript单线程：

HTML in javascript

css in javascript

你不知道的HTML

HTML DTD

HTML并非图灵完备，只是一门标记语言。

HTML标签分类

HTML head标签

HTML body功能标签

HTML ARIA

ARIA

（Accessible Rich Internet Applications）是一组特定的角色和属性，旨在通过定义使Web内容和Web应用程序更易于被残疾人士访问的方法，提高网络应用的可访问性。它补充了HTML，使得在原生HTML元素无法满足需求时，可以通过ARIA属性使自定义的交互和小部件对辅助技术可用。

ARIA的实际应用

例如，一个进度条小部件可以使用div元素创建，但div本身并没有语义。通过添加ARIA角色和属性，可以为这个元素赋予进度条的意义。在下面的代码示例中，role="progressbar"属性告知浏览器该元素实际上是一个进度条小部件，而aria-valuemin、aria-valuemax和aria-valuenow属性分别定义了进度条的最小值、最大值和当前值。

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

此外，ARIA属性可以通过JavaScript动态添加和更新，以响应应用程序状态的变化。这意味着，如果进度条的值发生变化，可以使用JavaScript更新aria-valuenow属性。