前端青训营11.4第二课HTML笔记 | 豆包MarsCode AI刷题

35 阅读2分钟

前端工程师是什么?

> 使用Web技术栈解决多端图形用户交互界面问题的工程师 >

前端技术栈?

+ HTML(内容) + CSS(样式) + JS(行为) + 浏览器通过http协议与服务器进行通信,将以上代码从服务器端获取渲染到页面,也可将用户行为和信息提交到服务器端

前端应该关注哪些方面?

+ 产品的功能与用户需求的对接 + 界面美观 + 对全用户无障碍 + 保证数据安全 + 网页性能与用户体验 + 网页的兼容性

前端的边界?

:::info + Node.js对于服务器端应用的开发 + Electron对于客户端应用的开发 + WebRTC对于P2P在线传输,实现多人会议 + WebGL对于3D游戏的开发 + WebASSEMBLY将其他语言代码转换为直接在浏览器中呈现

【发展更新极快,技术更迭极快】

:::

开发环境?

编辑器+浏览器

HTML是什么?

> HyperText Markup Language(超文本标记语言) >

超文本:图片、链接、表格、标题

标记语言:用成对标签来表示格式

中的各串代码:

:::info :标记当前html文件的版本信息,决定了浏览器的渲染模式 双标签:根标签 双标签:放置页面的源数据(页面标题,编码格式等等) 双标签:呈现给用户的的内容

:::

DOM树?

> 浏览器把HTML代码解析为包含文档根节点的树形结构 >

HTML语法?

![](https://cdn.nlark.com/yuque/0/2024/png/50155819/1730719745714-74078bb5-be0a-463a-b478-42efd02c36a9.png)

页面划分:

![](https://cdn.nlark.com/yuque/0/2024/png/50155819/1730733964523-09334f33-a971-4004-a811-42e81c4406d2.png)

:::info header标签可放LOGO、导航(放在nav标签中)等

main标签是主体部分

aside标签是内容相关(热点推荐,广告推送等)

article标签是正文部分

footer标签是页尾部分(版权备案,参考链接,引用来源等等)

:::

HTML语义化?

> HTML中的元素,属性,属性值都拥有各自的含义 > > 开发者应遵循HTML的语义来进行编写 >

意义:

+ 提升代码的可读性以及可维护性,有利于其他开发者修改,维护页面(团队规范意识) + 浏览器读取并展示页面 + 搜索引擎会抓取HTML代码,提取关键词并根据标签权重进行排序(搜索引擎优化) + 提升无障碍性,考虑用户面临的各种情况,确保准确传达页面信息

HTML原则:

**传达****语义****和****内容****,而不是传达样式**

如何做到语义化?

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