这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端？
- 解决GUI人机交互问题
- 跨终端：PC、小程序、VR/AR等
- WEB技术栈
前端技术栈
HTML CSS JavaScript 前面三个 在加上网络协议 和服务器端 它们共同构成了前端技术栈
应该注意的方面
功能、性能、安全、美观、无障碍、体验
什么是HTML?
HyperText Markup Language 超文本标记语言
多媒体相关的标签
1. 图片
<img
src="/assets/img.jgp"
alt="Metal movable type"
width="400"
/>
2. 音频
<audio
src="/assets/music.ogg"
controls
></audio>
3. 视频
<video
src="/assets/video.mp4"
controls
></vodeo>
输入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input相关</title>
</head>
<body>
<input placeholder="请输入用户名"> <br>
<input type="range"> <br>
<input type="number" min="1" max="10"> <br> //限制用户输入数字，最小值为1 最大值为0
<input type="date" min="2020-01-01"> <br>
<textarea>Hello</textarea>
</body>
</html>
关于引用
<blockquote cite="url">
<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;
cosnt multiply = (a,b) => a * b;
</code></pre>
<p>在投资前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
语义化是什么？
-
HTML的元素、属性以及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表ol；无序列表用ul
- lang属性表示内容所使用的的语言
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
最后老师还推荐了一些有关于网站供参考，下面列出。
