这是我参与「第五届青训营」伴学笔记创作活动的第1天
一.前端
使用Web技术栈解决多端图形用户界面人机交互问题 三个要点：
- 解决GUI人机交互问题
- 跨终端：PC/移动浏览器，客户端/小程序，VR/AR等
- Web技术栈：HTML，CSS，JS，HTTP网络协议等
关注要点：功能、美观、无障碍，安全，性能，兼容
二.前端技术栈
- HTML（内容）：页面、结构、内容
- CSS（样式）：位置、大小、颜色
- JavaScript（行为）：点击等行为
- HTTP协议：完成浏览器和服务器端的通信
三.HTML(HyperText Markup Language)
- HyperText:超文本指图片、标题、链接、表格等
- Markup Language:标记语言
常用标签：
//简写
<img src="photo.jpg" />
<p>lalala啦啦啦</p>
//h1~h6,字体大小发生变化
<h1>biubiubiu</h1>
<h2>biubiubiu</h2>
//列表
<ol style="background-color:coral;">
<li>
<h5>有序列表-1</h5>
</li>
<li>
<h5>有序列表-2</h5>
</li>
</ol>
<ul style="background-color:coral;">
<li>
<h5>无序列表-1</h5>
</li>
<li>
<h5>无序列表-2</h5>
</li>
</ol>
<dl>//定义列表 多对多
<dt>导演</dt>
<dd>不是我</dd>
<dd>依旧不是我</dd>
</dl>
常见还有：文本框，链接，图片等
内容划分：
- header：页头，导航（nav表示），logo等信息
- main：主体，一般一个main(重点内容），可以有多个（也可以没有）article（文章正文）
- asdie：与标题相关，但不属于正文
- footer：页尾，参考链接，版权信息、备案信息等
四.HTML语义化
增加、删除标签：是否便于理解内容
html中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML：有序ol，无序ul；lang属性表示内容所使用的语言
语义化的好处：
- 代码可读性
- 代码可维护性
- 搜索引擎优化
- 提升无障碍
无障碍不单独指生理或精神上存有缺陷的使用人群，还包括户外太阳直射等正常使用人群也会面临的使用中问题，是提升用户体验感的关键
