前端与HTML

前端工作的定义

使用Web技术栈解决多端图形用户界面交互问题。

解决GUI人机交互问题
跨终端
PC/移动浏览器
客户端/小程序

前端技术栈拆解与分析

前端技术分为三层：1、HTML（内容）；2、CSS（样式）；3、JavaScript（行为）。与网络协议一起构成技术栈。

前端需要注意的方面：1、功能（解决的问题、满足的需求）；2、美观（外观）；3、无障碍（所有人都能使用）；4、安全（用户数据的安全）；5、性能（速度、动画、用户体验）；6、兼容性（在各种设备均能使用）。

前端开发环境：1、IE/Edge；2、Chrome；3、Firefox；4、Safari。

编辑器：1、VSCode；2、Vim；3、WebStorm。

HTML 作用解析

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

HTML语法

1、标签和属性不区分大小写，推荐小写； 2、空标签可以不闭合，比如 input、meta； 3、属性值推荐用双引号包裹； 4、某些属性值可以省略，比如 required、readonly。

<a href="https://www.bilibili.com/">
</a>
<a href="https://www.bilibili.com/"target="_blank">
</a>

<textarea>Hello</textarea>
<input type="range">
<input placeholder="请输入用户名">
<input type="date" min="2023-08-23">
<input type="number" min="0' max="100">

HTML 语义化

HTML中的元素、属性及属性值都拥有某些含义；
开发者应该遵循语义来编写HTML；
有序列表用 ol；无序列表用 ul；
lang 属性表示内容所使用的语言。

HTML的使用方法

开发者-修改、维护页面；
浏览器-展示页面；
搜索引擎-提取关键词、排序；
屏幕阅读器-给盲人读页面内容。

实现语义化所需要的条件

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

学习总结

在练习过程中需要要多动手，多做项目。结合书籍和教学视频，对所学的知识点进行实践。

确定自己的学习目标， 贴合目前自身的水平；多阅读代码，跟其他学习者共同交流，相互促进。

第六届字节跳动青训营第二课 | 青训营