前端与HTML|青训营笔记

已注销
128 阅读2分钟

前端与HTML|青训营笔记

这是我参与[第四届青训营]笔记创作活动的的第2天，这在一天里我学习了前端与HTML的课程并将主要内容总结如下，并且写了我的第一个简陋的网站。

一、前端

1.1 什么是前端

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

前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师

1.2 前端技术栈

  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）

image-20220725011654262

1.3 前端应该关注哪些方面

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验

1.4 前端的边界？

  • nodeJs —— 开发服务端的应用

  • ELECTRON and React Native —— 开发客户端的应用

  • WebRTC —— 开发P2P在线传输，多人会议的应用

  • WebGL —— 开发3D游戏

  • WebASSEMBLY —— 把C++\Rust编译成在浏览器中可以运行的代码

1.5 开发环境

image-20220725012429957

二、HTML

2.1 HTML是什么

HyperText Markup Language 文本标记语言

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    </head>
    <body>
        <h1>
            一级标题
        </h1>
        <p>
            段落内容
        </p>
    </body>
</html>

image-20220725013048541

2.2 DOM树

image-20220725013127670

2.3 HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly

2.4 内容划分

2.5 语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

2.6 谁在使用HTML?

  • 开发者 —— 修改、维护页面
  • 浏览器 —— 展示页面
  • 搜索引擎 —— 提取关键词、排序
  • 屏幕阅读器 —— 给盲人读页面内容

2.7 语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

传达内容，而不是样式

2.8 如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

三、个人网站

已经将我的第一个具有简单交互的Web网站托管到Github上，可以登录链接查看具体实现效果

avatar
文章
阅读
粉丝