这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

前端

网页是由多种要素共同构成的，随着WEB技术的不断发展，我们所接触到的网页越发多彩绚烂，实现这些效果和功能的技术也在不断更新拓展。前端便是实现网页展示效果与解决人机交互的技术栈的合称，前端的工作便是实现网页与用户间的交互。

前端要解决的基本问题

前端要解决的基本问题便是图形界面下的人机交互问题，要解决这一问题我们需要去考虑到许多方面，不仅仅是技术上的，还有用户的体验与设备的兼容性等等。

前端应该关注哪些方面.png

前端技术的发展

作为一个不断更新发展的领域，前端的技术早已不仅仅局限于客户端页面主体的表现与交互，更是包揽了诸多本由后端实现的技术栈，并且在功能的实现上各展拳脚，百家齐放，诸多的技术发展使得很多特殊的功能得以实现。

前端的边界.png

HTML

作为不断发展的前端技术的基础，正是 HTML ，即 Hyper Text Markup Language (超文本标记语言)。作为学习前端的第一步，HTML 的掌握至关重要。

HTML是什么？

HTML是一种标记语言，它包含了一系列的标签，能够将网络上的各种内容连接起来，形成一个整体，这些内容不仅仅包含文字，更包含了图片、音频、视频等各种内容。

<!doctype html>
<html>
  <head>
       <meta charset="UTF-8">
       <title>一个简单的HTML页面</title>
  </head>
  <body>
       <h1>一级标题</h1>
       <p>段落内容</p>
       <img src="">图片</img>
  </body>
</html>

DOM树

DOM 树将 HTML 中的代码转化为一个树形的结构，里面的每一个节点我们称之为 DOM 节点，每一个 DOM 节点中包含了我们页面中所要展示的内容。

DOM树.png

HTML中的标签

标签是 HTML 中的基础组成部分，由不同的标签规定不同内容的基本展示方式，区分不同内容的展示效果，规定区域内的展示内容，使页面拥有一个统一的格式。

标题

在 HTML 中，可以使用不同级别的标题标签来展示不同的标题效果，一级标题展示效果最大，然后逐级变小。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

列表

列表使得我们在内容的展示上能够显得更加有序和规范，增加页面内容的可读性，降低阅读的难度。列表有着多种不同的类型，基本分为有序列表和无序列表两种，不同的列表有着不同的展示方式。

列表.png

文本框

文本框能够向用户提供文字输入的窗口，也能作为文字的载体来向用户展示内容。文本框细分为了多种形式，可以将不同的数据形式进行区分。

文本框.png

链接与多媒体

链接作为不同页面以及多种页面内容的连接方式，将不同页面的内容连接为一个整体，也增加了页面展示的元素。

<a href="https://www.bytedance.com/">字节跳动官网</a>

多媒体标签能够在页面中展示多种多媒体的内容，增加页面的丰富度。多媒体标签.png

文本类的标签

文本类的标签使得我们在文章的展示中能够实现文章不同部分的多种效果，使得文章在表现形式上更加生动和多样。

文本.png

网页中的内容划分

一个网页的页面往往会划分成不同的几个区域，以此来规范区分页面展示的内容，也将具有相同属性或者功能的页面要素聚集在一起，方便用户的浏览和使用。一个页面往往分为页头、主体和页尾三个部分，有时还会设计一个边框，将其固定于页面的一侧或悬浮于页面之上。页头部分主要用于展示一些基本内容以及导航栏的设置，主体部分则作为页面内容的主要展示区域，边框有时会作为额外内容的补充，有时会作为拓展功能或导航栏，页尾则作为网站的基本说明、备案、友链等基本固定内容的展示区域。

内容划分.png

HTML开发与用户

HTML 的开发，最终服务的对象便是页面的使用用户。既然如此，作为一个前端开发者，我们在设计网页的过程中，不仅仅要你考虑到美观、性能、安全、兼容性等技术上或表现上的方面，更要从一个用户的角度，去让我们的作品更加具有实用性和便利性，将用户的体验融入到设计中去。不仅仅是普通用户的体验，更要考虑到特殊用户和特殊情况下，用户对于产品的使用情况，将我们所开发出的内容，更加友好地展示给使用者。

前端与HTML | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前端