前端与HTML | 青训营笔记

用户8265486198666
51 阅读2分钟

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

一、什么是前端

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

二、前端技术栈

image.png

三、前端应该关注那些方面？

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

四、HTML

  • HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
  • 示例

image.png

image.png

五、DOM树

image.png

六、HTML语法

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

七、语义化是什么？

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

<html lang="en">

八、语义化的好处

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

前端工程师自我修养：传达内容，而不是样式!

九、如何做到语义化

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

十、谁在使用我们写的HTML？

  • 开发者-修改、维护页面 -展示页面
  • 搜索引擎-提取关键字、排序
  • 屏幕阅读器-给盲人读页面内容
avatar
文章
阅读
粉丝