这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端
- 前端有3个特点:
- 解决了GUI人机交互问题
- 是跨终端的
- 使用web技术栈进行开发
- 前端技术栈主要是与服务器端相对应的js, css, html等技术
- 前端需要关注许多问题, 包括功能、美观、体验、性能、兼容性、安全性以及无障碍等
- 现在前端的边界正在逐渐扩大, 可以借助node进行服务端开发; 可以借助electron进行客户端开发; 借助React Native进行移动端开发;还可以借助webRTC实现端对端通信, 实现线上会议等; 而webGL给我们提供在前端绘制复杂图像和动画的能力; 还可以使用wasm提高网页性能
- 开发环境主要是各种浏览器和代码编辑器
HTML是什么
- HyperText Markup Language超文本标记语言, 超文本可以有很多展现形式, 文字, 图片, 链接, 表格等, HTML是类似于xml的一种用<>来进行标记网页元素的语言
- 每个<>成为一个标签, 每个标签有一定的属性, 比如img标签就有src属性, 可以设置图片的源
- 标签里面还可以嵌入标签, 比如:
<body>
<h1>一级标题</h1>
</body>
- HTML文档会被解析成为一个树形结构, 称为dom树
- 语法规范:
- 标签和属性不区分大小写, 推荐使用小写
- 空标签可以不用闭合, 有的可以闭合在第一个标签
- 属性值使用双引号包裹
- 布尔值的属性值可以省略
true
语义化
- HTML的元素, 属性, 属性值等有些都有某种语义, 比如
<header>,<nav>,<main>等等, 在样式上只是一个div, 但是对于其他人和机器来说都是有好处的 - 开发者在维护页面的时候, 使用语义化的标签可以知道这个标签是做什么的, 便于维护
- 对于搜索引擎, 便于搜索引擎提取关键词, 更好地展示给用户
- 对于屏幕阅读器, 可以更好地给盲人提供服务
- 所以传达内容, 而不是样式, 标题就用
h1, 而不是给p加了标题的样式 - 做到语义化的建议
- 了解标签和属性的含义
- 思考最适合内容的标签
- 不使用可视化工具生成代码
