前端与 HTML | 青训营笔记

37 阅读2分钟

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

一、本节课重点内容

本节课程主要围绕“前端要解决的基本问题”、“什么是 HTML ”两个重点知识要义展开,老师先向我们讲述了前端技术栈的内容、前端技术应该关注的方面、以及前端基础技术: HTML 的基础语法和基本功能,告诉我们在实际研发过程中如何做到 HTML 语义化。

二、详细知识点介绍 image.png

首先,前端技术栈是由前端基础技术制作出网页,再将网页与服务器端通过网络协议进行连接、渲染而成的页面。

image.png 我们进行前端开发应该注意的大致方向:功能、安全、性能、无障碍、美观、体验、兼容。

而对于我们来说,前端应该在实现基本功能的基础上极大限度的做到其他几个方面。

image.png

我们可以使用的开发工具与开发技术众多,主流的开发如上所示,跟随着时代进步,我们的技术也在不断地发展。

image.png 我们的开发环境如上所示,分为简单的浏览器与不同的编辑器,通过编辑代码在浏览器中进行页面的展示。

简单来说,对于html的语言框架,我们可以做出如下DOM树展示: image.png html语法:

标签和属性不区分大小写,推荐小写 空标签可以不闭合,比如input、 meta

  • 属性值推荐用双引号包裹
  • 某些属性值可以省略,比如required、 readonly

HTML内容划分: image.png

HTML语义化:

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

image.png

image.png

三、总结 传达内容,而不是样式。 多看看语法知识与其html使用含义。