[ 前端与 HTML | 青训营笔记]

41 阅读2分钟

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

一 本课堂重要知识点

1.- 前端概览

  • 什么是前端
  • 前端的技术栈
  • 前端的边界
  • 前端的关注点
  1. HTML
  • HTML 简介
  • 常用标签
  • HTML 语义

详细知识点介绍

前端的边界

image.png 其中web assembly把c++转化为浏览器语言

前端开发环境(一编译器,一最新浏览器即可)

编辑器: vscode vim webstorm 浏览器 ie/edge chrome firefox safari 微信图片_20230115231939.bmp HTML是什么

即图片标题链接表格与标记语言 形成DOM树

image.png html语法

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

标题 从h1到h6字体依次变大 列表标签

有序列表

ol下属li

无序列表

ul下属li

定义列表

dl下属dt,dd

链接

  • 属性名alt为替代性文本
  • 属性名width为图片宽度
  • audio(音频)
  • video (视频)
  • controls属性名是使用浏览器默认播放控件

语义化

html中元素,属性,及属性值都有某些含义,开发者应遵循。

谁在使用我们的html语言

1.开发者修改及他人维护页面时

2.页面通过浏览器显示时

3.进行信息筛选提取

4.对残疾人提供无障碍服务

语义化的好处

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

如何做到语义化

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

个人总结 主要记住无序有序表格对应标签,及链接标签的不同对应项,明白前端开发作用及意义