前端与HTML笔记 | 青训营

73 阅读3分钟

一、什么是前端

解决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

开发者:修改、维护页面

浏览器:展示页面

搜索引擎:提取关键词、排序

屏幕阅读器:给盲人读页面内容

 

七、语义化的好处

代码可读性、可维护性、搜索引擎优化、提升无障碍性

如何做到语义化?

  1. 了解每个标签和属性的含义

  2. 思考什么标签最适合描述这个内容

  3. 不使用可视化工具生成代码

总结

在前端与HTML中,深入了解了HTML的背景。明白了前端语义化的意义,并且对语义化的一些理念有了了解。