前端与HTML | 青训营

SIckDlo
59 阅读7分钟

什么是前端

  1. 前端有3个特点:

    • 解决了GUI人机交互问题
    • 是跨终端的
    • 使用web技术栈进行开发

  2. 前端技术栈主要是与服务器端相对应的js, css, html等技术

  3. 前端需要关注许多问题, 包括功能、美观、体验、性能、兼容性、安全性以及无障碍等

  4. 现在前端的边界正在逐渐扩大, 可以借助node进行服务端开发; 可以借助electron进行客户端开发; 借助React Native进行移动端开发;还可以借助webRTC实现端对端通信, 实现线上会议等; 而webGL给我们提供在前端绘制复杂图像和动画的能力; 还可以使用wasm提高网页性能

  5. 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

  • HTML的历史可以追溯到20世纪80年代早期，当时一些科学家和研究人员为了实现文本交流的目的创造了一种新的技术——互联网。随着网络的普及，为了能更好地传递、组织信息，Tim Berners-Lee于1991年发明了超文本标记语言（HTML），使得网页设计者可以创建更加复杂且交互式的网页。
  • HTML使用标记将文本、图像和其他内容包含在Web页面中。这些标记分为开放标签和封闭标签，其中开放标签包括了属性，被使用于元素和组成内容的头、主体和底部部分。HTML语言的第一条规则就是必须包含html标签。
  • HTML的语法和标签结构使得网页设计者能够创建具有结构、样式和交互性的网页。其中最重要的两个标签是
    和。div用于定义一个区域，而span用于定义一小段文本。使用这些标签和其他HTML标签可以创建不同类型的表格、链接、图像、视频、音频和表单。
  • HTML作为一种标准化的语言，已被广泛使用。无论是桌面网页、移动应用还是Web应用程序，HTML都是不可或缺的一部分。它允许网页设计者创建动态的、交互式的用户体验，为网站访问者提供更多的信息和功能。
  • 在互联网普及的今天，HTML的应用范围越来越广泛，甚至可以用于创建电子邮件和移动应用程序。而随着技术的发展和用户需求的变化，HTML标准也在不断更新和完善，保证了人们能够在不断变化的技术环境中创造出更好、更优秀的网站

html的常用标签

标题： h1></h1> ~ <h6></h6>,用于表示文档的各级标题，级数越大字体大小越小。

列表：<ol><li>...</li></ol>，有序列表。 <ul><li>...</li></ul>，无序列表。 <dl><dt>...</dt><dd>...</dd></dl>，描述列表。

链接：<a></a>，href属性：链接到的地址；target属性：跳转页面的方式。

图片：<img>，src属性：图片的地址，alt属性：当图片未正常加载时显示的文本。该标签可以不闭合。

音频：<audio></audio>，src属性：音频地址，controls属性：是否显示浏览器默认的音频控件。

视频：<video></video>，src属性：视频地址，controls属性：是否显示浏览器默认的视频控件。

输入框：<input>，type属性：输入框的类型

数据列表：<datalist><option>...</option></datalist>，一般通过id属性绑定拥有list属性的input输入框使用

文本框：<textarea></textarea>,允许调整大小并输入多行文字的输入框。

下拉选项框：<select><option>...</option></select>，option为下拉框的选项内容。

引用：

  • <cite></cite>，短引用。
  • <q></q>，短引用。q区别于cite，会将包裹的文本用双引号引用，而cite则是显示成斜体。
  • <code></code>，将文本以代码的样式引用。
  • <blockquote></blockquote>，块级引用，可以引用多行文本。cite属性：引用文本的地址。
  • <pre></pre>，包裹的文本将保留空白符，并用源格式在浏览器页面中显示出来。
  • <strong></strong>，加粗包裹的文本，强调文本重要性。
  • <em></em>，将包裹的文本变成斜体，表示强调。

内容划分

  • header——页头
  • nav——导航
  • main——主体，主要内容
  • article——放正文内容
  • aside——推荐内容

1、什么是DOM树？

当浏览器加载HTML 页面的时候，首先就是DOM结构的计算，计算出来的DOM 结构就是DOM 树（把页面中的HTML标签像树的结构一样，分析出之间的层级结构关系）

DOM树描述了标签与标签之间的关系（节点间的关系），我们只要知道任何一个标签，都可以依据DOM中提供的属性和方法，获取到页面中任意另一个标签或者节点。

**浏览器基础结构**

浏览器基础结构主要包括如下7部分：

1.用户界面(User Interface):用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等;

2.浏览器引擎(Browser engine):负责控制和管理下一级的渲染引擎;

3.渲染引擎(Rendering engine):负责解析用户请求的内容(如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后的内容);

4.网络(Networking):负责处理网络相关的事务，如HTTP请求等;

5.UI后端(UI backend):负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口;

6.JavaScript解释器(JavaScript interpreter):负责解析和执行JavaScript代码;

7.数据存储(Data storage):负责持久存储诸如cookie和缓存等应用数据。

D4761B49CDA97820F4C74936E2B_1150FAC8_2E6A.png

**渲染引擎及关键渲染路径(Critical Rendering Path)**

渲染引擎所做的事是将请求内容展现给我们，默认支持HTML,XML和图片类型，对于其他诸如PDF等类型的内容则需要安装相应插件，但浏览器的展示工作流程基本是一样的。

通过网络模块加载到HTML文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径(Critical Rendering Path)：

1.构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树(DOM tree)，也叫内容树(content tree);

2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树;

3.执行JavaScript：加载并执行JavaScript代码(包括内联代码或外联JavaScript文件);

4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree);渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。

5.布局(layout)：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置;

6.绘制(painting)：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成;

为了更友好的用户体验，浏览器会尽可能快的展现内容，而不会等到文档所有内容到达才开始解析和构建/布局渲染树，而是每次处理一部分，并展现在屏幕上，这也是为什么我们经常可以看到页面加载的时候内容是从上到下一点一点展现的。

ps：本人在写文章时运用了网络上的资源和一些本人看法，收获满满，希望继续努力
avatar
文章
阅读
粉丝