这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
目录
- 前端的概念
- HTML的概念
前端的概念
什么是前端
- 解决图形界面下的人机交互问题（小程序，VR，移动浏览器，APP等），因此前端工程师就是使用Web技术栈解决多端图形页面交互问题的工程师。
前端主要的技术栈：
- HTML负责页面的结构和内容，CSS设置页面的样式，Javascript定义网页的行为。这三者都运行在浏览器中，而浏览器通过http协议和服务器进行通信，将前端代码渲染成看到的页面，浏览器同时也把用户的行为传递给服务器。
前端关注的重点
- 功能
- 美观
- 无障碍（对于弱势群体的关怀）
- 安全（数据安全等）
- 性能
- 兼容性（多设备的使用）
- 用户体验
HTML的概念
HTML是什么
- HyperText Markup Language。HyperText，超文本，可以包含图片，标题，链接，表格等，根据字面意义理解就是“超出文本之外的表达形式”;Markup Language,标记语言，就是利用标签来表示一段内容或格式，也可以在标签上设置许多的属性（属性名+属性值，例如src="photo.jpg"）
- DOM树，浏览器会把HTML代码解析为DOM树。包含文档的根节点document,依次牵连出html标签，head标签......如下图
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐用双引号包裹
- 某些属性值可以忽略
语法的具体使用
- 标题 h1~h6，有大小的区别
- 列表 ：分为有序列表和无序列表，有序：ordered list，无序：unordered list，还有有属性的列表，definition list，根据属性来建立表格。
- 链接，a标签表示，href赋成想要跳转的地址，target属性可以设置是否在新标签打开。
- 多媒体，图片：img；音频：audio；视频：video
- 输入，input。（placeholder占位符，输入范围，输入多行文字textarea）
- 选择，下拉选择，选择提示等。
- 文本类标签，引用：blockquote，快捷引用；cite，短引用；q：具体引用内容，也可以算是短引用；code，引用代码；strong，强调内容，em，强调语气。
- 内容划分，页头header，（导航nav）；主要内容main；相关内容aside；页尾footer。
HTML的语义化
html中的标签，属性和属性值都有其特定含义，开发者应该遵循语义来编写HTML。因为从开发者，浏览器，搜索引擎和屏幕阅读器的角度来看，遵循语义来进行开发是非常正确的。 如何做到语义化？需要了解每个标签和属性的含义，思考标签的适用性，不使用可视化工具生成代码。
