前端与 HTML课程笔记 ｜ 青训营笔记

申晓玉
61 阅读2分钟

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

前端与HTML课程笔记

一、重点内容：

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化

二、详细知识点：

1、什么是前端？

  1. 解决GUI人机交互问题
  2. 跨终端
  3. Web技术栈

2、前端应当注意的方面

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

3、开发环境

  1. 浏览器
  • Edge、Chrome、Firefox、Safari
  1. 编辑器
  • VSCode、Vim、WebStorm

4、HTML是什么？

  • HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

5、DOM树

  • DOM树很重要，课程中经常提到。
  • DOM 是 Document Object Model 文档对象模型。 图片1.png

6、HTML语法

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

6、HTML实例

标题

  • 标题h1-h6，大小不同

列表

  • ul和li 是无序列表
  • ol和li 是有序列表
  • dl、dt和dd是普通列表

链接 a

内容类型

  1. 图片< img >
  2. 音频< audio >
  3. 视频< video >
  4. 文本输入的单行输入字段< input type="text" >
  5. 密码字段的< input type="password" >
  6. 提交表单数据至表单处理程序的按钮。< input type="submit" >
  7. 单选按钮定义< input type="radio" >
  8. 定义复选框< input type="checkbox" >
  9. 定义按钮 < input type="button >
  10. 定义time的 < input type="time" >，允许用户选择时间

关键词、引用、强调

  1. < cite > 引用
  2. < strong > 强调重点内容
  3. < em > 强调语气

7、内容划分

图片2.png

8、语义化

语义化是什么?

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

语义化的好处

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

如何做到语义化?

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

三、实践练习

1、标题与内容简单格式

2、输入内容格式

四、课后个人总结：

  • 各种标签、元素、属性等，由于数量很多，其含义和使用方法不好记忆，需要多用多练才能熟练掌握。
  • 谨记做到语义化的编写HTML
  • HTML仅仅提供内容，CSS提供样式，JavaScript提供行为
avatar
文章
阅读
粉丝