这是我参与【第五届青训营】伴学笔记创作活动的第一天。
今天我们学习的是前端与HTML相关内容。
什么是前端工程师?
前端工程师是用web技术栈解决多端图形用户界面交互问题的工程师。
web技术栈
| 技术 | 功能 |
|---|---|
| HTML | 页面结构和内容 |
| css | 页面样式 |
| JavaScript | 定义用户行为 |
前端应该关注哪些方面?
1.功能 2.美观 3.无障碍 4.安全 5.性能 6.兼容性 7.用户体验
HTML是什么?
HyperText Markup Language
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
HTML语法
- 标签和属性不区分大小写,推荐小写
- 空标签可以不闭合,比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略,比如required、readonly
部分标签
标题标签从1-6依次变小
列表标签:有序列表,无序列表,定义列表
链接:a标签
图片:img标签
音频:audio标签
视频:video标签
输入:input标签
文本长引用:blockquote标签
文本短引用:cite标签、q标签
语义化是什么?
- HTML中的元素、属性、属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
- 有序列表用ol;无序列表用ul
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键字、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化?
了解每个标签和属性的含义
思考什么最适合描述这个内容
不使用可视化工具生成代码