前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端工程师指的是使用web技术栈（html,css,javascript,http网络协议）解决多端（PC/移动浏览器，客户端/小程序，VR/AR等）图形用户界面交互的问题的工程师。

前端技术栈

HTML，负责页面结构和内容。

CSS，页面中使用CSS设计页面样式，如大小，颜色等信息。

JavaScript，用JavaScript定义网页的行为，用户操作后，页面该如何响应

三者在浏览器中运行，浏览器通过http协议与服务器进行通讯。浏览器把前端的代码，通过http协议从服务器上拿到，之后渲染成可以看到的页面。浏览器也可以把用户填写的内容/操作，通过http协议传到服务器端。

 

前端应该关注的方面

为了更好地进行前端的开发，我们应该了解前端应关注哪些方面。

• 功能：产品有哪些功能，是否满足用户需求
• 美观：页面设计得是否美观
• 无障碍：是否对所有人都可用
• 安全：是否存在漏洞会被利用
• 性能：网站速度快，动画流畅，客户体验好
• 兼容性：能在各种各样的设备上使用

 

HTML

HTML，超文本标记语言，全称HyperText Markup Language。超文本HyperText并非简单的纯文字，它包含图片，标题，链接和表格等丰富的格式。

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input，meta
• 属性值推荐用双引号包裹
• 某些属性值可以忽略，比如required，readonly

 

语义化

我们常听到语义化这个词，语义化是什么？HTML中的元素，属性及属性值都拥有某种含义，开发者遵循语义来编写HTML即为语义化。

为什么要注重HTML的语义化？我们可以从以下几个方面考虑

• 开发者：有利于修改，维护页面
• 浏览器：按照开发者的意愿显示页面
• 搜索引擎：用于提取关键字，排序。有的搜索引擎会抓取HTML提取关键词，关键词越多相关性越大，优先推荐。语义化有利于搜索引擎的优化
• 无障碍阅读：比如因网络或是流量问题，图片无法加载，应该有替代的文本传达图片的内容

总的来说，语义化的好处有：提高代码的可读性和可维护性；优化搜索引擎；提升无障碍性

要做到语义化，需要了解每个标签和属性的含义，思考什么标签最适合描述内容。推荐观看MDN文档进一步了解。