前端与HTML | 青训营笔记

87 阅读3分钟

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

大概是第一节课的关系,课没什么难点,加之我之前HTML和CSS都有一定基础,我的整体感觉就是课程偏向于概念更多一些,这节课大多数时间还是在对自己概念查漏补缺。

一、什么是前端

  • 解决GUi人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

总结一下,前端在我的印象里的概念就是一个方便用户去进行交互的图形化界面。

且前端语言用HTMl标签和CSS样式进行编写,而HTMl、CSS本身是由浏览器进行渲染的一种语言,具有跨终端的特点,无论是在什么终端,只要支持HTMl的某种写法,都可以被渲染出相同的效果。

而通过css、javascript和HTml三种语言,就可以完成前端样式的渲染并实现功能。

)0JFQD(4AN(MM_AI0TEL1N0.png

二、前端需要关注哪些方面

image.png 前端为用户展现的页面,最基础的就是要实现预先指定的功能,在功能能够实现的基础上,可以将界面UI修改的相对美观,安全、无障碍、性能几个方面也其实都和大多数程序开发的需求一致。

虽然说了这么多,但我感觉总结下来也就是:前端要在能完成基础功能并保障安全、效率的情况下,让用户感觉到这个网站真人性化

三、HTMl是什么

HTML是一门标签化语言,通过尖括号<标签名>内容</标签名>表示一个标签。

3.1HTML中常见标签

HTMl中有许多常见的标签,其有默认的样式,并提供一些事件。

3.1.1、标题标签

对照效果如下: image.png 多级标题大小依次递减,权重依次变细,可以在使用时酌情选择。

3.1.2、图片标签和路径

对照效果如下: image.png 其中的src存放当前html文件下开始的图片路径,前面不要加斜杠。

3.1.2、超链接

对照效果如下: image.png

3.1.2、表格

对照效果如下: image.png

3.1.2、列表

对照效果如下: image.png

3.1.2、表单

对照效果如下: image.png

image.png

除此以外HTMl还提供了许多其他标签,例如按钮、选择框等等甚至特化的header、nav这类标签,可以去对照css官方文档查看

四、DOM树与HTML语法

image.png

DOM元素是HTML中文本对象模型。每一个标签都是一个DOM对象。

在HTMl的书写中,也需遵循以下原则:

image.png

五、页面划分

image.png 上下部分分别是header和footer,在网页中一般用来导航和声明,main部分用于写入页面主要内容(负责完成主体功能的部分),这是一种很经典的布局,现在许多的网页(例如淘宝、京东)还在试用这种布局,看上去一目了然。

六、其他

6.1、语义化是什么

image.png

6.2、谁在使用我们写的HTML

image.png

6.3、如何做到语义化

image.png