前端与HTML | 青训营

十三715
99 阅读2分钟

一、前端工作的定义

  1. 什么是前端

    1. 解决GUI人机交互问题

    2. 跨终端

      1. PC/移动浏览器
      2. 客户端/小程序
      3. VR/AR等

    3. Web技术栈

二、前端技术栈拆解与分析

  1. 前端技术栈
  • HTML（内容）
  • CSS（样式）
  • Javascript（行为）

  1. 前端关注哪些方面

    1. 功能
    2. 美观
    3. 无障碍
    4. 安全
    5. 性能
    6. 兼容性
    7. 用户体验

  2. 前端的边界

  3. 开发环境

三、HTML作用解析

  1. HTML是什么

    1.   HypeText Markup Language

      • HyperText
      • Markup Language

  2. HTML语法

    1. 图像引用语法

      1. <img src="photo.jpg" />
//src 属性名
//photo.jpg 属性值

    2. 完整的HTML语法结构

      1. <!DOCTYPE html> //版本问题
<html> //根标签
<head>  //页面信息（不显示给用户）
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>  //页面信息（显示给用户）
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

    3. DOM树

    4. 语法注意

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

    5. 标题h1~h6

    6. 列表

    7. 链接

    8. 多媒体

    9. 输入

    10. 选择

    11. 文本类

    12. 内容划分

四、HTML语义化

  1. 语义化是什么？

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

    2. 开发者应该遵循语义来编写HTML

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

  2. 谁在使用我们写的HTML

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

  3. 语义化的好处

    1. 代码可读性
    2. 可维护性
    3. 搜索引擎优化
    4. 提升无障碍性

  4. 传达内容，而不是样式

  5. 如何做到语义化

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