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

前端

1.什么是前端？

• 解决GUI人机交互问题
• 跨终端 PC/移动浏览器
• 客户端/小程序
• VR/AR Web技术栈

2.前端技术栈

• JavaScript(行为)
• CSS（样式）
• HTML（内容）

3.前端应该关注哪些方面？

• 功能
• 美观
• 安全
• 兼容
• 体验
• 性能
• 无障碍

HTML

范例

列表

• <ol>有序列表

排行榜

1. AXX
2. BXX
3. CXX

• <ul>无序
• <dl>定义列表 (1) <dt>标题 (2) <dd>描述（可以多对多）

链接

注：target="_blank"创建一个新页面

字节跳动官网

• img图片 （src地址 alt替代性的文本）
• audio音频 (controls播放控件)
• video视频

输入

• <input>文本输入框
• placeholder占位符
• <input type="range">表示范围，界面会显示一个滑动条
• <input type="number" min="1" max="10">可以设置最大值最小值
• <textarea>Hey</textarea>用来输入多行的文字
• 选择多个type="checkbox"
• 选择单个type="radio"
• 下拉选择<select>

文本类的标签

引用

1. blockquote快捷引用（长引用）
2. cite短引用（作品名字，章节）
3. q短引用（具体某个内容）

• code pre标签（引用代码）
• 强调标签 strong(重要) em(语气)

内容划分

• header
• nav
• main
• aside
• footer

语义化是什么？

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

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性