了解什么是前端和HTML | 青训营笔记

元弦
156 阅读3分钟

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

了解什么是前端？

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

根据课程的介绍，前端包含了什么？

  • 解决 GUI 人机交互问题
  • 跨终端
    • PC/移动端浏览器
    • 客户端/小程序
    • VR/AR 等
  • Web 技术栈

前端技术栈

image.png

图片来源于字节跳动青训营课程 ppt

核心技术主要是 HTML、CSS、JavaScript。使用 HTML 展示出来网页的结构内容，通过使用 CSS 可以美化网页的样式，使网页更加美观，然后通过使用 JavaScript 来提升 GUI 的人机交互能力，使人机交互更加友好。

前端应该关注哪些方面？

image.png

图片来源于字节跳动青训营课程 ppt

前端，更加关注的侧重点:

  • 页面美观
  • 安全性
  • 兼容性
  • 功能
  • 用户体验
  • 网页性能
  • 无障碍

一个优秀的前端工程师，不单单是要会使用 HTML、CSS、JavaScript，还需要不停美化页面，使页面符合大众审美；增加网页的安全性，保护用户的隐私数据等，提高网页的兼容性，使能够在不同浏览器或不同端能够保持原来的页面结构及样式；网页的功能要不断完善；提升用户对网页的体验感；优化网页的性能，给用户带来更好的体验，为用户的操作做出更迅速的响应；还要增加无障碍使用网页等。

了解什么是 HTML ？

HTML 的英文全称是 Hyper Text Markup Language，即是超文本标记语言。使用 HTML 可以构建出网页的页面结构。

HTML 文档结构示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
  
</body>
</html>

HTML 文档结构主要由 (html)元素、(head)元素、(body)元素 组成，其中 html 元素包裹了 head 元素和 body 元素，head 元素包含了文档的元数据以及包含外联样式或脚本等其他资源的引入，而 body 元素总是紧跟 head 元素后面的，它主要包含了文档的内容。

了解什么是语义化？

image.png

image.png

图片来源于字节跳动青训营课程 ppt

HTML 文档使用具有语义化的 html 标签，使机器能够理解，能够明白每个标签的具体作用。为使用者提高了代码的可读性、可维护性，有助于搜索引擎建立索引，提升搜索的速度，同时，还有助于盲人等的一些使用。因为语义化相当于是说明了这个标签的作用是什么，然后机器让自己解读理解，需要多加了解以及多加思考标签的含义从而做到语义化。

总结

本文包含的知识主要是对前端的基本描述及理解，HTML 的概括及理解，学习前端需要了解什么是前端，学习 HTML 同样也需要了解什么是 HTML，每次都反问一下自己，为什么要学，学它是用来做什么的，有什么作用，还有学习 HTML 需要不断进行练习，不能只靠“看”，不断练习才能对它有更加充分的理解。

如有错误，望指正，谢谢。

avatar
文章
阅读
粉丝