这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端？
-
前端是指web图形界面下的人机交互功能涉及到的内容
-
前端技术栈有HTML(内容)、CSS（样式）、JavaScript（行为）
-
前端需要满足功能、美观、无障碍、安全、性能、兼容与体验这七大条件
- 功能是指需要满足用户的需求
- 美观是指给用户一种良好的视觉体验
- 无障碍是指对所有用户或者说是任何人都可以使用
- 安全指的是我们的代码不能出现一些明文的密码等一些信息，以及防止XXS攻击等
- 性能顾名思义是响应、加载、交互时间等一系列的反馈
- 兼容是指对不同的浏览器的兼容性问题
- 体验是综上所有条件带给用户的反馈
- 前端的边界
- 前端开发环境
什么是HTML？
- HyperText Markup Language翻译中文为超文本标记语言
| HyperText意为超文本，一般指图片、链接、表格等 | Markup Language是标记语言，指用一系列标签来连接图片、链接、表格等为一个逻辑整体 |
|---|
- HTML结构
- doctype渲染模式
- html文档根标签
- head页面原数据
- body用户可见内容
- 内容划分
- DOM树
document object model 文档对象模型
DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成，以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。
- HTML语法与常用标签介绍
1.标题标签 h1~h6
ol/li有序列表
ul/li无序列表
dl/dt/dd定义列表
3.链接 a标签
可以通过href创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接
通过定义target属性指定在何处显示链接的资源
4.多媒体标签
image/audio/video
5.输入框input标签
input的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text
可用的值包括：按钮button，复选框checkbox，输入日期的控件date，范围组件range等
6.引用标签cite
表示一个作品的引用,要标明blockquote（块级引用元素） 或 q （封闭的并且是短的行内引用的文本） 之中内容的引用来源，可以使用元素的cite属性。
code标签表示引入代码
strong与em的区别：
- em为斜体，strong为粗体
- em表示局部的强调，strong表示全局的强调
语义化相关
语义化是指开发者需要遵循语义来编写HTML,使得机器可以理解
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
关于标签更详细的内容请参看MDN:developer.mozilla.org/en-US/docs/…
