前端与HTML | 青训营

73 阅读2分钟

今天是我参与「第六届青训营 」伴学笔记创作活动的第 2 天

前言:

本节课围绕“前端要解决的基本问题”及“什么是HTML”两个基本问题展开,层层解析前端技术栈的构成,以及作为前端最为基础的技术——HTML基础语法和基本功能,在实际研发过程中如何做到HTML语义化?

什么是前端?

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

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

前端技术栈:

HTML(内容)CSS(样式)JavaScript(行为)

前端应该关注那些?

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

HTML语法?

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

语义化是什么?

语义化的HTML就是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫更好地解析。

写语义化的HTML结构其实很简单,首先掌握HTML中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

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

语义化的好处?

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

谁在使用我们写的HTML?

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

今日总结:

通过本次学习对HTML有了更深入的了解。HTML的知识还是比较重要的,它是我们学以后知识的基础,对我们的帮助也非常大,但是我们虽然没有记住所有的标签,但是也掌握了一部分基础的标签,知道HTML可以完成的功能,在具体使用的时候查找HTML手册,经过多次的实践,在多次的实践种去熟悉它,慢慢的掌握它,总而言之,实践对我们无疑才是最重要的。