这是我参与第五届青训营笔记创作活动的第一天💪
📚课堂笔记
本堂课重点内容:
1. 简单介绍了前端的定义以及相关的技术栈
2. 作为一名前端工作人员，应该关注哪些方面
3. 简单介绍了html以及html中一些常用的标签
4. html中的语义化标签
具体知识：
前端的定义:
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- Web技术栈
前端技术栈: 通过网络协议以及以下三种技术实现与服务器端的交互
- javascript(交互行为)
- css(样式控制)
- html(内容)
作为一名前端工作者，应该关注哪些方面呢❓
- 🏳️🌈有了css以及其他的样式语言，我们当然要关注美观效果啦，这可以给用户带来好的视觉体验。
- 无论何时何地我们都应该注意自己的安全，当然，我们设计出来的所有产品都应该保证用户的信息安全等等安全问题。📌ps：可能还得防不法分子的网络攻击
- 无论是前后端，都需要考虑每一样产品的功能问题。
- 我们设计出一样产品，无可避免的要讨论性能问题，就像许多技术一直都在更新，就是在优化性能。
- 随着时代的进步，如何让产品惠及社会上的每一个人，无障碍功能的实现，是非常必要的。
- 这个产品是否能很好的实现多端共享？多端兼容性如何？
- 作为一名前端，很多时候需要直面用户，那么如何提高用户的体验感，也是每一次产品优化要关注的问题。
HTML:
常见的HTML标签有图片、标题、链接、表格标签等
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<-- 标签内部需要添加内容的一般以双标签 -->
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落标签</p>
</body>
</html>
⚠️小tips:p标签、h1-h6标签内建议只放文字噢。
p标签:
<p>今天是我做笔记的第一天噢！</p> => 输出：今天是我做笔记的第一天噢
h1~h6标签:
<h1>今</h1>
<h2>天</h2>
<h3>是</h3>
<h4>第</h4>
<h5>一</h5>
<h6>天</h6>
⚠️ 我们可以很直观的看到字体大小发生了变化，并且在一个html文档内只能有一个h1标签。
DOM树：
咱们简单地说，就是要把我们所写的代码转化为能让浏览器能够理解的结构，这个结构就是DOM结构。
graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p
DOM树的作用：
1、从页面的视角来看，DOM 是生成页面的基础数据结构。
2、从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。
3、从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。
HTML语义化：
-
HTML中的元素、属性以及属性值都有某些含义
-
开发者也应该遵循语义来进行编写
语义化的好处：提升了代码可读性、可维护性、优化搜索引擎以及提升无障碍性。
课后总结：
想成为一名好的前端工程师，我们更应该去考虑如何将我们想表达的内容直观的传达给每一个人，而不是通过ui设计渲染侧面的展示，同时也应该夯实基础，时刻保持学习新知识的态度，我相信，一名优秀的coder正在诞生，可能是我，也可能是你 ( •̀ ω •́ )y
