这是我参与「第五届青训营 」伴学笔记创作活动的第1天
一、重点内容
- 什么是前端
- 前端技术栈
- 前端应该关注的方面
- 前端的边界
- HTML是什么以及HTML语法
- 语义化的好处
二、前端与html
1. 什么是前端
- 解决 GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web 技术栈
2. 前端技术栈
- JavaScript (行为)
- CSS (样式)
- HTML(内容)
3. 前端应该关注的方面
4. 前端的边界
- node.js可以开发服务器端的一些应用
- electron或者react native开发客户端应用
- WebRTC进行P2P在线的传输，实现一个多人的会议
- WebGL开发一些流畅的3D的一些游戏
- WebAssembly可以吧C++或者RUST或者其他的语言编写的代码编译成直接可以在浏览器运行的代码
5. HTML是什么以及HTML语法
-
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
-
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
-
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
上图是内容划分
6. 语义化的好处
语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
谁在使用我们写的HTML？
- 开发者- 修改、维护页面
- 浏览器- 展示页面
- 搜索引擎- 提取关键词、排序
- 屏幕阅读器- 给盲人读页面内容
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容不使用可视化工具生成代码
