什么是前端

• 解决GUI人机交互问题

• 跨终端

  • PC/移动端

  • 客户端/小程序

  • VR/AR

• Web技术栈

前端就是 使用Web技术栈解决多端图形用户界面交互

前端技术栈

前端需要关注的方面

• 功能 功能丰富 齐全

• 安全 用户数据安全

• 美观

• 无障碍 对于色盲等人群是否友好

• 性能 加载速度快

• 兼容性

前端对用户体验有很大关系

HTML

• doctype 标记当前使用的html文件是什么版本 最终浏览器会根据这个去决定使用哪个模式去渲染

• 文档的根标签

• ... 放一些页面的元数据

• ... 呈现给用户的界面

浏览器会将HTML代码解析成DOM树

HTML语法

• 标签和属性不区分大小写 推荐小写

• 空标签可以不闭合 比如 input、meta

• 属性值推荐用双引号包裹

• 某些属性值可以省略 比如 required、readonly

标题h1~h6

列表

• ol（order list）有序列表

• ul（unorder list）无序列表

• dl（definition list）定义列表

链接

<a href="..."（hyper reference超链接）

（target="_blank"）>（在新窗口打开）

...

<img 图片

src="..."

alt="..."（当图片加载不出来时 用文字替换）

/>

<audio 音频

<video 视频

输入

checkbox 多选

radio 单选

引用

内容划分

语义化

需要遵循语义 更加清晰的表示代码结构

如何做到语义化

• 了解每个标签和属性的含义 看mdn的文档、w3c上的html5的规范

• 思考什么标签更适合描述这个内容

• 不使用可视化工具生成代码