这是我参与【第四届青训营】笔记创作活动的第一天。
什么是前端
- 解决图形界面下的人机交互问题
- 跨终端——PC/移动浏览器、客户端/小程序、VR/AR等
- Web技术栈
前端工程师就是使用web技术栈解决多端用户界面交互的工程师。
前端技术栈
浏览器通过HTTP协议和服务器通信，将运行在浏览器中的HTML(定义页面结构内容)、CSS(设置布局样式)、JavaScript(定义网页行为)从服务器端获取后渲染到界面上。HTTP协议、HTML、CSS、JS构成了前端最基础的技术栈。
HTML——HyperText Markup Language 超文本标记语言
-
HTML基础语法
1、所有标签都包含在<>的起止标识符中
2、绝大多数元素都有起始标签和结束标签
3、起始标签包含元素的名称和可选属性
4、元素的属性包括属性名称和属性值，用等号进行连接
5、标签可以相互嵌套 -
HTML基础结构
一个页面由四部分组成，下面主要介绍两个部分
1、DOCTYPE
DOCTYPE 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。
目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。
2、Head标签
在HTML中，一般来说，只有以下6个标签能放在head标签内:
- title标签——网页标签名字
- meta标签——网页文档信息
- link标签——链接外部资源
- style标签——定义CSS样式
- script标签——定义脚本，可以内嵌也可以外链
- base标签——设置相对URL的基础
<拓展>
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给浏览器、搜索引擎等看的
meta标签有2个重要的属性: name和http-equiv
(1) name属性和content属性
这两个属性配对使用
<meta name="author" content="Chris Mills">
(2) http-equiv属性
html通过http-equiv，可以对http协议的一些约定属性做设置。在HTML中, meta标签的http-equiv属性只有2个重要作用：①定义网页所使用的编码；
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta charset="utf-8" />
②定义网页自动刷新跳转。
<meta http-equiv="refresh" content="6;ur1=http://www.baidu.com" />
参考：head标签里有什么？Metadata-HTML 中的元数据 - 学习 Web 开发 | MDN (mozilla.org)
语义化
语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。就是构成HTML结构的标签要有意义，比如有这样的标签：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
为什么要语义化？
- 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
- 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
- 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
前端的边界
作为一个新颖且发展迅速的方向，前端不止于页面，通过Node.js可以开发服务器端的应用，通过Electron可以开发客户端的应用，通过WebGL可以开发3D流畅的游戏等。 前端在互联网行业中属于发展快速的领域，技术在不断更新，只有持续学习才能跟上技术的发展。
