前端HTML篇 | 青训营笔记

星空20
115 阅读3分钟

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

什么是前端

通俗来说就是运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着技术发展迭代，现在的前端远不只止于此。

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

前端技术栈（基础）

说到基础，就要提到前端三剑客：HTML(内容)、CSS(样式)、Javascript(行为)。前端最基础的是通过网络协议将服务器端与三剑客联系起来，如图所示： image.png

前端关注的方面

功能、美观、无障碍、安全、性能、兼容性、用户体验

前端的边界？

前端技术不断更新迭代，发展非常快

image.png

HTML学习

特点

入门门槛较低，但要想真正理解和完美运用，需要下一定功夫。

HTML是什么？

英文写法是：HyperText Markup Language。即超文本标记语言。

  • 超文本：即通过某种方式（在一般人看来没有任何含义），表示图片、链接、表格等元素，不限于文本。
  • 标记：即通过标签来表示各种元素。

标签的构成

以<img>标签为例：

image.png <video>标签使用举例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    //width表示视频宽度
    <video src="./我眼中的中国智造.mp4" controls width="1000px" ></video>
</body>
</html>

页面展示： image.png

HTML页面构成

image.png

  1. <!doctype html>:告知浏览器你所用的HTML版本。
  2. <html></html>:根标签，所有标签都在该标签内。
  3. <head></head>：位于头部，常包含网页的某些属性和特殊含义。
  4. <body></body>:网页呈现的所有内容。
  5. 注意：标签一般成对出现，<html>为开始标志，</html>为结束标志。也有少数单标签，如<img>。

DOM树（document object model）

文档对象模型，当服务器将HTML文件发送给用户时，浏览器将HTML解析为DOM树，然后方便进行页面展示与渲染。DOM树如以下结构：

image.png

HTML语法

image.png

一般HTML界面的内容划分

image.png

  • header一般是导航栏之类有各种分类标签的东西，如：

image.png

  • main则是网页的主体内容，一般只有一个，如：

image.png

  • aside仅次于main的内容，虽然不是主体，但也是不可或缺的一部分，如：

image.png

  • footer一般用于展示版权等信息，如：

image.png

HTML语义化

注意：HTML传达的是内容，而不是样式

语义化是什么？

image.png 我们应该遵循语义来编写HTML，通过一定的规范，才能让那些使用我们写的HTML的人或物更好的理解我们编写的目的与用途，拥有更好的用户体验，具备使用的广泛性。

谁使用我们写的HTML

image.png

语义化的好处

image.png

  • 代码可读性和可维护性即表示当其他工程师看到我们的代码时，可以轻易看懂我们使用每个标签的用途，更加容易地接手我们的代码，加以维护和优化。
  • 搜索引擎优化即浏览器可以快速解析我们的HTML代码，来减小页面加载时间。
  • 提升无障碍性即编写的网页适用于更广泛的人群（如适用于色盲、色弱人群等），让他们浏览时无障碍，能轻易获取到有效信息。

如何做到语义化？

image.png

学习HTML的优质网站

个人总结

无论容易上手与否，每种技术都需要沉下心去用心学。简单的东西才更需要去筑牢基础。

尾声

以上笔记加入了一些个人看法，如有错误，敬请提出。

avatar
文章
阅读
粉丝