这是我参与「第四届青训营」笔记创作活动的的第1天。

了解前端

什么是前端？

• 解决GUI人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端小程序
  • VR/AR
• Web技术栈

前端技术栈

• HTML 展现内容
• CSS 修改样式
• JavaScript 添加行为

前端应该关注的方面？

• 功能
• 美观
• 安全 安全是非常必要的
• 无障碍 为残疾人提供更好的帮助
• 体验
• 性能
• 兼容 不同的设备，不同的浏览器

HTML基础

为了创建一个网站，你需要了解 HTML —— 一项用于定义网页结构的基本技术。HTML 用于标识你的网页内容是应该被解析为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一，亦或是你定义的新元素。 HTML这一模块将为你铺路，帮你习惯一些重要的概念和语法，着眼于如何对文本应用 HTML，创造超链接，以及使用 HTML 构造一个网页。

HyperText

超文本包含的内容不止是文字，还有图片、标题、链接、表格等。

Markup Language

以标签为形式的标记语言构成了html的内容

DOM树

在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

语义化？

开发者遵循语义编写html能使代码更具有可读性，可维护性更高，便于搜索引擎的优化且提升阅读的无障碍性。 虽然将<p>标签中的文字字号大小设置为32px在页面中呈现的效果与<h1>相同，但html传递的是内容而不是样式，只有做到语义化才能带来更多的优点。

如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

总结与思考

---

html内容很多也很细节，可以阅读相关文档developer.mozilla.org/zh-CN/docs/… 了解更多相关的知识点。