一、什么是前端
解决GUI人机交互问题
跨终端: PC/移动浏览器 客户端/小程序 AR/VR
Web技术栈: 分为HTML CSS JavaScript HTML负责内容 CSS负责样式 JavaScript负责行为
通过http协议和服务器通信。
二、前端应该关注的问题
功能:满足用户的需求
美观: 做出来的界面是否好看
无障碍: 做的网站对所有人是否可用 例如色盲人士
安全: 能不能保证用户的安全,是否存在会被利用的漏洞
性能: 网站的速度是否足够快,动画够不够流畅,用户体验好不好。
兼容: 在各种各样的设备上是否都可以使用
三、前端的边界
前端现在已经不局限于制作网页。可以利用nodeJs来开发服务器端应用、利用RN来开发客户端应用、利用WebGL来开发一些3D游戏等。
四、HTML
全称是HyperText Markup Language
通过标签来展示想要表达的东西,也可以给标签设置一些属性,例如img标签设置src属性来填写图片的URL链接
HTML语法
标签和属性不区分大小写 推荐小写
空标签可以不闭合 例如input、meta
属性值推荐用双引号包裹
某些属性值可以忽略 例如required、readonly
用 ol标签来表示有序列表,ul标签表示无序列表,dl标签是一个以dt标签内的描述进行分类的列表
在img标签中设置alt属性后,当浏览器开启省流量模式时,会不显示图片降级展示alt中所填写的描述,来告诉用户这张图片是什么。
在audio标签中 设置了controls属性后,浏览器会提供一个控制这个音频标签的操控栏
在video标签中与audio标签同理
在input标签中设置type属性为radio后,多个name属性相同的标签就会只能选中一个
在input标签设置list属性后,可以写一个datalist标签来给用户一些快捷的输入选项
用code标签包裹住的字体会用一种代码风格的字体来展示被包裹代码
五、语义化是什么?
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML: 例如有序列表用ol;无序列表用ul
lang属性表示内容所使用的的语言
六、谁在使用我们写的HTML
开发者:修改、维护页面
浏览器:展示页面
搜索引擎:提取关键词、排序
屏幕阅读器:给盲人读页面内容
七、语义化的好处
代码可读性、可维护性、搜索引擎优化、提升无障碍性
如何做到语义化?
-
了解每个标签和属性的含义
-
思考什么标签最适合描述这个内容
-
不使用可视化工具生成代码
总结
在前端与HTML中,深入了解了HTML的背景。明白了前端语义化的意义,并且对语义化的一些理念有了了解。