前端与 HTML | 青训营笔记

60 阅读2分钟

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

  这节课主要是对于“前端要解决的基本问题”和“对HTML进行简单介绍”这两个方面进行介绍。

“一、前端要解决的基本问题”

前端要解决的问题就是解决在图形界面下人机交互的问题

  首先我想先对“什么是前端”这个问题进行讨论一下

1、什么是前端

  在刚开始学习前端的时候,就理解前端就是搞网页的,用各种技术将这个网页变得好看,让用户在使用浏览器的时候的体验感更好。这就是我一开始对于前端的一个理解。

  然后学了这节课“前端与HTML”这节课后,我理解到前端是可以从解决GUI人机交互问题、跨终端、Web技术栈这三个方面对前端进行理解。确实这样来对前端来进行定义更加全面,而且更加具有意义。那么开发前端的前端工程师就是使用web技术栈解决多端图形用户界面交互的工程师。

  • 前端技术栈

image.png

2、前端应该关注哪些方面

  要想把前端做好,其中最重要的就是要让用户体验感很好,所以在设计前端的时候要考虑全面,比如功能、美观、性能、兼容性、数据安全性等方面,此外对于无障碍这方面也需要注意,比如色 盲患者就需要考虑在其中,但是这个无障碍也不是只针对于残疾人士,对于正常人使用时也需要考虑,比如网络差的情况下,图片、视频一直加载不出来这些情况我们需要考虑如何让用户的体验感提升,这样是使用无障碍的一种体验

“二、对HTML进行简单介绍”

HTML是使用各种标签对网页进行格式排版的

image.png

2、HTML语法

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

3、HTML有哪些标签(简单介绍几种)

  • 标题

image.png

  • 列表
//有序列表
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>

//无序列表
<ul>
<li>阿达</li>
<li>泰克号</li>
<li>复盟</li>
</ul>
  • 链接

image.png

  • 输入

image.png ....