前端介绍
前端工程师任务
使用web技术栈解决多端图形用户界面交互问题
前端技术栈
- HTML(内容)
- CSS（样式）
- JS（行为）
重点关注
- 功能
- 美观
- 安全
- 性能
- 兼容
- 无障碍
- 用户体验
HTML介绍 HyperText Markup Language
基本语法
- 标签和属性值不区分小写，建议小写
- 空标签可以不闭合，例如input、meta、img
- 属性值推荐用双引号进行包裹
- 某些属性值可以省略，例如required、readonly默认为true
基本标签介绍
标题标签
h1~h6：从大到小
列表标签
- ol(ordered list)有序列表
- ul(unordered list)无序列表
- dl(definition list)定义列表、dt(definition term)该描述列表的标题、dd(definition description)具体描述
链接
a标签，其中最重要的属性href(hyper reference)
多媒体标签
- img
- audio
- video
控件
- input
- textarea（多行文本）
- 多选
- 单选
- 下拉框
- 输入提示
文本标签
- 长引用 blockquote
- 短引用cite用来指示章节或者书籍q用来指示具体引用的内容
- 代码标签code
- 多行代码标签pre+code一起使用，被包围在 pre 元素中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码。
- 粗体标签strong（标识重要程度）
- 倾斜标签em（标识重音）
DOM树
将HTML代码转换为对应的属性结构
例：[HTML示例代码.png]对应的DOM树结构如下
内容划分
语义化
HTML中的元素、属性及属性值都拥有某种含义，开发者应该遵循语义来编写HTML
目的
- 开发者：修改、维护页面
- 浏览器：显示页面
- 搜索引擎：提取关键字、排序 SEO
- 保证无障碍性
