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

什么是前端？

• 解决GUI人机交互问题
• 跨终端
• Web技术栈

前端技术栈

• HTML(内容)

• CSS(样式)

• JavaScript(行为)

  三者通过网络协议(HTTP)在服务器端和客户端中传输文件

前端应注意的方面

美观：符合基本美学，如颜色的搭配，文字段落的安排布局等

功能：用JS设计基本的交互功能

安全：防止网站崩溃，信息泄露等

兼容：在PC端/移动端或者不同的机型和浏览器上都能正常运行

性能：网站的响应时间尽量缩短

无障碍：对于一些如色盲等残障人员也能正常浏览网站内容

体验：用户最直观的感受来自前端

前端的边界？

不止于页面设计

• node.js可开发服务器端
• electron，React Native开发客服端
• WebRTC开发在线传输（视频会议）
• WebGL开发3D游戏
• WebASSEMBLY可将C++等语言的代码编译成可直接在浏览器上运行

HTML

超文本标记语言

超文本：不止于文本，有图片，标题，链接，表格等

标记：用开始标签和结束标签才表示一段内容

浏览器会将HTML解析成DOM树

语法标签

• 标签和属性不区分大小写
• 空标签可以不闭合
• 属性值用双引号
• 某些属性值可以忽略

HTML常用标签

标题h1~h6

列表分为有序，无序，自定义列表标题

链接

多媒体元素：

图片(img)

音频(audio)

视频(video)

输入：

input (type有"range", "number", "date")

多行文字(textarea)

输出：

input-type(checkbox(多选)，radio(单选))

选项多的情况下可采用下拉选择 （select，子标签为option）

文本类标签

常引用（blockquote）

短引用（cite，一般用于一些特殊名称）（q，一般用于较短的一句话）

代码（code）

强调（strong（含义上重要，加粗），em（在一段话中为重点））

内容划分

                header

                 nav

                main

                article             aside

                article

                footer

页面内容上的划分设计可以有自己的大胆想法，不只是局限于以上的划分方法

语义化

开发者应该遵循语义编写HTML

• 代码更可读，有利于团队合作
• 有利于维护
• 搜索引擎优化
• 提升无障碍性

传达内容，而不是样式