前端与HTML | 青训营

43 阅读1分钟

什么是前端

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

前端技术栈

在这里插入图片描述

前端应该关注那些方面?

在这里插入图片描述

前端的边界

在这里插入图片描述

开发环境

在这里插入图片描述

HTML是什么?

在这里插入图片描述

DOM树

在这里插入图片描述

HTML语法

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

内容划分

在这里插入图片描述

语义化是什么?

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

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化?

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