这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
1.前端知识部分
解决GUI人机交互问题（GUI：图形用户界面）
跨终端
PC,移动浏览器
AR/VR等
客户端/小程序
Web技术栈
前端技术栈
- html
- css
- javascript
- http协议
1-2.前端应该关注哪些方面？
- 功能
- 美观
- 无障碍
- 性能
- 安全
- 兼容
- 体验
1-3.前端边界
nodejs、electron、react native、web rtc、webgl、webassembly
1-4.开发环境
浏览器+编译器
2.HTML部分
DOM树
2-1html语法
- 不区分大小写（推荐小写）。
- 空标签可以不闭合，input,meta。
- 属性值用双引号包裹。
h1~h6 标题标签
列表
ol有序列表
ul无序列表
dl自定义列表
链接多媒体
a超链接
href=“地址”
target=“跳转方式”
img图片
alt 替代文本
audio 音频
controls 添加控制器
video 视频 同上
输入标签
input 输入标签
placeholder占位符
range滚动条
number数字
date日期
textarea文本域
radio单选框
datalist输入补全
label标签名
select下拉框
option选项框
文本标签
p，div，code，pre用于文本
引用：
<blockquote>：快捷引用<cite>：短引用，标题<q>：短引用，具体引用内容<code>：单行代码的引用<pre>><code>：多行代码的引用
强调：
<strong>：含义的强调<em>：语气的强调<mark>被标记的/高亮显示的文本
内容划分
-
header页头 -
nav导航 -
main主体 -
article文章 -
aside侧边栏 -
footer页尾
2-2语义化重要性
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人阅读内容
- 可读可维护，搜索引擎优化，提升无障碍性
2-3如何养成语义化习惯
- 了解标签含义
- 思考标签用法
- 不使用可视化工具生成代码
2-4什么是语义化标签
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> 无需考虑内容.
语义元素实例: <form>, <table>, and <img> 清楚的定义了它的内容.
