前端与HTML|青训营笔记

35 阅读2分钟

这是我参与【第五届青训营】伴学笔记创作活动的第一天。
今天我们学习的是前端与HTML相关内容。

什么是前端工程师?

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

web技术栈

技术功能
HTML页面结构和内容
css页面样式
JavaScript定义用户行为

前端应该关注哪些方面?

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

HTML是什么?

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

HTML语法

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

部分标签

标题标签从1-6依次变小
列表标签:有序列表,无序列表,定义列表
链接:a标签
图片:img标签
音频:audio标签
视频:video标签
输入:input标签
文本长引用:blockquote标签
文本短引用:cite标签、q标签

语义化是什么?

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

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化?

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