这是我参与「第五届青训营」伴学笔记创作活动的第1天。
作为青训营-前端-基础班的成员,今天开始了第一次课的学习,今天课程的内容主要围绕前端要解决的问题和什么是HTML展开,介绍了一些HTML的常用标签。
“什么是前端”
前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师。
前端技术最基础的技术栈包括:HTML,负责定义结构展示页面内容;CSS,设置页面样式;JavaScript,定义页面行为;(这三种技术也被戏称为“三件套”)。
前端设计时不仅要关注性能,美观,兼容,体验和无障碍使用等基本方面,还可以利用各种技术实现客户端和服务器端的开发。
HTML的常用标签
HTML是一种超文本标记语言。
- h1-h6标签,标题,有不同的前后间距和字体大小,h1的前后间距和字体最大。
- ol标签,有序列表,按先后顺序编号;ul标签,无序列表,无编号;
- dl标签,定义列表;dt标签,描述列表的标题;dd标签,标题的具体描述。
- a标签,用于链接,用href属性写明跳转地址,将target属性定义为_blank,可以在新窗口中打开跳转的地址。
- img标签,展示图片;audio标签和video标签,展示视频。
- input标签,输入信息的标签,placeholder属性在未输入时展示提示信息;type属性可设置为range(范围),number(可设置最大最小值),data(设置最早最晚日期)。
- label标签中,type设置为CheckBox可复选,设置为radio时只可单选。
- select标签,下拉选择标签,选项写在option标签下。
- blockquote标签,块级引用,引用一段话;cite标签,短引用,常常为作品名称等;q标签,用于前面出现的话;
我的感悟
今天的课程给我留下最深刻印象的是关于前端设计时应该考虑到无障碍使用的问题。前端设计时不仅要关注页面的美观和性能,还应该考虑如何在多种使用场景中获得更优秀的表现。我们开发者应该遵循语义来编写HTML,这样不仅可以方便我们修改维护页面,也能使浏览器更好地展示我们的页面,方便搜索引擎提取关键词和排序。今天的课程还让我意识到规范使用标签可以帮助特殊群体更高效地阅读网页,比如使用屏幕阅读器的盲人。