前端与HTML | 青训营笔记

安笛
74 阅读2分钟

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

以下为日常上课笔记，有关于前端介绍和HTML的基础语法

  • 什么是前端？\

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

    • 前端解决的问题\

      • GUI(图形界面)人机交互问题\

    • 跨终端\

      • PC/移动浏览器\
      • 客户端/小程序\
      • VR/AR 等\

    • 前端技术栈\

      • 浏览器通过http协议通信\

      • 三层\

        • HTML，基础，内容和结构，传达内容，而不是样式\
        • css，页面样式\
        • JavaScript，页面行为\

    • 前端工程师\

      • 使用web技术栈解决多端图形界面下的人机交互问题\

    • 用户体验\

      • 产品功能满足用户需求\
      • 美观\
      • 无障碍阅读\
      • 安全性\
      • 性能\
      • 兼容性\
    • 前端的边界？\
    • 开发环境\
    • 发展较快，技术更新，所以需持续学习\
    • 入门容易\
    • 右键检查\

  • HTML\

    • 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。\
    • MDN 上的 HTML 参考，包含每个标签和属性的详细说明\

    • HTML 是什么？\

      • HyperText Markup Language\
    • DOM 树\

    • HTML 语法\

      • 标签和属性不区分大小写，推荐小写\
      • 空标签可以不闭合，比如 input、meta\
      • 属性值推荐用双引号包裹\
      • 某些属性值可以省略，比如 required、readonly\
      • 标题 h1 ~ h6\
      • 列表ul、ol、li、dl、dt、dd\
      • 链接a\
      • 图片img\
      • 音频audio\
      • 视频video\
      • 输入input\
      • 引用blockquote、短引用q\
      • 内容划分\

      • 标签如此多的原因\

        • 表达多种多样的文档内容的语义\

    • 语义化是什么？\

      • HTML中的元素、属性及属性值都拥有某些含义\

      • 开发者应该遵循语义来编写HTML\

        • 有序列表用 ol；无序列表用 ul\
        • lang 属性表示内容所使用的语言\

    • 谁在使用我们写的 HTML\

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

    • 语义化的好处\

      • 代码可读性\
      • 可维护性\
      • 搜索引擎优化\

      • 提升无障碍性\

        • 盲人\
        • 色盲\

        • 适老性\

          • 字体\
          • 配色\
    • 传达内容，而不是样式\

    • 如何做到语义化?\

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