这是我参与「第五届青训营 」伴学笔记创作活动的第 1天
前端与HTML
前端概览
什么是前端
- 解决GUI人机交互问题
- 跨终端： pc/移动浏览器 客户端/小程序 VR/AR等
- Web技术栈
前端的技术栈
前端的边界
前端的关注点
- 功能
- 安全
- 兼容
- 美观
- 体验
- 性能
- 无障碍
HTML
什么是前端
HyperText Markup Language
<img src="photo.jpg">
这里的src是属性名，等号后面是属性值
常用标签
doctype标记了当前使用的HTML版本，让浏览器能选择适合的渲染模式，避免老旧的渲染模式 html是根标签中间包含其他所有标签
head包含需要但不呈现的内容
body包含需要呈现给用户的内容
输入
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
这里placeorderde的内容在没输入时显示 textarea用于多行输入
链接
<a href="https://www.bytedance.com/">
字节跳动官网
</a>
<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
这里href是超链接的引用地址
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<p><code>const</code>声明创建一个只读的常量。</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
这里的blockquote为长引用，cite为短引用（引用书的名字，文章前面的章节）
q为具体引用的内容
strong和em都是强调
它们的区别在于strong表示紧急，严重
em表示重读
