前端与HTML|青训营笔记
这是我参与【第四届青训营】笔记创作活动的第一天
前端
什么是前端？
- 解决GUI人机交互问题
- 跨终端（PC/移动浏览器、客户端/小程序、VR/AR等）
- Web技术栈
一句话来说：前端工程师是使用Web技术栈解决多端图形用户交互界面的工程师。
前端技术栈
浏览器通过HTTP协议和服务器进行通信，他把前端的代码通过HTTP协议拿到，拿到后把他渲染成我们看到的页面，浏览器可以把用户填写的内容和用户的一些行为通过HTTP协议提交到服务器端。
前端应该关注那些方面？
- 功能：是否能够满足用户的需求
- 美观：好看，布局合理等
- 无障碍：是否对所有人可用
如盲人使用：
- 安全：数据安全等
- 性能：动画是否流畅，用户体验感如何
- 兼容：不同的设备或者浏览器是否都能够使用
前端的边界？
前端发展迅速，技术不断更新，学习无止境啊啊啊啊!!
开发环境：
- 常用浏览器：IE/Edge、Chrome、Firefox、Safari
- 常用编辑器：VSCode、Vim、WebStorm
HTML
什么是HTML?
第一个HTML文件
<html>
<head>
<meta charset="UTF-8">
<title>第一个程序</title>
</head>
<body>
<h1>hello world!</h1>
<p>I LOVE myself</p>
</body>
</html>
运行结果：
DOM树：由浏览器拿到HTML解析得到
HTML标签及语义化
- 标题h1-h6(字体从大到小)
- 列表
- 有序列表(ol、li、有start、type属性)
- 无序列表(ul、li、有type属性)
- 定义列表(dl、dt、dd)
- 链接
<a>
- href定义跳转链接
- target="_black"打开新窗口
- 图片
<img>
- src定义图片路径
- alt当图片无法显示定义替代内容
- 音频
<audio> - 录像
<video> - 输入
<input>
- type="checkbox"定义复选框
- type="radio"定义单选按钮
- 文本类标签
- 关于引用：blockquote(块级引用)、cite(短引用，引用作品名字或章节)、q(短引用，引用的具体内容)、
<code>代码引用 - 关于强调：strong(突出内容严重、紧急)、em(语气重)
HTML新增的常用标签
<header>页眉标签——网站名称、logo等内容<nav>导航标签<section>节标签——定义独立的专题区域<article>文章标签——定义独立的文章区域<aside>侧栏标签——定义正文两侧的相关内容<footer>页脚标签——通常包含文档的作者、版权、联系方式等内容
谁在使用我们写的HTML？
- 开发者——修改、维护页面
- 浏览器——展示页面
- 搜索引擎——提取关键词、排序
- 屏幕阅读器——给盲人读页面内容
Today总结：HTML传达的是内容而非样式，标签种类很多，要多熟悉。
