前端基础 — 1、前端与html | 青训营笔记

96 阅读1分钟

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

什么是前端

用web技术栈解决多端图形交互问题

image.png

前端技术栈

html,Css,JavaScript运行在浏览器,浏览器通过http协议与服务器进行通信

image.png

前端关注的方面

功能,美观,安全,性能,无障碍,兼容性----用户体验

html是什么

image.png

多媒体标签

1.图片(img,单标签) 2.音频(audio) 3.视频(vedio)

image.png

输入

1.placeholder:用户还没输入的时候默认显示的 2.type="range":滑动块,用户可以选择一个值 3.type="number":输入大小,有min和max 4.type="date":日期选择,也有min和max

image.png

input文本提示框(list)

【本质还是input】

image.png

引用

1.blockquote长引用:cite(键值)是引用链接 2.cite(标签)短引用 3.q以前讲过的内容(短) 4.code代码(联合pre一起使用成等宽字体) 5.语义:strong(强调事情)em(强调重读的那个词)

image.png

image.png

内容划分

nav:导航

image.png

语义化

展示内容和结构

image.png

如何做到语义化

阅读MDN的文档,W3C中html的规范

image.png

小结

html这一块的基础内容还是比较容易掌握的,后续还需要多去阅读文档巩固一下所学的知识